I have a DIV that is set do display:none from CSS and it's supposed to be made visible (style.display = '';) at some point by javascript.
The problem is that if I put the display:none in the CSS file the javascript does not seem to have any effect. I have also tried changing the background color instead of the display property, and that works.
I have the code running here (just press the edit link).
I really thank you for taking the time to look into this.
Set it to block or inline using Javascript.
Writing style.display = "" will clear any display set in the inline style, and cause it to revert to whatever it inherited from CSS.
Alternatively, you can change the element's className using Javascript so that the CSS rule no longer applies.
This is because style.display = '' only affects inline styles on an element. It doesn't change the style sheet.
You should set it to whatever display you need:
style.display = 'block';
or add a class that represents the style you want.
other way to hide content is use opacity=0 and to again make visible use opacity=1 thats it....!!!
Related
I have an element that I want to add multiple inline filter styles on top of at different times.
The code I have now always resets the inline style so that whatever I set last is all that is there.
Here is an example snippet:
$("div").css("-webkit-filter","grayscale(1)");
$("div").css("-webkit-filter","blur(5px)");
.box{background:blue; width:100px; height:100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
You can see that i'm setting grayscale first and at that time it turns black. Then I set blur second, but it erases the grayscale filter and turns it back to blue then it blurs.
I want both grayscale and blur to be applied.
The issue is that you're overwriting the previous style since they both use the same property. Try putting them together in the same statement like so:
$("div").css("-webkit-filter","blur(5px) grayscale(1)");
EDIT: If you need to apply them at different times, try this:
$("div").css("-webkit-filter","grayscale(1)");
$("div").css("-webkit-filter","blur(5px) grayscale(1)");
This will set the grayscale first and then preserve it by reapplying it with the blur effect as well
This will take the current css and append the new stuff.
var $div = $("div");
$div.css($div.css() + "-webkit-filter","blur(5px)");
You may want to add both filters in one line, as you can see here:
https://developer.mozilla.org/en/docs/Web/CSS/filter
Jquery wants to overwrite the css if your setting the same property.
This question also addresses a similar problem, doesn't seem like a very clean solution though.
Don't overwrite css properties, but add to them with jQuery
I have a long form with many fields. Some of the fields get their data from separate DIV, where there are other more specific fields.
Every field, along with its label, is included into a separate block. To highlight the fields there is a CSS :hover for their class.
The CSS :hoveron the fields blocks works smoothly, and also the onmouseover and onmouseout over the many DIV passing data to them, using the following Javascript:
function LineOn(whichOne) {
document.getElementById(whichOne).style.backgroundColor = '#cf0';
}
function LineOff(whichOne) {
document.getElementById(whichOne).style.backgroundColor = '#fff';
}
But, after the execution of the Javascript, the hover stops to work (i.e. the block remains white), without reporting any console error or message.
This happens both with Firefox 36.0.3 and with Chrome 39.0.2171.71, running on a Slackware current release.
Is there a sort of hierarchy giving to the background color set with Javascript the priority over the one defined in the <style> section?
Yes, styles defined directly in the element's style property overrides any value set in CSS, unless that style has !important on it.
CSS specificity http://www.w3.org/wiki/CSS/Training/Priority_level_of_selector
The priority level of the selector is decided in Point of combination of selectors.
style attribute = a
number of ID attributes in the selector = b
number of other attributes and pseudo-classes in the selector = c
number of element names and pseudo-elements in the selector = d
That's one good reason not to set styles attributes; set a CSS class instead yet.
I'm trying to create a bookmarklet that will hide images on any page I'm currently viewing. It works for removing <img> tags and it creates a CSS style that tries to hide all background images. The issue I keep encountering are background images that are specified with !important. I can't figure out how to hide them.
Here is a codepen demonstrating the issue: http://codepen.io/Chevex/pen/kbDcv
If you remove the !important from the background image then it all works fine. Any ideas?
Make sure your CSS occurs after that CSS on the page and put the !important override on your CSS. Also, since you specify that you are using JavaScript, you can add your CSS as inline CSS on the actual element and use !important. The only thing that overrides inline important is user agent user important style sheets.[reference][example]
As others have pointed out, you can use the newer (IE9+) querySelectorAll function:
function hideImages() {
var d = document,s = window.getComputedStyle;
Array.prototype.forEach.call(
d.querySelectorAll("body *"),
function(el){
if (s(el).backgroundImage.match(/url/) ||
el.tagName === 'IMG'){
el.style.visibility="hidden";
}
}
);
}
$('button').click(hideImages);
http://codepen.io/anon/pen/rBnIx
Updated to include background-images set via CSS.
Though, you could probably lose a lot by turning anything with a background-image invisible. You might have better luck just turning that property off. You could either check the computed style of each element like above or just set them all like below. The function below uses setProperty to override !important which is also IE9+.
function hideImages() {
var a=document.querySelectorAll("body *"),i=a.length;
function _f(n){
if (n.tagName === 'IMG') n.style.visibility="hidden";
n.style.setProperty("background-image", "none", "important");
};
while(--i) _f(a[i]);
}
http://codepen.io/anon/pen/tnrdH
you can hide divs with backgrounds in the same manner as you do img tags in the linked code:
var imgs=document.querySelectorAll("div[style*='background']");
for (var i=0;i<imgs.length;i++) {
imgs[i].style.visibility="hidden";
}
Ok, lets say i have three images with the same css class.
Its easy enough to change the style of this class via javascript (document.getElementById etc), but is there a way to change the inline style of one of those images using pure javascript.
The script will go in a for loop, so that each time it runs a different inline style will be applied to each image.
To do this i need to make a distinction between the three images
element.style contains one JavaScript property for each CSS property. Example:
var img1 = document.getElementById('img1');
img1.style.borderColor = '#ff0000';
Im looking for a way to change the background image of a div using jQuery BUT only amending it, not totally changing it.
Let me explain.
Im using http://jqueryui.com/demos/sortable/#portlets to show some div's that open and close. Now when you click the portlet header it opens and closes the content below.
Inside the portlet header i have a child div which shows an arrow (either up or down) depending on the current state of the content. I need a way of changing the background image on this child div by adding on "-visible" onto the end of the url for the background image.
I wouldnt even know where to start with doing this, but i have added some code below for you to look at.
http://jsfiddle.net/45jZU/
From the fiddle there, i need to alter the background image of the portlet-arrow div inside portlet header. I can not simply change the background image all together, but i have simplified it down to post on here.
I hope this isnt too narrow to not be of use to anyone else on stackoverflow.
Thanks
Maybe I'm missing something here, but can't you use the .css attribute modifier for the selected jQuery object? Something like:
var current_background = $("#my-div").css("background-image");
$("#my-div").css("background-image", current_background + "-visible");
If you're looking to modify the class names themselves, you can try mess around with the .toggleClass(), .hasClass(), .addClass() and .removeClass() methods in jQuery.
I hope this helps, but let me know if I've missed the mark here completely!
I would personnaly go for using css classes to change the background image. If you decide to change the image afterwards, you won't have to alter your javascript. It is a better solution to use javascript to code the behavior of the widget, not the visual aspect.
So you have the following css:
.portlet-header {
background-image: url(<an image>);
}
.portlet-header.collapsed {
background-image: url(<an other one>);
}
Add this line to your javascript to toggle the collapsed class:
$(".portlet-header").click(function() {
...
$(this).parent().toggleClass('collapsed');
});
If you widgets starts collapsed, initially add the class.
DEMO