Develop Reference

Following jQuery isn't working. Take a look

Code:
<div>
Back
<div class="outer"></div>
Next
</div>
<div>
Back
<div class="outer"></div>
Next
</div>
jQuery code:
$('.next').click(function() {
$('.next').prev().animate({
scrollLeft: '+=150'
}, 200);
});
$('.back').click(function() {
$('.back').next().animate({
scrollLeft: '-=150'
}, 200);
});
Error:
Basically I have more codes with the same classes as above and I want to scroll the code which is clicked. But the code written above scroll all the ".outer" on the page. Each set of the code is in different div. The inside material of the "outer" isn't provided which is scroll able.

You need to execute the code using current element context i.e. this. Also animate the siblings of parent element so traverse up using $(this).closest('div') then use .prev() or next()
$(function() {
$('.next').click(function() {
$(this).closest('div').prev().animate({
scrollLeft: '+=150'
}, 200);
});
$('.back').click(function() {
$(this).closest('div').next().animate({
scrollLeft: '-=150'
}, 200);
});
});

Simple Use $(this) for get current Object
$('.next').click(function () {
$(this).prev().animate({ scrollLeft: '+=150'}, 200);
});
$('.back').click(function () {
$(this).next().animate({ scrollLeft: '-=150'}, 200);
});

Don't forget to wrap your code in a document ready function.
<script>
$(document).ready(function() {
$('.next').click(function () {
$(this).prev().animate({ scrollLeft: '+=150'}, 200);
});
$('.back').click(function () {
$(this).next().animate({ scrollLeft: '-=150'}, 200);
});
});
</script>
Also using the on method is better for event binding, e.g.
<script>
$(document).ready(function() {
$('.next').on('click', function () {
$(this).prev().animate({ scrollLeft: '+=150'}, 200);
});
$('.back').on('click', function () {
$(this).next().animate({ scrollLeft: '-=150'}, 200);
});
});
</script>
Edit:
As #GuruprasadRao pointed out, I'm assuming you are already but make sure you're using a HTML5 doctype otherwise you'll need to add type="text/javascript" to your script tag.

jQuery click runs one time

I am working on a jQuery gallery with thumbnails and I have 2 arrows to "scroll" through these thumbnails. I first tried with the click event but my animation only runs one time then.
I have searched the internet and found the .on( 'click' ) event. I tried this but no result. Even with using .off( 'click' ) to remove the event after.
Can anyone help me with this?
$("#top_slide_button").on( 'click', function () {
$("#slide_frame").animate( { marginBottom: -50 }, 200);
$("#top_slide_button").off( 'click' );
});
$("#bottom_slide_button").on( 'click', function () {
$("#slide_frame").animate( { marginTop: -50 }, 200);
$("#bottom_slide_button").off( 'click' );
});

You can try this:
$("#top_slide_button").off( 'click' ).on( 'click', function () {
$("#slide_frame").animate( { marginBottom: -50 }, 200);
});
$("#bottom_slide_button").off( 'click' ).on( 'click', function () {
$("#slide_frame").animate( { marginTop: -50 }, 200);
});

You need to use relative values for the animation
Animated properties can also be relative. If a value is supplied with
a leading += or -= sequence of characters, then the target value is
computed by adding or subtracting the given number from the current
value of the property.
$("#top_slide_button").on('click', function () {
console.log('click')
$("#slide_frame").stop(true).animate({
marginTop: '-=50'
}, 200);
});
$("#bottom_slide_button").on('click', function () {
$("#slide_frame").animate({
marginTop: '+=50'
}, 200);
});
Demo: Fiddle

Your problem is the margin is set to 50, moving it down to 50, if you click it again, it stays at 50. you need to increment the margin-top ie adding 50 every time.
ie:
$("#top_slide_button").on('click', function () {
$("#slide_frame").stop(true).animate({
marginTop: '-=50'
}, 200);
});
$("#bottom_slide_button").on('click', function () {
$("#slide_frame").animate({
marginTop: '+=50'
}, 200);
});
http://jsfiddle.net/PbBq2/

jquery fadein div on hover within wordpress loop

I've been playing around with a few different ways of doing this and i'm not 100% sure any of them will work once put into the loop.
I've tried a few different types of jquery hover effects but is there a way to only select the .displayDiv that is a child of the li i'm hovering?
I put where i'm at here: http://jsfiddle.net/XkaLh/
$('li').hover(
function()
{
$('.hoverDisplay').animate({ 'opacity': 1 });
},
function()
{
$('.hoverDisplay').animate({ 'opacity': 0 });
});
Thanks in advance for help

You need to limit the lookup hoverDisplay element within the hovered li element
$('li').hover(function () {
$(this).find('.hoverDisplay').animate({
'opacity': 1
});
}, function () {
$(this).find('.hoverDisplay').animate({
'opacity': 0
});
});
Demo: Fiddle

How to make a hover listener optional

I've been having some difficulties, could someone point me in the right direction for this fiddle?
I need the div to animate on hover, but only when the .isDown class has been added to a different element by the click function.
Fiddle
$(".move").click( function(event){
event.preventDefault();
if ($(this).hasClass("isDown") ) {
$(this).stop().animate({opacity:"0.5"}, 270);
$(this).removeClass("isDown");
//can put hover in here????
} else {
$(this).stop().animate({opacity:"1"}, 300);
$(this).addClass("isDown");
}
return false;
});
if ($(".move").hasClass("isDown")){
$(".funnyMOVE").hover(
function() {
$(this).stop().animate({top:"10px"},215);
},
function() {
$(this).stop().animate({top:"0px"},230);
});
}

Use the same condition inside the hover function. You are only binding the event in DOM ready based on the condition. So the event is never bound as the condition is false to start with.
$(".fuckerMOVE").hover(
function () {
if ($(".move").hasClass("isDown")) {
$(this).stop().animate({
top: "10px"
}, 215);
}
},
function () {
if ($(".move").hasClass("isDown")) {
$(this).stop().animate({
top: "0px"
}, 230);
}
});
Check Fiddle

Here is working code:
I removed your code outside of the .move click and put this in it:
$(".fuckerMOVE").hover(function () {
$(this).stop().animate({
top: "10px"
}, 215);
},
function () {
$(this).stop().animate({
top: "0px"
}, 230);
});
Fiddle
The problem was that if ($(".move").hasClass("isDown")){ was reached on document load, where this would have been false. My solution was just to apply the hover bind on the element directly when you are wanting it to be bound.
I actually just realized it looks like you were wanting to remove the bind if the .move is clicked again. If this is the case, you can move your bind into your else block and then add this to the if block:
$(".fuckerMOVE").off("mouseenter mouseleave");
The reason for mouseenter and mouseleave is that behind the scenes hover() sets listeners for these events.
Fiddle

not sure if this is what you want.
http://jsfiddle.net/hvLA6/
$("#move").click( function(event){
event.preventDefault();
if ($(this).hasClass("isDown") ){
$(this).stop().animate({opacity:"0.5"}, 270);
$(this).removeClass("isDown");
} else {
$(this).stop().animate({opacity:"1"}, 300);
$(this).addClass("isDown");
}
if ($("#move").hasClass("isDown")){
$(".fuckerMOVE").hover(
function() {
$(this).stop().animate({top:"10px"},215);
},
function() {
$(this).stop().animate({top:"0px"},230);
});
}
return false;
});
CSS
div {
width:100%;
height:100px;
background:black;
position:relative;
}
#move {
font-size:20px;
background:pink;
}

Accessing Table Row From Popover

I currently have a bootstrap popover holding a button. The popover shows only when the mouse is over a table's tr.
What I want to do is to be able to access the elements for that row, is this possible.
Popover code:
$('.popup').popover(
{
placement: 'top',
trigger: 'manual',
delay: { show: 350, hide: 100 },
html: true,
content: $('#shortcuts').html(),
title: "Quick Tasks"
}
).parent().delegate('#quickDeleteBtn', 'click', function() {
alert($(this).closest('tr').children('td').text()); // ???
});
var timer,
popover_parent;
function hidePopover(elem) {
$(elem).popover('hide');
}
$('.popup').hover(
function() {
var self = this;
clearTimeout(timer);
$('.popover').hide(); //Hide any open popovers on other elements.
popover_parent = self
//$('.popup').attr("data-content","WOOHOOOO!");
$(self).popover('show');
},
function() {
var self = this;
timer = setTimeout(function(){hidePopover(self)},250);
});
$(document).on({
mouseenter: function() {
clearTimeout(timer);
},
mouseleave: function() {
var self = this;
timer = setTimeout(function(){hidePopover(popover_parent)},250);
}
}, '.popover');
HTML:
<div class="hide" id="shortcuts">
Delete
</div>
javascript that implements popover on row:
rows += '<tr class="popup datarow" rel="popover">';
Does anyone know what I'm doing wrong here and how I am supposed to access the child elements of the tr I'm hovering over?
JSFiddle: http://jsfiddle.net/C5BjY/8/

For some reason I couldn't get closest() to work as it should. Using parent().parent() to get to the containing .popover divider, then using prev() to get the previous tr element seems to do the trick however.
Just change:
alert($(this).closest('tr').children('td').text());
To:
alert($(this).parent().parent().prev('tr').children('td').text());
JSFiddle example.
As a side note, as your Fiddle uses jQuery 1.10.1 you should change delegate() to on():
on('click', '#quickDeleteBtn', function(index) { ... });

Here I have fixed it.
You just have to pass the container option in which the popover element is added for the popover
$('.popup').each(function (index) {
console.log(index + ": " + $(this).text());
$(this).popover({
placement: 'top',
trigger: 'manual',
delay: {
show: 350,
hide: 100
},
html: true,
content: $('#shortcuts').html(),
title: "Quick Tasks",
container: '#' + this.id
});
});

In your button click alert, $(this) refers to the button itself. In the DOM hierarchy, the popover html is nowhere near your hovered tr.
Add a handler to the list item to store itself in a global variable and access that from the click event. See the forked fiddle here.
First we declare a global (at the very top):
var hovered;
Then we add a mouseover handler to the list item. Note that using 'on' means every newly generated list item will also receive this handler:
$('body').on('mouseover', '.popup', function() {
hovered = $(this);
});
Then we can alert the needed data from within the button click event:
alert(hovered.text());

See here JS Fiddle
by removing the delegate and using the id to find the button and attaching it to a click handler by making the popover makes it easier to track it
$(self).popover('show');
$('#quickDeleteBtn').click(function(){
alert($(self).text());
});
also note
$('#shortcuts').remove();
because you were using the button in the popover with the same ID in the #shortcuts we couldn't select it first, now we remove it we can

You already have the correct element in your code. Just reuse the popover_parent variable and you are all set :) FIDDLE
alert($(popover_parent).text());
Or you could do something around like this :
$('.popup').hover(
function () {
var self = this;
clearTimeout(timer);
$('.popover').hide(); //Hide any open popovers on other elements.
$('#quickDeleteBtn').data('target', '');
popover_parent = self;
//$('.popup').attr("data-content","WOOHOOOO!");
$('#quickDeleteBtn').data('target', $(self));
$(self).popover('show');
},
function () {
var self = this;
timer = setTimeout(function () {
$('#quickDeleteBtn').data('target', '');
hidePopover(self)
}, 250);
});
$(document).on({
mouseenter: function () {
clearTimeout(timer);
},
mouseleave: function () {
var self = this;
timer = setTimeout(function () {
$('#quickDeleteBtn').data('target', '');
hidePopover(popover_parent)
}, 250);
}
}, '.popover');
I just store the element clicked in your #quickDeleteBtn then use the link.
FIDDLE HERE