Firefox/IE jQuery is(":hover") not working - javascript

http://jsfiddle.net/h8rxa3pj/2/
$("#open_link").hover(function() {
$("#menu").removeClass("hidden");
},function() {
if ($("#menu").is(":hover")) {
$("#menu").mouseleave(function() {
$("#menu").addClass("hidden");
});
}
else {
$("#menu").addClass("hidden");
};
});
I have looked at the other questions on this and tried pretty much every solution except the ones I couldn't understand.
How do I check if the mouse is over an element in jQuery?
I feel like Arthur's answer could help but I'm really new to jQuery/JS and I don't know how to apply it here. Help appreciated

$("#open_link, #menu").hover(function() {
$("#menu").removeClass("hidden");
});
$("#open_link, #menu").mouseleave(function() {
$("#menu").addClass("hidden");
});

Related

jQuery animate() complete callback not calling

I have got the following code:
if ($newCardLoader != null) {
$cardsContainer.animate({
maxHeight: futureHeight + "px"
}, 500, "ease", function() {
$cardsContainer.classList.remove("clamp-height-large");
$cardsContainer.classList.add("clamp-height-fit");
console.log("done");
});
}
The log and the style changes just don't happen.
I have seen several posts on this topic and followed all of them.
To me, it seems correct. Hope somebody can help be out!
Consider the following.
if ($newCardLoader != null) {
$cardsContainer.animate({
maxHeight: futureHeight + "px"
}, 500, "ease", function() {
$cardsContainer.toggleClass("clamp-height-large clamp-height-fit");
console.log("done");
});
}
See more: https://api.jquery.com/toggleclass/
#imvain2 and #Rory McCrossan suggestions are correct.
$cardsContainer needs to be a jQuery object i.e.
$("#some-id")
Mine was wrongfully vanilla e.g.
$("#some-id")[0]
This mistake does not throw errors and the animation works anyway.
Only the callback does not work. This makes it hard to spot to thank you!

How do I simplify the following code?

So I have a selection of images and would like a div to appear on('hover'). My current code is very bulky and manually adds that div for each of the images.
$("#TheNook").hover(function() {
$("#TheNook-cover").toggleClass("hidden");
});
$("#TheNook-cover").hover(function() {
$("#TheNook-cover").toggleClass("hidden");
});
$("#ManCave").hover(function() {
$("#ManCave-cover").toggleClass("hidden");
});
$("#ManCave-cover").hover(function() {
$("#ManCave-cover").toggleClass("hidden");
});
$("#AnchorsAweigh").hover(function() {
$("#AnchorsAweigh-cover").toggleClass("hidden");
});
$("#AnchorsAweigh-cover").hover(function() {
$("#AnchorsAweigh-cover").toggleClass("hidden");
});
$('#BatCave').hover(function() {
$('#BatCave-cover').toggleClass('hidden');
});
$('#BatCave-cover').hover(function() {
$('#BatCave-cover').toggleClass('hidden');
});
$('#CountryChic').hover(function() {
$('#CountryChic-cover').toggleClass('hidden');
});
$('#CountryChic-cover').hover(function() {
$('#CountryChic-cover').toggleClass('hidden');
});
$('#BohemianBungalow').hover(function() {
$('#BohemianBungalow-cover').toggleClass('hidden');
});
$('#BohemianBungalow-cover').hover(function() {
$('#BohemianBungalow-cover').toggleClass('hidden');
});
My new solution that I have tried is much more condensed, but I'm not entirely sure how to make it work. I'm new to declaring and using variables in JQuery so please help.
var cover = $('.theme-img:hover').attr("alt");
$('.theme-img').hover(function() {
$('#'+cover+'-cover').toggleClass('hidden');
});
Here is a JSFiddle: https://jsfiddle.net/w6pbp4Lz/2/
The first image should behave like the second.
You can use this code in order to achieve that:
JQUERY:
$('img.theme-img').hover(function() {
$(this).parent().children('div').toggleClass('hidden');
});
Here is your JSfiddle with my edits: https://jsfiddle.net/w6pbp4Lz/6/
Assuming they all have the class "theme-img" this might work
// "var cover = $('.theme-img:hover').attr("alt"); (not needed)
$('.theme-img').hover(function() {
$(this).toggleClass('hidden');
});
function toggleHover(srcElements, tarElement) {
srcElements.forEach(function(srcElement) {
srcElement.hover(function() {
tarElement.toggleClass('hidden');
});
});
}
call toggle hover with an array of the jQuery elements and the target jQuery element to toggle hidden. example
toggleHover([$('#TheNook'), $('#TheNook-cover')], $('#TheNook-cover'));
just an idea, might clean the code up a bit

Jquery If/else slide

I would like to make a filter for some blogs. Each blog will get a class with a category. If it matches it will show when a button is clicked. I thought I made some decent code, but it's not working. Can you please look at it and tell me what is wrong?
$('#filter').on('click', '.het-begin', function() {
if ($('.blogpagina').hasClass('het-begin')) {
$('.blogpagina').filter('.het-begin').slideDown();
}
else {
$('.blogpagina').slideUp();
}
});
If you guys want to see it in action you can look at: http://atmos.beer/blog.html. If you want some more information I can provide it.
Thanks in advance!
When you click the filter you could loop through each .blogpagina and check if it has the class het-begin. So it would look like this:
$('#filter').on('click', '.het-begin', function() {
$('.blogpagina').each(function() {
if ($(this).hasClass('het-begin')) {
$(this).slideDown();
} else {
$(this).slideUp();
}
});
});

How do I turn this JavaScript into a plugin?

I have looked through the old answers, and found one that seems to be what I want to do HERE. Although I don't fully understand and not sure what is wrong and what I should be doing in the next step. FIDDLE
Thanks in advance
//Put inside HTML
$(function () {
$('#s_table').setups({
//please name table ID as "s_table"
"scrollY_h":"200px",
"s_empty":"search not found",
});
});
//xxx.js
(function (a) {
a.fn.s_table= function (setups) {
var scrollY = "",
s_empty = "";}
{
my function here?
}
})(JQuery);
Here is a good tutorial on how to create a JQuery plugin:
http://learn.jquery.com/plugins/basic-plugin-creation/

can I make a function into a variable to reduce my code (JavaScript Code debug Please)

Hello I have been boggling my mind over and over again trying to simplify this java Script Code.
I am fairly new to JavaScript and I do not know where else to turn.
I am making a navigation that when I click on a button it will animate to transform:translateX(0); from transform:translateX(-98%); as a class.
I am also making it if you hover over the div .main-navigation it will slide back and forth accordingly. I have it where the mouseover will slide the navigation if its open to the close state but I cannot do so when it is closed to open. I am also trying to make it if the .home is active then the hover will not open or close the .home just the menu.
Any suggestions?
$(function(){
var navToggle = document.querySelectorAll('.nav-toggle');
var mainMenu = document.querySelectorAll('.main-navigation');
$(navToggle).on('click', function(){
if ($(mainMenu).hasClass('close')){
$(mainMenu).removeClass('close');
$(mainMenu).addClass('open');
}else{
$(mainMenu).addClass('close');
$(mainMenu).removeClass('open');
};
$('.home').toggleClass('hide, toggleAnimate');
$('.contentWrap').toggleClass('open');
});
$(mainMenu).on('mouseenter', function(){
if ($(mainMenu).hasClass('close')){
$(mainMenu).removeClass('close');
$(mainMenu).addClass('open');
}
if ($(mainMenu).hasClass('open')){
$(mainMenu).removeClass('open');
$(mainMenu).addClass('close');
};
});
});
Sorry I created a Code Pen to show you a very close example of what I am trying to do and the behavior that is happening.
My CodePen Example
Never mind I figured it out, I went with JQuery and was able to achieve my goal. I ended up changing it to this.
$(function(){
homeAnimate();
menuAnimate();
menuAnimate2();
autoAnimateEnter();
autoAnimateExit();
function homeAnimate(){
$('.nav-toggle').click(function () {
$('.home').toggleClass('hide, toggleAnimate');
$('.contentWrap').toggleClass('open');
});
}
function menuAnimate(){
$('.nav-toggle').click(function () {
if ($('.main-navigation').hasClass('close')) {
$('.main-navigation').addClass('close');
$('.main-navigation').toggleClass('open');
}
if ($('.main-navigation').hasClass('open')) {
$('.main-navigation').toggleClass('close');
$('.main-navigation').toggleClass('open');
}
});
}
function menuAnimate2(){
$('.nav-toggle-menu').click(function () {
if ($('.main-navigation').hasClass('open')) {
} else {
$('.main-navigation').addClass('open');
$('.main-navigation').removeClass('close');
}
$('.home').toggleClass('hide, toggleAnimate');
$('.contentWrap').toggleClass('open');
});
}
function autoAnimateEnter(){
$('.main-navigation').mouseenter(function () {
if ($('.main-navigation').hasClass('close')) {
$('.main-navigation').removeClass('close');
$('.main-navigation').addClass('open');
} else {
// DO NOTHING
}
});
}
function autoAnimateExit(){
$('.main-navigation').mouseleave(function () {
if ($('.home').hasClass('toggleAnimate')) {
// DO NOTHING
} else {
$('.main-navigation').removeClass('open');
$('.main-navigation').addClass('close');
}
});
}
});
I'm not sure if this is the cleanest way in order to achieve my goal but it works and I'm happy.
Here is my code if anyone wants to check it out.
Code

Categories