Page 1 of 1

JS list with style.display trigger

Posted: Mon Jul 30, 2007 11:47 am
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?

Re: JS list with style.display trigger

Posted: Mon Jul 30, 2007 12:05 pm
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?

Posted: Mon Jul 30, 2007 12:17 pm
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? :)

Posted: Mon Jul 30, 2007 1:37 pm
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 :)

Posted: Mon Jul 30, 2007 1:46 pm
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 :?

Posted: Mon Jul 30, 2007 2:12 pm
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";
  }

Posted: Mon Jul 30, 2007 2:24 pm
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.

Posted: Mon Jul 30, 2007 2:37 pm
by feyd
I would just use an else, losing the second if altogether.

Posted: Mon Jul 30, 2007 2:46 pm
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 :)

Posted: Mon Jul 30, 2007 2:50 pm
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.

Posted: Mon Jul 30, 2007 4:15 pm
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 :)

Posted: Mon Jul 30, 2007 6:29 pm
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.