[jQuery] Re: slideToggle weirdness - also Easing question

[Karl Swedberg]

Hi Rus,
I'm sorry I didn't have time to reply sooner. I didn't see a link to a  
Mootools effect, so I'm not sure which one you're referring to, but I  
did look at the Interface slideUpToggle effect and tried to emulate it  
as quickly as possible. This is by no means a bullet-proof solution,  
and I'm sure you'll need to tweak it to suit your needs, but I thought  
I'd at least help you get started with something. With a little bit of  
jQuery and some CSS, you can pretty much mimic that effect. I put  
together a crude plugin with a demo here:

http://test.learningjquery.com/slide-up-toggle.html

Hope it helps.


--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Jan 26, 2008, at 6:30 PM, Rus Miller wrote:


David, you're right about Interface. It has problems, but then so does
Mootools as I found out when I hooked it up to the test page (it won't
un-toggle, something to do with the height of the element not being 0
I think).  Also, after running test after test with different styles
and markup I found there are many ways to mess everything up.  It's
very strange that mootools works perfectly on a fully marked-up and
CSS'd page on my new site.

The original problem was that I couldn't get the Interface toggle to
work on my completed page.  The problem there, of course, was that I
hadn't checked the version compatibility.  After reading your reply I
reverted to JQ 1.1.2 on that page, but...after firing the Interface
toggle event I got this error: too much recursion.  jQuery v1.2.2
worked like a champ, except that I don't like the effect itself.

It looks like Interface's slide method isn't quite ready yet and
because I like the Mootools effect better I think I'm going to stick
with Mootools for the time being for this effect...UNLESS...somebody
knows how to achieve the Mootools effect with jQuery.  Please?!?!?

For the easing problem, setting the default easing only works for
1.2.2.  There's probably an easy way to do it in 1.1.2 but I haven't
dug through the code.

That's all for now.  My brain hurts.


On Jan 26, 2:10 pm, David Serduke <[EMAIL PROTECTED]> wrote:
On Jan 25, 3:27 pm, Rus Miller <[EMAIL PROTECTED]> wrote:

1. JQ 1.2.2 & Interface.SlideToggleUp:

After the SlideToggleUp event, Firebug started logging a string of
errors and the script crashed in both FF and IE:
 this.options.curAnim has no properties
http://monovisiondesign.com/client/jquery/js/jquery-1.2.2.js
 Line 3217

I suspect most of your problems are caused by the inclusion of
interface.js.  Unfortunately it hasn't been updated since release 1.2
so it causes problems.  There is work going on ui.jquery.com which
should eventually replace it (although it has some quirks of its
own).  Try taking out that file and see how it looks.

2. JQ 1.1.2. & Interface.SlideToggleUp:

No errors.  But in FF there is a flicker or a jump when the event
fires.  In both FF and IE there is some funkiness with the element
width and/or height.  I saw a post somewhere that suggested setting
the height to 'auto' in the callback function but that didn't work.

I'm afraid 1.1.2 is before my time so I'm not sure what's going on
here.

3. JQ 1.2.2 / 1.1.2 & JQ.slideToggle:

Smooth sailing in FF, (except for the effect itself (the eclipse of
the element)).  However, very jumpy in IE, with the text popping  
up to
the top of the div before being eclipsed.

Again I think a lot of this is because interface.js is included in
your file.  Try taking it out.  I still see some strange behavior
without it but it helps a lot.  Try adding this to your html file too
for the last IE problem.

<style type="text/css">
 p { margin:1em 0; }
</style>

I also attempted to use the jQuery.easing plugin.  On its website
(http://gsgd.co.uk/sandbox/jquery/easing/) instructions stated that
the default JQ easing method could be set thusly:  
jQuery.easing.def =
'easeInBounce';

It should work if you take interface.js out.

I don't know how many of these problems are my inexperience with JQ
and/or Interface, or one or the other not being quite ready for  
prime
time (I don't mean that offensively).  Any assistance would be very
much appreciated.  I do like JQ's style much better than Prototype  
or
Mootools but it seems that compatibility issues still exist across
browsers and plugins.

jQuery is used all over the place but that certainly doesn't mean it
is bug free.  Plus there are quirks that just does seem worth the  
code
necessary/performance hit to fix it.  I've never seen this particular
issue with slide where the default margins on a paragraph in IE
somehow mess up the height calls during an animation.  I guess I
usually set my own margin so I haven't seen it.

In any case try those two changes and see if that fixes your
problems.  It seemed to work in my tests.

Good luck. :)

David