John,
Thank you so much for replying to this thread. Your demo looks
absolutely fantastic!
Justin asked me about this issue a while back on learningjquery.com,
and I had no idea where to even begin. The problem has been nagging
at me ever since, but since I didn't have anything helpful to offer,
I thought I'd keep my mouth shut.
I'm sure this will be a huge hit if people are made aware of it. Any
thoughts about putting it out for others to see? Maybe a blog post or
something? This is just one more great example of your crescent fresh
programming skills! Your kick-assity knows no bounds.
Cheers,
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Aug 1, 2007, at 7:36 PM, John Resig wrote:
I still see a little bit of flicker in that new code that you posted -
but I was just able to pull together a demo that works quite nicely.
So here's a new, working, accordion (albeit, a very simple one):
http://dev.jquery.com/~john/plugins/accord/
compare with the old code:
http://dev.jquery.com/~john/plugins/accord/old.html
Just a couple extra lines. There's three problems that had to be
solved, two were CSS, one was jQuery.
1) The "headers" had to have no margins. (When two margins are next to
each other, the margins collapse.
2) The "bodies" had to have no padding. (Unless, of course, you wanted
to animate the padding of the elements as well - but I find it easier
to just make the content inside the bodies have margins/padding).
3) When animating two properties, the numbers weren't being rounded
properly (e.g. body A would be 40.5px (rounded to 40px) and body B
would be 20.5px (rounded to 20px) - causing lots of weird jittering to
occur.
There's a hidden 'step' function in the jQuery animate function
(which, up until this point, I had little use for, and was considering
removing) that you can use to get the current number of pixels
processed for an animation. So you just compute the remainder, and you
get a smooth result.
This technique *requires* that the bodies all have equal heights (and
if you'll notice, in both Rico and Apple.com, they require that as
well) so that it looks smooth.
Additionally, I threw in a fun easing effect to make things nice and
awesome. Let me know what you guys think!
--John
On 8/1/07, Justin Sepulveda <[EMAIL PROTECTED]> wrote:
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?
