Very nice!! That's exactly what I wanted to do, and so simple to
implement...marginTop! There was only one remaining problem and that
is that I'm hiding the element initially, so it's starting from
display:none, which is what I think hide() does. There is probably a
better way, but to unhide my hidden element I modified your plugin to:
jQuery.fn.slideToggleUp = function(speed, easing, callback) {
var h = 0;
if(this.css('display') == 'none'){
this.css('display','inherit');
h = this.height() + parseInt(this.css('paddingTop')) +
parseInt(this.css('paddingBottom'));
this.css('marginTop', -h);
}
h = this.height() + parseInt(this.css('paddingTop')) +
parseInt(this.css('paddingBottom'));
return this.animate({marginTop: parseInt(this.css('marginTop')) < 0 ?
0 : -h}, speed, easing, callback);
};
I think I will make the plugin wrap the sliding div in the container
div on the fly so as not to mark up my source unnecessarily. And I
just realized my version doesn't work in IE (couldn't get the display
property). Grrr. Oh, well, tomorrow.
A very nice solution and is every bit as smooth as mootools. Thanks
to you and to David for your help. I knew I would like JQ...great
community.
On Jan 26, 9:24 pm, Karl Swedberg <[EMAIL PROTECTED]> wrote:
> 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 Swedbergwww.englishrules.comwww.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
