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_stavke">Naslov stavke 1</a>
<div class="sadrzaj_stavke">Sadrzaj stavke 1</div>
</div>
</li>
<li>
<div class="omot">
<a class="naslov_stavke">Naslov stavke 2</a>
<div class="sadrzaj_stavke">Sadrzaj stavke 2</div>
</div>
</li>
<li>
<div class="omot"> <a class="naslov_stavke">Naslov stavke 3</a>
<div class="sadrzaj_stavke">Sadrzaj stavke 3</div>
</div>
</li>
<li>
<div class="omot"> <a class="naslov_stavke">Naslov stavke 4</a>
<div class="sadrzaj_stavke">Sadrzaj 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?
