Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by motty
motty
21,787 Points

Javascript - load iframe that's display: none; (hidden) when another element is visible in browser window

I have a single-page site that's grouped into sections, and I'd like to have a hidden iframe element (it's a youtube video) load only when reaching the third section.

The site can be viewed in full at http://motty.me and can be viewed in part at http://jsfiddle.net/0z6os9h2/

I've tried a few things like 'lazy-load' and a few other jquery plugins but to no avail. I'd appreciate any help I can get on this one!

Thanks in advance!

Marcus Parsons
Marcus Parsons
15,719 Points

I just want to say that your site is starting to look really good, and I like where you're going with it. But, please, for the love of all things holy and dear and sweet, PUT A MUSIC CONTROL ON THE SITE! lol I like the music because it feels soothing and relaxing. But I definitely don't like having to mute my speakers to visit a site. All you really have to do is add an audio element somewhere on the page that's visible for a basic audio controller that will allow visitors to pause and play the accompanying music.

Good luck, Motty!

4 Answers

Marcus Parsons
Marcus Parsons
15,719 Points

I think I might have figured out something nifty for ya. This is very simple and uses a jQuery plugin called "isOnScreen.js". You can find the source of the plugin here at this link.

After inserting that however you wish into your document (I just put the source code into its own script but you can of course just download the js and link to it), I replaced the waypoint code with something like this:

    //I gave the iframe an id of myiframe but you should probably change that lol
      var $newdiv1 = $('<iframe id="myiframe" width="420" height="315" src="http://www.youtube.com/embed/KVgqc7wMee8?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>');

      //Fires off when scrolling
      $(window).scroll(function() {
//if section-3 is on the screen
   if ($('#section-3').isOnScreen() === true) {
     //append the iframe to section-3
     $('#section-3').append($newdiv1);   
   }
        else {
      //If not on the screen, remove from the DOM
        $("#myiframe").remove();
        }
});

And the "isOnScreen()" plugin is far and away easier to read than that Waypoint plugin.

Marcus Parsons
Marcus Parsons
15,719 Points

I want to recommend one more thing that I know will incredibly help and look really cool. Use something like fullpage.js for your scrolling, instead of that smoothscroll plugin. The reason why I'm saying that is that you'll be able to see from the plugin site itself how it looks and that each time you scroll, each div is given the full attention of the page. This means that you won't have the music starting and stopping suddenly either. Every scroll brings you a full page which will help monumentally, I really believe.

motty
motty
21,787 Points
motty
motty
21,787 Points

Hey Marcus, thanks for the positive feedback. The main conversion within the site is the music...however, I'd like to keep the music element hidden and only have it play when on the third section (ironically titled 'The Music' ;) ). If the user doesn't want to take a moment of reflection or wouldn't like to continue listening, he can scroll back up or down (away from the targeted element in the viewport). That's my current vision.

Marcus Parsons
Marcus Parsons
15,719 Points

Ahhh I see! I've never done anything like that before, but now that I'm interested, I'm going to see what I can come up with. Someone might be able to help you sooner, but if someone else doesn't, maybe I can bring some ideas about, eh? :D

motty
motty
21,787 Points
motty
motty
21,787 Points

Thanks man...here's some code that I've been messing around... http://relaxaminute.byethost8.com

I managed to only play the music once a certain element is in the viewport but after I scroll back up, it amends the element again...my head is bursting!

motty
motty
21,787 Points
motty
motty
21,787 Points

Thanks Marcus! You've been tremendously helpful! I appreciate your help and feedback.

Marcus Parsons
Marcus Parsons
15,719 Points

Awesome, glad I could help! If you want to choose a best answer, you can do that, or we can just mark this as solved, unless you have any further questions right now.