Finally. Someone else feels my pain. I had just posted a message to this group today about this as well. I just wish there was an easier way to remove that flicker/bounce that happens with the jQuery standard slideUp/slideDown. Having to call in that many scripts to get this effect seems pretty un-jQuery. But nice work!
On Aug 1, 11:18 am, [EMAIL PROTECTED] wrote: > 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 onhttp://www.bydot.net/hoveracc/hoveracc_2.htm > > PS How to start new threads directly from gmail?
