Login | Register | FAQ
Anonymous

Lightbox loading content without being triggered

+ Post a reply

2 posts Page 1 of 1


Lightbox loading content without being triggered

by cryoffalcon » Thu Apr 26, 2012 10:41 am

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:



Code: Select all
#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;   
}

HTML:

Code: Select all
<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>


JS:

Code: Select all
&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;



HERE IS LIVE DEMO PAGE http://bloghutsbeta.blogspot.com/2012/04/fullscreen-testing.html
User avatar

cryoffalcon

  • Posts: 8
  • Joined: Thu Apr 19, 2012 8:08 am

Re: Lightbox loading content without being triggered

by XainPro » Thu Apr 26, 2012 1:17 pm

well i think css has nothing to do with this problem may be this is default browser behavior you need to find the hack of it did you check loading flash without using the light-box and what was its behavior without using lightbox ?
User avatar

XainPro

  • Posts: 3575
  • Joined: Fri Feb 17, 2012 8:10 pm


+ Post a reply

Page 1 of 1

?>