How can I remove( not set null) a CSS property from a class? Here I have a class named myclass it contains the property right:0px. I am trying to remove right:0px from my class(not trying to set null). How can I make it possible?
.myclass{
position:fixed;
right:0px;
}
You can do following way using JQuery. It will set initial value of right.
$('.myclass').css({ 'right' : 'initial' });
.myclass{
position:fixed;
right:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myclass">
test
</div>
You should not change the initial css, because it's already included. What you could do is add a new css class and reset the right property:
.myResetClass {
right: auto !important;
}
Then append this class to necessary elements, which will change the right property to default auto:
$('.myclass').addClass('myResetClass');
I'm not sure I've seen jQuery control a CSS declaration like what you want, but from what I've seen that's not the best way to handle it. Instead create these classes:
.myclass1 {position:fixed;}
.myclass2 {right:0px}
and use the two classes in your element like
<input class="myclass1 myclass2" ...
Then when you want to remove the right:0px, all you need to do is to remove the class that handles that:
$('input.myclass1').removeClass('myclass2');
To put it back, use addClass
$('input.myclass1').addClass('myclass2');
As far as I Know, JQuery cannot manipulate CSS rules specified for a particular class. What you can do though is set CSS rules for another class.
.myclass{
position:fixed;
right:0px;
}
.anotherclass{
position:fixed;
}
then using jquery
$(selector).removeClass('myclass').addClass('anotherclass');
You can try using this:
$(".myclass").css({ 'right' : 'inherit' });
If you want to remove inline.. This will be useful
the expect res is .myclass{ position:fixed; }
Try using $("style") selector, .each(), .text(), String.prototype.replace()
$(function() {
$("style").each(function() {
$(this).text(function(_, text) {
return text.replace(/(\.myclass\s+\{\n\s+.+\n\s+.+\n\s+.+\})/g
, function(match, p1) {
var re = match.replace(/right:\s+\d+\w+;\n/g, "");
return re
})
});
console.log(this.textContent)
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<style>
.myclass {
position: fixed;
right: 0px;
}
</style>
Try like this:
$(".myclass").removeAttr("right");
Related
Ok so I have a div that contains a canvas and a span which contains an image. I want it such that if the user hovers over or focuses on the div that the image inside of the span will appear. The image wil be invisible otherwise.
Long story short I want to have a canvas with a red 'X' on the corner that is only visible when the canvas is active
$('image-canvas').hover(function() {
$('delete-image').addClass('active');
}, function() {
$('delete-image').removeClass('active');
})
.delete-image {
position: absolute;
top: 0px;
right: 0px;
}
.delete-image>img {
width: 32px;
visibility: hidden;
}
.delete-image.active>img {
width: 32px;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="canvas-container" tabindex="1">
<canvas id="imageCanvas"></canvas>
<span class="delete-image">
<img src="file:///E:/Apps/Emoji-App/emojis/icons/if_erase_delete_remove_wipe_out_181387.png"/>
</span>
</div>
The hover event fires just fine but the image refuses to toggle visibility. Any help?
When you use a class within your selector, write it like this:
$('.myDiv')
When you use an ID within your selector, write it like this:
$('#myDiv')
For further informations, check out jQuery's learning center website.
Seems like you have misspelled or have not specified the jQuery selector type (class . or id #). Please try this:
$('#imageCanvas').hover(function () {
$('.delete-image').addClass('active');
}, function () {
$('.delete-image').removeClass('active');
})
See here .
$("#control").mouseover(function(){
$('#img').show();
});
$("#control").mouseout(function(){
$('#img').hide();
});
#img{
display:none;
}
#control{
margin-bottom:10px;
padding:5px;
background-color:#eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='control'>Show/Hide</div>
<img src='https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg' id='img'>
The question is not well-phrased, so I ain't sure I totally understood what you wanted.
When you try to select by class, don't forget the dot '.'
$('image-canvas').hover(function () {
$('.delete-image').addClass('active');
}, function () {
$('.delete-image').removeClass('active');
})
When using functions 'addClass', 'removeClass', 'toggleClass', etc. - you don't use the '.' sign because it is a function that refers only to classes. On the other hand, when using jQuery selector $(' ') or vanilla querySelector(' '), you should declare what kind of attribute you are selecting by, those will be '#' for ID, '.' for Class, and if you want to select by anything else you can use $('*[anyattribute=anyvalue]'), in your clase it could be $('span[class=delete-image]').
Good luck
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
Using DOM manipulation need to change this:
ul.tabbernav li
{
list-style: none;
margin: 0;
display: inline;
}
to this:
ul.tabbernav li
{
list-style: none;
margin: 0;
display: none;
}
Only using pure javascript functions. Any help is appreciated
You shouldn't aim to change the css but rather add or remove a class to the html element, which would correspond to a css with display:none.
Here is an example :
css :
.hidden { display:none; }
javascript :
document.getElementById("hideMe").classList.toggle("hidden");
You can use this, if you want pure javascript....
function changeCss(){
var selector = document.getElementById('your_selector')
selector.style.display = "none"
}
and then you can call it when you need to use it.
and you canuse this if you have access to some jquery
$(document).ready(function(){
$('.some_button_or_link').on('click',function(){
$('your_selector').style('display' , 'none')
})
})
More so you can use classes (adding and removing) like this:
If you have your css like this :
.hidden{display : none}
then you can use this:
$(document).ready(function(){
$('.some_button_or_link').on('click',function(){
$('your_selector').addClass('hidden')
})
})
and if you want to re-add the class
$(document).ready(function(){
$('.some_button_or_link').on('click',function(){
$('your_selector').removeClass('hidden')
})
})
and then note that where I have used .on('click') you can as well use other kinds of events. Try and post back. Cheers!
$('.ul.tabbernav li').css('display', 'none');
More efficiently:
<script>
(function(){
$('.ul.tabbernav li').css('display', 'none !important');
})();
</script>
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/
The code is pretty simple.
HTML:
<div class="simpleDiv" id="Child1" onmouseover="expandDiv(this);"></div>
CSS:
.simpleDiv {
background-color: red;
width: 100px;
height: 50px;
margin: 5px;
margin-left: 50px;
opacity: 1;
}
JavaScript:
function expandDiv(object){
alert(document.getElementById(object.id).style.height);
}
Why am I not able to alert the height of the div like this? If I alert the id or class using the function hasAttribute, thats working fine but not able to alert the css properties of the elements.
Any help appreciated!
Why not just alert(object.style.height)?
Anyway, the reason it doesn't work is because elem.style.property only works with inline style="..." attributes. To take into account all styles, you need this:
alert(window.getComputedStyle(object).height)
Older versions of IE don't support this, but it's a very easy shim:
window.getComputedStyle = window.getComputedStyle || function(e) {return e.currentStyle;};
function expandDiv(object){
alert(document.getElementById(object.id).innerHeight);
}
try using:
alert(document.getElementById(object.id).offsetHeight);
Here is description:
offsetHeight on MDN
Use JQuery:
alert($('#Child1').css("height");
Or to change the attribute, use:
$('#Child1').css("height", value )
Ignore if you don't want JQuery.