Comments on: Mootools: playing with height-transitions

By: Mootools - 40 przykładowych zastosowań | Ptaszor i jego blog! Lol...

Mootools - 40 przykładowych zastosowań | Ptaszor i jego blog! Lol... — Wed, 06 Feb 2008 11:02:37 +0000

[...] Dynamiczna zmiana wysokości elementu (mootools) [...]

By: Casey

Casey — Wed, 16 May 2007 08:16:40 +0000

Thanks for this nice tut.
I’m curious how difficult would it be to use this in *Fx.Slide instead of *Fx.Style so the added effects (bounce, etc.) can be achieved?

By: Jay

Jay — Mon, 26 Mar 2007 11:38:08 +0000

ignore that last comment it works fine in safari!

By: Jay

Jay — Mon, 26 Mar 2007 11:34:22 +0000

..can’t get this working in safari though… could you take another look at it Bas?

By: Jay

Jay — Mon, 26 Mar 2007 11:19:09 +0000

Thanks Bas ..really helpful.

Re the Javascript disabled issue: There is a simple css fix for this – add height:100%; below the first c1, c2 statement ie:

#c1,#c2{
height:0px;
margin:0;
padding:0;
overflow:hidden;
}
#c1 {
height:100%;
}

you could use height ‘auto’ also (depends on your layout / ie6 box model issues).

By: Juan

Juan — Wed, 14 Mar 2007 04:47:39 +0000

Hey there Bas, a while back you helped me with creating a function to change the color of the currently opened tab’s button.

Of Course that was before the 1.0 version of Mootools was added to the scripts.
Wanted to know if you could help once again, to help me achieve that same effect. from before.
Let me know.
Thanks, A LOT!
Great work as always.

By: Torbjørn

Torbjørn — Tue, 27 Feb 2007 18:53:09 +0000

Hello guys. To Tdaf:

The code under could probably work for your problem “If not javacript is enabled”.

b1Toggle.hide(); is the trick:

window.onload = function(){


	var button1 = $('button1');

	var content1 = $('contentElement1');
	var b1Toggle = new Fx.Style('contentElement1', 'height', {duration: 700});
	b1Toggle.hide();
	button1.addEvent('click', function()

	{
		if(content1.getStyle('height').toInt() > 0)

		{

			b1Toggle.start(0);

		}

		else

		{

			b1Toggle.start(c1Height);

		}
		return false;

	});
	content1.setStyle('display','block');
	var c1Height = content1.getSize().scrollSize.y;

};

The bad thing is that the inline style “display: none” has to go.. so there will probably be some flickering.

You also have to remove the “height: 0;” from #contentElement1

By: brodie

brodie — Sun, 25 Feb 2007 18:10:14 +0000

H – why don’t you copy the source code from the page and just change the layout/css to your own style?

By: brodie

brodie — Sun, 25 Feb 2007 17:19:26 +0000

Hi Bas, first off, fantastic site and work! really impressed and inspired by it.
im working on a site and i’ve hit a brick wall with your accordion script and cmotion image gallery from Dynamic Drive.

I’ve put the two examples with both effects here to make it clear:

motion gallery -

http://nb015a9938.pwp.blueyonder.co.uk/jc/accordion.html

and the accordion effect -

http://nb015a9938.pwp.blueyonder.co.uk/jc/accordion2.html

When the two are on the same page the accordion effect ceases to work, and the only script that prevents it is the motiongallery.js (by process of elimination)

(there is a fade.js dependant on what i believe is an older version of mootools.js which also has to be removed for the accordion.js to see the mootools.v1.00.js but i don’t think its where the conflict lies)

I would greatly appreciate any help with this.

Thanks in advance,

Brodie

By: H

Mon, 19 Feb 2007 23:42:57 +0000

Does anyone know where I can find a good example of the fx.Slider effect for MooTools v1.0. I have already poured over the mootoosl.net documentation and as I am such a nooob cannot make head or tail of it… I wish some one would create a simple example that creates he same effect as the left hand menu on mootools.net. It is such a commonly used effect that in my opinion adds a lot of value when used in the correct context. I would really appreciate any help anyone could offer me.