Problem with iframes and anchors

Forum Moderators: open

Message Too Old, No Replies

Problem with iframes and anchors

raffs

7:05 am on Aug 9, 2003 (gmt 0)

Ok here is my problem. I have a image link at the top of my page which is targeted to an iframe down the page. What I would like it to do is snap to the place on the page where the iframe is (I originally thought I would be able to do it with a anchor link but 2 links don’t work together)

So is there a way in which i can do this?

thanks
Raff

MonkeeSage

7:27 am on Aug 9, 2003 (gmt 0)

Hi, Raffs,

Welcome to WebmasterWorld!

This should be the syntax you're looking for if I understand you:

<a href="#iframe"><img src="img.png" alt="Click me"/></a>
...
<iframe id="iframe" name="iframe" src="about:blank"></iframe>

Jordan

raffs

8:00 am on Aug 9, 2003 (gmt 0)

thanks for that,. but what i really ment was if i had 3 of those image links img1.gif img2.gif img3.gif each is pointing to a single iframe and all are displaying 3 difrent html files. what my problem is how can display i display the html files in the iframe as well as having the page scroll down to where the iframe is lower in the page.

is there a way i can combine the target link as well as using a anchor link to snap to the bottom of the page where the iframe is.

hope you understand
thanks
raff

MonkeeSage

10:07 am on Aug 9, 2003 (gmt 0)

Raff:

OK, I think I understand. You have something like this, correct?

<a href="http://some.where/some/place/1/" target="iframe"><img src="img1.gif" alt="Click me"/></a>
<a href="http://some.where/some/place/2/" target="iframe"><img src="img2.gif" alt="Click me"/></a>
<a href="http://some.where/some/place/3/" target="iframe"><img src="img3.gif" alt="Click me"/></a>
...
<iframe id="iframe" name="iframe" src="about:blank"></iframe>

If that is the case, you can do what you want with a bit of script magic. Put this in the <head> of the document:

<script type="text/javascript">
 <!--
 function getSelf() {
 var mySelf = null;
 if (document.location.href.indexOf("#") > -1)
 mySelf = document.location.href.substring(0, document.location.href.indexOf("#"));
 else
 mySelf = document.location.href;
 return mySelf;
 }
 function goAnchor(anc) {
 var mySelf = getSelf();
 if (mySelf.indexOf("#") > -1)
 mySelf += anc;
 else 
 mySelf += ("#" + anc);
 document.location.href = mySelf;
 return true;
 }
 //-->
 </script>

And then change your links like this:

<a href="http://some.where/some/place/1/" target="iframe" onclick="return goAnchor(this.target);"><img src="img1.gif" alt="Click me"/></a>
<a href="http://some.where/some/place/2/" target="iframe" onclick="return goAnchor(this.target);"><img src="img2.gif" alt="Click me"/></a>
<a href="http://some.where/some/place/3/" target="iframe" onclick="return goAnchor(this.target);"><img src="img3.gif" alt="Click me"/></a>
...
<iframe id="iframe" name="iframe" src="about:blank" class="frame"></iframe>

This way, for users with JavaScript enabled it will scroll down to the iframe, but if a user doesn't have JS enabled, the links will still work as expected, it just won't scroll to the iframe.

HTH
Jordan

raffs

1:32 am on Aug 10, 2003 (gmt 0)

Thanks Jordon that was exactly what i wanted.. thankyou very much for helping me :)

Raff