how can I add a class to my html element as a string
like this:
'.step1{transform : translate(10px,10px); transition-duration: 1s;}'
I've tried jquery addClass but it takes only the class name not a string as the whole class.
the problem is i want to generate a class dynamically then remove it using removeClass, if i add it as css it's not possible to remove it easly
This should do the trick. If you hover the second box, the first one moves.
$('.two').mouseenter(function(){
$('.one').addClass('move');
});
$('.two').mouseleave(function(){
$('.one').removeClass('move');
});
.one, .two {
background-color:green;
width:100px;
height:100px;
transition-duration: 1s;
}
.two {
background-color:red;
}
.move {
transform: translate(100px, 100px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='one'>
</div>
<div class='two'>
</div>
If you are already using Jquery then use css() function Know more here
i hope it helps.
$(".step1").css({"transform": "translate(10px,10px)", "transition-duration": "1s"});
This might help you, This will not add any class, it will directly add the styling to the div. addClass()/removeClass() will only use for adding/removing the class. The parameter passing inside this will be a class name.
$('.targetDiv').CSS({"transform" : "translate(10px,10px)", "transition-duration": "1s"});
I've added two examples.
One with adding a class to the div and placing the style in it.
or I've added a Jquery function that applies the css to the div without adding a class.
jsfiddle here
$('#add_class').on('click', function(){
$("#my_first_div").addClass("step1");
});
$("#add_css").on('click', function(){
$("#my_first_div").css("transform", "translate(10px,10px)");
$("#my_first_div").css("transition-duration", "1s");
});
$("#reset").on('click', function(){
$("#my_first_div").removeClass("step1");
$("#my_first_div").css("transform", "translate(0px,0px)");
$("#my_first_div").css("transition-duration", "1s");
});
#my_first_div {
color:red;
}
.step1{transform : translate(10px,10px); transition-duration: 1s;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div id="my_first_div">
my div
</div>
<br /><br /><button id="add_class">
add class
</button>
<button id="add_css">
add css
</button>
<button id="reset">
reset
</button>
explanation: with the addClass event a class will be added to the div and applies the style that is in the css documentation addclass
and how to remove the class
With the css event a css style will be applied to the div without setting it in the css you can see an example and documentation here
Related
When I click on it changes background. It works fine. But what if I want to click on it again to restore the original background? I have this code:
jQuery(document).ready(function($) {
$(".select").on("click", function () {
$(this).css("background-image", "url(images/selected.png)");
});
});
Here is jsfiddle EXAMPLE
Basically when I click on the div it changes the background, which is fine. But I want to have ability to click on it again to restore the original background.
It will be an alternative solution for tick box, but just for demo purposes.
Thanks
JS
replace
$(this).css("background-image", "url(images/selected.png)");
with
$(this).toggleClass("active");
Style
#multiselect .active {
background-image: url('...');
}
Fiddle http://jsfiddle.net/09xgrhxo/4/
Instead of using .css() to change the background-image I would add a class in your CSS and use .toggleClass().
Also be aware that simply adding a class will not be specific enough because your css is using:
#multiselect .select
you're going to have to target the class you add as a child of #multiselect:
#multiselect .change
CSS
#multiselect .change{
background-image: url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)
}
JS
$(".select").on("click", function () {
$(this).toggleClass("change");
});
FIDDLE
You could use data-* attribute.
$('.select').attr('data-img', $('.select').css('background-image'));
$(".select").on("click", function() {
$(this).css("background-image", ($(this).css('background-image') == $(this).data('img')) ? "url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)" : $(this).data('img'));
});
#multiselect .select {
background: url(http://t0.gstatic.com/images?q=tbn:ANd9GcQF_ErOlc78eOGZaEWb-dwPkrv2uyAoKx0Pbn3-e0tAZoUDSQRCsA) center;
width: 250px;
height: 100px;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="multiselect">
<div class="select">Option1</div>
<div class="select">Option2</div>
<div class="select">Option3</div>
</div>
Instead of writing background-img url in javascrpt, I would suggest to create two classes having same properties but different background-img url which you want to toggle. so here we will be toggling class (ultimately background-img) in javascript.
see jsfiddle [example][1]
[1]: http://jsfiddle.net/09xgrhxo/13/
I have a case :
HTML :
<div class="a b">
<span class="one">Success ONE</span>
<span class="two">ONE</span>
</div>
<div class="a b">
<span class="one">Success TWO</span>
<span class="two">TWO</span>
</div>
I want to show .two which the default is hidden. If I use CSS, I can use :
.two {visibility:hidden;}
.a:hover .two {visibility:visible;}
It works well when using CSS, but in my case, I have to comment tag this css .a:hover .two {visibility:visible;}.
I want to show .two with JavaScript. Could you help me to show .two when hovering .a class? (I want the same result with JavaScript like using .a:hover .two {visibility:visible;})
I'm not sure why you want to do this with JS when it can be done with CSS but here you go:
CSS
.two {display:none;}
JS
$(".a").hover(function(){
$(this).find(".two").toggle();
});
FIDDLE
// EDIT
This was my original answer. I changed it to shorten the code but I will repost it:
$(".a").hover(function(){
$(this).find(".two").css({"visibility":"visible"});
}, function(){
$(this).find(".two").css({"visibility":"hidden"});
});
First you have to declare in the css.
.two {display:none;}
after that do something like this.
<script>
$(document).ready(function(){
$(".a").hover(function(){
$(this).find('> .two').css("display","block");
},function(){
$(this).find('> .two').css("display","none");
});
});
</script>
Problem is solved. I'm using Javascript :
$(".a").hover(function(){
$(this).find(".two").css({"visibility":"visible"});
}, function(){
$(this).find(".two").css({"visibility":"hidden"});
});
This is the previous answer from #jmore009 before he was editing his last answer.
I am making a html forum and am using javascript to change the colour of the forum, I have three divs, one is blue, green and red.
When each div is clicked, the javascript will change the colour of the elements.
I would like to change the colour of the submit button's focus with the .css() function in javascript, but the focus part doesn't work.
Here is my javascript code:
$("#green").click(function() {
$(".mailheader").css("background","#a3d300");
$(".submit").css("background","#a3d300");
$(".submit:focus").css("background","#98cf00");
});
$("#blue").click(function() {
$(".mailheader").css("background","#00b4ff");
$(".submit").css("background","#00b4ff");
$(".submit:focus").css("background","#04a6e9");
});
$("#red").click(function() {
$(".mailheader").css("background","#ff0000");
$(".submit").css("background","#ff0000");
$(".submit:focus").css("background","#ea0202");
});
So I have tried $(".submit:focus").css("background","#ea0202"); for chaning the background of the focus, but it doesn't work. anyone know how to fix this? thanks
Check this
DEMO
HTML
<div class="mailheader"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="red"></div>
<input type="button" value="submit" class="submit" />
CSS
#green, #red, #blue {
height:50px;
width:100px;
}
#green {
background-color:green;
}
#red {
background-color:red;
}
#blue {
background-color:blue;
}
jQuery
$("#green").click(function () {
$(".mailheader").css("background", "#a3d300");
$(".submit").css("background", "#a3d300");
$(".submit").focus(function () {
$(".submit").css("background", "#04a6e9");
})
});
$("#blue").click(function () {
$(".mailheader").css("background", "#00b4ff");
$(".submit").css("background", "#00b4ff");
$(".submit").focus(function () {
$(".submit").css("background", "#ea0202");
})
});
$("#red").click(function () {
$(".mailheader").css("background", "#ff0000");
$(".submit").css("background", "#ff0000");
$(".submit").focus(function () {
$(".submit").css("background", "#98cf00");
})
});
You are setting styles directly on the element. Why not set a css class on the elements and handle all the changes via css. That is much cleaner and easier to use.
eg. when '#green' is clicked add a class 'Green' to the submit button. (see http://api.jquery.com/addClass/ ) (be sure to remove the other classes)
Then in css you can set #MySubmitButton.Green{.. your green styles..} and use all the pseudo css classes you like. Things like #MySubmitButton.Green:hover {color:#FF00FF;}
Hope this helps...
jQuery can't change pseudo-elements' style
Fix (I used the .html() function for the :focus's style, using a <style> tag in the body or elsewhere):
<script>
...
$(".submit").css("background","#ff0000");
$("body style.changeColor").html("
.submit:focus {background: #ea0202};
");
...
</script>
<body>
<style class="changeColor">
</style>
</body>
And I were you, I rather change all other .css() functions into text inside the .html() string.
$("body style.changeColor").html("
...
.submit {background: #ff0000};
.submit:focus {background: #ea0202};
");
I'm wondering how to appropriately write css to do the following, I have the following html code:
<div class="class1">
Hello
<div style="opacity:0" class="class2">
World
</div>
</div>
When I hover over class 1, I want to change class2's opacity to 1. How would I do that? Thanks!
First remove the inline style and create a css rule for class2. Then change the opacity when hovering over class1.
.class2 {
opacity: 0;
}
.class1:hover .class2 {
opacity: 1
}
http://jsfiddle.net/zC8Wc/
edit
The inline style has been removed because you can't override them in your CSS without using the !important rule which you should absolutely try to avoid. Also all your styling should be in stylesheets not in your HTML.
in css:
.class1:hover .class2{
opacity:1;
}
jsfiddle: http://jsfiddle.net/markasoftware/BD66q/
use visibility instead
<div class="class1" onmouseover="show_div()">Hello
<div style="visibility:hidden;" class="class2">
World
</div>
</div>
<script>
function show_div()
{
document.getElementsByClassName("class2")[0].style.visibility="visible"
}
</script>
I have a Div with position:relative which contains "one or more" images inside it with postion:absolute with some top and left values. I need to toggle the position attribute of ALL THE IMAGES at a time between Absolute and Auto/Relative with a button using JS or JQuery.
Is there any way to work with all these child IMAGES at a time?
try the following:
html
<div class="wrapper">
<img src="http://dummyimage.com/15x15/000/fff" class='absPosition'>
</div>
<input type="button" value="change position">
css
.wrapper {
height:300px;
position:relative;
}
.absPosition {
position:absolute;
bottom:0;
}
jQuery
$(":button").click(function() {
$("img").toggleClass("absPosition")
});
Demo: http://jsfiddle.net/ZRDdB/
Just use a jQuery selector which encompasses all of the images within your div. If, for example, your div had an id of "divId" then to set the position to relative of all the images within that div, you would use:
$(document).ready(function() {
$("#button").click(function() {
$("#divId img").css("position", "relative")
});
});
This would be best achieved using both CSS rules (as in CSS rules, not JS assigned inline styles) and jQuery's .toggleClass() method.
If you've got markup like the following:
<div id='foo'>
<img />
<img />
</div>
and CSS like the following:
div#foo { position:relative; }
div#foo img { position:relative; }
div#foo img.absolute { position:absolute; }
You can easily toggle that the IMGs' position rule using something like
$('button').click(function() {
$('div#foo img').toggleClass('absolute');
});