Hey Rus,
I'm glad this is working for you and you were able to bend it to your
will!
I thought a bit about the 2 things you wanted to do differently and
came up with a slightly different approach.
To initially hide it, I think it makes more sense to set the marginTop
property, since that is the way we're hiding it when we do the
slideUpToggle. That'll keep the plugin a little leaner, too. Here is
what I came up with (also wrapping it with the outer div on the fly,
like you suggested):
// simple plugin method ...
jQuery.fn.slideToggleUp = function(speed, easing, callback) {
var 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);
};
// using the plugin ...
$(document).ready(function() {
var $box = $('#box-inner')
.wrap('<div id="box-outer"></div>');
$box.css({
marginTop: -($box.height() + parseInt($box.css('paddingTop')) +
parseInt($box.css('paddingBottom')))
});
$('#btn').click(function() {
$box.slideToggleUp('slow');
});
});
Again, the demo is at http://test.learningjquery.com/slide-up-toggle.html
Cheers,
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Jan 27, 2008, at 11:52 AM, Rus Miller wrote:
Found my IE problem:
this.css('display','inherit');
works when 'inherit' is changed to 'block'.
On Jan 26, 11:23 pm, Rus Miller <[EMAIL PROTECTED]> wrote:
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
