Load content in hidden div AFTER onclick

Question

I volunteer for a prostate cancer group and we have a website that has a number of YouTube videos embedded. We have so much now that the page gets bogged down when loading, even though each video is hidden in an onClick div.

Question: Is there a simple way to make it so div's only load the content when they are clicked upon? (ie. the page will not pull the YouTube embed until it is triggered with a click?)

Here's the webpage with all the videos, click on any of the lines to pull up what I'd like to be just loaded after the click:

http://pccncalgary.org/v_archive.php

Here is a snippet of code for what each of the hidden divs looks like:

<p class="subHeader">
  <a onMouseOver="this.style.cursor='pointer';" onclick="toggle_visibility('nov14');$(this).text($(this).text() == '[+] New Drugs in the Prostate Cancer Clinic ' ? '[-] New Drugs in the Prostate Cancer Clinic ' : '[+] New Drugs in the Prostate Cancer Clinic ');">[+] New Drugs in the Prostate Cancer Clinic </a>
</p>
<div id="nov14" style='display:none;'>
  <table width="400" style="background-color:#4f4f4f;border:3px solid #333;" align="center" cellpadding="5" cellspacing="5">
    <tr>
      <td>
        <iframe width="400" height="254" src="//www.youtube.com/embed/XvfzhBrK_SQ" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>    
      </td>
     </tr>
    </table>
</div>

The response from this Stack Overflow post seems right, but I'm not entirely sure how to make it work with the coding I have above. Any help would be greatly appreciated by all our members!

Smth like this: http://www.labnol.org/internet/light-youtube-embeds/27941/ + you could load image for each video: http://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api — Glavić, Nov 24 '14 at 19:44
@Glavić thanks for that share, that's nice and clean! Only problem is it doesn't seem to work with my existing onClick. Check this page: http://pccncalgary.org/v_archive_test2.php I've tried it with the top one (New Drugs in the Prostate Cancer Clinic), and the other two remain the same as in my example. Any ideas on how to make it work? — rhettoric, Nov 24 '14 at 20:39

score 0 · Answer 1 · answered Nov 24 '14 at 19:43

0

You could make a different page for each video. I don't know if this is what you want, but if you make them all the same, and each of the links went to a different page with only that video, you could make it load faster.

answered Nov 24 '14 at 19:43

Taylor

733
7
18

score 0 · Answer 2 · answered Nov 24 '14 at 19:51

If you need to store the HTML in the DOM, you could keep it in a textarea.

Warning: I haven't tested this.

<script>
function toggle_visibility(var div){
    if(jQuery('#' + div).css('display') == 'none') {
        //show it
        //fetch html from the textarea and load into the lonely div, then show the parent div.
        var htmlFromTextarea = jQuery('#' + div + ' textarea').val();
        jQuery('#' + div + ' div').html(htmlFromTextarea).parent().show(0);
    } else {
        //hide it and clear the div to unload
        jQuery('#' + div).hide(0).find('div').html('');
    }
}
</script>
<p class="subHeader">
    <a onMouseOver="this.style.cursor='pointer';" onclick="toggle_visibility('nov14');$(this).find('.expander').html($(this).find('.expander').html() == '[+]' ? '[-]' : '[+]');">
        <span class="expander">[+]</span> New Drugs in the Prostate Cancer Clinic
    </a>
</p>
<div id="nov14" style='display:none;'>
    <textarea style='display:none;'><table width="400" style="background-color:#4f4f4f;border:3px solid #333;" align="center" cellpadding="5" cellspacing="5">
    <tr>
        <td>
            <iframe width="400" height="254" src="//www.youtube.com/embed/XvfzhBrK_SQ" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>    
        </td>
    </tr>
    </table></textarea>
    <div></div>
</div>

Thanks James, I like this approach, but I can't seem to get it to work. After the onClick the div does not load. Here's the page where I have it loaded on: http://pccncalgary.org/v_archive_test.php (I've done it for the top one only, "New Drugs in the Prostate Cancer Clinic") — rhettoric, Nov 24 '14 at 20:24

Load content in hidden div AFTER onclick

2 Answers2