[jQuery] Re: Hover accordion (as on apple.com)
I added some styling to inverted accordion and changed functionality a little bit. Now there's no need hoverIntent plugin. Still there's some styling issues in IE6 It can be found on: http://www.bydot.net/hoveracc/hoveracc_4.htm @John Why callback in animation method doesn't work when using "step" function? -- Dragan Krstić krdr http://krdr.ebloggy.com/
[jQuery] Re: Hover accordion (as on apple.com)
I'm silly. Ignore my post. Just needed to put in an "if" statement that checked if there was more than 1 panel visible. If so, don't do anything on click. On Aug 2, 9:54 am, "Dragan Krstic" <[EMAIL PROTECTED]> wrote: > Last version of inverted accordion > on:http://www.bydot.net/hoveracc/hoveracc_3.htm > Enjoy... > > 2007/8/2, [EMAIL PROTECTED] <[EMAIL PROTECTED]>: > > > > > > > > @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 > > -- > Dragan Krstić krdrhttp://krdr.ebloggy.com/
[jQuery] Re: Hover accordion (as on apple.com)
Last version of inverted accordion on: http://www.bydot.net/hoveracc/hoveracc_3.htm Enjoy... 2007/8/2, [EMAIL PROTECTED] <[EMAIL PROTECTED]>: > > > > > @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 > > > -- Dragan Krstić krdr http://krdr.ebloggy.com/
[jQuery] Re: Hover accordion (as on apple.com)
> @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] Re: Hover accordion (as on apple.com)
@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 + "" ); On Aug 2, 4:01 am, "Dragan Krstic" <[EMAIL PROTECTED]> wrote: > @John > Why callback doesn't work with "step" function"? > > Anyway, "step" function opens whole new field of synchronized animations. > > -- > Dragan Krstić krdrhttp://krdr.ebloggy.com/
[jQuery] Re: Hover accordion (as on apple.com)
@John Thanks for jumping on this as I'm sure you have many more things to worry about in the jQuery world. It's very much appreciated. @Karl Kick-assity. I just had to note how awesome this word is. Nice work :-) On Aug 2, 4:01 am, "Dragan Krstic" <[EMAIL PROTECTED]> wrote: > @John > Why callback doesn't work with "step" function"? > > Anyway, "step" function opens whole new field of synchronized animations. > > -- > Dragan Krstić krdrhttp://krdr.ebloggy.com/
[jQuery] Re: Hover accordion (as on apple.com)
@John Why callback doesn't work with "step" function"? Anyway, "step" function opens whole new field of synchronized animations. -- Dragan Krstić krdr http://krdr.ebloggy.com/
[jQuery] Re: Hover accordion (as on apple.com)
@All:
Ok. Here's a final solution for inverted hover accordion. hoverIntent plug
in is must. Structure is same as I posted earlier. Later during I will
upload it on web.
var radi1 = true;
var kd_opened;
var to_hide;
var height_op;
jQuery.easing.easeout = function(p, n, firstNum, delta, duration)
{
return -delta * ((n=n/duration-1)*n*n*n - 1) +
firstNum;
}
function otvoriSliku()
{
if(!$(this).siblings(".naslov_stavke").is(":visible") && radi1 )
{
radi1 = false;
to_hide = $(this).siblings(".naslov_stavke");
to_hide.show().height(0);
kd_opened.animate({height:"hide"},
{step: function(n){
to_hide.height(Math.ceil(height_op-n));
if(n == 0){kd_opened = to_hide;radi1 =
true;}
},
duration: 500,
easing: "easeout"
});
}
}
$(document).ready(function()
{
kd_opened = $(".naslov_stavke:first");
height_op = kd_opened.height();
$(".naslov_stavke:not(:first)").hide();
$(".sadrzaj_stavke").hoverIntent({
sensitivity: 1,
interval: 50,
over: otvoriSliku,
out: function(){}
});
});
Easing function is taken from Interface. Differences from John's script
are:
1) John calculate height of opened "headers" before each animation. This
script calculates only once, on the beginning, to save some CPU cycles
2) Before animation, height of hidden "header" must be set to 0. This is
because of differences in behavior of inverted and real accordion.
3) In John script, if you try to click on "header" during animation, script
becomes nasty. Putting whole animation script in If(radi1) and checking with
if(n == 0){kd_opened = to_hide;radi1 = true;} I prevented run of new
animation before old one is finished.
@John:
You are such inspiration! Thanks man! Or: Hvala ti puno za sve , on my
native (Serbian)
[jQuery] Re: Hover accordion (as on apple.com)
Beautiful! Must be showcased! That easing effect give it a nice slick
finishing touch !
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of John Resig
Sent: jeudi 2 août 2007 0:36
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Hover accordion (as on apple.com)
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:
> >
> >
> >
> > Naslov stavke 1
> > Sadrzaj stavke 1
> >
> >
> >
> >
> > Naslov stavke 2
> > Sadrzaj stavke 2
> >
> >
> >
> > Naslov stavke 3
> > Sadrzaj stavke 3
> >
> >
> >
> > Naslov stavke 4
> > Sadrzaj stavke 4
> >
> >
> >
> > 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 . 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 :
> >
> > i = 0;
> > visine = new Array();
> > $(".sadrzaj_stavke").each(function(){visine[i]=$(this).position().to
> > p;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 i
[jQuery] Re: Hover accordion (as on apple.com)
First to thanks all on replays. I knew that my solution is not perfect, and I hoped that someone will find better solution (secretly John). @Justin We all fill the pain. My knowledge of jQuery still have boundaries, trick is to find way how to jump over it. @John, Mitch This looks and feels better than my solution. I knew that Apple use same heights, but that was "too" easy ;). Now I'll try to your accordion transform to inverted one. John, you prove me that jQuery have some secret possibilities that aren't documented (otherwise, they will not be secret :) ). One more thing: In hours of desperation, I tried to make it by mootools. I found mootools is much harder to learn. Last year I spent 3 hours from first opening of jQuery.com until I made tabbed navigation with content loaded via ajax.
[jQuery] Re: Hover accordion (as on apple.com)
Very nice - you even added audio! :-) --John On 8/2/07, Mitchell Waite <[EMAIL PROTECTED]> wrote: > I made the entire bar a hotlink, added an image and sound. > > http://www.whatbird.com/wwwroot/accord.html > > This is VERY easy to use. > > Oh and don't be mad, I made the easing linear, because, well that bouncing > is very cool and this is a great example of how it can be used. > > But after a while it gets like any over down effect...a bit old. > > Still its fantastic! > > >
[jQuery] Re: FW: [jQuery] Re: Hover accordion (as on apple.com)
If you add height: 300px; to the dl:
dl { width: 300px; height: 300px; }
it will do what I am talking about.
But I bet if I added any new it would need to be readjusted.
Ouch.
[jQuery] Re: Hover accordion (as on apple.com)
On 8/1/07, Mitchell Waite <[EMAIL PROTECTED]> wrote: > Nice update, the DD constant height is great. > > However, if you close the top menu the height still collapses. In my Spry > example > > http://www.whatbird.com/wwwroot/Components/Accordion%20Menu.html > > they get around that issue by making it so one menu must always remain open. > Can you see a way to add that restraint? Yep, done - just a simple if () statement: http://dev.jquery.com/~john/plugins/accord/ --John
[jQuery] Re: Hover accordion (as on apple.com)
Mitch - I just re-read your post and I think I replied incorrectly. But following up on it, the revised solution that I posted solves your problem completely. Let me know if it works for you. --John On 8/1/07, Mitchell Waite <[EMAIL PROTECTED]> wrote: > John > > Very sweet! > > This is almost perfect except for one thing, I think is critical. > > Try tripling the number of items in the first menu. When you click menu1 and > menu2 everything works fine, the height does not change. But when you click > menu3 the bottom of the menu rises up and the height changes. > > This looks strange and gives motion sickness. > > Is there a simple way to make the height of the accordion from top to bottom > a constant like the accordion example link I posted? > > I take my hat off for how elegant this little puppy is, most other solutions > are really complicated. > > Mitch > > -Original Message- > From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On > Behalf Of John Resig > Sent: Wednesday, August 01, 2007 4:36 PM > To: jquery-en@googlegroups.com > Subject: [jQuery] Re: Hover accordion (as on apple.com) > > > 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/ > > > > > >
[jQuery] Re: Hover accordion (as on apple.com)
> 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. I'm a little bit hesitant because I'm 95% certain that I'll be changing how the step callback works. Right now it's a pixel value (or a decimal if opacity), but it'll probably become just a decimal in 1.2 (a number 0 to 1, representing how far along the animation is). I'm sure this will make for a good 1.2 demo though, as it'll actually make the code for it simpler, I suspect. --John
[jQuery] Re: Hover accordion (as on apple.com)
I think you were using the wrong demo, because I just increased the number of items in the working demo and it still works wonderfully: http://dev.jquery.com/~john/plugins/accord/ If you're talking about increasing the number of LI items, no, it won't work - each of the children have to be a consistent height, otherwise it won't work. HOWEVER. If you give each DD a universal height, then it will work. I've updated the demo to add both more headers and different numbers of items, but with a consistent height. --John On 8/1/07, Mitchell Waite <[EMAIL PROTECTED]> wrote: > John > > Very sweet! > > This is almost perfect except for one thing, I think is critical. > > Try tripling the number of items in the first menu. When you click menu1 and > menu2 everything works fine, the height does not change. But when you click > menu3 the bottom of the menu rises up and the height changes. > > This looks strange and gives motion sickness. > > Is there a simple way to make the height of the accordion from top to bottom > a constant like the accordion example link I posted? > > I take my hat off for how elegant this little puppy is, most other solutions > are really complicated. > > Mitch > > -Original Message- > From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On > Behalf Of John Resig > Sent: Wednesday, August 01, 2007 4:36 PM > To: jquery-en@googlegroups.com > Subject: [jQuery] Re: Hover accordion (as on apple.com) > > > 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/ > > > > > >
[jQuery] Re: Hover accordion (as on apple.com)
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:
Naslov stavke 1
Sadrzaj stavke 1
Naslov stavke 2
Sadrzaj stavke 2
Naslov stavke 3
Sadrzaj stavke 3
Naslov stavke 4
Sadrzaj stavke 4
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 . 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 :
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/h
[jQuery] FW: [jQuery] Re: Hover accordion (as on apple.com)
John Very sweet! This is almost perfect except for one thing, I think is critical. Try tripling the number of items in the first menu. When you click menu1 and menu2 everything works fine, the height does not change. But when you click menu3 the bottom of the menu rises up and the height changes. This looks strange and gives motion sickness. Is there a simple way to make the height of the accordion from top to bottom a constant like the accordion example link I posted? I take my hat off for how elegant this little puppy is, most other solutions are really complicated. Mitch -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of John Resig Sent: Wednesday, August 01, 2007 4:36 PM To: jquery-en@googlegroups.com Subject: [jQuery] Re: Hover accordion (as on apple.com) 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/
[jQuery] Re: Hover accordion (as on apple.com)
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:
> >
> >
> >
> > Naslov stavke 1
> > Sadrzaj stavke 1
> >
> >
> >
> >
> > Naslov stavke 2
> > Sadrzaj stavke 2
> >
> >
> >
> > Naslov stavke 3
> > Sadrzaj stavke 3
> >
> >
> >
> > Naslov stavke 4
> > Sadrzaj stavke 4
> >
> >
> >
> > 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 . 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 :
> >
> > 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?
>
>
[jQuery] Re: Hover accordion (as on apple.com)
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:
>
>
>
> Naslov stavke 1
> Sadrzaj stavke 1
>
>
>
>
> Naslov stavke 2
> Sadrzaj stavke 2
>
>
>
> Naslov stavke 3
> Sadrzaj stavke 3
>
>
>
> Naslov stavke 4
> Sadrzaj stavke 4
>
>
>
> 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 . 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 :
>
> 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?
