JS list with style.display trigger

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
UrButtFullOfArr0ws
Forum Commoner
Posts: 64
Joined: Wed Feb 21, 2007 11:42 am
Location: Up a tree >.>"

JS list with style.display trigger

Post by UrButtFullOfArr0ws »

What's wrong with this?
I've struggled with it for 10+ hrs ...

Code: Select all

<ul>
	<li><a onmouseover="switchit('submenu1')">Menu 1</a>
		<ol id="submenu1" style="display: none">
			<li><a onmouseover="switchit('submenu11')">Sub Menu 1.1</a>
				<ul id="submenu11" style="display: none">
				<li>Abcd</li>
				<li>Abcde</li>
				</ul>
			</li>
			<li><a onmouseover="switchit('submenu12')">Sub Menu 1.2</a>
				<ul id="submenu12" style="display: none">
				<li>Bcde</li>
				<li>Bcdef</li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a onmouseover="switchit('submenu2')">Menu 2</a>
		<ol id="submenu2" style="display: none">
			<li><a onmouseover="switchit('submenu21')">Sub Menu 2.1</a>
				<ul id="submenu21" style="display: none">
				<li>Cdef</li>
				<li>Cdefg</li>
				</ul>
			</li>
			<li><a onmouseover="switchit('submenu22')">Sub Menu 2.2</a>
				<ul id="submenu22" style="display: none">
				<li>Defg</li>
				<li>Defgh</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

Code: Select all

function switchit(b){
	var a = document.getElementById(b);
	if(a.style.display=="none")
	{
		a.style.display = "block";
	}
	if(a.style.display == "block")
	{
		a.style.display = "none";
	}
}
What the script is trying to do is show or hide the lists like a menu when you move your mouse over it :)
But the weird thing is.. it's doing nothing !
Also menu2's position is offset ...
What am i overlooking?
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Re: JS list with style.display trigger

Post by superdezign »

UrButtFullOfArr0ws wrote:

Code: Select all

function switchit(b){
	var a = document.getElementById(b);
	if(a.style.display=="none")
	{
		a.style.display = "block";
	}
	if(a.style.display == "block")
	{
		a.style.display = "none";
	}
}
What about when a.style.display == null, which it will by default?
UrButtFullOfArr0ws
Forum Commoner
Posts: 64
Joined: Wed Feb 21, 2007 11:42 am
Location: Up a tree >.>"

Post by UrButtFullOfArr0ws »

What about when a.style.display == null, which it will by default?
.... null isn't default for OL and UL but "block".
Also it isn't left to default since i set it already...
:?
I tried ur version but didn't work.
Any other ideas?



Also on a further note and on a completely different question, i'm trying to change the menu i got everytime i click on the previous menu... something like:

Code: Select all

<a onclick="changeMenu('a1')">Change to menu 1</a>
<a onclick="changeMenu('a2')">Change to menu 2</a>
<a onclick="changeMenu('a3')">Change to menu 3</a>

Code: Select all

function changeMenu(prefix)
{
   document.getElementById('menu').innerHTML = "<script menumaker src='" + prefix + "menuname.js'></script>"
}
But it's not working becouse i guess that it stops when it sees </script> (which is actually happening as i'm seeing the rest of JS code in plain text in my browser), but also the script won't work without a </script> tag?!?
Any way to get out of this mess? :)
miro_igov
Forum Contributor
Posts: 485
Joined: Fri Mar 31, 2006 5:06 am
Location: Bulgaria

Post by miro_igov »

I wonder if you deserve any help after the aggressive behaviour against me.
But i easy forget such a things.

Why you close your <ol> with </ul> ?


And haha what silly statement

Code: Select all

if(a.style.display=="none")
        {
                a.style.display = "block";
        }
        if(a.style.display == "block")
        {
                a.style.display = "none";
        }

When the display is "none" and you set it to "block" it enters the next if where you test it against "block" which makes it back to "none".


Superdiz also is caught :)
UrButtFullOfArr0ws
Forum Commoner
Posts: 64
Joined: Wed Feb 21, 2007 11:42 am
Location: Up a tree >.>"

Post by UrButtFullOfArr0ws »

miro_igov wrote:I wonder if you deserve any help after the aggressive behaviour against me.
But i easy forget such a things.

Why you close your <ol> with </ul> ?


And haha what silly statement

Code: Select all

if(a.style.display=="none")
        {
                a.style.display = "block";
        }
        if(a.style.display == "block")
        {
                a.style.display = "none";
        }

When the display is "none" and you set it to "block" it enters the next if where you test it against "block" which makes it back to "none".


Superdiz also is caught :)
Ehm... wrong.. take a better look at it... the second if() is not nested WITHIN the first if() but at the root of the function...
the ol is closed with ul becouse i changed ul with ol but forgot to close it... i'll check it thanks

Oh and what hostilities are you talking about?... read how you addressed me with WTH at the beggining of ur post in the other thread... :roll:
BUT ... i also forget easily :wink:

Edit: Nope, properly closing the <ul> tag didn't clear it :?
miro_igov
Forum Contributor
Posts: 485
Joined: Fri Mar 31, 2006 5:06 am
Location: Bulgaria

Post by miro_igov »

Silly silly silly!
take a better look at it... the second if() is not nested WITHIN the first if() but at the root of the function...
That is what i say. Trace the logic!

Code: Select all

/*Lets say the display="none", the next if is true */
if(a.style.display=="none")
 {
  /* at next line the display is set to block - so element is visible */
  a.style.display = "block";
 }
  /* Here watch careful - the display="block" */
  if(a.style.display == "block")
  {
    /* Oh noo we are in this if too, display="none" again, how silly */
   a.style.display = "none";
  }
User avatar
TheMoose
Forum Contributor
Posts: 351
Joined: Tue May 23, 2006 10:42 am

Post by TheMoose »

Code: Select all

if(a.style.display=="none")
{
        a.style.display = "block";
}
if(a.style.display == "block")
{
        a.style.display = "none";
}
The problem is that they are two separate conditional statements. The first will execute when the display is set to "none", and thus set the display to "block". The second will execute IMMEDIATELY after the first because the display now has a value of "block", and reset the value to "none", thus making it seem to do nothing. You need to set the second conditional to an ELSEIF, so that if the first conditional executes, it will not execute the second.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

I would just use an else, losing the second if altogether.
UrButtFullOfArr0ws
Forum Commoner
Posts: 64
Joined: Wed Feb 21, 2007 11:42 am
Location: Up a tree >.>"

Post by UrButtFullOfArr0ws »

feyd wrote:I would just use an else, losing the second if altogether.
That's just what i did, and it works, thanks everyone...
But i still haven't figured out the menu :)
Last edited by UrButtFullOfArr0ws on Wed Aug 01, 2007 6:06 am, edited 1 time in total.
miro_igov
Forum Contributor
Posts: 485
Joined: Fri Mar 31, 2006 5:06 am
Location: Bulgaria

Post by miro_igov »

feyd wrote:I would just use an else, losing the second if altogether.
People should think more instead of giving them banana in their hands :) they will degenerate to monkeys.
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post by VladSun »

Just for completeness and simplicity:

Code: Select all

a.style.display = (a.style.display=="none") ? "block" : "none";
Please, don't count this as a critique ... it is not. I just love this type of flow control structure :)
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

UrButtFullOfArr0ws wrote:
feyd wrote:I would just use an else, losing the second if altogether.
That's just what i did, and it works, thanks every1...
But i still haven't figured out the menu :)
This is what I was trying to get you to understand from the start. CSS doesn't affect the JavaScript DOM.
Post Reply