Solved

button iframe switch

Posted on 2011-02-28
2
188 Views
Last Modified: 2012-05-11
I have the following code that switches iframes once it is selected from the dropdown menu.  But I now want to get rid of the dropdown menu and have them all as on page buttons instead.  How do I modify my existing code to support them as buttons instead of dropdown selected.

<form name="form1">
<select name="list1" id="list1" onChange="if(this.selectedIndex>0) for(i=0;i<4;i++) if((this.selectedIndex-1)==i) document.getElementsByTagName('iframe')[i].style.display='block'; else document.getElementsByTagName('iframe')[i].style.display='none';" style="font-family:Verdana, Geneva, sans-serif; color:#666; font-size:11px;">
    <option selected value="">Please Select...</option>
    <option>Profile Information</option>
    <option>Overall Leaderboards</option>
    <option>Portfolio Leaderboards</option>
    <option>Friends Invitation</option>
</select>
</form>
</td>
</tr>
</table>
<table width="100%" align="center" id="map_td2">
  <tr>
    <td width="100%" rowspan="31" align="center" valign="top">
    

<iframe src="box/UserData.html" width="720" height="480" frameborder="0" scrolling="no"></iframe>

<iframe width="720" height="480" frameborder="0" scrolling="no" style="display:none" src="../datagrid/box/global_ranking.html"></iframe>

<iframe width="720" height="480" frameborder="0" scrolling="no" style="display:none" src="../datagrid/box/portfolio_ranking.html"></iframe>

<iframe width="720" height="480" frameborder="0" scrolling="no" style="display:none" src="../datagrid/box/invite.html"></iframe>

Open in new window

0
Comment
Question by:MsKrissy
2 Comments
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 500 total points
ID: 35002566
I think something like this should work.  You will have to use CSS to make the links look like buttons:

<ul id="links">
  <li><a href="/some/path/to/page1.html" target="myIframe">Page 1</a></li>
  <li><a href="/some/path/to/page2.html" target="myIframe">Page 2</a></li>
  <li><a href="/some/path/to/page3.html" target="myIframe">Page 3</a></li>
  <li><a href="/some/path/to/page4.html" target="myIframe">Page 4</a></li>
</ul>

<iframe src="box/UserData.html" width="720" height="480" frameborder="0" scrolling="no" name="myIframe></iframe>

Open in new window

0
 

Author Closing Comment

by:MsKrissy
ID: 35009211
thanks you, this worked greatly.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question