Comments on: Simple jQuery Accordion tutorial http://dev.iamntz.com/166/jquery-accordion-tutorial Stuff about CSS, XHTML, Javascript and jQuery Thu, 26 May 2011 06:45:55 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: Inline Expansion – Why And Where To Use It | Spyre Studios http://dev.iamntz.com/166/jquery-accordion-tutorial/comment-page-1#comment-2461 Inline Expansion – Why And Where To Use It | Spyre Studios Thu, 03 Jun 2010 16:06:22 +0000 http://dev.iamntz.com/?p=166#comment-2461 [...] Simple jQuery Accordion Tutorial [...] [...] Simple jQuery Accordion Tutorial [...]

]]> By: WorldConnect weblog » seo&web design links http://dev.iamntz.com/166/jquery-accordion-tutorial/comment-page-1#comment-2302 WorldConnect weblog » seo&web design links Wed, 18 Nov 2009 13:10:43 +0000 http://dev.iamntz.com/?p=166#comment-2302 [...] http://www.seowebtools.ro/ [...] [...] http://www.seowebtools.ro/ [...]

]]> By: Marcio http://dev.iamntz.com/166/jquery-accordion-tutorial/comment-page-1#comment-2266 Marcio Fri, 11 Sep 2009 00:57:17 +0000 http://dev.iamntz.com/?p=166#comment-2266 Please Help me How to Open First Accordion "LOJA VIRTUAL" http://garimpoeditorial.com.br/index.php/ Please Help me

How to Open First Accordion “LOJA VIRTUAL”

http://garimpoeditorial.com.br/index.php/

]]> By: Viorel http://dev.iamntz.com/166/jquery-accordion-tutorial/comment-page-1#comment-1433 Viorel Tue, 14 Apr 2009 14:18:33 +0000 http://dev.iamntz.com/?p=166#comment-1433 More details about the box model and IE's "traditional" problems <a href="http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug" rel="nofollow">on Wikipedia</a>. You're welcome. :) More details about the box model and IE’s “traditional” problems on Wikipedia.

You’re welcome. :)

]]> By: Ionut Staicu http://dev.iamntz.com/166/jquery-accordion-tutorial/comment-page-1#comment-1432 Ionut Staicu Tue, 14 Apr 2009 14:14:35 +0000 http://dev.iamntz.com/?p=166#comment-1432 <blockquote>As for padding and dimensions, the W3C DIV box model clearly differentiates the width, height, padding, margin, border and outline. </blockquote> Hmm... I didn't know that :| Thanks!

As for padding and dimensions, the W3C DIV box model clearly differentiates the width, height, padding, margin, border and outline.

Hmm… I didn’t know that :| Thanks!

]]> By: Viorel http://dev.iamntz.com/166/jquery-accordion-tutorial/comment-page-1#comment-1431 Viorel Tue, 14 Apr 2009 13:40:20 +0000 http://dev.iamntz.com/?p=166#comment-1431 About the first part of your reply, sorry for reading "diagonally" through your post and skipping directly to the example. That's what I did and that's why I missed that detail. :) As for padding and dimensions, the W3C DIV box model clearly differentiates the width, height, padding, margin, border and outline. jQuery has no way of resizing the padding and margin values proportionally with the height as it's being animated, that's why you shouldn't use either for animated containers, but add padding or margins to elements inside them. About the first part of your reply, sorry for reading “diagonally” through your post and skipping directly to the example. That’s what I did and that’s why I missed that detail. :)

As for padding and dimensions, the W3C DIV box model clearly differentiates the width, height, padding, margin, border and outline. jQuery has no way of resizing the padding and margin values proportionally with the height as it’s being animated, that’s why you shouldn’t use either for animated containers, but add padding or margins to elements inside them.

]]> By: Ionut Staicu http://dev.iamntz.com/166/jquery-accordion-tutorial/comment-page-1#comment-1429 Ionut Staicu Tue, 14 Apr 2009 11:50:38 +0000 http://dev.iamntz.com/?p=166#comment-1429 Hi Viorel, thanks for comment!

I noticed that during animations, hover events are randomly “skipped” in the elements above the current animation.

Is not a bug. There is a condition there to return false if there is anything animated. If you are not happy with this you are free to remove it, but i think this is better because you avoid the problems you exposed in your first paragraph :)

Besides that, i specify that you can use any event available. I put hover only for demo :P

The “jump jQuery bug” is actually not a bug. When resizing via animation, jQuery uses only the height of the elements, not their padding or margin. Inside the DD, you should add some other elements (such as Paragraphs) with margin or padding, to keep the animated DD without them.

Well… Because padding directly affects the height and width of a box, i think that missing is a little bug :)

]]> By: Viorel http://dev.iamntz.com/166/jquery-accordion-tutorial/comment-page-1#comment-1428 Viorel Tue, 14 Apr 2009 11:44:35 +0000 http://dev.iamntz.com/?p=166#comment-1428 Placing the accordion effect on a hover event is problematic, because of the fact that the active event areas might overlap during the animation, and trigger other unwanted events. E.g. expand the first box, then keep your mouse over the "Some menu" text, without moving it. Secondly, I noticed that during animations, hover events are randomly "skipped" in the elements above the current animation. E.g. expand the last box then move the mouse constantly upwards during that expansion animation - no other boxes expand in that timeframe. So there you have it - two solid reasons why the accordion should be set to a click event. P.S. The "jump jQuery bug" is actually not a bug. When resizing via animation, jQuery uses only the height of the elements, not their padding or margin. Inside the DD, you should add some other elements (such as Paragraphs) with margin or padding, to keep the animated DD without them. Placing the accordion effect on a hover event is problematic, because of the fact that the active event areas might overlap during the animation, and trigger other unwanted events. E.g. expand the first box, then keep your mouse over the “Some menu” text, without moving it.

Secondly, I noticed that during animations, hover events are randomly “skipped” in the elements above the current animation. E.g. expand the last box then move the mouse constantly upwards during that expansion animation – no other boxes expand in that timeframe.

So there you have it – two solid reasons why the accordion should be set to a click event.

P.S.

The “jump jQuery bug” is actually not a bug. When resizing via animation, jQuery uses only the height of the elements, not their padding or margin. Inside the DD, you should add some other elements (such as Paragraphs) with margin or padding, to keep the animated DD without them.

]]> By: T-Law http://dev.iamntz.com/166/jquery-accordion-tutorial/comment-page-1#comment-1425 T-Law Fri, 10 Apr 2009 14:52:03 +0000 http://dev.iamntz.com/?p=166#comment-1425 It's awesome effect, can you show me how to integrate this to wordpress? It’s awesome effect, can you show me how to integrate this to wordpress?

]]>