SitePoint Sponsor

User Tag List

Results 1 to 18 of 18

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Changing and loading an iframe 'src' attribute with jQuery

    Hi everyone,

    I'm very new to jQuery and quite rusty with my web design in general. I have a page on my site with 5 buttons alongside an iframe which is embedded from Youtube showing a video. All I want is for each of the buttons to load a different video from Youtube into the iframe without simply reloading the whole page. I've searched and seen some examples of jQuery interaction with iframes, but all too complex for me to fully follow. Could someone please provide a simple example of what I need to do? I just need jQueary to change the src value and reload the iframe when the user clicks on one of the buttons.

    Any help would be greatly appreciated.

    Thanks.

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You could use the target attribute on the link to target the iFrame.

    If you have the embed links to the youtube videos, you can do something like this:

    Code html4strict:
    <p><a href="http://www.youtube.com/embed/Q5im0Ssyyus" target="someFrame">Charlie 1</a></p>
    <p><a href="http://www.youtube.com/embed/QFCSXr6qnv4" target="someFrame">Charlie 2</a></p>
    <p><a href="http://www.youtube.com/embed/eaCCkfjPm0o" target="someFrame">Charlie 3</a></p>
     
    <iframe name="someFrame" id="someFrame" width="560" height="315"></iframe>

    Live demo: http://jsfiddle.net/GeekyJohn/GH5QG/

    Of course if for some reason you need to use JavaScript, then you could simply change the source of the iframe.

    in jQuery parlance this would only be a few lines:

    Code javascript:
    $(document).ready(function(){
        $("a").click(function(e) {
            e.preventDefault();
     
            $("#someFrame").attr("src", $(this).attr("href"));
        })
    });
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Member
    Join Date
    May 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's exactly what I needed. Thank you very much. I thought of using jQuery because I'd also like to be able to add a class to the button as it's clicked to enable the active link to be styled differently.

    Any chance you could provide an example of this behaviour also?

    Thanks.

  4. #4
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Bilthoven, Netherlands
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I reckon that this would work:
    Code:
    $("a").click(function(e) {
      e.preventDefault();
      $("#someFrame").attr("src", $(this).attr("href"));
      $("a").removeClass("active");
      $(this).addClass("active");
    })
    First removing the "active" class from all links, then adding that class to the clicked link.

    May I suggest that you give your links e.g. a class name to identify them:
    HTML Code:
    <p><a href="http://www.youtube.com/embed/Q5im0Ssyyus" class="myButtons">Charlie 1</a></p>
    And get them e.g. like this:
    Code:
    $("a.myButtons")
    That gives you the freedom to add more <a> tags to the page without affecting them too.

  5. #5
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jonas-e View Post
    Code:
      $("a").removeClass("active");
    First removing the "active" class from all links, then adding that class to the clicked link.
    That would be rather bad for performance, it would be better to reference only the already active links like so:

    Code:
      $("a.active").removeClass("active");

    Quote Originally Posted by jonas-e View Post
    May I suggest that you give your links e.g. a class name to identify them:
    Most certainly an excellent idea. The other option would be to have an ID or class on the parent of the links.

    Code javascript:
    $("#theButtons a.active").removeClass("active");
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  6. #6
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Bilthoven, Netherlands
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
     $("a.active").removeClass("active");
    Good point

    BTW, do you think jQuery keeps a chached list over all a tags?
    Or does it perhaps do the following when parsing "a.active":
    1. First get all a tags on the page.
    2. Then look through them all to find those with the className attribute containing the string "active".
    3. Then remove the "active" string from their className attribute.

    If so, it may not improve performance ..


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •