You should put this example into mooshell.net (only cause it's cool to do so).
On Mon, Aug 17, 2009 at 3:21 AM, Jacob Gube <[email protected]> wrote: > > 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? >
