[jQuery] Delay submenu from hidding
What I would like to have, is that once you have taken your mouse off
the sub menu that it remains visible for a couple of second before
disappearing.
I got it to work, but there's still an issues that I would fix. You
can see an example here -> [url]http://tijmensmit.com/dev/jquery/
menu.html[/url]
It will only work for the about item. If the active-subnav class is
present on the ul for the sub nav you will see a nice pink border.
The problem is that once you have taken your mouse off the subnav and
quickly go back again, it still removes the class from the UL. You can
hover over the ul all you want, but it won't put the class back on the
ul, unless you actually hover over the li in the subnav.
So why would hovering over the li in the subnav make jquery place the
active-subnav class back on to the ul, while hovering over the ul
itself without moving over the li's has no effect?
The first line of code cleary says if you hover over the li.test,
ul.second-nav, ul.second-nav li add the class. But the hovering over
the ul.second-nav doesn't seem to have any effect?
Or am I doing this completely the wrong way?
[code]
$(document).ready(function() {
$('#navigatie li.test, ul.second-nav, ul.second-nav li').hover
(function() {
$('ul.second-nav').addClass('active-subnav');
}, function() {
var elem = $('ul.second-nav');
setTimeout( function() {
$(elem).removeClass("active-subnav");
}, 3000);
});
});
[/code]
[jQuery] hover on image flickers.
I was playing around with jQuery and this gallery. The idea is that it shows a bigger image on hover. That part works, but the image just won't stop flickering once you move your mouse over it. I really don't see why it flickers. Why does it do that, and how would I be able to fix it? http://tijmensmit.com/dev/gallery.html Regards, Tijmen
[jQuery] how to select all first td's inside all in a table
I have a table that contains several , all of them look like
this.
20-04
459
559
659
439
519
599
424
489
554
27-04
506
606
706
486
566
646
471
536
601
One of the things that I would like to do is add the class "date" to
the first td that exists after a .
I came up with this -> $("#prijslijst-appartement tr td:eq
(0)").addClass("date"); , but that doesn't really do what I thought It
would. It only adds the date class to one td, and it ignores all the
other in the table. What I was hoping it would do is finding all
, and then add the date class to the first in all the in
the entire table.
You can see the example here -> http://tijmensmit.com/dev/td/prijslijst.html.
The one with the date class on it has the pink border around it.
Its not only the first which I should target, the 3th, 6th and
9th within each should also be given a different class.
What would be the best way to do this, and to make sure it looks in
all in the entire table, and not stops after the first one?
Thanks,
Tijmen
[jQuery] Re: show/hide opacity gets stuck sometimes
Thanks a lot :)
The clearQueue option for the stop() did the trick, for some reason I
completely missed it on docs.jquery.com
On Dec 9, 6:04 pm, Leanan <[EMAIL PROTECTED]> wrote:
> I've never worked with the .stop function before, so I searched for it
> in google (jquery .stop) to read up on it to see if that might shed
> some light... One of the very first links I found was this:
>
> http://www.pengoworks.com/workshop/jquery/stop_bug.htm
>
> Glancing over it, I think this is what is causing your problem. The
> individual who created that page links to a patch they created for the
> issue, and has a fairly straightforward demonstration. Hope that
> helps.
>
> On Dec 9, 11:11 am, Tijmen Smit <[EMAIL PROTECTED]> wrote:
>
> > I'm working on a page where once you hover over a small photo, a
> > bigger photo should appear underneath it with a small text. The box
> > holding the photo does appear, and once you slowly move towards
> > another photo it works fine.
>
> > But once you quickly move from the top left to the top right, it get a
> > bit weird. Sometimes the box with the big photo disappears completely
> > or it get stuck with the opacity not set to full visibility.
>
> > And in IE7 there's another thing going on, the moment you place your
> > mouse on the small photo it first seems to be disappearing, but it
> > later does come up the way its supposed to be. I did set the z-index
> > on both of the div's, but I have the feeling it doesn't have anything
> > to do with the z-index.
>
> > You can see it in action here
> > ->http://www.tijmensmit.com/dev/intranet/test.html
>
> > $("#smoelenboek li").hover(function() {
> > var $list_class = $(this).attr("class");
> > $("#smoelenboek").find('li.' + $list_class).addClass
> > ("on");
> > $(this).find("div").stop().animate({opacity: "show", top:
> > "30px"}, "slow");
> > }, function () {
> > $(this).find("div").stop().animate({opacity: "hide", top:
> > "20px"}, "fast");
> > $("#smoelenboek li").removeClass("on");
>
> > });
>
> > I know I could change the .stop().animate() to a simple .hide()/.show
> > (), which works fine. But I would like to keep the animate & opacity
> > effect, but then without them sometimes disappearing :)
>
> > Any idea's how to fix this problem?
>
> > Thanks!
> > Tijmen
[jQuery] show/hide opacity gets stuck sometimes
I'm working on a page where once you hover over a small photo, a
bigger photo should appear underneath it with a small text. The box
holding the photo does appear, and once you slowly move towards
another photo it works fine.
But once you quickly move from the top left to the top right, it get a
bit weird. Sometimes the box with the big photo disappears completely
or it get stuck with the opacity not set to full visibility.
And in IE7 there's another thing going on, the moment you place your
mouse on the small photo it first seems to be disappearing, but it
later does come up the way its supposed to be. I did set the z-index
on both of the div's, but I have the feeling it doesn't have anything
to do with the z-index.
You can see it in action here ->
http://www.tijmensmit.com/dev/intranet/test.html
$("#smoelenboek li").hover(function() {
var $list_class = $(this).attr("class");
$("#smoelenboek").find('li.' + $list_class).addClass
("on");
$(this).find("div").stop().animate({opacity: "show", top:
"30px"}, "slow");
}, function () {
$(this).find("div").stop().animate({opacity: "hide", top:
"20px"}, "fast");
$("#smoelenboek li").removeClass("on");
});
I know I could change the .stop().animate() to a simple .hide()/.show
(), which works fine. But I would like to keep the animate & opacity
effect, but then without them sometimes disappearing :)
Any idea's how to fix this problem?
Thanks!
Tijmen
[jQuery] png and black backgrounds in IE7
I read quite a bit about this problem, and there doesn't seem to be a
good fix. But it have the impression that the only reason why Ie7
shows the black background is because of the change in the opacity
during the animation.
This is the code that I have right now. I try'd to change the
opacity:"show" into opacity"0.9", so that the opacity wouldn't be
changed during the animation. But that didn't really work, actually
the whole animation stopped working.
What would I need to change in the code to make the opacity remain the
same? Just writing 0.9 instead of "show" doesnt seem to work?
$(".active-date a").hover(function() {
$(this).next("div").animate({opacity: "show", top: "-75"},
"slow");
}, function() {
$(this).next("div").animate({opacity: "hide", top: "-85"},
"fast");
});
Thanks :)
