0

How can I make a link have two actions? Here's what I need to do:

I'm using the jQuery ScrollTo plugin to scroll to an anchor when a link is clicked. But I also need that same click to load new content into an iframe located in the div it's scrolling to. 

<a href="#scrollhere">link</a

.

.

.


<div id="scrollhere">

     <iframe that will load different page based on the link that was clicked>

</div>

Normally, each of these two actions uses the "href" part of the link to do the action, but a link can't have two hrefs. How would I accomplish this?

I don't have to use an iframe if there is a better solution. Basically I just need several links to scroll you to the same anchor div. but depending on the link clicked, the content loaded in that div will be different.

Thank you!

LBF
  • 1,133
  • 2
  • 14
  • 39
  • I will put together a fiddle and post the link. – LBF Nov 14 '13 at 13:09
  • In case anyone stumbles upon this, I found this post after I asked the question, which also helped me. http://stackoverflow.com/questions/7526113/load-wordpress-post-content-into-div-using-ajax – LBF Nov 14 '13 at 14:18

1 Answers1

0

you need to write a function to update the src of the iframe, and add this function as click event handler to anchors. And sent the specific link as the parameter into the function in each anchor. For detail, please look below sample:

    <a href="#scrollhere" onclick="loadOnFrame ('/hello.html')">link 01</a>

    <a href="#scrollhere" onclick="loadOnFrame ('/world.html')">link 02</a>


    <div id="scrollhere">
        <iframe src=""></iframe>
    </div>

    <script>
        var loadOnFrame = function(url) {
            $("#scrollhere iframe").attr("src", url);
        };    
    </script>
Ardy
  • 161
  • 3