Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

button iframe switch

Posted on 2011-02-28
2
Medium Priority
?
194 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 2000 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

662 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