I think I misread your original post,Todd - and the example really
helped see what you're trying to do. I thought you meant that on
mouseenter, a div would go on top of that list item.
Below is a short script you can use to do what you're trying to do.
There will have to be modifications as you fit it into your web page,
but I hope that you can see the logic via the script below. I think
that the divs that you hide and show should be in the page structure
for two reasons: 1) accessibility, 2) graceful degradation (without
JS).
So I set the position:absolute style of the div's in JavaScript so
that - without JS - people can still see the divs below the highest z-
index div. I also hid the divs using opacity:0.
Next, I assigned a mouseenter event listener on all .nav list items
using the addEvent method. on mouseenter on any list item, it first
hides any divs that are showing, and then shows the div whose array
index is the same as the list item; the fade method (Tween class) does
the hiding and showing, indexOf method gets the target list item's
array index.
This makes the assumption that the first list item will show the first
div, the second list item shows the second div, and so on. In that
respect, this won't be plug-and-play in your example since it looks
like you're using (or should be using) nested unordered lists; easy
fix is to give second-level unordered lists a class (i.e. .subNav).
HTML:
<ul class="nav">
<li>Div 1</li>
<li>Div 2</li>
<li>Div 3</li>
</ul>
<div id="frame_preview">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
CSS:
#frame_preview{
position:relative; /* IE */
}
div {
width:400px;
height:400px;
/* So you can see what's going on easily
remove this later
*/
border:1px solid #ccc;
}
JS:
<script type="text/javascript">
$(window).addEvent('domready', function(){
var frameDivs = $$('#frame_preview div');
var navItems = $$('.nav li');
// Set style in JS for degradation
frameDivs.setStyles({
'position': 'absolute',
'left': 0,
'top': 0,
// Hide on first load
'opacity': 0
});
navItems.addEvent('mouseenter', function(){
// Fade out any div showing
frameDivs.fade('out');
// Fade in div with index equal to this list item
frameDivs[navItems.indexOf(this)].fade('in');
});
});
</script>
On Aug 16, 1:29 pm, Todd <[email protected]> wrote:
> Here's a working example of the old
> page,http://anoptic.com/demo/moo/old_version/index.html.
> If I could modify this so the preview divs are inserted with moo then
> I could keep the entire layout inline instead of using a stack of
> divs. Also, the divs that fade in are only images and are not critical
> to the navigation. The sidebar menu is in no way adversely affected by
> disabling js or images. The only thing that would be missing is a bit
> of eye-candy.
>
> Btw, I didn't write the code for the old page - I think it was
> generated by an action - so if the js appears messy or bloated that
> may be why. I'm guessing it could be greatly streamlined.
>
> Thanks
>
> On Aug 16, 9:11 am, "Steve Onnis" <[email protected]> wrote:
>
> > Can you show us an example of how it is currently working so we can see it
> > in action?
