Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts

    What does this code do?

    Hi All, I don't understand javascript. I'd like to know what this code does:

    Code:
    <script type="text/javascript">
    (function ($) {
    $(document).ready(function(){
    						   		   
    	//When you click on a link with class of poplight and the href starts with a # 
    	$('a.poplight[href^=#]').click(function() {
    		var popID = $(this).attr('rel'); //Get Popup Name
    		var popURL = $(this).attr('href'); //Get Popup href to define size
    				
    		//Pull Query & Variables from href URL
    		var query= popURL.split('?');
    		var dim= query[1].split('&');
    		var popWidth = dim[0].split('=')[1]; //Gets the first query string value
    
    		//Fade in the Popup and add close button
    		$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
    		
    		//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
    		var popMargTop = ($('#' + popID).height() + 80) / 2 - 60;
    		var popMargLeft = ($('#' + popID).width() + 80) / 2;
    		
    		//Apply Margin to Popup
    		$('#' + popID).css({ 
    			'margin-top' : -popMargTop,
    			'margin-left' : -popMargLeft
    		});
    		
    		//Fade in Background
    		$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
    		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 
    		
    		return false;
    	});
    	
    	
    	//Close Popups and Fade Layer
    	$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
    	  	$('#fade , .popup_block').fadeOut(function() {
    			$('#fade, a.close').remove();  
    	}); //fade them both out
    		
    		return false;
    	});
    
    	
    });
    })(jQuery);
    </script>
    I know it shows a popup when somebody enters the site. This popup is closed if the user click outside of this popup.

    But I don't understand why on my browser it doesn't show up. It shows up only if I enter from an incognito mode (so clearing cache and/or cookies).
    Does this code add some cookies so that the popup doesn't pop up all the time?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,721
    Thanks
    25
    Thanked 662 Times in 661 Posts
    I don't think that's right (that it pops up when you enter the site)
    Top line says:
    When you click on a link with class of poplight and the href starts with a #
    and the function starts with:
    Code:
    $('a.poplight[href^=#]').click(function() {
    Which needs you to click on something(as stated above) to start.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    utnalove (03-28-2013)

  • #3
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    Hmm.. please check the site: http://tnij.org/lnnng

    I don't click anything and it appears....

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,721
    Thanks
    25
    Thanked 662 Times in 661 Posts
    Went there and nothing happened. Looked at page source and it's not there. It maybe in one of the js script that it loads but didn't feel like downloading them.

    I did click on all the anchors I saw, but never got a pop up.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #5
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    strange... here it appears all the time:

    http://img856.imageshack.us/img856/5162/87732093.png

  • #6
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    376
    Thanks
    9
    Thanked 55 Times in 54 Posts
    Some additional info:

    The popup script will be there when someone visits your page for the 1st time, and that would also starts a session (with cookie). When he refreshes the page, this persistant cookie shall inform your PHP/ ASP(?) server not to create popup script again.

    Specific to this popup, I think the cookie will persist for 15 days. That means he/ she'll won't get a popup again until after about 2 weeks.

  • #7
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by hdewantara View Post
    Some additional info:

    The popup script will be there when someone visits your page for the 1st time, and that would also starts a session (with cookie). When he refreshes the page, this persistant cookie shall inform your PHP/ ASP(?) server not to create popup script again.

    Specific to this popup, I think the cookie will persist for 15 days. That means he/ she'll won't get a popup again until after about 2 weeks.
    Thanks. But I am wondering why sunfighter didn't see this popup. Did you see it?

    Where is the information about this cookie? I'm can't understand JS, but I suppose there should be written cookie somwhere in the code?

  • #8
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    376
    Thanks
    9
    Thanked 55 Times in 54 Posts
    Maybe he has refreshed your page too many

    But here's how I re-created it in Firefox:
    a) Browse to your site.
    b) Right click anywhere inside the page content to open a context menu, and select 'View Page Info' menu item.
    c) Click the 'Security' tab on this 'Page Info' window.
    d) Click on the 'View Cookies' button to open 'Cookies' window.
    e) Now I think this popup specific cookie has name 'lanapopup', so select this cookie, and click the 'Remove Cookie' button.
    f) Done with the 'Page Info' and 'Cookies' windows. Close them all.
    g) Now try press <F5> on your keyboard, and... can you see it now?

    Where is the information about this cookie? I'm can't understand JS, but I suppose there should be written cookie somwhere in the code?
    I think displaying it or not isn't controlled by javascript (frontend), but your backend server (.PHP/ .ASP/ .PL / etc). Sadly I couldn't possibly (and shouldn't) detect it. Sorry.

    Hendra

  • Users who have thanked hdewantara for this post:

    utnalove (03-29-2013)

  • #9
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    376
    Thanks
    9
    Thanked 55 Times in 54 Posts
    And below the actual HTML source, when the popup is in action (1st visit).
    The lines in red just won't be there, not until you'v cleared the cookie or possibly not until the next 2 weeks:
    Code:
    ...
    <div style="height: 70px;"></div>
    
    
       
    
    <!-- popup -->
    <script type="text/javascript">
    (function ($) {
    $(document).ready(function(){
    						   		   
    	//When you click on a link with class of poplight and the href starts with a # 
    	$('a.poplight[href^=#]').click(function() {
    		var popID = $(this).attr('rel'); //Get Popup Name
    		var popURL = $(this).attr('href'); //Get Popup href to define size
    				
    		//Pull Query & Variables from href URL
    		var query= popURL.split('?');
    		var dim= query[1].split('&');
    		var popWidth = dim[0].split('=')[1]; //Gets the first query string value
    
    		//Fade in the Popup and add close button
    		$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
    		
    		//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
    		var popMargTop = ($('#' + popID).height() + 80) / 2 - 60;
    		var popMargLeft = ($('#' + popID).width() + 80) / 2;
    		
    		//Apply Margin to Popup
    		$('#' + popID).css({ 
    			'margin-top' : -popMargTop,
    			'margin-left' : -popMargLeft
    		});
    		
    		//Fade in Background
    		$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
    		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 
    		
    		return false;
    	});
    	
    	
    	//Close Popups and Fade Layer
    	$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
    	  	$('#fade , .popup_block').fadeOut(function() {
    			$('#fade, a.close').remove();  
    	}); //fade them both out
    		
    		return false;
    	});
    
    	
    });
    })(jQuery);
    </script>
    <style type="text/css">
    /*------------------POPUPS------------------------*/
    #fade {
    	display: none;
    	background: #fff; 
    	position: fixed; left: 0; top: 0; 
    	z-index: 10;
    	width: 100%; height: 100%;
    	opacity: .70;
    	z-index: 9999;
    }
    .popup_block{
    	display: none;
    	background: url("/images/frontend/theme/lana/plama1.png") no-repeat;
    	width: 477px; 
    	height: 578px;
    	float: left;
    	font-size: 1.2em;
    	position: fixed;
    	top: 50%; left: 50%;
    	z-index: 99999;
    }
    img.btn_close {
    	float: right; 
    	margin: 0;
    	position: absolute;
    	z-index: 999;
    	right: 0px;
    }
    .popup p {
    	padding: 5px 10px;
    	margin: 5px 0;
    }
    /*--Making IE6 Understand Fixed Positioning--*/
    *html #fade {
    	position: absolute;
    }
    *html .popup_block {   
    	position: absolute;
    }
    </style>
    
    <div id="popup1" class="popup_block" style="text-align: center;">
    	<img src="/images/frontend/theme/lana/logo_pop.png" style="margin-top: 90px; margin-left: 5px;" />
    	<a href="http://shop.lananguyen.com/newsletter"><img src="/images/frontend/theme/lana/newsletter.png" style="margin-top: 18px;" /></a>
    	<br />
    	<a href="http://www.facebook.com/LanaNguyenfan"><img src="/images/frontend/theme/lana/facebook_popup.png" style="margin-top: 8px;" /></a>
    	<br />
    	<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FLanaNguyenfan&amp;send=false&amp;layout=button_count&amp;width=250&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21&amp;appId=423972071015463" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:21px; margin-left: 50px;" allowTransparency="true"></iframe>
    </div>
    <a href="#?w=477" rel="popup1" class="poplight" id="popup_btn">&nbsp;</a>
    
    <script>
    (function ($) {
      $(document).ready(function() {
        $('#popup_btn').click();
    });
    })(jQuery);
    </script>
    
    
    </body>
    </html>

  • Users who have thanked hdewantara for this post:

    utnalove (03-29-2013)

  • #10
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    Oh, good to know that... bad that I can't find this script anywhere. I mean... the scrips seems to be everywehere if I google it. However I can't find the "full" scritp with the server side code.

    Does anybody know where it's possible to get the complete code?

  • #11
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by hdewantara View Post
    And below the actual HTML source, when the popup is in action (1st visit).
    The lines in red just won't be there, not until you'v cleared the cookie or possibly not until the next 2 weeks:
    So it really looks like there is some server side code that says "show that code only if there is no cookie".

  • #12
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    376
    Thanks
    9
    Thanked 55 Times in 54 Posts
    Yes, right

    May I know what server side code your site's using? If it's a PHP and you also have the access to edit it, then maybe you need to consult PHP subforum for the code. An overly simplified guess, that it might probably look like the following:
    PHP Code:
    if (!isset($_COOKIE['lanapopup'])){
      
    setcookie('lanapopup'1time() + 24 3600);
      echo 
    'the red lines';
      ...


  • Users who have thanked hdewantara for this post:

    utnalove (03-29-2013)

  • #13
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    yes php, thanks for your help


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •