[jQuery] Re: Accordion adventures

[krdr . mft]

It seems that problem is caused by using easing function. When easeing
property in animation method is set on linear, there's no jumping.

On Aug 20, 8:29 pm, Dragan Krstic [EMAIL PROTECTED] wrote:
 Due to popular demand (Mikael ;) )  I decided to rewrite my invert accordion
 script into plug in.
 Original code is onhttp://www.bydot.net/hoveracc/
 But,
 First incarnation of script (ver 0.0.1) shows old problem. Accordion is
 dancing.
 Demo can be found on:http://www.bydot.net/iccordion/

 PS What you think about name iCcordion from Inverted Accordion, also i is
 connection to Apple as they inspired me to make it

 --
 Dragan Krstić krdrhttp://krdr.ebloggy.com/

[jQuery] Re: Hover accordion (as on apple.com)

[krdr . mft]

 @John
 One more thing.  I'm getting a serious amount of JavaScript errors,
 the same error repeated over and over.  It seems to happen when i
 click on a tab while another tab is open.

 jquery.js (line 321)
 too much recursion
 [Break on this error] fn.constructor != Array  /function/i.test( fn
 +  );

It happens when you click on header during animations. Take a look on
3) in my previous post. Browser cannot handle so many recursions

[jQuery] Hover accordion (as on apple.com)

[krdr . mft]

My company redesigns a web site. Our head designer (as apple fan)
decided to put nasty inverted hover accordion on new site. So,
yesterday I started to develop a prototype:
http://www.bydot.net/hoveracc/hoveracc_1.htm

Structure is:
ul
  li
div class=omot
a class=naslov_stavkeNaslov stavke 1/a
  div class=sadrzaj_stavkeSadrzaj stavke 1/div
/div
  /li
  li
div class=omot
a class=naslov_stavkeNaslov stavke 2/a
  div class=sadrzaj_stavkeSadrzaj stavke 2/div
/div
  /li
  li
div class=omot a class=naslov_stavkeNaslov stavke 3/a
  div class=sadrzaj_stavkeSadrzaj stavke 3/div
/div
  /li
  li
div class=omot a class=naslov_stavkeNaslov stavke 4/a
  div class=sadrzaj_stavkeSadrzaj stavke 4/div
/div
  /li
/ul
where naslov_stavke is part that should be hidden or shown, and
sadrzaj_stavke is always visible. Omot means wrap.
It took me about half an hour to make this piece, but, there's a
flicker that our designer didn't like.
Never mind if you can do it by jQuery. We will copy from apple.com.

Yeah, sure...

So, I spent next 6 hours yesterday and 4 today to find solution.
Actually, my idea was same all the time: to fixate elements by
position: absolute and top property. Here he the list of problems I
had to solve:
1) How to obtain consistency of li elements and children's. I did it
with div class=omot. In some time of development it was crucial to
have this div. Now, it isn't important, but it can help with styling.
2) On which container element to position:relative. The best solution
is to put on ul element that contains inverted accordion
3) How to remove position and top properties. There's no mention about
that in documentation
4) How to obtain proper top values for elements that should not move.
First, I wanted to do it just for elements that must remain static.
This will be done after each hover. Then, I decided to recalculate
top's for each div class=sadrzaj_stavke:

i = 0;
visine = new Array();
$(.sadrzaj_stavke).each(function(){visine[i]=$(this).position().top;i
++;});

which gives me wrong results all the time.

In one moment I have two perfectly working scripts, but one worked in
up direction, second one in down direction :)
Finally, I decide to put in work original idea to calculate top's, and
that's working perfectly (I abandoned this idea because I wanted to
make more flexible script)

Minor problems will be masked with images and css.

This solution can be generally used to solve jQuery animation quirks.
It can be found on http://www.bydot.net/hoveracc/hoveracc_2.htm

PS How to start new threads directly from gmail?