JQuery hover doesnt work - javascript

I got a JQuery hover but it doesnt show. The dimmed-item class, is what I would like to add on to the kunden-item class. Bouth of them allready work if I manuely put them in. JQuery is allready in the File so there must be some logic mistake I made.
Here my HTML for 1 Element:
<div class="kunden-item kunde2-item">
<img class="kunde" src="<?php echo $params->get('image2');?>" alt="Kunde">
</div>
Here my JQuery:
$(document).ready(function(){
$("kunden-item")
.mouseenter(function() {
$(this).addClass("dimmed-item");
})
.mouseleave(function() {
$(this).removeClass("dimmed-item");
});
});

kunden-item is a class, so your selector needs a leading .:
$(".kunden-item")
.mouseenter(function() {
$(this).addClass("dimmed-item");
})
.mouseleave(function() {
$(this).removeClass("dimmed-item");
});
});
Also note that you can massively shorten your code by using hover() and toggleClass():
$(".kunden-item").hover(function() {
$(this).toggleClass('dimmed-item');
});
Or just by using CSS alone:
.kunden-item:hover {
opacity: 0.5; // for example only, apply whatever style you need here
}

Class selectors begin with a .
You have a type selector and are trying to match <kunden-item> elements.
You should have:
$(".kunden-item")
You can probably get rid of the JS entirely and just use a :hover rule in your stylesheet though.

You're missing a dot (.) before kunden-item. You can also use .hover(), which works like this:
$(document).ready(function(){
$(".kunden-item")
.hover(function() {
$(this).addClass("dimmed-item");
},
function() {
$(this).removeClass("dimmed-item");
});
});

Related

jQuery check if body has prefix

I am trying to run a jQuery function in opencart.
I have several pages with a body class like :
product-category-20
product-category-50
...and so on.
What I've tried :
if ($("body").hasClass("common-home, [class*="product-category-"]"){
}
Try removing double quotes within attribute selector , using .is()
$(function() {
if ($("body").is("[class*=product-category], .common-home")) {
alert(true)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<body class="product-category-20 product-category-50 common-home"></body>

Why is this hover toggle jQuery not working?

I have separate jQuery functions for "mouseenter" and "mouseleave" that work fine:
$('#imgPostTravel').mouseenter(function () {
$('#imgPostTravel').addClass('popout_image');
$('#imgPostTravel').addClass('shadow');
});
$('#imgPostTravel').mouseleave(function () {
$('#imgPostTravel').removeClass('popout_image');
$('#imgPostTravel').removeClass('shadow');
});
...but am hoping to consolidate it into one "hover" toggle operation.
I first want to make sure it really works, so tried the following on a jsfiddle here:
$( "ptVerbiage" ).hover(function() {
$(this).val('yep!');
}, function() {
$(this).val('nope!');
});
I've tried several things besides setting the value of "val" (changing the "disabled" attr, changing the color, backgroundcolor, etc.) but none of them does a thing. Is this the wrong way to hover/toggle, or what's wrong?
You forgot the hashtag to make reference to an ID. Also, your target element is a h2, that has no .val() method because it is not a form (text) input. You have to use .text() instead.
The portion of code should look like this (jsFiddle):
$("#ptVerbiage").hover(function() {
$(this).text('yep!');
}, function() {
$(this).text('nope!');
});
You seem to be missing a #
$("ptVerbiage") => $("#ptVerbiage")
AND
not .val() but .text(); as .val is for inputs
should look like this
$( "#ptVerbiage" ).hover(function() {
$(this).text('yep!');
}, function() {
$(this).text('nope!');
});
http://jsfiddle.net/n9sq7x8y/4/
Using everyone's suggestions, this is what works:
$( "#imgPostTravel" ).hover(function() {
$(this).addClass('popout_image');
$(this).addClass('shadow');
}, function() {
$(this).removeClass('popout_image');
$(this).removeClass('shadow');
});

Jquery hasClass issue

im trying to check if one of the DIV's has class "visible" which is being add by a jquery plugin, it seems not to work.
it works when i check the first element, but if i want to check next div, it doenst finds it.
help is appreciated.
My DIV
<div class="swiper-slide welcome" id="welcome"></div>
2nd DIV
<div class="swiper-slide intro-early-life" id="intro-early-life"></div>
MY JQUERY
<script type="text/javascript">
$(document).ready(function() {
if ($('.welcome').hasClass('swiper-slide-visible')) {
alert("working");
}
});
</script>
Im not using same ID, maybe it was my bad explanation. I can use the class as well, no difference.
$(document).ready(function() {
if ($('#welcome').hasClass('swiper-slide') && $('#welcome').hasClass('visible')) {
alert("working");
}
});
if ($('#welcome').is(":visible") && $('#welcome').hasClass("swiper-slide")) {
alert("Yeah!");
}
Perhaps that would work better?
Edit: Also swiper-slide-visible class doesn't exist on the page - perhaps this is the issue...?
You can use also as
$(document).ready(function() {
if ($('#welcome').hasClasses(['swiper-slide', 'visible']);) {
alert("working");
}
});
$.fn.extend({
hasClasses: function (selectors) {
var self = this;
for (var i in selectors) {
if ($(self).hasClass(selectors[i]))
return true;
}
return false;
}
});
Use .is()
if ($('#welcome').is('.swiper-slide, .visible'){
Id Must Be unique you can use classes instaed
Two HTML elements with same id attribute: How bad is it really?
You could use .is() instead:
$(document).ready(function() {
if ($('.welcome').is('.swiper-slide.visible')) {
alert("working");
}
});

Why .attr does not change the attribute in each function?

I have a very simple script that should change links' ids but somehow it is not working. Here is the code :
$(document).ready( function() {
$('mylinks').each(function(index) {
$(this).attr({
'id': 'mylink-'+index
});
});
});
<div class="mylinks">
google
google2
</div>
I have tries changing mylinks to :
div.mylinks
div.mylinks a
but none of them worked. What am I missing ?
EDIT
Most of you are right. I have to use $('.mylinks a').each( ... but the issue was that I was looking at the RMB->Source (where the content is not updated) instead of Inspect Element.
The selector mylinks matches every <mylinks> element on the page.
To match <a> elements that are descendants of a member of the mylinks class you need .mylinks a.
Edit your code and change this:
$('.mylinks a')
Your code refers to the div, not the links. Oh, and you left out the period before mylinks to properly denote the class of the div.
$('mylinks').each( should be $('.mylinks a').each(
Here's a jsFiddle example.
$('.mylinks a').each(function(index) {
$(this).attr({
'id': 'mylink-' + index
});
});​
$('.mylinks a').each(function(){ ... });
Your selector is incorrect for mylinks. It should be $('.mylinks a').each()
class selector starts with . . change the code as below
$('.mylinks a').each(function(index) {
$(this).attr('id', 'mylink-'+index);
});
If mylinks is the class that you give to your link, then you should write $('.mylinks')
You need to tell it to look at the links, not just the div. This works:
$(document).ready( function() {
$('.mylinks a').each(function(index) {
$(this).attr("id", "mylinks"+index);
});
});
$('mylinks') will look for element with tag name mylinks. May be its a typo you should use . for class selector. If you want to select all the anchor elements inside .mylinks and set there ids then use this.
$(document).ready( function() {
$('.mylinks a').each(function(index) {
$(this).attr({
'id': 'mylink-'+index
});
});
});

initialize jquery after append

I have a list of blocks, for each block their is a css change by jquery on mouseover/out.
I have a button that is job is to add one more block to the list.
It do it great! But the new block not respond to the mouseover/out jquery set.
This is my blocks and the add:
<div class='blocks'>
<div class='block'>
<div class='block-top'></div>
Default Text Here
</div>
<div class='block'>
<div class='block-top'></div>
Default Text Here
</div>
<div class='block'>
<div class='block-top'></div>
Default Text Here
</div>
</div>
<a href='#' id='addBlock'>Add Block</a>
And this is the javascipt:
$(document).ready(function() {
var inEdit=0;
$(".block").hoverIntent(function() {
if(inEdit==0) {
$(this).children('.block-top').delay(300).animate({opacity:1},600);
$(this).delay(300).animate({borderColor: '#8f8f8f'},600);
}
},function() {
if(inEdit==0) {
$(this).children('.block-top').animate({opacity:0},200);
$(this).animate({borderColor: '#ffffff'},200);
}
});
$('#addBlock').click(function() {
$('.blocks').append("<div class='block'><div class='block-top'></div>Default Text Here</div>");
});
});
I'm using this two scripts:
http://www.bitstorm.org/jquery/color-animation/
http://cherne.net/brian/resources/jquery.hoverIntent.html
What can I do?
Thanks
If you wish that future elements benefits from the event, you have to use on : http://api.jquery.com/on/
For instance :
$('#addBlock').on('click', function() {
$('.blocks').append("<div class='block'><div class='block-top'></div>Default Text Here</div>");
});
You are binding the hoverintent to the element which doesnt exist on load. Therefore the new element wont get the event handler. You have to use .Delegate() or .on()/.off() depending on your version of jQuery Information on how to use each can be found below
http://api.jquery.com/delegate/
http://api.jquery.com/on/
However as hoverIntent uses jquerys mouseover i dont know if it has a specific eventType you can use for delegate/on
This question is about using hoverIntent on new elements. There is exactly this other thread about the same thing, check out the answer :
help with understanding the logic behind how javascript executes on new dom elements being created on the fly
make use of jquery live() method, i.e) use below codes
$(".block").live('hoverIntent', function() { //this line is modified
if(inEdit==0) {
$(this).children('.block-top').delay(300).animate({opacity:1},600);
$(this).delay(300).animate({borderColor: '#8f8f8f'},600);
}
},function() {
if(inEdit==0) {
$(this).children('.block-top').animate({opacity:0},200);
$(this).animate({borderColor: '#ffffff'},200);
}
});
make some adjustments to add 2 functions for the event 'hoverIntent'. I mean this will work
$(".block").live('hoverIntent', function() { //this line is modified
if(inEdit==0) {
$(this).children('.block-top').delay(300).animate({opacity:1},600);
$(this).delay(300).animate({borderColor: '#8f8f8f'},600);
}
});
but to have 2 functions you can try like
$(".block").live('hoverIntent', function() { //this line is modified
if(inEdit==0) {
$(this).children('.block-top').delay(400).animate({opacity:1},600);
$(this).delay(400).animate({borderColor: '#8f8f8f'},600);
}
if(inEdit==0) {
$(this).children('.block-top').animate({opacity:0},200);
$(this).animate({borderColor: '#ffffff'},200);
}
});

Categories