Develop Reference

My resetActive is not working

Why does my resetActive call does not work, the background yellow pulls but the resetActive does not. Here is my code:
$(document, "#ReloadPage").on('mouseover', function() {
resetActive()
$("#ReloadPage").css("background-color","yellow");
});
Why does my resetActive call does not work?

CSS:
#ReloadPage:hover {
background-color: yellow
}
JavaScript:
$('#ReloadPage').on('mouseover', function () {
resetActive();
});

How to hide class first and show only on hover in jQuery?

I have following toggling script:
$('.edit_bg').on({
mouseenter: function () {
$(this).addClass('edit_bg');
},
mouseleave: function () {
$(this).removeClass('edit_bg');
}
});
But this works after i first hover that div.
How should I remove all .edit_bg classes from divs on start and be able to show them on hover?

After the on function just do removeClass.
$('.edit_bg').on({
mouseenter: function () {
$(this).addClass('edit_bg');
},
mouseleave: function () {
$(this).removeClass('edit_bg');
}
}).removeClass('edit_bg');

I understand what you are trying to achieve using Javascript/jQuery, but you can achieve it simply using css:
.edit_bg
{
background-color: blue;
}
.edit_bg:hover
{
background-color: red;
}
Look, ma! No javascript! http://jsfiddle.net/adrianonantua/rv9ht/

jQuery tool tip on hover

I am in need of a very lightweight tooltip similar to the 1 found here http://www.history.com/videos when you hover a video link under "Popular Videos", a tooltip fades into place, it stays there and you can even select text on it until you move the cursor off it. Facebook and Google+ also have a similar style tool-tip as well as stackoverflow when you hover over a tag. Can someone provide a light weight method of doing this.
I have search and looked at many existing "plugins" they are all somewhat bloated though. Thanks for any help

Here's a pretty simple way you could accomplish this:
var timeout;
function hide() {
timeout = setTimeout(function () {
$("#tooltip").hide('fast');
}, 500);
};
$("#tip").mouseover(function () {
clearTimeout(timeout);
$("#tooltip").stop().show('fast');
}).mouseout(hide);
$("#tooltip").mouseover(function () {
clearTimeout(timeout);
}).mouseout(hide);
Where #tip is the element you want to mouseover to make the tooltip appear, and #tooltip is the actual tooltip element.
Here's an example: http://jsfiddle.net/pvyhY/
If you wanted to wrap this in a jQuery plugin:
(function($) {
$.fn.tooltip = function(tooltipEl) {
var $tooltipEl = $(tooltipEl);
return this.each(function() {
var $this = $(this);
var hide = function () {
var timeout = setTimeout(function () {
$tooltipEl.hide();
}, 500);
$this.data("tooltip.timeout", timeout);
};
/* Bind an event handler to 'hover' (mouseover/mouseout): */
$this.hover(function () {
clearTimeout($this.data("tooltip.timeout"));
$tooltipEl.show();
}, hide);
/* If the user is hovering over the tooltip div, cancel the timeout: */
$tooltipEl.hover(function () {
clearTimeout($this.data("tooltip.timeout"));
}, hide);
});
};
})(jQuery);
Usage:
$(document).ready(function() {
$("#tip").tooltip("#tooltip");
});
Add more functionality and you'll eventually end up with the excellent qTip plugin, which I recommend taking a look at as well.

Implementing Hover Intent

I just finished developing this Wordpress theme:
http://www.minnesdiner.com/
Everything is working well, but I'm not 100% happy with the navigation.
The sliding position indicator works smoothly, but I'd like to integrate the hover intent jQuery plugin to prevent the sliding indicator from sliding when the user unintentionally passes over the nav.
Any ideas as to how I could integrate this plugin? I'm currently firing a separate jQuery function for each nav item and passing coordinates to the sliding indicator based on which item is being hovered upon.
Here's my current jQuery code:
$(document).ready(function() {
var $currentpos = $("#menu-indicator").css("left");
$("#menu-indicator").data('storedpos', $currentpos);
$(".current-menu-item").mouseenter(function () {
$("#menu-indicator").stop().animate({left: $currentpos}, 150);
});
$(".menu-item-26").delay(500).mouseenter(function () {
$("#menu-indicator").stop().animate({left: "52px"}, 150);
});
$(".menu-item-121").mouseenter(function () {
$("#menu-indicator").stop().animate({left: "180px"}, 150);
});
$(".menu-item-29").mouseenter(function () {
$("#menu-indicator").stop().animate({left: "310px"}, 150);
});
$(".menu-item-55").mouseenter(function () {
$("#menu-indicator").stop().animate({left: "440px"}, 150);
});
$(".menu-item-27").mouseenter(function () {
$("#menu-indicator").stop().animate({left: "570px"}, 150);
});
$(".menu-item-164").mouseenter(function () {
$("#menu-indicator").stop().animate({left: "760px"}, 150);
});
$delayamt = 400;
$("#header-row2").click(function () {
$delayamt = 5000;
});
$("#header-row2").mouseleave(function () {
$("#menu-indicator").stop().delay($delayamt).animate({left: $currentpos}, 600);
});
});
As you can see, I need to bind mousover and mouseout to separate elements (list-item and containing div).
Thanks!

If all you want to do is avoid the user triggering the slide by mousing over the nav, I would just setTimeout in your hover function to call your sliding code after a certain amount of time has passed, and clear the timeout on the mouseout event. No extra plugin needed.
For example:
var hover_timer;
$('.menu-item').hover(
function() {
hover_timer = setTimeout(function() {
...
}, 500);
},
function() { clearTimeout(hover_timer); }
);
EDIT: by the by, you should be combining all those hover functions into one. You can do something like:
$('.menu-item-26').data('slider-pos', '52px');
$('.menu-item-121').data('slider-pos', '180px');
...
And then in the code to slide, call it back:
$this = $(this);
$('#menu-indicator').stop().animate({left: $this.data('slider-pos')}, 150);
And that's just a start - you can generalize it even more, I bet.

jQuery function ignore class

I've got an interesting situation. I'm building a music page using an open source flash music player that degrades to html for mobile users. I've got everything working great except for one issue.. and that is that one of my Javascript functions is interfering, specifically an anchor color fade.
There are many hidden buttons involved in the player, but the play/pause button has a translucent anchor underneath it and code is forcing this to be shown when the buttons are hovered over.
I can't seem to get the syntax correct using the not function.. But I'll settle for anything that works!
Thank you!
HTML
<div class="sc-player">
Javascript
jQuery(function ($) {
$('a').not('div.sc-player').each(function () {
var $el = $(this),
orig = $el.css('color');
$el.hover(function () {
$el.stop().animate({ color: '#00B0D9' }, 400);
},function () {
$el.stop().animate({ color: orig }, 400);
});
});
});

In jQuery (make sure you've got the color animation plugin from jQ UI: http://jqueryui.com/demos/animate/):
jQuery(function ($) {
$('a.a').each(function () {
var $el = $(this),
orig = $el.css('color');
if ($el.parents('.sc-player').length!=0) return;
$el.hover(function () {
$el.stop().animate({ color: '#00B0D9' }, 400);
},function () {
$el.stop().animate({ color: orig }, 400);
});
});
});