CSS dropdowns

Arnold9000

Feb 15th 2007, 8:06 am

I'm doing a CSS onMouseOver dropdown. Normally, I would absolutely position the dropdown that becomes visible on the onMouseOver event, but I cannot because all of the content is center aligned, and therefore the x position of the x, y will change based on the window size (y will not change). Do I use some sort of relative positioning instead? Any suggestions would be great. Thanks.

rays

Feb 16th 2007, 12:04 am

there are lot of ways to do ... it will be good idea if you post a code snippet ... then people can provide you good help

Arnold9000

Feb 16th 2007, 7:19 am

Okay, thanks. Here goes.

<script src="findDOM.js"></script>

//findDOM works, returns DOM of an object, additional arg of 1 means with style, no need to pay attention

<script language="javascript"> //manages swapping in and out of visiblity of dropdown

var hideit1="true";
var hideit2="true";

function swap_visibility(objID, num){
var domobj = findDOM(objID, 1);
domobj.visibility = "visible";
if(num==1){
hideit1 ="false";
}
if(num==2){
hideit2 ="false";
}
}

function reset_visible(objID, num){
var dom = findDOM(objID, 1);
if (hideit1 == "false" || hideit2=="false"){
dom.visibility = "hidden";
}
}
</script>

//Linked CSS, dropdown list object

#DrunkDriving{
position: absolute;
top: 114px;
left: 176px;
z-index: 2;
visibility: hidden;
}

Calling html code



<div id="DrunkDriving" onMouseover="swap_visibility('DrunkDriving', '2'); return true;" onMouseout= "reset_visible('DrunkDriving', '2'); return true;">
<table cellspacing="2" cellpadding="6" border="0" bgcolor="FFFFFF">
<tr>
<td class="nav" onMouseover=" this.className='navbright'; return true;" onMouseout="this.className='nav'; return true;"><a class="nounderline" href="/criminallaw.html">Our Past Cases</a></td>
</tr>
<tr>
<td class="nav" onMouseover=" this.className='navbright'; return true;" onMouseout="this.className='nav'; return true;"><a class="nounderline" href="/nhpenalties.asp">Penalties in NH</a></td>
</tr>
<tr>
<td class="nav" onMouseover=" this.className='navbright'; return true;" onMouseout="this.className='nav'; return true;"><a class="nounderline" href="/mapenalties.asp">Penalties in MA</a></td>
</tr>
</table>
</div>



<body bgcolor="FFFFFF" marginheight="10" marginwidth="0" topmargin="10" leftmargin="0">
<center>

<table cellspacing="0" cellpadding="0" border="0">

.......unneccessary code ommited


<td class="nav" onMouseover="this.className='navbright'; swap_visibility('DrunkDriving', '1'); return true;" onMouseout="this.className='nav'; reset_visible('DrunkDriving', '1'); return true;">Drunk Driving</td>

As you can see, I have absolutely postioned the DrunkDriving object. This is fine for vertical as vertical distance from the top never changes. However, since it is a center aligned table, the horizontal postion of this object needs to change based on window size. So I either need a dynamic way to handle this, or someway to give it an offset based on the postion of the table itself, rather than give it an absolute screen offset.

http://www.bowserlaw.com/index1.asp

Arnold9000

Feb 16th 2007, 10:17 am

Looks like this is a harder one than I thought.

cvxdes

Feb 18th 2007, 3:06 pm

you can always make the menu there by default, just make it hidden, and onmouseover show the div.

Arnold9000

Feb 20th 2007, 6:21 am

you can always make the menu there by default, just make it hidden, and onmouseover show the div.

I am already doing that. The problem, is that the horizontal position of the onMouseover div changes as the window size changes.