Show logo/ad while content loads at back end

Show logo/ad while content loads at back end

by cryoffalcon » Fri Apr 27, 2012 6:35 pm

I want to place a Logo/ad in front of content, there are ways to do it but the problem with them is that they use JS show/hide method. What happens is that the content doesn't load while user is watching the logo/ad, which results as double waiting for the user first for the logo/ad and then the actual flash content loading.
So I was thinking if there is a way that a logo/ad could be displayed and at the same time flash content continues to load at the back end.
*I didn't ask for a loader that continues to appear until at the back end flash content is done loading, because I found only one script that was able to do so using Jquery but it was designed to work with fixed pixels while my flash content is based on %ages*

Live Demo: http://bloghutsbeta.blogspot.com/2012/04/testing-game-content-issue.html

Note: Sorry for providing blogspot link but JsFiddle is not an option for a person living in Afghanistan with 5KBps but still if you feel that I am missing something please let me know I will edit it and try my best to provide as relevant question as possible ^^

Relevant Markup:
Button for lightbox or Modal Window

Code: Select all

<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>

Code: Select all

  <div class="popup_block" id="popup_name">
     <script type="text/javascript">
    $(document).ready(function(){
        $('a.poplight[href^=#]').click(function() {
            $('<iframe/>')
                .attr('frameborder', 0)
                .attr('allowTransparency', false)
                .attr('scrolling', 'no')
                .attr('width', '100%')
                .attr('height', '98%')
                .attr('src', 'http://files.cryoffalcon.com/bhgames/dressup/Celebrities/Wizard%20Fashion.html')
                .appendTo('#popup_name');
        });
    });
    </script>
    </div>


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;   
    }

JS (actually Jquery)

Code: Select all

<script type="text/javascript">
        $(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="#" title="Close It" class="close"><img src="http://files.cryoffalcon.com/bloghuts/images/close%20button.png" alt="Close" width="20" height="20" /></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() + 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('<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;
           });
       
           
        });
       
        </script>

Re: Show logo/ad while content loads at back end

by XainPro » Fri Apr 27, 2012 10:02 pm

well you are looking for lightbox ad build in jquery
you can check some examples on this url
the one you are using is complex and hard try this
example
http://services.renegadeinternet.com/ex ... ox-banner/
Main Website
http://www.renegadeinternet.com/2011/09 ... mplemodal/