Help - Search - Members - Calendar
Full Version: Button to link and anchor to an iframe.
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
TAB
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.

IPB Image

IPB Image

-Tom
pandy
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>
TAB
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.

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
pandy
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
Darin McGrew
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.
Invision Power Board © 2001-2014 Invision Power Services, Inc.