Develop Reference

Show related div when link is clicked

I created a ul containing li elements. I want to to slide down a div when a link in the same li is clicked.
The problem is when I click the link all divs are shown.
I use PHP for setting the id on each link.
The html code is here:
<li class='post'>
<div class='link'>
</div>
<div class='slidedown'>//here is what I want to sliding</div>
</li>
The jQuery code is here :
$(".link a").click(function(){
var id_post = $(this).attr("id");
$(".slidedown").slideDown("slow");
return false;
});

You can do it even more easy:
jQuery
$('.link').on('click', function() {
$(this).parent().find('.slidedown').slideDown('slow');
});
Or you use:
$('.link a').on('click', function() {
$(this).closest('.slidedown').slideDown('slow');
});
Go to .closest() or .parent() at jQuery Docs to learn more.

Here's the code that works well:
$(".link").click(function(){
$(this).siblings('.slidedown').slideDown('slow');
});

You can use parent() to move up a level and next() to target the next sibling:
$(".link a").click(function(){
$(this).parent(".link").next(".slidedown").slideDown("slow");
return false;
});
Or you can access the .post using closest() and target the .slidedown using find() or children():
$(".link a").click(function(){
$(this).closest(".post").find(".slidedown").slideDown("slow");
return false;
});

Use .parent() to move up one parent. Since the container were looking for is the .post we'll have to move up 2 parents. Then we can find the child of it that is .slidedown and slide that one down with .slideDown()
$(".link a").click(function(){
$(this).parent().parent().children('.slidedown').slideDown("slow");
});

How to tell Jquery to run only the last mouseenter event?

I have set of slides and I want to enlarge a photo when a mouse enter on to a slide image.
When I bring the mouse over images all of the images enlarge to the order which I brought the mouse. How I can force jquery to only excete the last mouse enter event and cancel all history mouse enter events?
This is my jquery code.
$(document).ready(function(){
$("#hoverslider ul li").bind("mouseenter",function(){
$(this).animate({
width:"500px"
},"slow");
$(this).addClass("active");
$("#hoverslider ul li:not(.active)").animate({
width:"141px"
});
})
$("#hoverslider ul li").bind("mouseleave",function(){
$(this).animate({
width:"213px"
},"slow");
$(this).removeClass("active");
$("#hoverslider ul li:not(.active)").animate({
width:"213px"
});
});
});
Please help me to go through this. Thanks!!

You could initially stop all the animations in the mouse enter and animate the image where the mouse is currently in, But keep in mind that you should not stop the animations (all the elements, not the individual) before starting it in the mouseleave, Because it will help the element to revert back to the older state.
WORKING DEMO
Try this out,
$(document).ready(function(){
$("#hoverslider ul li").bind("mouseenter",function(){
$("#hoverslider ul li").stop();
$(this).stop().animate({
width:"500px"
},"slow");
$(this).addClass("active");
$("#hoverslider ul li:not(.active)").stop().animate({
width:"141px"
});
})
$("#hoverslider ul li").bind("mouseleave",function(){
$(this).stop().animate({
width:"213px"
},"slow");
$(this).removeClass("active");
$("#hoverslider ul li:not(.active)").stop().animate({
width:"213px"
});
});
});

You can use setTimeout() to trigger enlarge animation. In mouseenter event handler use clearTimeout() to cancel previous animation if it hasn't already started.
This way quick mouse move won't trigger all images to enlarge.

I'm not fully understanding your question, but it seems that you could use the hover method this way
$( "#hoverslider ul li" ).hover(
function(){
$(this).animate({
width:"500px"
},"slow");
$(this).addClass("active");
$("#hoverslider ul li:not(.active)").animate({
width:"141px"
});
},
function(){
$(this).animate({
width:"213px"
},"slow");
$(this).removeClass("active");
$("#hoverslider ul li:not(.active)").animate({
width:"213px"
});
}
);
See it online
http://jsfiddle.net/augusto1982/At8XR/
If this is not what you need, please, let me know and I'll fix it.

You can use underscore helper method debounce
http://underscorejs.org/#debounce
This will create a wrapper of your callback, and only call it once every x seconds while you still call it. That means, that you can have many mouse enter and the method is only going to be called once, and only after x seconds that no mouse enter is registered the function is ready to be called again.

You should use jQuery's on method to add events, rather than the older bind method. You can then disable event handlers using the off method.

How can I over-ride the click of each LI in jQuery?

I have the following UL:
<ul class="xbreadcrumbs" style="position:absolute; bottom:0px">
<li>A Crumb</li>
</ul>
This is being dynamically created by my javascript. How can I override the click for each LI that is inside of a UL called xbreadcrumbs in jQuery and have it do something instead of go to a new hyperlink?
Also, how can I get the behavior to be different for each li?
Updated:
$.each('.xbreadcrumbs li', function(){
$(this).live('click',function(e){
e.stopPropagation();
console.log('clicked for each li');
});
});

Live is part of the answer, the other part of the answer is that you need to use the event's target property to know which element was actually clicked.
$('.xbreadcrumbs li').live('click', function(e){
e.preventDefault();
console.log('Clicked on element', e.target);
});

Once you add the ul dynamically to the DOM you could subscribe to the .click() event of the inner lis:
$('.xbreadcrumbs li').click(function() {
// do something when the li is clicked
});

you'll have to use the .live() function so that dynamically created elements get the event attached...
$("ul.xbreadcrumbs li").live("click", function() {
//do something
}

Use a live event:
$('.xbreadcrumbs li').live('click', function(){
//override here
});

Since the </ul> is being added dynamically it is best to use $.live() or $.delegate() like this:
$('.xbreadcrumbs li').live('click', function(e){
e.stopPropagation();
console.log('Clicked');
});
Hope this helps!

adding and removing class and preventig fadeTo

I have created 3 links which when hovered over fade, I have also added a click event that when clicked adds the class 'active' and then i want to remove the class when clicked again. I have read a few posts that seem to suggest that removeClass come before addClass but im not sure why. Also when I click the link and the addClass is implemented I would also like to disable the fadeTo on this?
If anyone could explain each of these processes that would be great as Im trying to learn jQuery.
Code is here http://jsfiddle.net/kyllle/FtUdN/

Try this for the click:
$('#nav li a').click(function(){
$(this).toggleClass('active')
});
Fiddle: http://jsfiddle.net/maniator/FtUdN/3/

Click here to see a working demo: http://jsfiddle.net/rVhte/
$('#nav li a').toggle(
function() {
$('.active').removeClass('active');
$(this).addClass('active');
$("#nav li a").unbind('mouseenter mouseleave');
}, function() {
$(this).removeClass('active');
$('#nav li a').hover(function() {
$(this).fadeTo(200, 0.5).end();
}, function() {
$(this).fadeTo(200, 1.0).end();
});
});
Edit: disabled mouseover events after a link is clicked

You can use the .toggleClass method. In your hover handlers, you can use the hasClass method to check if you should fade or not.
Updated fiddle: http://jsfiddle.net/rfvgyhn/FtUdN/13/

click li, go to next li

Can't find a simple solution to this, I know it's easy and I've tried a few things but I can't quite get it to work. I'm currently working with a sidescrolling site and I want every time you click an image (contained in an li) it scrolls to the next li. I have jQuery plugin localscroll so it smoothly goes from one to the next, and that's working. I need to now write a code that triggers jQuery to utilize the localscroll function and go to the next li. Right now I have this, but I know it's not right:
$(document).ready(function () {
$('.wrapper ul li').click(function() {
$(this).next(li).localScroll();
});
});

Accoding to the ScrollTo examples, you need to do this:
$(container).scrollTo(element);
e.g.
$(document).ready(function () {
$('.wrapper ul li').click(function() {
$(window).scrollTo($(this).next('li'));
});
});

After reading the documentation for this here, I figured out the correct of way of using it. Let us say, you the .wrapper element as the one overflowing or in which you want to scroll. You can do the following.
$(document).ready(function () {
var gallery = $('.wrapper ul li')
$(gallery).click(function() {
$('.wrapper').localScroll({
target:$(this).next('li')
});
});
});