$(".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/
Related
I created an etch-a-sketch type of program so that when a user enters a height, width, and select a color choice, they are able to draw on the provided grid below. I am having troubles with the drawing part. I included a link to my code via codepen ... Online 37, I created a mouseover event but I can't figure out why it won't work. Any feedback would be greatly appreciated.
$("#pixelCanvas td").on("mouseover", function(){
var colorPicker = $("#colorPicker").val();
$( this ).css("background-color",colorPicker );
});
https://codepen.io/unicorn1/pen/JpVmZV
$("#pixelCanvas").on("mouseover", "td", function(){
var colorPicker = $("#colorPicker").val();
$(this).css("background-color", colorPicker);
});
Your td are being dynamically genererated, your #pixelCanvas exists from start, so you want to put an eventListener on the #pixelCanvas, but you only want it to react if a td is actually clicked. Since the #pixelCanvas existed from the start it will know if there happened something inside of it's container, while i generated td wouldn't know that it was supposed to have an eventListener
I think this discussion shows you the main differences between mouseover and hover.
Here is the link to it (when to choose mouseover() and hover() function
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/
I'm trying to change the background colour of the <body> depending on what tab specific is active.
When a tab is active, a class called 'st_view_active' is added onto the tab content. In the tab content I add a hidden div with the hex code of what my body background colour should be when that tab is active, my jQuery code looks like this:
$(document).ready(function() {
$(function(){
$('body').css('backgroundColor',$('.st_view_active').find('.background').text());
});
});
And my html code when the tab is active is following:
<div class="tab-6 st_view st_view_active" >
<div style="display:none" class="background">yellow</div>
<div class="st_view_inner">
tab 6
</div>
</div>
So when tab6 is active the background of the body should be yellow. However, this is not working, the background colour is not changing, what am I doing wrong here?
DEMO and JSfiddle
Thanks
PS: The red and blue square is the next and previous tab handler..
See here: http://jsfiddle.net/CNYDU/25/
I put the default color at the end of sColor, but you could instead grab the first view and use its color. I did it this way to cut down on testing since your fiddle is painful to work with.
$(document).ready(function() {
var hsh = window.location.hash.replace('#','');
var sColor = hsh ? $("#slidetabs_45").find("."+hsh+" .background").text() : "#3b0";
$("body").css("background-color", sColor);
$("#slidetabs_45").slidetabs({
onContentVisible:function(e){
var color = $("#slidetabs_45").find(".st_view_active .background").text();
$("body").css("background-color", color);
}
});
});
I also added the .st_view_active class to the first view so that it will start correctly.
I also added a CSS3 transition to the background color, which isn't necessary.
This sounds like a great opportunity to use data elements in html. Rather than having a hidden div with the background color you want, you can simple add a data-color attribute to your tab a tag. Then when the div is clicked you can set the color easily with an event handler.
link to an updated fiddle - http://jsfiddle.net/CNYDU/15/
Note: The next and previous tabs do not work in this example, but it should be easy to get them working, just attach a listener to each that runs
$('body').css('background-color', $(".st_tab_active").attr('data-color'));
as its callback.
Check out the livequery plugin for jQuery.
Live Query also has the ability to fire a function (callback) when it matches a new element and another function (callback) for when an element is no longer matched. This provides ultimate flexibility and untold use-cases. For example the following code uses a function based Live Query to implement the jQuery hover helper method and remove it when the element is no longer matched.
Their example:
$('li')
.livequery(function(){
// use the helper function hover to bind a mouseover and mouseout event
$(this)
.hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
}, function() {
// unbind the mouseover and mouseout events
$(this)
.unbind('mouseover')
.unbind('mouseout');
});
You should be able to adapt this to your css changes like fired events, and therefor perform your actions based on which tab is active.
I have forked Jlange's jsfiddle, which uses the data attribute, for a demo of how this plugin would be used:
http://jsfiddle.net/nj6ZY/2/
http://jsfiddle.net/nj6ZY/2/show/#tab-10 - Also works with a link to activate a specific tab
And the relevant bits:
$('.st_tabs_ul li a.st_tab_active').livequery(function(){
$('body').css('background-color', $(this).data('color'));
});
Put ID's on your tabs. Example for id="tab6":
$(document).ready(function() {
if ($('#tab6').attr('class') == 'tab-6 st_view st_view_active') {
$('body').css('background-color', 'yellow');
}
});
However, why would you attach this function to document ready only? I would bind the function to when the element is clicked...
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
Excuse my noobiness when it comes to Jquery, but I have some jquery code that does rollovers for me:
$("img.rollover").hover(function () {
this.src = this.src.replace("_off","_on");
},
function () {
this.src = this.src.replace("_on","_off");
});
Essentially just switching the images from image_on.jpg to image_off.jpg on hover on a bunch of images, now on click i would like to set the state of "image_on" permanently but the hover state seems to overwrite it and it doesn't stay "_on", i'm guessing it something to do with binding of events? I also don't seem to be able to do it so if a user clicks on one image it sets it to on, but if they click another image to return the previous image to the "_off" state and set the current one to the "_on" state.
Any help appreciated, ta.
i would add a "selected" class to the link when it is actually active and filter against that.
$("img.rollover").bind('click',function(){
$('img.rollover').removeClass('selected');
$(this).addClass('selected');
}).hover(function () {
this.src = this.src.replace("_off","_on");
},
function () {
if(!$(this).hasClass('selected')){
this.src = this.src.replace("_on","_off");
}
});
Of course, you would style your .selected images using the _on image.
sidenote:
Note that the recommended way of implementing rollover images is the css sprite technique: you use an image that contains all the states, use that image as a background image, and adjust the background-position according to :hover, :active states. It's a pure CSS solution that works in all recent browsers.
your hover code seems to run two functions one after the other which will effectively undo each others changes. so _off is turned to _on then back again.
so for hover to toggle it "on" you would just want
$("img.rollover").hover(function () {
this.src = this.src.replace("_off","_on");
});
if you just do this 1 function each time you can then control other states as you'd like e.g.
$("img.rollover").mouseout(function () {
this.src = this.src.replace("_on","_off");
});
You could unbind the hover event $(this).unbind('mouseenter mouseleave') when a click occurs, and rebind if necessary later.