Dynamic button URLS

Hi,
I am trying to add dynamic URL from an iFrame to a facebook button below it. There say 10 iframes and 10 buttons on the page, each button has to have the URL of the iframe above.
The below good, returns all the URLs but gives the same URL to each button. I'm fairly new to JS and can't see the issue in my logic.
Anyone give me some help on this..thanks.

window.onload=init; 
function init(){
  var o = document.getElementsByTagName("div");

  for (var i = 0; i<o.length; i++) {

    if (o[i].className == "videoContent" ) {
        var URL = o[i].getElementsByTagName('iframe')[0];
        var URL_array = URL.src.split("/");
        
        for (var t = 0; t<o.length; t++) {
            if (o[t].className == "fbButton" ) {
                var Button = o[t].getElementsByTagName('a')[0];

                var newHref = "http://www.youtube.com/watch?v=" + URL_array[4];                            
                Button.setAttribute('href', newHref);
                
                var newShareURL = "http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D" + URL_array[4];                            
                Button.setAttribute('share_url', newShareURL);
                
                newHref = "";
                newShareURL = "";
            }         
        }
    }
  }
}

Open in new window

Envision11Asked:
Who is Participating?
 
ProculopsisCommented:

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26894991.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

jQuery(document).ready( function() {

  $("iframe").each( function() {
    var watch = $(this).attr( "src" ).split( "/" )[4];
    var urlWatch = "http://www.youtube.com/watch?v=" + watch;
    var urlShare = "http://www.facebook.com/sharer.php?u=" + escape( urlWatch );

    $(this)
    .closest(".content")
    .find("a[name=fb_share]")
    .attr( { href: urlWatch, share_url: urlShare } );
  });

});

</script>
</head>
<body>

<article>
<div class="content"> 
  <div class="videocontent">
    <iframe title="YouTube video player" width="400" height="280" src="http://www.youtube.com/embed/Hk5oXFtYLwE" frameborder="0" allowfullscreen></iframe> 
  </div> 
  <div class="social"> 
    <div class="fbButton">
      <a id="fb-share" name="fb_share" share_url="" href="" style="text-decoration: none; "><span class="fb_share_size_Small "><span class="FBConnectButton FBConnectButton_Small" style="cursor:pointer;"><span class="FBConnectButton_Text">Share</span></span><span class="fb_share_count_nub_right fb_share_no_count"></span><span class="fb_share_count fb_share_no_count fb_share_count_right"><span class="fb_share_count_inner">&nbsp;</span></span></span></a> 
    </div>
  </div>
</div>
</article>

<article>
<div class="content"> 
  <div class="videocontent">
    <iframe title="YouTube video player" width="400" height="280" src="http://www.youtube.com/embed/CGhlyAZsezk" frameborder="0" allowfullscreen></iframe> 
  </div> 
  <div class="social"> 
    <div class="fbButton">
      <a id="fb-share" name="fb_share" share_url="" href="" style="text-decoration: none; "><span class="fb_share_size_Small "><span class="FBConnectButton FBConnectButton_Small" style="cursor:pointer;"><span class="FBConnectButton_Text">Share</span></span><span class="fb_share_count_nub_right fb_share_no_count"></span><span class="fb_share_count fb_share_no_count fb_share_count_right"><span class="fb_share_count_inner">&nbsp;</span></span></span></a> 
    </div>
  </div>
</div>
</article>

<article>
<div class="content"> 
  <div class="videocontent">
    <iframe title="YouTube video player" width="400" height="280" src="http://www.youtube.com/embed/qXeeyZMAfuM" frameborder="0" allowfullscreen></iframe> 
  </div> 
  <div class="social"> 
    <div class="fbButton">
      <a id="fb-share" name="fb_share" share_url="" href="" style="text-decoration: none; "><span class="fb_share_size_Small "><span class="FBConnectButton FBConnectButton_Small" style="cursor:pointer;"><span class="FBConnectButton_Text">Share</span></span><span class="fb_share_count_nub_right fb_share_no_count"></span><span class="fb_share_count fb_share_no_count fb_share_count_right"><span class="fb_share_count_inner">&nbsp;</span></span></span></a> 
    </div>
  </div>
</div>
</article>

<article>
<div class="content"> 
  <div class="videocontent">
    <iframe title="YouTube video player" width="400" height="280" src="http://www.youtube.com/embed/JW5meKfy3fY" frameborder="0" allowfullscreen></iframe> 
  </div> 
  <div class="social"> 
    <div class="fbButton">
      <a id="fb-share" name="fb_share" share_url="" href="" style="text-decoration: none; "><span class="fb_share_size_Small "><span class="FBConnectButton FBConnectButton_Small" style="cursor:pointer;"><span class="FBConnectButton_Text">Share</span></span><span class="fb_share_count_nub_right fb_share_no_count"></span><span class="fb_share_count fb_share_no_count fb_share_count_right"><span class="fb_share_count_inner">&nbsp;</span></span></span></a> 
    </div>
  </div>
</div>
</article>


</body>
</html>

Open in new window

0
 
KiasChaos83Commented:
It looks okay

Could you give an example of the HTML?

0
 
ProculopsisCommented:

jQuery is your friend and will simplify a task like this.  The following simulation uses tt tags instead of iframes but you'll get the idea (watch out for 'access is denied' if your iframe crosses a domain boundary).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26894991.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

jQuery(document).ready( function() {

  $(".videoContent>tt").each( function() {
    var watch = $(this).attr( "src" ).split( "/" )[4];
    var urlWatch = "http://www.youtube.com/watch?v=" + watch;
    var urlShare = "http://www.facebook.com/sharer.php?u=" + escape( urlWatch );
    $(".link-youtube", this).attr( { href: urlWatch } );
    $(".link-share", this).attr( { href: urlShare } );
  });

});

</script>
</head>
<body>

<div class="videoContent">
  <tt src="http://watch/youtube/Hk5oXFtYLwE">
    <div class="fbButton">
      <a class="link-youtube" href="" target="window-youtube">watch</a>
      <a class="link-share" href="" target="window-share">share</a>
    </div>
  </tt>
</div>

<div class="videoContent">
  <tt src="http://watch/youtube/CGhlyAZsezk">
    <div class="fbButton">
      <a class="link-youtube" href="" target="window-youtube">watch</a>
      <a class="link-share" href="" target="window-share">share</a>
    </div>
  </tt>
</div>

<div class="videoContent">
  <tt src="http://watch/youtube/qXeeyZMAfuM">
    <div class="fbButton">
      <a class="link-youtube" href="" target="window-youtube">watch</a>
      <a class="link-share" href="" target="window-share">share</a>
    </div>
  </tt>
</div>

</body>
</html>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Envision11Author Commented:
Below is a sample of the HTML that i'm using.
<article>
<div class="content"> 

 <div class="videocontent">
<iframe title="YouTube video player" width="400" height="280" src="http://www.youtube.com/embed/444cWSdOIqrgXw?rel=0" frameborder="0" allowfullscreen></iframe> 
</div> 


<div class="social"> 

 <div class="fbButton">
<a id="fb-share" name="fb_share" share_url="" href="" style="text-decoration: none; "><span class="fb_share_size_Small "><span class="FBConnectButton FBConnectButton_Small" style="cursor:pointer;"><span class="FBConnectButton_Text">Share</span></span><span class="fb_share_count_nub_right fb_share_no_count"></span><span class="fb_share_count fb_share_no_count fb_share_count_right"><span class="fb_share_count_inner">&nbsp;</span></span></span></a> 
 </div>
</div>
</article>
<article>
<div class="content"> 

 <div class="videocontent">
<iframe title="YouTube video player" width="400" height="280" src="http://www.youtube.com/embed/444cWSdOIqrgXw?rel=0" frameborder="0" allowfullscreen></iframe> 
</div> 


<div class="social"> 

 <div class="fbButton">
<a id="fb-share" name="fb_share" share_url="" href="" style="text-decoration: none; "><span class="fb_share_size_Small "><span class="FBConnectButton FBConnectButton_Small" style="cursor:pointer;"><span class="FBConnectButton_Text">Share</span></span><span class="fb_share_count_nub_right fb_share_no_count"></span><span class="fb_share_count fb_share_no_count fb_share_count_right"><span class="fb_share_count_inner">&nbsp;</span></span></span></a> 
 </div>
</div>
</article>
<article>
<div class="content"> 

 <div class="videocontent">
<iframe title="YouTube video player" width="400" height="280" src="http://www.youtube.com/embed/444cWSdOIqrgXw?rel=0" frameborder="0" allowfullscreen></iframe> 
</div> 


<div class="social"> 

 <div class="fbButton">
<a id="fb-share" name="fb_share" share_url="" href="" style="text-decoration: none; "><span class="fb_share_size_Small "><span class="FBConnectButton FBConnectButton_Small" style="cursor:pointer;"><span class="FBConnectButton_Text">Share</span></span><span class="fb_share_count_nub_right fb_share_no_count"></span><span class="fb_share_count fb_share_no_count fb_share_count_right"><span class="fb_share_count_inner">&nbsp;</span></span></span></a> 
 </div>
</div>
</article>
<article>
<div class="content"> 

 <div class="videocontent">
<iframe title="YouTube video player" width="400" height="280" src="http://www.youtube.com/embed/444cWSdOIqrgXw?rel=0" frameborder="0" allowfullscreen></iframe> 
</div> 


<div class="social"> 

 <div class="fbButton">
<a id="fb-share" name="fb_share" share_url="" href="" style="text-decoration: none; "><span class="fb_share_size_Small "><span class="FBConnectButton FBConnectButton_Small" style="cursor:pointer;"><span class="FBConnectButton_Text">Share</span></span><span class="fb_share_count_nub_right fb_share_no_count"></span><span class="fb_share_count fb_share_no_count fb_share_count_right"><span class="fb_share_count_inner">&nbsp;</span></span></span></a> 
 </div>
</div>
</article>

Open in new window

<article>
<div class="content"> 

 <div class="videocontent">
<iframe title="YouTube video player" width="400" height="280" src="http://www.youtube.com/embed/444cWSdOIqrgXw?rel=0" frameborder="0" allowfullscreen></iframe> 
</div> 


<div class="social"> 

 <div class="fbButton">
<a id="fb-share" name="fb_share" share_url="" href="" style="text-decoration: none; "><span class="fb_share_size_Small "><span class="FBConnectButton FBConnectButton_Small" style="cursor:pointer;"><span class="FBConnectButton_Text">Share</span></span><span class="fb_share_count_nub_right fb_share_no_count"></span><span class="fb_share_count fb_share_no_count fb_share_count_right"><span class="fb_share_count_inner">&nbsp;</span></span></span></a> 
 </div>
</div>
</article>
<article>
<div class="content"> 

 <div class="videocontent">
<iframe title="YouTube video player" width="400" height="280" src="http://www.youtube.com/embed/444cWSdOIqrgXw?rel=0" frameborder="0" allowfullscreen></iframe> 
</div> 


<div class="social"> 

 <div class="fbButton">
<a id="fb-share" name="fb_share" share_url="" href="" style="text-decoration: none; "><span class="fb_share_size_Small "><span class="FBConnectButton FBConnectButton_Small" style="cursor:pointer;"><span class="FBConnectButton_Text">Share</span></span><span class="fb_share_count_nub_right fb_share_no_count"></span><span class="fb_share_count fb_share_no_count fb_share_count_right"><span class="fb_share_count_inner">&nbsp;</span></span></span></a> 
 </div>
</div>
</article>
<article>
<div class="content"> 

 <div class="videocontent">
<iframe title="YouTube video player" width="400" height="280" src="http://www.youtube.com/embed/444cWSdOIqrgXw?rel=0" frameborder="0" allowfullscreen></iframe> 
</div> 


<div class="social"> 

 <div class="fbButton">
<a id="fb-share" name="fb_share" share_url="" href="" style="text-decoration: none; "><span class="fb_share_size_Small "><span class="FBConnectButton FBConnectButton_Small" style="cursor:pointer;"><span class="FBConnectButton_Text">Share</span></span><span class="fb_share_count_nub_right fb_share_no_count"></span><span class="fb_share_count fb_share_no_count fb_share_count_right"><span class="fb_share_count_inner">&nbsp;</span></span></span></a> 
 </div>
</div>
</article>
<article>
<div class="content"> 

 <div class="videocontent">
<iframe title="YouTube video player" width="400" height="280" src="http://www.youtube.com/embed/444cWSdOIqrgXw?rel=0" frameborder="0" allowfullscreen></iframe> 
</div> 


<div class="social"> 

 <div class="fbButton">
<a id="fb-share" name="fb_share" share_url="" href="" style="text-decoration: none; "><span class="fb_share_size_Small "><span class="FBConnectButton FBConnectButton_Small" style="cursor:pointer;"><span class="FBConnectButton_Text">Share</span></span><span class="fb_share_count_nub_right fb_share_no_count"></span><span class="fb_share_count fb_share_no_count fb_share_count_right"><span class="fb_share_count_inner">&nbsp;</span></span></span></a> 
 </div>
</div>
</article>

Open in new window

0
 
Envision11Author Commented:
OK this code above works to some degree, but its not getting the incorrect iFrame ( Twitter button using an iFrame). I need to be able to get an iFrame within a certain div with a class. I can't ID the iFrame as its created elsewhere.
This is whay I'm having to do 2 look loops in my orginal code, one to find the iFrame in a div then to find the div with the button and link them together.
0
 
Envision11Author Commented:
After some changes, this is my final working code. Might not be the best solution but its working for me.

Thanks for all the help, much appreciated!
jQuery(document).ready( function() {

  $("iframe").each( function() {
    var watch = $(this).attr( "src" ).split( "/" )[4];
    var urlShare = "http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D" + escape( watch );
     var urlShareTweet = "http://twitter.com/share?url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D" + escape( watch );

    $(this)
    .closest(".content")
    .find("a[name=fb_share]")
    .attr( { href: urlShare, share_url: urlShare } );

     $(this)
    .closest(".content")
    .find("a[class=twitter-share-button]")
    .attr( { href: urlShareTweet} );

  });

});

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.