I'm attempting to create a mute button (it already has an onclick function) on a site using a div with a background image. I would like to be able to change the displayed image after clicking on it (mute), but I also need to change it back after a second click (unmute). How can this be done?
The site already uses jquery.
Thank you!
Have a look at toggleClass(). You just need two CSS classes, one with each background image e.g.:
.mute {
background-image:url('mute.png');
}
.unmute {
background-image:url('unmute.png');
}
Then the jQuery would be (assuming you have a div named "button", with class "unmute"):
$('#button').click(function() {
$(this).toggleClass('mute');
});
You want jQuery's .toggle() which takes multiple function arguments and calls each in turn after each click event.
$("#mutebutton").toggle(
function() {
$(this).css("background-image","url('on.jpg')");
mySoundOn();
},
function() {
$(this).css("background-image","url('off.jpg')");
mySoundOff();
}
);
Use .removeAttr() if the background image is the only think applied inline. If not, then use .css() and change the path to the original background image.
$(this).toggle(function() {
$(this).removeAttr('style');
},
function() {
$(this).css("backgroundImage", "url(mute_img_path)");
});
its easy
<div id="img-swap" />
where xxxxxx_Off is you image for mute
$(function(){
$("#img-swap").on('click', function() {
if ($(this).attr("class") == "img-swap") {
$(this).css("background-image","on.jpg");
} else {
$(this).css("background-image","off.jpg");
}
$(this).toggleClass("on");
});
});
this will switch image on click from off to on. you must use a pattern for images that will contain _off and _on suffix
Related
I seem to be struggling with this.
Im want to make other elements change with button hover.
what im trying to do is , when you hover on the "continue reading" button on the homepage , then for the title and post meta to change color.
The site url is:
http://staging.conversationlab.com/lions_valley/
You can use the hover() method on the more links to trigger a function that applies or removes styling to their siblings like...
$(".more-link").hover(
function() {
$(this).addClass("your-class-with-styling");
$(this).siblings(".post-meta").addClass("your-class-with-styling");
$(this).siblings("h2").addClass("your-class-with-styling");
},
function() {
$(this).removeClass("your-class-with-styling");
$(this).siblings(".post-meta").removeClass("your-class-with-styling");
$(this).siblings("h2").removeClass("your-class-with-styling");
}
);
I would probably add a class to the h2 to target, though, to make sure that it wouldn't conflict with any other h2s that MAY end up in those article sections at some point in the future.
You probably just need to add some css:
<style>
#buttonid:hover {
background-color:#ff0000;
}
</style>
where the #buttonid is declared on your button:
<button id="buttonid"> my button</button>
more info = better answer/s
You can see here how to do it. https://jsfiddle.net/5aybmjk7/
Basically I just added an ID / additional class to your code and then attached the relevant jquery that used mouseover and mouseout to highlight/unhighlight the title by adding or removing a class with CSS attached to it.
$('#here').mouseover(function () {
$(".highlightMe").addClass('colored');
});
$('#here').mouseout(function () {
$(".highlightMe").removeClass('colored');
});
jQuery('.et_pb_posts article').find('.more-link').on('hover', function() {
jQuery(this).find('.post-meta a').addClass('YOUR_CLASS')
});
Try that
Simplified update, nevermind using a variable. (original question was using one selector as a variable and doing this)
Essentially why will below not work.
Note:: When not declaring || aka second selector this worked fine. But then what it does is doesn't allow the once css natural :hover method on the text, so that is why I'm trying to add the second selector here in the first place. I need to hover an image, and the see the corresponding text link hover, and I also need to maintain hovering over corresponding text link alone to have the hover underline effect. Any suggestions as how to get here if this cannot done with CSS / sass nor using :hover in jQuery as a stable option?
setInterval(function(){
if $("#t1").is(":hover") || $(".thumba").is(":hover")) {
$(".thumba").css("text-decoration", "underline");
}
else {
$(".thumba").css("text-decoration", "none");
}
}, 200);
setInterval(function(){
if $("#t2").is(":hover")) || $(".thumbb").is(":hover")) {
$(".thumbb").css("text-decoration", "underline");
}
else {
$(".thumbb").css("text-decoration", "none");
}
}, 200);
Another example:
You have an image, say image a.)
<img src="[ image a ]">
then you have a paragraph with some text:
<div>blahblahloremipsum clickhere blachhhhhhh</div>
I want to hover over image a and allow click here to have an underline, I would like to 'hover out' and the underline to go away. I would also like this not only on the image but as standard with the text link, basically if you hover over click here and not the image it still will underline.
Another attempt: (but here the underline doesn't unattach after mouse is no longer hover)
$(document).mousemove(function() {
if($('#t1').is(':hover') || $('.thumba').is(':hover')) {
$('.thumba').css({'text-decoration':'underline'});
}
else {
$('.thumba').css({'text-decoration':'none'});
}
});
$(document).mousemove(function() {
if($('#t2').is(':hover') || $('.thumbb').is(':hover')) {
$('.thumbb').css({'text-decoration':'underline'});
}
else {
$('.thumbb').css({'text-decoration':'none'});
}
});
take a look: here (link below) it describes using it if ONE instance, this is why it's likely failing for me and is not the solution; but I don't see a solution on this thread for multiple. "(This only works when the selector matches only 1 element though - See Edit 3 for more)"
Detect IF hovering over element with jQuery
You need to add another parenthesis at the end, as well as remove one after the first condition:
if($thumbone.is(":hover") || $('.thumba').is(":hover")) {
And you might want to refer to this question for checking for hover:
Jquery condition check is(':hover') not working
You can achieve the underline on hover effect on the text link just using CSS:
.thumbb:hover,.thumbb-hover {text-decoration:underline;}
Then you detect the mouseenter and mouseleave events on the images:
$('#t1,#t2')
.on('mouseenter', function() {
$('.thumbb').addClass('thumbb-hover');
})
.on('mouseleave', function() {
$('.thumbb').removeClass('thumbb-hover');
});
Here's a working fiddle. And here's a fiddle with two images
A.O. is right, check the parenthesis. Also, everytime I use jquery on html classes, I make sure I grab the first one. It is the default functionality, but it's always nice to explicitly declare it.
if($thumbone.is(":hover") || $('.thumba').first().is(":hover")) {
So i currently have multiple images on a page, however when i want over hover effect on the one that is being hovered over. Where the page has more than 12 images, one way is to replicate this code 12 times, with an id but is there a more efficient way:
$("img").hover(function () {
$("img").addClass("transition");
}, function () {
$("img").removeClass("transition");
});
You could use in/out hover handler to toggle the class:
$("img").hover(function () {
$(this).toggleClass("transition");
});
But be aware, this could be done using only CSS with pseudo class :hover if your goal is just to apply transition to these images.
In order to apply hover effect only on currently hovered image and not on the other images, use $(this) as shown below :-
$("img").hover(function () {
$(this).addClass("transition");
}, function () {
$(this).removeClass("transition");
});
I have this jQuery call for a dropdown. On click, the background image of an inner container changes its background image. How do I change the background image for the inner container back?
$(document).ready(function () {
$('#listH1').click(function () {
$('#content1').slideToggle('medium');
$(".span").css("background-image","url(carrow.png)");
});
});
I suggest using toggleClass():
CSS
.yourNewBackground {
background-image: url(carrow.png);
}
JavaScript
$(document).ready(function () {
$('#listH1').click(function () {
$('#content1').slideToggle('medium');
$(".span").toggleClass("yourNewBackground");
});
});
EDIT
Here's a working fiddle. A couple things to note:
When working with a fiddle, make sure you select the appropriate framework. You had MooTools selected (the default), instead of jQuery.
toggleClass() wasn't working because of the span class. Adding !important to the toggleDown class was all that was needed.
If the background is set in a style sheetfile, you can just delete the custom style-attribute you created there:
$(".span").css('background-image', '');
I have code that lets me to show an element on click of one element and hide it on click of another. Code looks like:
$('.downloads').hide()
$('.downloads').css({visibility:'visible'})
var Dshow=false;
$('.allLink').click(function() {
if(!Dshow){
Dshow=true;
$(".downloads").fadeIn("fast");
$('#footer2').html($('#footer1').html());
$('#footer1').html('');}
});
$('.hideAllLink').click(function() {
if(!!Dshow){
Dshow=false;
$(".downloads").fadeOut("fast");
$('#footer1').html($('#footer2').html());
$('#footer2').html('');}
});
I want $('.allLink').click(function() to have 2 states - on first click it shall show ".downloads" and on second click hide.
How to do such thing with jQuery?
You can use .toogle(). This method will hide element if it's visible, or make it visible if it's hidden.
$('.allLink').click(function()) {
$('.downloads').toggle();
}
I think what you are looking for is a toggler: Use of jQuery toggle function
Use
$( "#idofthebutton" ).toggle(
function() {
/// hide the link
$(".downloads").fadeOut("fast");
}, function() {
///show the link
$(".downloads").fadeIn("fast");
}
);
This will work automatically to hide and show the links....
Note: In this case keep the links visible at first place. If you don't want that then change the order of the functions inside the .toggle