6 replies to this topic

[Rainit]

The code:
in HTML file:

function SwitchMenu(obj){
	if(document.getElementById){
	var el = document.getElementById(obj);
	var ar = document.getElementById("submenudiv").getElementsByTagName("span");	
			if(el.style.display != "block"){
				for (var i=0; i<ar.length; i++){
					if (ar[i].className=="submenu")
					ar[i].style.display = "none";
				}
				el.style.display = "block";
			}else{
				el.style.display = "none";				
			}		
	}
}

<div id="masterdiv">
		<ul>
		  <li onclick="SwitchMenu('sub1')"><a href="#"  title="">Kaardid</a>
		  </li> 
		  <li onclick="SwitchMenu('sub2')"><a href="#"  title="" >Mobiilne<br  />tervitus</a></li> 
		  <li onclick="SwitchMenu('sub3')"><a href="#"  title="" >Artiklid</a></li> 
		  <li onclick="SwitchMenu('sub4')"><a href="#"  title="" >Uudised</a></li> 
		  <li onclick="SwitchMenu('sub5')"><a href="#"  title="" >Retseptid</a></li>		  
		</ul> 
</div>

<div id="submenudiv">
			<ul id="sublist">	 
			   <span class="submenu" id="sub1">			
				<li><a href="http://www.javascriptkit.com">Postkaardid </a></li>
				<li><a href="http://www.freewarejava.com">Elektroonilised kaardid</a></li>				
			</span>
			</ul>
			<ul>
			<span class="submenu" id="sub2">
				<li><a href="http://www.javascriptkit.com">Kaart mobiilile</a></li>
				<li><a href="http://www.freewarejava.com">Taustapildid</a></li>
				<li><a href="http://www.cooltext.com">Helinad</a></li>
				<li><a href="http://www.google.com">Animatsioonid</a></li>	
			</span>	
			</ul>
...

CSS:

#masterdiv li:hover{
	background-color: #FBEFF7;
	height: 35px;
	width: 114px;
	float:left;
	cursor:pointer;
	border: solid 1px #CFCDD0;
	color:#765a71;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font:  Helvetica, Verdana, Arial, sans-serif;
	font-size:15px;
	padding-top: 16px;
	font-weight:bold;
	text-align: center;
}
#masterdiv li{
	height: 34px;
	width: 116px;
	float:left;
	cursor:pointer;
	color:#765a71;
	font-weight:bold;
	font-style:normal;
	font-variant: normal;
	text-decoration:none;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font:  Helvetica, Verdana, Arial, sans-serif;
	font-size:15px;
	padding-top: 17px;
	text-align: center;
}

Now i tried to get the css active.
#masterdiv li:active{same code as hover}
Didn't work, any ideas how to do it ? I've been messing with it for too long (the menu)

[rc69]

You should note that IE 6 has poor psuedo class handling (meaning that things like :active and :hover only work on <a> tags). Not sure how "improved" the handling for this stuff is in IE 7, pretty sure it's at 95% (note: IE can never work 100% on anything ).

Your best alternative would be to use javascript's onmouseover and onmouseout attributes.
http://www.quirksmod...ents_mouse.html
http://www.quirksmod...ents_pairs.html

:active being a "while pressed" attribute, i would put my money on needing onmousedown and onmouseup, consult the above links for more info.

Edited by rc69, 26 February 2008 - 08:16 PM.

[Rainit]

I did the hover first with a tag, but IE7 screwed it up, it went downlike stairs(the menu)

Quote

------
------
------

[rc69]

#masterdiv li{
	height: 34px;
	width: 116px;
	float:left;
	cursor:pointer;
	color:#765a71;
	font: bold 15px Helvetica, Verdana, Arial, sans-serif;
	font-style:normal;
	font-variant: normal;
	text-decoration:none;
	padding-top: 17px;
	text-align: center;
}

#masterdiv li:hover{
	background-color: #FBEFF7;
	height: 35px;
	width: 114px;
	border: solid 1px #CFCDD0;
	padding-top: 16px;
}

<div id="submenudiv">
			<ul id="sub1" class="submenu">
				<li><a href="http://www.javascriptkit.com">Postkaardid </a></li>
				<li><a href="http://www.freewarejava.com">Elektroonilised kaardid</a></li>
			</ul>
			<ul id="sub2">
				<li><a href="http://www.javascriptkit.com">Kaart mobiilile</a></li>
				<li><a href="http://www.freewarejava.com">Taustapildid</a></li>
				<li><a href="http://www.cooltext.com">Helinad</a></li>
				<li><a href="http://www.google.com">Animatsioonid</a></li>
			</ul>
</div>

Don't know what these will actually do, but after having taken a decent look at your code, i just sorta want to hiss at you for no apparent reason.

Rule 1. CSS definitions are applied in order so you can override pervious rules by redefining the rule at a later point in the CSS (i.e. #masterdiv li overrides #masterdive li:hover because the former covers all psuedo class derivations of it, same for font vs. font-family).
Rule 2. Never place block elements inside of inline elements. Futher more, i believe it is also illegal to use anything other than an <li> tag as a child of <ul> (would have to check with the W3C on this part though).

Again, not sure what this will do, but hopefully kicking you out of quirksmode will fix something. Hopefully by the time you test it out, i'll have remembered exactly how to fix the stair-step effect (i'm thinking clear:left; should do the trick, don't quote me though).

[Rainit]

Thanks I got it working before, but thanks anyway, now i got a lil bit smarter again(the rules)

[Rainit]

Hey again.. i'm back lol. Anyway, i'm using hover in css. BUT as a person clicks on it, i want the style to stay. The one i use with hover. It has to stay for that element what i choose(menu item then). I have no clue on how to do it. I have a but better css. It remind what You have clicked or chosen. How can i load a style to the one i click? I'd do it with php if it didn't have that stupid submenu... Then with reload i could load in another class. But as You choose an element, submenu open and i need that style to stay, the backround,widths and heights, colors and everything. Please can someone help me?

var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only

function SwitchMenu(obj){
	if(document.getElementById){
	document.write('<style type="text/css">\n');
	document.write('#masterdiv li background-color: #FBEFF7;height: 34px;width: 108px;}\n');
	document.write('</style>\n');
	var el = document.getElementById(obj);
	var ar = document.getElementById("submenudiv").getElementsByTagName("span"); //DynamicDrive.com change
		if(el.style.display != "block"){ //DynamicDrive.com change
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="submenu") //DynamicDrive.com change
				ar[i].style.display = "none";
			}
			el.style.display = "block";
		}else{
			el.style.display = "none";
		}
	}
}

function get_cookie(Name) { 
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { 
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}

function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}

if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction

if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate

This is something from http://www.dynamicdrive.com/

[Rainit]

Maybe i could change the classname of the <li> somehow? ANd it will swap the style for me. Is that possible and how?

EDIT: I got it! ANd it is working, BUT:
AS i declare #masterdiv li and #masterdiv li:hover, they both have different height and width, because one has border and one has not. So for the new class i made .masterdivli which has the same contecnt as #masterdiv li:hover. Anyway, now it works, but it takes the width and height from #masterdiv li. I have tried reorganizing them.. nothing changes. Can anyone help me? I) know i can make something like .masterdivli2 instead of #masterdiv li and then put <li class="masterdivli">, but is there any other way? It just should not take the width and height from the #masterdiv li

Edited by Rainit, 15 March 2008 - 03:02 PM.