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.htmlor take 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
-~----------~----~----~----~------~----~------~--~---
