Using Jquery to Load and Unload a Div Element

Question

I am using CSS to create a popup when a user hovers on a list of thumbnails. This will show a different youtube video for each thumbnail posted, I already have it working. The problem is that when I move the mouse somewhere else so that it can hide the popup, the video stays playing on the background. The other problem is that when i visit the page where all my posts with thumbnails are, it seems to be loading all the youtube videos in the background causing it to slow down my page. I want it to load only when hovering on the thumbnail and unload so that the video stops playing once i hover outside the popup.I don't know too much on jquery, but i tried this code, im guessing it's something like this that I need...

<script type="text/javascript">
/* The first line waits until the page has finished to load and is ready to manipulate */
$(document).ready(function(){

    if ($('#vidthumbnail').is(':visible')) {
        $('#vidthumbnail').show();
    }


     if ($('#vidthumbnail').empty(':visible')) { 
        $('#vidthumbnail').hide();
    }

});
</script>

This is what's inside the popup

       <a id="vidthumbnail" href="#thumb"><img src="thumb.gif"/>
         <span>
            <div id="vidthumbnail">
            **the youtube embedded code goes here, every post with unique id** 
           </div>
         </span>
   </a>

Samich · Accepted Answer · 2011-10-16 05:35:48Z

1

You can use $('div').html('some html') to set some html to the div and $('div').html('') to clear it.

$(document).ready(function(){

    if ($('#vidthumbnail').is(':visible')) {
        $('#vidthumbnail').html('format youtube code here')
                          .show();
    }


     if ($('#vidthumbnail').empty(':visible')) { 
        $('#vidthumbnail').hide().html(''); // remove anything
    }

});

Or if your content for div element should be loaded from somewhere use $('div').load(url_goes_here)

answered Oct 16, 2011 at 5:35

Samich

30.4k6 gold badges70 silver badges80 bronze badges

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

Collectives™ on Stack Overflow

Using Jquery to Load and Unload a Div Element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related