Js show and hide function

Question

I know that out there are lots of scripts to show and hide content but none of them work for me when it comes to my scenario. Here on this test page http://bloghutsbeta.blogspot.com/2012/04/testing-game-content-issue.html I have flash game in iframe, IF you click on PLAY button or you don't click still the flash content starts loading in Chrome and IE (not in firefox).

So to deal with this situation I thought of using show and hide content method and used a few scripts but none of them helped as even though when I was using them the flash content still use to load at the back end in IE and Chrome. What I am asking for is a script that won't let the flash content load until an 'onclick' function is performed. I know one script that do this 'LazyLoad' But it is for images, I don't think it will work for flash content too.

Note: 1-There is Music on the link provided 2- Sorry for providing blogspot link but JsFiddle is not an option for a person living in Afghanistan with 5KBps.

Relevant Markup: Button for lightbox or Modal Window

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

Content set to be display none until the above button is clicked (this actually doesn't work in IE and Chrome ONLY in firefox)

<div class="popup_block" id="popup_name">
<iframe width="100%" height="98%" src="http://files.cryoffalcon.com/bhgames/dressup/Celebrities/Wizard%20Fashion.html" frameborder="0" scrolling="no" allowTransparency="false"
></iframe>
</div>

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

JS (actually Jquery)

&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 # 
        $(&#39;a.poplight[href^=#]&#39;).click(function() {
            var popID = $(this).attr(&#39;rel&#39;); //Get Popup Name
            var popURL = $(this).attr(&#39;href&#39;); //Get Popup href to define size

            //Pull Query &amp; Variables from href URL
            var query= popURL.split(&#39;?&#39;);
            var dim= query[1].split(&#39;&amp;&#39;);
            var popWidth = dim[0].split(&#39;=&#39;)[1]; //Gets the first query string value

            //Fade in the Popup and add close button
            $(&#39;#&#39; + popID).fadeIn().css({ &#39;width&#39;: Number( popWidth ) }).prepend(&#39;&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;&#39;);

            //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 = ($(&#39;#&#39; + popID).height() + 0) / 0;
            var popMargLeft = ($(&#39;#&#39; + popID).width() + 0) / 0;

            //Apply Margin to Popup
            $(&#39;#&#39; + popID).css({ 
                &#39;margin-top&#39; : -popMargTop,
                &#39;margin-left&#39; : -popMargLeft
            });

            //Fade in Background
            $(&#39;body&#39;).append(&#39;&lt;div id=&quot;fade&quot;&gt;&lt;/div&gt;&#39;); //Add the fade layer to bottom of the body tag.
            $(&#39;#fade&#39;).css({&#39;filter&#39; : &#39;alpha(opacity=80)&#39;}).fadeIn(); //Fade in the fade layer 

            return false;
        });


        //Close Popups and Fade Layer
        $(&#39;a.close, #fade&#39;).live(&#39;click&#39;, function() { //When clicking on the close or fade layer...
            $(&#39;#fade , .popup_block&#39;).fadeOut(function() {
                $(&#39;#fade, a.close&#39;).remove();  
        }); //fade them both out

            return false;
        });


    });

    &lt;/script&gt;

So the question actually is: How can I load flash content using javascript, amiright? — devsnd
– devsnd, Commented Apr 27, 2012 at 9:25
@twall well the flash content loads , it got no issue, all that I am trying is stop its loading and let it load ONLY when they we click on the PLAY button. — CryOfFaclon
– CryOfFaclon, Commented Apr 27, 2012 at 9:26
Why not add the iframe dynamically when the play button is clicked? — Mikey
– Mikey, Commented Apr 27, 2012 at 9:40
Well that sounds a good idea to me, can you make a complete answer so I could get an idea what to do as I am a bit weak in coding as professionally I am Chartered Accountant. (But I love programming) — CryOfFaclon
– CryOfFaclon, Commented Apr 27, 2012 at 9:44

lazyhammer · Accepted Answer · 2012-04-27 15:42:01Z

2

You should try something like this to load your frame right after button click:

$(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');
    });
});

UPDATE: To remove frame when the popup is closed you can use this:

$('#popup_name .close').live('click', function() {
    $('#popup_name iframe').remove();
});

edited Apr 27, 2012 at 15:42

answered Apr 27, 2012 at 10:04

lazyhammer

1,2281 gold badge11 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

CryOfFaclon Over a year ago

@Dmitryiy Chekalyuk thanks for your reply but you can see that I have that code right now intact, in the same link provided above it doesn't work. Go and use it with google chrome and load the game then it will start making that sound, even when you close it, its like minimized not closed.

lazyhammer Over a year ago

@CryOfFaclon I see. Your close button is added dynamically to the div, so you must use the .live('click') instead of .click(). See updated answer.

CryOfFaclon Over a year ago

I have done what I said. But still if you don't mind, you can see in IE 8, open it by clicking PLAY button and then close, do it 3 or 4 times you will see sometimes it shows a blackout screen. If you know or how to fix that, It is all your choice help this time, I am really grateful to you, YOU ARE AWESOME person.

CryOfFaclon Over a year ago

On the same basis as in this question do you want to help me in this question? stackoverflow.com/questions/10353193/…

Collectives™ on Stack Overflow

Js show and hide function

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related