Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Button to link and anchor to an iframe.

Posted by: TAB Apr 17 2012, 01:21 AM

Hi,

I'm working on a page with 9 buttons that are to display content in an iframe placed below the buttons, but I'd also like the same buttons to anchor link or scroll down to where the iframe is.

-Tom

Posted by: pandy Apr 17 2012, 09:17 AM

Well, you need some links to start with. And they need to target the IFRAME.

For the scrolling you could use JavaScript (scrollTo(), scrollBy()). It may or not work well since you are bound to use pixels. It's probably better to add an id to the iframe and then just let JavaScript change the location to that anchor.

HTML

<a href="http://yahoo.com" target"#ifr" onclick="window.location.href='#ifr'">Buttton</a>

<iframe name ="ifr" id="ifr" src="http://google.com"></iframe>

Posted by: TAB Apr 17 2012, 10:27 AM

Thanks, pandy! I knew it might've taken some Java for this. I got it working with this small amount of code referenced from https://developer.mozilla.org/en/DOM/element.scrollIntoView.

CODE

<head>
<script type="text/javascript">
        function showIt(elID)
        {
          var el = document.getElementById(elID);
          el.scrollIntoView(true);
        }
</script>
</head>

<body>
<a href="mindset.html" target="frame" onclick="showIt('pToShow');">
<div id="button"><img src="images/buttons/mindset.jpg" /></div>
</a>

<center><iframe id="pToShow" frameborder="0" scrolling="no" name="frame" width="630" height="700"></iframe></center>
</body>

I wouldn't mind an animated scroll, but if this is too complex I probably wont worry about it.

-Tom

Posted by: pandy Apr 17 2012, 11:55 AM

I always forget about scrollIntoView(). Thanks for the reminder. Ppk says there are some problems with it on iPhone, but that could very well be remedied by now. I don't think it does anything that just changing the location to an anchor wouldn't. ppk doesn't seem to think so either.
http://www.quirksmode.org/dom/w3c_cssom.html

Posted by: Darin McGrew Apr 17 2012, 12:22 PM

And for the record, JavaScript and Java are completely different languages.