I have to div like this:
<div class="vignettes" id="vignette1"></div>
<div class="vignettes" id="vignette2"></div>
I want to do the same thing on Hover event for both div, let's say change the background to black:
$('.vignettes').hover(function ()
{
//$('.vignettes').css("background", "#000");
$(this.id).css("background", "#000");
},
function()
{
});
The commented line works, but obviously change both div to black when I hover one of them. I want to change only the hovered one. Instead of cloning my hover function with good ids, I want to get the id of the hovered one and change its background dynamically.
The code alert(this.id) pops up the good id, so this.id works.
But $(this.id).css("background", "#000#"); doesn't do anything.
JSFiddle sample
As this is the target, just use $(this).css("background", "#000");
e.g.
$('.vignettes').hover(function ()
{
$(this).css("background", "#000");
},
function()
{
});
It is a bit silly to use a selector to find the current element by its own id as suggested
In fact, most of the time, you do not even need IDs to do this sort of operation, just use classes to change the styling:
e.g. http://jsfiddle.net/TrueBlueAussie/cLws40vr/8/
$('.vignettes').hover(function () {
$(this).addClass("selected");
console.log("test");
},
function () {
$(this).removeClass("selected");
});
You just need to use $(this)
When you are in a function like this, using $(this) will apply to the current element the event applies to.
$('.vignettes').hover(function ()
{
$(this).css("background", "#000");
},
function()
{
});
Updated JSFiddle - http://jsfiddle.net/cLws40vr/4/
As most of the other answers have suggested using this as the selector is the correct way to accomplish what you are trying to do in this case.
$(this).css("background", "#000");
There is another error in your code that was causing your original code not to work. To select using an id you need to add the hash symbol to the beginning of the selector string.
$('#' + this.id).css("background", "#000");
I just thought I would point that out in case anyone was wondering why the original code didn't work.
$(this).css("background", "#000");
alert($(this).attr('id'));
Fiddle http://jsfiddle.net/cLws40vr/5/
Related
$(".squares").on('mouseover', function(){
$(this).css('background-color', getRandomColor());
getRandomColor() is a function which returns a random color function when a square in a grid is mouseovered.
I want to be able to go over once and the color changes, but if i go over a second time the color will stay the same. Right now the color just repeatedly changes after every mouseover. I know its probably going to require an if statement. I just don't know how to set the statement equal to a back-ground color.
Use .one()
$(".squares").one('mouseover', function() {
$(this).css('background-color', getRandomColor());
});
Could you add a 'data-' attribute, so you know if it has already been changed?
You can use unbind() event. This would unbind the mouseover event once its already invoked.
$(".squares").on('mouseover', function(){
$(this).css('background-color', getRandomColor());
$(this).unbind('mouseover');
});
http://jsfiddle.net/j6um1sq2/17/
So, to show and hide certain DIV tags within my site I got the following codes
$('#ONE').live('click', function () {
$('.hide').css('display', 'none');
$('#b-ONE').css('display', 'block');
});
$('#TWO').live('click', function () {
$('.hide').css('display', 'none');
$('#b-TWO').css('display', 'block');
});
where a click on the div namend "ONE" opens a certain "b-ONE" div, and so on. It works flawlessly but is a pain when the list gets longer. You see where it says "ONE" and "TWO" in the JS ... is there any way I can turn these "ONE" and "TWO" into variables, so I can have up to 40 divs and don't have to type the above code for every DIV, and have a sleek code where I only have to type that finction once with variables?
I'm looking into something like this but lack the in-depth JS / jQuery knowledge:
$('#VARIABLETEXT').live('click', function () {
$('.hide').css('display', 'none');
$('#b-VARIABLETEXT').css('display', 'block');
});
Where a click on a div named "TWENTYONE" shows the div "b-TWENTYONE"
Any help is highly appreciated!
Just use the id of the clicked element when building the selector for the element you want to change:
$('#ONE, #TWO, #THREE').live('click', function () {
$('.hide').css('display', 'none');
$('#b-' + this.id).css('display', 'block');
// ^^^^^^^^^^^^^^
});
The initial selector ("#ONE, #TWO, #THREE") can probably be better written by giving all of those elements the same class attribute, and then using .the-class.
There may also be a structural approach, but as you haven't quoted your HTML, it's impossible to say.
Side note: The live function is not only deprecated, but actually removed from recent vesrions of jQuery. Here's the up-to-date equivalent:
$(document).on('click', '#ONE, #TWO, #THREE', function () {
$('.hide').css('display', 'none');
$('#b-' + this.id).css('display', 'block');
// ^^^^^^^^^^^^^^
});
Let's say I have 10 images on a page, and I want to hide an image when clicking on it.
Each image has an id like: figure1, figure2, figure3, figure i++.
Of course I could write this
$('#figure1').on('click', function() {
$(this).hide();
});
$('#figure2').on('click', function() {
$(this).hide();
});
$('#figure3').on('click', function() {
$(this).hide();
});
and so on but obviously that's not good.
The other thing I thought was creating a function and triggering it with onclick="theFunction(id)", so then I could hide the right image within the function as it knows the id of the image, but when the page loads, obviously JS doesn't know which ID I'm going to delete. How could I make this dynamic?
Any suggestions?
Err I was using class instead of ID in my function :/
function deletePhoto(photo_id, photoPosition) {
$('#photoFigure' + photoPosition).fadeOut(2000);
}
Called like:
<div class="deletePhoto" onclick="deletePhoto({$value['id']}, {$i})">delete</div>
You can give all of them a common class name say figure and use that as the selector:
$('.figure').on('click', function() {
$(this).hide();
});
Or with what you have you could go with attribute starts-with selector
$('[id^="figure"]').on('click', function() {
$(this).hide();
});
or just combine all of them and make a long and ugly selector:
$('#figure1, #figure2, #figure3').on('click', function(){
$(this).hide();
});
For the second part of your question, you can remove those inline click attribute and add a data-attribute save the photoid as is there and just use it to delete, if you have a consistent html structure then you dont event need that, you can select the photo relative to the deletePhoto button.
<div class="deletePhoto" data-photoid="#photoFigure{$i}">delete</div>
and
$('.deletePhoto').on('click', function(){
$($(this).data('photoid')).fadeOut(2000);
//<-- fade out won't delete the element from DOM instead if you really want to remove then try as mentioned below.
//$($(this).data('photoid')).fadeOut(2000, function(){$(this).remove();});
});
OR Could use multiple Select them like this:
Also plz note you are missing ) in your JQ code.
Link : http://api.jquery.com/multiple-selector/
Sample code
$('#figure1,#figure2,#figure2').on('click', function() {
$(this).hide();
});
$(body).on('click','img',function() {
var fig = $(this).attr('id');
$('#' + fig).fadeOut();
});
Ok, let's say that I have multiple links on a page and I want links to change background color when you roll over them. I would use this code:
$(function() {
$('a').mouseover(function() {
$('a').css('background-color', 'black');
});
});
$(function() {
$('a').mouseleave(function() {
$('a').css('background-color', 'white');
});
});
the problem with this code is that when you roll over one a, all of the links change color. I could give each a a specific ID and make a specific function for each, but is there a more efficient way to do this?
Edit: Additionally, what could I do to set the original background color back to the way it was. If I turn the background back to white, It might not have been white in the first place. How could I fix this?
In your version you use $('a') to call the .css() function on. The Problem is that $('a') selects ALL the a nodes on the page and not only the one that you moved your mouse over. Within the mouseover callback function the this keyword references the node that was the originator of the event. So when you do $(this) within that function you'll create a jQuery object (called a wrapped set) of that node. Now you can call all jquery functions on it, uncluding the .css() function. So here you go:
$(function() {
$('a').mouseover(function() {
$(this).css('background-color', 'black');
});
});
$(function() {
$('a').mouseleave(function() {
$(this).css('background-color', 'white');
});
});
Just so you know, you're all going about it the long and hard way.
// this is like document.onload = function,
// this only needs to be called once, you can put
// all your jQuery in this one function
$(function() {
// the following is a call to all `a` links to add jQuery's own .hover function
// see -> http://api.jquery.com/hover/
$("a").hover(function(eIn) { // this first function is the action taken when
// user hovers over the link
$(this).css({ 'background-color': '#000', 'color': '#fff' });
}, function(eOut) { // this second function is what happens
// when user hover away from the link
$(this).css({ 'background-color': '', 'color': '' });
});
});
See WORKING Fiddle
ALSO, YOU DONT NEED JQUERY FOR THIS, USE CSS
In CSS:
a:hover {
background-color: #000;
color: #fff;
}
See it in CSS ONLY HERE
Ok, I have this list layout that I use, and I want the list row to highlight when I hover it. Now, that's not a problem really, since I can use javascript to change classes for example, but I want the cursor to change to a pointer when hovering and when clicked, I want to follow the link within.
Example code can be found here:
http://sandman.net/test/hover_links.html
I also want to highlight the LI only when there is an eligible link inside it. Preferably using jQuery... Any ideas?
--
I've edited the code to incorporate the suggestion below, and the problem is that the click() action fires when I click other items inside the LI...
--
Right, so now I've edited the code. I've added a class to the link(s) that SHOULD be followed on click, and then a event.stopPropagation() on the links that does NOT have this class, so they are handeled by the browser accordingly.
Thanks again!
jQuery('li:has(a)')
.css('cursor', 'pointer')
.hover(function(){
jQuery(this).addClass('highlight');
}, function(){
jQuery(this).removeClass('highlight');
})
.click(function(e){
if (e.target === this) {
window.location = jQuery('a', this).attr('href');
}
});
This worked for me
$('#element li').hover(function() {
$(this).animate({
backgroundColor: "#4CC9F2"
}, "normal")
}, function() {
$(this).animate({
backgroundColor: "#34BFEC"
}, "normal")
});
I used jquery.color.js plugin it animates really nice hover effect color change