?
Solved

Dynamic button URLS

Posted on 2011-03-17
6
Medium Priority
?
550 Views
Last Modified: 2012-06-21
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

0
Comment
Question by:Envision11
  • 3
  • 2
6 Comments
 
LVL 5

Expert Comment

by:KiasChaos83
ID: 35162278
It looks okay

Could you give an example of the HTML?

0
 
LVL 20

Expert Comment

by:Proculopsis
ID: 35164264

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
 

Author Comment

by:Envision11
ID: 35164337
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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
LVL 20

Accepted Solution

by:
Proculopsis earned 2000 total points
ID: 35164524

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
 

Author Comment

by:Envision11
ID: 35164643
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
 

Author Comment

by:Envision11
ID: 35165644
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

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

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.

Join & Write a Comment

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

589 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question