I have the following bit of code. Around line 20 is the code I am using to 'unhide' various tables based upon a drop down selection. The problem I am running into is the tables are overlapping each other (they're all set to appear at the same fixed spot) so after I select the last option in the drop down, I can't see the upper selection's tables anymore. Make sense? I need a snippet of code, probably inserted above line 22 that will reset the visibility to default (hidden) prior to revealing the currently selected options table. Is this something I could have some assistance with?
Thanks. -
<html>
-
<head>
-
<style>
-
body{font-family:arial;}
-
table{font-size:80%;background:lightgreen}
-
a{color:black;text-decoration:none;font:bold}
-
a:hover{color:#606060}
-
td.menu{background:lightblue}
-
table.menu
-
{
-
font-size:100%;
-
position:fixed;
-
left:20px;
-
top:50px;
-
visibility:hidden;
-
}
-
</style>
-
<script type="text/javascript">
-
-
function showmenu()
-
{
-
y=document.forms[0].list.value;
-
document.getElementById(y).style.visibility="visible";
-
}
-
</script>
-
-
</head>
-
<body>
-
-
<form>
-
<select id="list" onchange="showmenu()">
-
<option value="nada"> --select a field--
-
<option value="plants">Plants, hydro, etc.
-
<option value="fish">Trout Fishing
-
<option value="cpu">Networking, Internet, Linux whatnot
-
</select>
-
</form>
-
<table class="menu" ID="plants" width=35%">
-
<th>Plants, Hydro, etc.</th>
-
<tr>
-
<td><a href="http://southerexposure.com/index.html">Southern Exposure Seed Exchange</a></td></tr>
-
<tr>
-
<td><a href="http://www.groworganic.com">Strawberry Bareroot Supplier</a></td></tr>
-
</table>
-
<table class="menu" ID="fish" width=35%">
-
<th>Stuff About Fishing</th>
-
<tr>
-
<td><a href="http://www.ncwrc.org">NC Wildlife Resources Commision</a></td></tr>
-
<tr>
-
<td><a href="http://www.digital-topo-maps.com">Topo Maps</a></td></tr>
-
</table>
-
<table class="menu" ID="cpu" width=35%">
-
<th>Computer, Linux, Whatnot. . . </th>
-
<tr>
-
<td><a href="http://www.aboutdebian.com">About Debian</a></td></tr>
-
<tr>
-
<td><a href="http://www.newegg.com">New Egg</a></td></tr>
-
</table>
-
</body>
-
</html>
-
Okay I made a solution that works. Not sure this is the most efficient way to make it work, but I'm trying.
Anyway, here is the corrected function that works: -
<script type="text/javascript">
-
var x;
-
function showmenu()
-
{
-
y=document.forms[0].list.value;
-
if(x==null)
-
{x=y}
-
if (x!=y)
-
{
-
document.getElementById(x).style.visibility="hidden";
-
document.getElementById(y).style.visibility="visible";
-
x=y;
-
}
-
else
-
{
-
document.getElementById(y).style.visibility="visible";
-
x=y;
-
}
-
}
-
Thanks for your time, Dormilich
6  1390 
Dormilich,
I think this is a js question, not css.
if you say so … but when I read about visibility and overlapping (and only 2 lines of JS barely doing anything difficult) it sounds like a layout problem, hence CSS.
btw. I can’t move it back whatsoever
the overlapping is intentional.
the visibility is a switch, which is javascript.(i can hide them, I can reveal them, just can't get the switch to work)
I should have stated in the original post that I was after a javascript solution. My mistake. I'm still getting the hang of the forum.
do you reset the visibility, when you select another table?
Yes that is what I want to do. I want to reset the visibility of all the tables back to hidden then change only the visibility of the selected table to visible.
The javascript at lines 22-23 turns an individual tables visibility on, but I don't know how to reset the visibility first.
Okay I made a solution that works. Not sure this is the most efficient way to make it work, but I'm trying.
Anyway, here is the corrected function that works: -
<script type="text/javascript">
-
var x;
-
function showmenu()
-
{
-
y=document.forms[0].list.value;
-
if(x==null)
-
{x=y}
-
if (x!=y)
-
{
-
document.getElementById(x).style.visibility="hidden";
-
document.getElementById(y).style.visibility="visible";
-
x=y;
-
}
-
else
-
{
-
document.getElementById(y).style.visibility="visible";
-
x=y;
-
}
-
}
-
Thanks for your time, Dormilich
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Penn Markham |
last post by:
Hello all,
I am writing a script where I need to use the system() function to call
htpasswd. I can do this just fine on the command line...works great
(see attached file, test.php). When my...
|
by: wired |
last post by:
Hi,
I've just taught myself C++, so I haven't learnt much about style or
the like from any single source, and I'm quite styleless as a result.
But at the same time, I really want nice code and I...
|
by: Charles M. Fish, Sr. |
last post by:
I’m so tired from banging this problem around all day, I hope I can
explain it succinctly & accurately.
I want to execute a function immediately following a click on <input
type="RESET"...
...
|
by: grist2mill |
last post by:
I want to create a standard tool bar that appears on all pages that is
a control. The toolbar has a button 'New'. What I wolud like when the
user clicks on 'New' depends on the page they are on. I...
|
by: Michael |
last post by:
Hi,
I'm having difficulty finding any previous discussion on this -- I
keep finding people either having problems calling os.exec(lepev), or
with using python's exec statement. Neither of...
|
by: sck10 |
last post by:
Hello,
I have a table with some controls in it, but it is not rapped in a form. I
also have a button for reseting the page. When I click the button, the page
resets, but I get the following...
|
by: pat270881 |
last post by:
hello,
i should implement this class:
namespace test_1
{
class statistician
{
public:
// CONSTRUCTOR
|
by: Schmidty |
last post by:
Okay...I have another 'newbie' question;
I have a function that loads a page and the action is
$_SERVER;
In the form that is in a function(method?) within a class a variable
is passed back to...
|
by: ismailc |
last post by:
Hi, I need help please!
Onmouseover it calls a function, but onmouseover the image it changes the cursor from default ot busy the whole time.
I want it to stay to default.
I have set it o...
|
by: pinko1204 |
last post by:
My Update function cannot successful update to sql table even don't have any error. Please help to check .....thx
PHP1
<?php
require_once 'header.php';
?>
<style type="text/css">
<!--
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
| | |
