Show popup on hover rather than on click - javascript

I found a tutorial on adding popup boxes but want the box to appear on hover rather than on click. How can I alter this code to do that?
function div_show() {
document.getElementById('abc').style.display = "block";
}
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('#youtube').on('click', function() {
if ($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('#youtube'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({
opacity: 'toggle'
}, 'fast', easing, callback);
};

You can use the hover() method in jQuery:
$("#youtube").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "blue");
});
The first function is the method that will execute when the user's mouse enters, and the second function will be fired when the user's mouse leaves the element.
Demo: https://jsfiddle.net/2hLjs4qt/

Related

Target last visible div after js action?

Is it possible to target the last visible div/container after a js function has worked, in this case mixitup plugin. You click to filter your results, this adds display: none or display: inline-block to the appropriate containers.
Using this code from another stack question
$(function () {
var $items = $($(".partners_list.container article.mix").get().reverse());
$items.each(function () {
if ($(this).css("display") != "none") {
$(this).addClass("red");
return false;
}
});
});
It works but only when the page first loads, after you active the mixitup and filter some results it doesn’t add the class red to the last ‘visible’ container i assume because its already loaded and done its job..
The mix it function is as follows..
$(function(){
var $filterSelect = $('#FilterSelect'),
$container = $('#partner_container');
$container.mixItUp({
animation: {
enable: false
}
});
$filterSelect.on('change', function(){
$container.mixItUp('filter', this.value);
});
});
So essentially need it to fire based on when the display: none and display:inline-block appears and disappears on the page.
So I think if you wrap the code you want to fire again in a function you can then set it to fire on callback from the mixItUp and on first load.
So you'd have a function like this:
function updateDisplay() {
var $items = $($(".partners_list.container article.mix").get().reverse());
$items.each(function () {
if ($(this).css("display") != "none") {
$(this).addClass("red");
return false;
}
});
}
And then call it on first load like this:
$(function () {
updateDisplay();
});
And then edit your mixItUp declaration to call this function also on callback of mixItUp having finished:
$container.mixItUp({
animation: {
enable: false
},
callbacks: {
onMixEnd: function(){
alert('No items were found matching the selected filters.');
}
}
});
Hope that helps.
Thanks to shodaburp i’ve managed to figure it out with the callback function, god knows how must be a fluke.
The full code i have now and seems to work...
$(function(){
var $filterSelect = $('#FilterSelect'),
$container = $('#partner_container');
$container.mixItUp({
animation: {
enable: false
},
callbacks: {
onMixEnd: function(state){
var $items = $($(".partners_list.container article.mix").get().reverse());
$items.each(function () {
if ($(this).css("display") != "none") {
$(this).addClass("red");
return false;
}
});
}
}
});
$filterSelect.on('change', function(){
$container.mixItUp('filter', this.value);
});
});

How to stop animation after one body click with jQuery

So, i have some animation actions, this is for my login panel box:
$('.top_menu_login_button').live('click', function(){
$('#login_box').animate({"margin-top": "+=320px"}, "slow");
});
$('.login_pin').live('click', function(){
$('#login_box').animate({"margin-top": "-=320px"}, "slow");
});
now i need to add some hiding action after click on body so i do this:
var mouse_is_inside = false;
$('#login_box').hover(function () {
mouse_is_inside = true;
}, function () {
mouse_is_inside = false;
});
for stop hiding this element on body click, and this for body click outside by login-box
$("body").mouseup(function () {
if (!mouse_is_inside) {
var login_box = $('#login_box');
if (login_box.css('margin-top','0')){
login_box.stop().animate({"margin-top": "-=320px"}, "slow");
}
}
});
Everything is fine but this panel animates after each body click, how to stop this and execute only one time? Depend on this panel is visible or not?
You'd normally do this sort of thing by checking if the click occured inside the element or not, not by using mousemove events to set globals :
$(document).on('click', function(e) {
if ( !$(e.target).closest('#login_box').length ) { //not inside
var login_box = $('#login_box');
if ( parseInt(login_box.css('margin-top'),10) === 0){
login_box.stop(true, true).animate({"margin-top": "-=320px"}, "slow");
}
}
});
And live() is deprecated, you should be using on().

on and hover not working together

My jquery code
It's not working when
$("a").on("hover",function(){$(this).css("background","#ccc");},function(){$(this).css("background","#fff")});
But is working when
$("a").hover(function(){$(this).css("background","#ccc");},function(){$(this).css("background","#fff")});
How to make it to work with hover
In case of .on() hover it will look like
$("a").on('hover', function(e) {
if(e.type =='mouseenter') {
// code for mouseenter
} else {
// code for mouseleave
}
});
But for .hover() is accept two functions first one for mouseenter and second one for mouseleave.
$('a').hover(
// for mouseenter
function() {
},
// for mouseleave
function() {
}
);
So if you want to use .on() then your code will:
$("a").on('hover', function(e) {
if(e.type =='mouseenter') {
// code for mouseenter
$(this).css("background","#ccc");
} else {
// code for mouseleave
$(this).css("background","#fff")
}
});
As #ThiefMaster comment if you want to bind mouseenter and mouseleave separately then you can try:
$('a')
.mouseenter(function() {
$(this).css('background', '#ccc');
})
.mouseleave(function() {
$(this).css('background', '#fff');
});
or using .on() you can do
$('a').on({
mouseenter: function() {
$(this).css('background', '#ccc');
},
mouseleave: function() {
$(this).css('background', '#fff');
}
});
Here's a live demo
And the code
$("a").on('hover', function(e) {
if(e.type =='mouseenter') {
// do something when mouse enter
alert("mouse enter");
} else {
// do something when mouse leave
alert("mouse leave");
}
});​
Hover is an shortcut for mouseenter and mouseleave events. So you can bind those using on like
$("a").on({
mouseenter: function(){$(this).css("background","#ccc");},
mouseleave: function(){$(this).css("background","#fff");}
});

jQuery fadeOut() only if mouse leaves the shown element

Here's the code:
var HoverMenuOptions = {
show: function() {
$("#UserHoverMenu").css({"display": "block"});
},
hide: function() {
$("#UserHoverMenu").delay(2000).fadeOut(function() {
$(this).css({"display": "none"});
});
}
};
I want the div #UserHoverMenu to fadeOut if mouse leaves either the link triggering show() or #UserHoverMenu.
I have tried with:
$('#UserProfileName a').click(function() {
HoverMenuOptions.show();
});
$('#UserProfileName a, #UserHoverMenu').mouseleave(function() {
HoverMenuOptions.hide();
});
But hide is still triggered if mouse leaves #UserProfileName a and then into another div called #UserHoverMenu... How can I break the triggered fadeOut() when I enter #UserHoverMenu with the cursor?
$('#UserHoverMenu').mouseenter(function(e){
$(this).stop(true,true).css({"display": "block"});
});

How can I check if the cursor is hovering on an element using JQuery

It possible to check if the cursor is hovering on an element.
Something like
$("#divId").is("hover");
NOTE: I just want to check not set event.
.is(':hover');
or
$('#divId:hover');
Updated answer!
$("#foo").hover(function() {
$(this).data("hovered", true);
}, function() {
$(this).data("hovered", false);
});
Testing if it is hovered...
if ( $("#foo").data("hovered") ) {
// it is hovered
} else {
// it's not hovered
}
You can use jQuery's hover(), mouseenter() or mouseover()
$("#divId").hover(function() { alert("hovering"; });
This will fire on mouseenter and mouseleave. You can add separate event handlers for each.
So if you want to do something like, if hovering over #divId increase x by one, and when you stop hovering decrease y by one:
$("#divId").hover(function() { ++x; },
function() { --y; });
If you really want an if hovering:
var hovering = 0;
$("#divId").hover(function() { hovering = 1; },
function() { hovering = 0; });
...
// Then inside somewhere useful. Maybe in a setInterval, or triggered by
// another action...
if (hovering) { ...
Try it out with this jsFiddle
For example:
$(function() {
var hovering = 0;
$("div").hover(function() { hovering = 1; },
function() { hovering = 0; });
$(document).keyup(function() {
if (hovering) alert("hovering!"); // This is the "if hovering"
else alert("not hovering.");
});
});
You can use .hover(). It's can be used like so:
$("selector").hover(
function (){
//mouse over
},
function (){
//mouse out
}
);
An example of it's use from the documentation is here:
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
Depending on what you are doing either mouseover() (http://api.jquery.com/mouseover/) or hover() (http://api.jquery.com/hover/) can be useful.

Categories

Resources