...

View Full Version : Access div within div



bengaltgrs
12-08-2007, 09:02 PM
I'm attempting to create a cascading menu, but am having difficulty accessing certain div elements. For an example, try scrolling to:

http://www.applicachia.com/dev/test.html

Option 2 > more... - the div that appears when you click "more.." should stay visible until the mouse leaves it, but it does not seem to be able to access the div style.

chump2877
12-09-2007, 07:21 AM
A couple of things:

1) You should avoid using JS for functionality as important as navigation. What if JS is disabled in the browser for some reason? Your menu becomes useless.

2) You can do virtually the same things that you are doing with JS here with CSS (using unordered lists and the :hover pseudo-class in modern browsers to toggle the display of list items)...no JS is required unless you are still developing for IE 6....

In any case, try the following in you code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Script-Type" content="application/ecmascript">

<style>
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
margin:0pt;
padding:0pt;
font-size: 12px;
font-family: helvetica;
}

.box-main{
border-width:1px;
border-style:solid;
border-width:1px;
margin-top:5px;
}

.box-title{
background-color:lightgrey;
padding: 4px;
overflow: hidden;
font-size: 12px;
font-family: helvetica;
}

.box-content{
padding:4px;
}

.box-row-highlight{
font-size: 12px;
font-family: helvetica;
padding-top:1px;
text-decoration:none;
color:black;
background-color:white;
cursor:pointer;
}
</style>
</head>
<body>
<table width="100%" height="100%" cellspacing="4" cellpadding="0">
<tr>

<td width="190" valign="top">
<div id="contacts_main" class="box-main">
<table cellspacing="4" cellpadding="0" width="188" class="box-title">
<tr>
<td align="left">
Head
</td>
<td align="right">
&nbsp;

</td>
</tr>
</table>
<div id="contacts_body" class="box-content" style="overflow:auto; max-height:80px;">
<div class="box-row-highlight" onMouseOver="highlight_row(this)" onMouseOut="unhighlight_row(this)">
Option 1
<div style="display:none; position:absolute; left:185px; height:40px; border-style:solid; border-width:1px; border-color:black; background-color:white; width:150px;">
<table cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>

<td>sub 1</td>
<td>sub 2</td>
<td>sub 3</td>
</tr>
</table>
</div>
</div>

<div class="box-row-highlight" onMouseOver="highlight_row(this)" onMouseOut="unhighlight_row(this)">
Option 2
<div style="display:none; position:absolute; left:185px; height:40px; border-style:solid; border-width:1px; border-color:black; background-color:white; width:150px;">
<table cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td>sub 1</td>
<td>sub 2</td>
<td>

<div onMouseOver="setDisplay(this.childNodes[2], 'inline')">
more..<br><div style="display:none; position:absolute; border-bottom:1px #000000 solid; border-right:1px #000000 solid; border-left:1px #000000 solid; background-color:white; width:100px; cursor: default;" class="box-row" onMouseOut="setDisplay(this, 'none')"><div>sub-sub 1</div><div>sub-sub 2</div><div>sub-sub 3</div><div>sub-sub 4</div></div></div>
</td>
</tr>
</table>
</div>

</div>
</div>
</div>
</td>
<td valign="top">
tsa sasd asd as da
</td>
</tr>
</table>

<script type="text/javascript">
function highlight_row(obj)
{
obj.style.backgroundColor = "whitesmoke";
obj.childNodes[1].style.display = "inline";
}

function unhighlight_row(obj)
{
obj.style.backgroundColor = "white";
obj.childNodes[1].style.display = "none";
}

function setDisplay(obj, s)
{
obj.style.display = s;
}
</script>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum