Does anyone know how to assign an onClick to an object that performs one action, then when the user clicks on the same object, the action is reversed?
$('#image').click(function() {
$('#foo').css({
'background-color': 'red',
'color': 'white',
'font-size': '44px'
});
});
So clicking on #image will either add the changes to #foo or reverse changes.
Fiddle: http://jsfiddle.net/Sx5yH/804/
Any suggestions?
Don't manipulate with inline styles directly, this is not very flexible approach. Instead you want to toggle class that holds necessary styles:
$('#image').click(function() {
$('#foo').toggleClass('active');
});
where the class active is defined like this:
#foo.active {
background-color: red;
color: white;
font-size: 44px;
}
Demo: http://jsfiddle.net/Sx5yH/812/
Specifically in your case - it is better to assign a class to the object. Then you can use the jquery toggle functionality to add/remove the style.
CSS
#image.selected {
background-color: red;
color: white;
font-size: 44px;
}
JavaScript
$('#image').click(function() {
$('#image').toggleClass("selected");
});
http://jsfiddle.net/gb0udnft/1/
You can use a boolean value to determine whether or not it's been clicked, then use a ternary statement to do whatever depending if it's true or false.
(boolean) ? true : false;
You could also use the innate JQuery toggle() function
http://jsfiddle.net/gb0udnft/2/
$('#image').toggle(function() {
// do whatever
}
, function() {
// do whatever
});
or use a css class back and forth by using .toggleClass(), .addClass(), or .removeClass()
Related
On button press, I want to change the color and background color of a button based on whether or not is "checked" which I'm currently checking by reading the current color.
Currently, it doesn't seem like the CSS value that is being read by jQuery is being updated by the function that jQuery uses to update the CSS.
Here's a JSFiddle that demonstrates the issue.
JSFiddle
function toggleButton(button) {
let css = {
"checked": {
"background-color": "#609",
"color": "#fff"
},
"unchecked": {
"background-color": "#ccc",
"color": "#222"
}
}
button.css("color", "#222") ?
button.css(css.checked) :
button.css(css.unchecked)
}
button {
background-color: #ccc;
color: #222;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="toggleButton($(this))">Click me</button>
Your first problem is that you're using the setter of css() in your if condition. As this returns a jQuery object it will always equate to true.
The second problem is that even when corrected (button.css('color') == '#222') the css() method will return the color in RGB format, so comparing it to the hex value will always be false.
To fix the problem, toggle a class on the element instead. It would also be much better practice to use an unobtrusive event handler instead of the outdated on* event handler. This has the added benefit of de-coupling the CSS and JS code. Try this:
$('button').click(function() {
$(this).toggleClass('foo');
});
button {
background-color: #ccc;
color: #222;
}
button.foo {
background-color: #609;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me</button>
I am trying to customize the standard dots that come with slick.js.
I have a class "transparent-circle" that I want to use as dots and when the dot is active I want to use the class "active"
This what my classes look like:
.transparent-circle {
border: 2px solid #fff;
height:12px;
width:12px;
-webkit-border-radius:75px;
-moz-border-radius:75px;
}
.active{
background-color: rgba(126, 222, 186, 1);
border: 2px solid #7EDEBA !important;
}
Here's what I've tried to customize the dots. I've been trying to do it with jquery in my document.ready function
$('.slick-dots li button').remove();
$('.slick-dots li').addClass('transparent-circle');
So I want to remove the standard buttons and add the css class to the list items but nothing seems to be happening, unfortunately
You have to run your functions after Slick initialized.
So this is an example , using on init
Add this before your setup :
$('.your-element').on('init', function(event, slick){
var $items = slick.$dots.find('li');
$items.addClass('transparent-circle');
$items.find('button').remove();
});
// Setup
$('.your-element').slick({
// ....
});
In external script file
$(document).ready(function(){
$(".your-slider").slick({
dots: true,
customPaging: function(slider, i) {
return '<div class="custom-slick-dots" id=' + i + "></div>";
}
});
});
Apply your styles to .custom-slick-dots
Then for the active state, apply your styles to .slick-active .custom-slick-dots
You can customise the div as you wish.
P.S. Sorry if this is not a tailored answer...it's more of a general one for anyone who needs it. 😬
try:
$('#yourID').slick({
...,
customPaging: function(slider, i) {
return ''; // Remove button, customize content of "li"
}
});
$('#yourID .slick-dots li').addClass('transparent-circle'); // Add class to "li"
I'm trying to make a blue div that turns red when clicking on it and the red div turns back to blue ( so I can add more events on the click after clicking, so .css isn't really an option)
When clicking on the div when it's blue, it turns red. But when I click the red div it doesn't respond, even when I add a simple alert()
Does anyone know what I'm doing wrong?
This is my current code and a JSFiddle
code:
$("#Blue").click(function(){
$("#Blue").attr("id","Red");
});
$("#Red").click(function(){
$("Red").attr("id","Blue");
});
If anyone could tell me what Exactly I'm doing wrong that would be great, thank you in advance
You need to use event delegation -- your click handlers are bound to the matching elements at the time the code is first run, and only then. Since there's no #Red element at that point in time, that second click handler isn't bound to anything.
$(document).on('click',"#Blue", function(){
$("#Blue").attr("id","Red");
});
$(document).on('click',"#Red", function(){
$("#Red").attr("id","Blue");
});
http://jsfiddle.net/mblase75/HDFyn/
http://api.jquery.com/on
That said, the "proper" way to do this would be to add and remove a class, not change the ID:
$('#btn').on('click', function(){
$(this).toggleClass("red blue");
});
http://jsfiddle.net/mblase75/mKMW6/
.click() binds only to existing elements at the time you call it; it will not bind to a later-created element or an element to which you assign the id later.
The fix is to use event delegation. See here and here for more information.
Also, use classes, instead -- much more flexible.
HTML
<div class="Test blue">Test</div>
jQuery
$(".blue, .red").click(function(){
$(this).toggleClass('red blue')
});
CSS
.Test{
width: 50px;
height: 50px;
}
.blue{
background-color: blue;
}
.red{
background-color: red;
}
Fiddle: http://jsfiddle.net/8FmSt/3/
You could use the class and update the ID like below instead of having 2 function to do that action,
$('.Test').on('click', function () {
this.id = (this.id == 'Blue')?'Red':'Blue';
});
DEMO: http://jsfiddle.net/8FmSt/2/
If it is all about changing color, then use a css to change to color like below,
$('.Test').on('click', function () {
$(this).toggleClass('Red Blue');
});
http://jsfiddle.net/8FmSt/5/
Try:
$(".Test").click(function(){
var id = $(this).attr("id");
if(id == "Red"){
$(this).attr("id","Blue");
}
else{
$(this).attr("id","Red");
}
});
Updated fiddle here.
Let's uncomplicate
HTML
<div class="Test">Test</div>
JQUERY
$(".Test").on('click', function () {
$(this).toggleClass("red");
});
CSS
.Test {
width: 50px;
height: 50px;
background: blue;
}
.red {
background: red;
}
I have a :hover style definition declared in the CSS stylesheet file:
.myclass:hover {
border-color: red;
background-image: url('http://goo.gl/zdLfy');
}
Now, under given conditions, I want to change the background-image for this hover style.
I don't know how to do this using JavaScript / jQuery. Is this possible? How?
You can add a new style tag cascade over the previous declaration. assuming the css in in the head tag
$('head').append('<style>#element:hover {/
background-image: url("http://new.image/url");/
}/
<style>');
$('#element').hover(function() {
//on hover
if(condition === true) {
$(this).addClass('newBGImage');
}
}, function() {
//when hover ends
if($(this).hasClass('newBGImage')) {
$(this).removeClass('newBGImage');
}
});
Make your CSS be something like this:
.myclass:hover {
border-color: red;
background-image: url('http://goo.gl/zdLfy');
}
.specialCondition:hover {
background-image: url('http://anotherURL');
}
And then, for that special condition do:
$('.myclass').addClass('specialCondition');
And when the special condition is no longer there, remove the class:
$('.myclass').removeClass('specialCondition');
This way you keep your background-urls where they belong, in the CSS
You want to add a class that has the new background and then on hover use something like
$(this).addClass("YourClassName");
and then on leave
$(this).removeClass("YourClassName");
When any <a> tag is clicked with the id="cnt" I want to set the border color of div#fancybox-content to #000. My attempt:
$(document).ready(function(){
$('a#cnt').click(function(){
$("#fancybox-content").css("border-color","#000");
});
});
This code does not work.
are you sure you meant "id of 'cnt'"? you said "When any a tag is clicked"... is there more than one?
Make sure you set the other border parameters as well
If there is more than one, use a class:
$().ready( function() {
$("a.cnt").click(function() {
$("#fancybox-content").css({"border-width":"1px", "border-style":"solid", "border-color":"#000"});
});
})
see - http://jsbin.com/avuxe3/3
If there really is one:
$().ready( function() {
$("#cnt").click(function() {
$("#fancybox-content").css({"border-width":"1px", "border-style":"solid", "border-color":"#000"});
});
})
enter code here
The trick is in which selector you use. If you have a single HTML element that has an ID, use the # selector. If there is more than one element, you should use a class rather than ID and use the . selector. Below are examples:
If you have a single A tag, with an id="cnt" then you would use:
$('a#cnt').click(function() {
$('#fancybox-content').css({"border":"solid 1px #000"});
});
If you have more than one anchor with the cnt notation, set it as class="cnt" and use:
$('a.cnt').click(function() {
$('#fancybox-content').css({"border":"solid 1px #000"});
});
Better yet, keep your styles in a stylesheet like this
.borderOn { border: solid 1px #000; }
And then toggle this class on (and off if you like) with your links' click events:
$('a.cnt').click(function() {
$('#fancybox-content').addClass('borderOn');
});