Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Onclick takes two steps why not one?

Status
Not open for further replies.
Daruhshie

Daruhshie

Programmer
Jan 31, 2007
7
NL
I have this menu wich needs onclick open one sub menu and close all others, it works perfectly after you onclick once. but I want it to work right away, any ideas, relevant code below:

<script type="text/javascript">

function show(a) {
var div = document.getElementById(a).style;
if (div.display == 'none' ) div.display='block'
else div.display='none';
}
function hide(a) {
var div = document.getElementById(a).style;
if (div.display == 'block') div.display='none'
else div.display='none';
}

</script>


<a onclick="javascript:show('LP');hide('SH');hide('SD');hide('HD');" href="#" class="active"><?php echo HOME;?></a>
<a onclick="javascript:hide('LP'); show('SH'); hide('SD');hide('HD');" href="#" id="current"><?php echo SON;?></a>
<a onclick="javascript:hide('LP');hide('SH');show('SD');hide('HD');" href="#" id="current"><?php echo WSTAL;?></a>
<a onclick="javascript:hide('LP');hide('SH');hide('SD');show('HD');" href="#" id="current"><?php echo HSTAL;?></a>
 
Sort by date Sort by votes
the second time it works the way it should, it shows show and hides hide on one click, don't understand why it doesn't on the first onclick after opening the page.
 
Upvote 0 Downvote
The problem is that javascript doesn't read the display values you've set via CSS. Take this example:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

window.onload = function () {
   var a = document.getElementById("blah");
   alert(a.style.display == "block");
   alert(a.style.display == "none");
}

</script>
<style type="text/css">

div#blah {
   display:block;
}

</style>
</head>
<body>
<div id="blah"></div>
</body>
</html>

Obviously the display style for the <div> is block. Not only are divs block level elements inherently, but we have also explicitly defined it as block. However, alert(a.style.display == "block"); still produces false. Additionally, alert(a.style.display == "none"); also produces false.

Now, after your if block evaluates this code:
Code: 
    if (div.display == 'none' ) div.display='block'
    else div.display='none';
The condition evaluates to false, then javascript explicitly sets the display to "none". At this point it is in a readable state, because javascript has set it. So, during your next pass, when it hits the same if block, it evaluates correctly.

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
How do I get javascript to start out with a readable state then? Thnx for the efford by the way.
 
Upvote 0 Downvote
Thanks for the effor[!]t[/!]? That kinda makes it sound like I tried to explain and failed, when in actuality I gave you the exact reason why your code isn't working.

Nevertheless.... the simple solution would be to change the if block to test for the condition that would fail first.

For example, in your hide code - check for a display of none instead of block. That way if the code is initially displayed (which it should be if you're calling a function to hide it), then it will fail on the check to see if it's display is none, and when then set the display equal to none.

Better yet, why not just take out the if condition in the first place. Since the function is called "hide" why do you have code inside the function to make it "show"? That doesn't really make much sense.....

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
Hey kaht, I understand you man, you mean to put a style tag on the div in the HTML and specify a display setting, OHH YEAHHH

<.
 
Upvote 0 Downvote
No you got me wrong there, I truely appreciate you explaining me the how and why it doesn't work. Sorry if my words made you think otherwise.
 
Upvote 0 Downvote
function display($sectie){
switch ($sectie) {
case "LP":
$dis_LP = "#LP{margin-left:0;display:block}";
$dis_SH = "#SH{margin-left:0;display:none}";
$dis_SD = "#SD{margin-left:0;display:none}";
$dis_HD = "#HD{margin-left:0;display:none}";
break;
case "SH":
$dis_LP = "#LP{margin-left:0;display:none}";
$dis_SH = "#SH{margin-left:0;display:block}";
$dis_SD = "#SD{margin-left:0;display:none}";
$dis_HD = "#HD{margin-left:0;display:none}";
break;
case "SD":
$dis_LP = "#LP{margin-left:0;display:none}";
$dis_SH = "#SH{margin-left:0;display:none}";
$dis_SD = "#SD{margin-left:0;display:block}";
$dis_HD = "#HD{margin-left:0;display:none}";
break;
case "HD":
$dis_LP = "#LP{margin-left:0;display:none}";
$dis_SH = "#SH{margin-left:0;display:none}";
$dis_SD = "#SD{margin-left:0;display:none}";
$dis_HD = "#HD{margin-left:0;display:block}";
break;

}
return $dis_LP."\n".$dis_SH."\n".$dis_SD."\n".$dis_HD."\n";

}
 
Upvote 0 Downvote
Works like a charm in IE and FF with the style on the element itself, thank you very much. Justhave to figger out why Opera doesn't like it yet.
 
Upvote 0 Downvote
<a onclick="javascript:show('LP');hide('SH');hide('SD');hide('HD'); return false;" href="#" class="active"><?php echo HOME;?></a>

now it works in IE FF and Opera. Thanx again.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
190
gmmastros
gmmastros
Ahmad khalafalla
  • Locked
  • Question
How to listen to 'onclick' event on the document
Replies
1
Views
180
feherke
feherke
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
393
waubain
waubain
waubain
  • Locked
  • Question
id tag not loading new data with new ajax call 1
Replies
4
Views
197
waubain
waubain
keisha1
  • Locked
  • Question
How can I append/insert multiple text files into one .dbf file using java script /html command
Replies
1
Views
173
Samthyr
Samthyr

Part and Inventory Search

Sponsor

Back
Top