1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Lightbox loading content without being triggered

Discussion in 'Programming' started by cryoffalcon, Apr 26, 2012.

  1. #1
    Hi,
    I am using one simple lightbox or you can call it modal window. It doesn't load any flash content until you click on the button PLAY and when you click on close, it stops the flash game (it actually stops as when you click PLAY again the game starts from beginning)
    BUT this is only about FIREFOX its not the behavior in CHROME, IE or Safari except MOZILLA FIREFOX all browser act in a complete different way which is opposite to the way I described above.

    In chrome, IE, Safari maybe Opera the Flash content starts loading without being triggered (means if you don't click PLAY BUTTON still it loads) and even if you click on close button. Instead of stopping flash like in firefox the flash game continues to run (like being minimized instead of closed).

    Why is this happening, How to resolve it, I am not able to understand this strange behavior?

    RELEVANT CODES:
    CSS:



    #fade { 
    	display: none; 
    	background: #000;
    	position: fixed; left: 0; top: 0;
    	width: 100%; height: 100%;
    	opacity: .80;
    	z-index: 9999999;
    }
    
    .popup_block{
       width: 98.95%; height: 98.2%;
    	display: none; 
    	padding: 0px;
    	line-height:1em;
    	font-size: 1em;
    	position: fixed;
    	top: 0px; left: 0px;
    	z-index: 999999999;
    	-webkit-box-shadow: 0px 0px 20px #000;
    	-moz-box-shadow: 0px 0px 20px #000;
    	box-shadow: 0px 0px 20px #000;
    	-webkit-border-radius: 10px;
    	-moz-border-radius: 10px;
    	border-radius: 10px;
    }
    .close {
    	height:20px;
    	float: right;
    	margin: 0 2px 0 0;   
    }
    
    Code (markup):
    HTML:

    <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
        <tr><td style="text-align: center;"><a class="poplight" href="#?w=100%" rel="popup_name"><img alt="play game" class="happybutton" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=80" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://farm5.static.flickr.com/4084/4998558471_27e3985c16_m.jpg" style="opacity: 0.8;" /></a></td></tr>
        </tbody></table>
        <div class="popup_block" id="popup_name">
        <div class="gamesharebuttons addthis_toolbox addthis_default_style ">
        <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_button_more">Share</a></div>
        <iframe id="myvideo" width="100%" height="98%" src="http://files.cryoffalcon.com/bhgames/Adventure/star%20island.html" frameborder="0" scrolling="no" allowTransparency="false"
        ></iframe>
        </div>
    Code (markup):
    JS:

     &lt;script type=&quot;text/javascript&quot;&gt;
        $(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 &amp; Variables from href URL
        		var query= popURL.split('?');
        		var dim= query[1].split('&amp;');
        		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('&lt;a href=&quot;#&quot; title=&quot;Close It&quot; class=&quot;close&quot;&gt;&lt;img src=&quot;http://files.cryoffalcon.com/bloghuts/images/close%20button.png&quot; alt=&quot;Close&quot; width=&quot;20&quot; height=&quot;20&quot; /&gt;&lt;/a&gt;');
        			
        		//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() + 0) / 0;
        		var popMargLeft = ($('#' + popID).width() + 0) / 0;
        		
        		//Apply Margin to Popup
        		$('#' + popID).css({ 
        			'margin-top' : -popMargTop,
        			'margin-left' : -popMargLeft
        		});
        		
        		//Fade in Background
        		$('body').append('&lt;div id=&quot;fade&quot;&gt;&lt;/div&gt;'); //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;
        	});
        
        	
        });
        
        &lt;/script&gt;
    Code (markup):

    HERE IS LIVE DEMO PAGE http://bloghutsbeta.blogspot.com/2012/04/fullscreen-testing.html
     
    cryoffalcon, Apr 26, 2012 IP