iframe help

[PacersForever]

Is it possible to have buttons that change the iframe on your site ? Diagram below.

 

[marshian]

Yes.






Obviously I'll give some more info than just "Yes.", but that's all you asked for
It's actually quite easy, a normal <a> tag looks like this:

<a href="http://forums.x10hosting.com/programming-help/url">

But there's a parameter "target" too:

<a href="http://forums.x10hosting.com/programming-help/url" target="name">

This would open the link in the frame (iframe / frameset) named "name".
eg.

<a href="http://www.google.com" target="frame">Google in frame.</a>
<iframe name="frame" />

 

[PacersForever]

Thanks !!! But it doesn't work with firefox

Firefox doesn't know how to open this address, because the protocol (htt) isn't associated with any program.

 

[Scoochi2]

that's a typo in the example by marshian. Add a 'p' into the link so it reads:

<a href="http://www.google.com" target="frame">Google in frame.</a>
<iframe name="frame" />

 

[scopey]

Or you could JS it.

<button onclick="document.getElementById('frame').src = 'http://www.google.com';">Google.com</button>
<iframe id='frame' />

 

[Scoochi2]

Or you could JS it.

<button onclick="document.getElementById('frame').src = 'http://www.google.com';">Google.com</button>
<iframe id='frame' />

JS is good for this. However, make sure you use the following to ensure that it will work for more people:

<script type='text/javascript>
   document.write ("<button onclick=\"document.getElementById('frame').src = 'http://www.google.com';\">Google.com</button>");
</script>
<noscript>
   <a href="http://www.google.com" target="frame">Google in frame.</a>
</noscript>

<iframe name='frame' id='frame'>

 

[PacersForever]

Ok I have this now

<a href="http://www.nba.com" target="frame">NBA</a>
</noscript>

<a href="http://www.google.com" target="frame">Google in frame.</a>
</noscript>

</p>
<script type='text/javascript>
   document.write ("<button onclick=\"document.getElementById('frame').src = 'http://www.google.com';\">Google.com</button>");
</script>
<noscript>
   <a href="http://www.google.com" target="frame">Google in frame.</a>
</noscript>

<iframe name='frame' id='frame'>

Is there a way to make the links buttons and for it to automatically open in one of the links ?

 

[Scoochi2]

Is there a way to make the links buttons and for it to automatically open in one of the links ?

I'm not quite sure what you mean there...?
If you use the following code, it will make all your links buttons, and pressing a button will change the frame, depending on which button was pressed.

<p>
<script type='text/javascript'>
  document.write ("<button onclick=\"document.getElementById('frame').src = 'http://www.google.com';\">Google</button>");  
  document.write ("<button onclick=\"document.getElementById('frame').src = 'http://www.nba.com';\">NBA</button>");
  </script>
<noscript>
  <a href="http://www.google.com" target="frame">Google</a> <a href="http://www.nba.com" target="frame">NBA</a>
<button onclick="document.getElementById('frame').src = 'http://www.google.com';">Google</button>
</noscript>
</p>
<iframe name='frame' id='frame' width='600' height='500'></iframe>

However, because the button needs JavaScript in order to work, the <noscript> section cannot use buttons unless you also use PHP or another server side language to refresh the page with the iframe loaded.
The iframe has a size of 600x500. Change this to whatever you want it to be.

In short, that will show buttons for most people, and text links for people that do not have JavaScript enabled on their browser.
You can add new links by copying the existing ones and modifying them to point to the new locations and so forth.



...Also, I've removed bugs and typos that have accumulated through different people helping you. It is HTML, not XHTML. If you know what I'm going on about, change it if you prefer. If you don't, then it will be fine as it is.

 

[PacersForever]

Thanks man thats exactly what i was looking for. Is there a possibility for one of them to automatically open once you run the code ?

 

[Scoochi2]

Of course!
Change the last line into something like this:

<iframe name='frame' id='frame' width='600' height='500' src='http://www.google.com'></iframe>

 

[PacersForever]

Thanks soo much, I'm all set !