It bites us all, me rather often. :D On Thu, Jul 22, 2010 at 3:21 PM, giantdrummerboy <[email protected]>wrote:
> Great, thanks. I also managed to get it to work this way: > > http://mootools.net/shell/zDLSV/ > > I should've tried harder before posting here :-/ I'm just a total > JavaScript noob and didn't think I could figure it out on my own. > This stuff is deceptively simple sometimes. > > On Jul 22, 2:03 pm, Paul Saukas <[email protected]> wrote: > > Yep seehttp://mootools.net/shell/m3ngD/31/ > > > > On Thu, Jul 22, 2010 at 2:55 PM, giantdrummerboy > > <[email protected]>wrote: > > > > > I'm using this bit of code for a page, and I was wondering if there > > > would be a way to set one of the pictures to be visible when the page > > > loads. > > > > > On Aug 17 2009, 5:21 am, Jacob Gube <[email protected]> wrote: > > > /snip/ > > > > 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 .navlist 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(){ > > > > varframeDivs = $$('#frame_preview div'); > > > > varnavItems= $$('.navli'); > > > > // 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> > > > > > Here is the jsfiddle for this example: http://mooshell.net/m3ngD/ >
