The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Button to link and anchor to an iframe.
TAB
post Apr 17 2012, 01:21 AM
Post #1





Group: Members
Posts: 2
Joined: 17-April 12
Member No.: 16,926



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 17 2012, 09:17 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TAB
post Apr 17 2012, 10:27 AM
Post #3





Group: Members
Posts: 2
Joined: 17-April 12
Member No.: 16,926



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

This post has been edited by TAB: Apr 17 2012, 10:28 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 17 2012, 11:55 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 17 2012, 12:22 PM
Post #5


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



And for the record, JavaScript and Java are completely different languages.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 07:15 AM