Hi Matt and David, I made the changes to my example so that the <ul> element
is encapsulated in a <div> element. Now Effect.toggle using the 'slide'
option works as it should in FF3, IE7, Safari3, but does not work well in
Opera. For some strange reason, the Effect.toggle uses the 'blind' option
in Opera9 even though I call Effect.toggle with 'slide'. You can check out
the changes I made by going to http://icecreamcola.com/test/jsMenu.php. If
you test it in FF, IE, or Safari, you will notice the slide effect. If you
test it in Opera, you will notice the blind effect.
- Paul
On Fri, Oct 31, 2008 at 9:01 AM, Matt Foster <[EMAIL PROTECTED]> wrote:
>
> 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
-~----------~----~----~----~------~----~------~--~---
