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
Full Version: Button to link and anchor to an iframe.
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
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
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.
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>
<iframe name ="ifr" id="ifr" src="http://google.com"></iframe>
Thanks, pandy! I knew it might've taken some Java for this. I got it working with this small amount of code referenced from here.
I wouldn't mind an animated scroll, but if this is too complex I probably wont worry about it.
-Tom
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>
<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
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
http://www.quirksmode.org/dom/w3c_cssom.html
And for the record, JavaScript and Java are completely different languages.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.