Effect.Slide needs an immediate child to perform the clipping
necessary for the effect.




On Oct 31, 9:56 am, "Paul Kim" <[EMAIL PROTECTED]> wrote:
> Thanks for the solution David. Do you have any idea why this worked for
> Opera when the <ul> element wasn't encapsulated inside a <div> element? -
> Paul
>
> On Fri, Oct 31, 2008 at 4:42 AM, david <[EMAIL PROTECTED]> wrote:
>
> > Hi Paul,
>
> > You'll have to change the HTML to:
> > <div class="menu">
> >  <h3 id="menu-head">RECENTLY</h3>
> >   <div id="menu-div">
> >   <ul id="menu-body">
> >    <li>Menu List 1</li>
> >    <li>Menu List 2</li>
> >    <li>Menu List 3</li>
> >    <li>Menu List 4</li>
> >    <li>Menu List 5</li>
> >    <li>Menu List 6</li>
> >    <li>Menu List 7</li>
> >    <li>Menu List 8</li>
> >  </ul>
> >  </div>
> > </div>
>
> > and the toggle function to:
> > function toggleMenu() {
> >  if ($('menu-head').getStyle('background-image').include('img/
> > sidebarh3bg.jpg') && $('menu-head').getStyle('background-
> > position')=='0px 0px') {
> >     //Effect.toggle('menu-body', 'blind', {duration: 0.75});
> >    Effect.toggle('menu-div', 'slide', {duration: 0.5});
> >     Element.setStyle.delay(0.5, $('menu-head'), {background:'url(img/
> > sidebarh3bg.jpg) no-repeat -165px 0px', cursor:'pointer'});
> >  }
> >  else {
> >     //Effect.toggle('menu-body', 'blind', {duration: 0.75});
> >    Effect.toggle('menu-div', 'slide', {duration: 0.5});
> >     Element.setStyle.delay(0.5, $('menu-head'), {background:'url(img/
> > sidebarh3bg.jpg) no-repeat 0px 0px', cursor:'pointer'});
> >  }
> > }
>
> > In your exemple only the first li is slide, because the slide effect
> > take the first descendant to slide. So you need to encapsulate the ul
> > code inside a div (for exemple) and call the slide effect onto the div
> > level.
>
> > --
> > david
>
> > On 31 oct, 05:23, kimbaudi <[EMAIL PROTECTED]> wrote:
> > > Hi, I was inspired byhttp://
> >www.exit404.com/2005/57/unobtrusive-persistant-scriptaculous-e...
> > > to create a menu that would expand and contract the menu whenever I
> > > click on the menu header.  Instead of using Effect.BlindDown and
> > > Effect.BlindUp, I decided to use Effect.toggle to toggle the unordered
> > > list when I click on the menu header. I decided to use the slide
> > > effect for Effect.toggle, but found that it is buggy in FF3, IE7,
> > > Safari3 and works as it should in Opera9.  It seems that adding
> > > Effect.toggle to <ul> is problematic.  You can check out my result
> > athttp://icecreamcola.com/test/jsMenu.htmlortake a look at some code
> > > below:
>
> > > [html]
> > > <div class="menu">
> > >         <h3 id="menu-head">RECENTLY</h3>
> > >         <ul id="menu-body">
> > >                 <li>Menu List 1</li>
> > >                 <li>Menu List 2</li>
> > >                 <li>Menu List 3</li>
> > >                 <li>Menu List 4</li>
> > >                 <li>Menu List 5</li>
> > >                 <li>Menu List 6</li>
> > >                 <li>Menu List 7</li>
> > >                 <li>Menu List 8</li>
> > >         </ul>
> > > </div>
> > > [/html]
>
> > > [script]
> > > function toggleMenu() {
> > >         if ($('menu-head').getStyle('background-image').include('img/
> > > sidebarh3bg.jpg') && $('menu-head').getStyle('background-
> > > position')=='0px 0px') {
> > >                 Effect.toggle('menu-body', 'slide', {duration: 0.5});
> > >                 Element.setStyle.delay(0.5, $('menu-head'),
> > {background:'url(img/
> > > sidebarh3bg.jpg) no-repeat -165px 0px', cursor:'pointer'});
> > >         }
> > >         else {
> > >                 Effect.toggle('menu-body', 'slide', {duration: 0.5});
> > >                 Element.setStyle.delay(0.5, $('menu-head'),
> > {background:'url(img/
> > > sidebarh3bg.jpg) no-repeat 0px 0px', cursor:'pointer'});
> > >         }}
>
> > > [/script]
>
> > > - Paul
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to