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


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,329
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>


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
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


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,329
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


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
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,004
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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


--------------------
Darin McGrew
WDG Member since 1998
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: 23rd August 2014 - 02:29 AM