I am trying to figure out how to remove css attributes using Jquery. The issue is that it seems like this can only be done if a style is inline. For instance, when I use this approach:
('.hero').css('background-image', '').css('background-color', '');
It does nothing, although if it has those attributes set using the STYLE property, than it works great. The same can be said for:
('.hero').css('background-image', 'none').css('background-color', 'transparent');
Can anyone assist me in removing attributes that are added via stylesheet and not inline?
You can do this, but it is very convoluted. The only way to accomplish this is to load the stylesheet into a string in javascript, grep out the rules you want to remove (using String.replace() or similar), then remove the current css tag from the page (using $.remove()), and then adding a new css tag with the grepped contents of the file/text you loaded.
This is very very convoluted. I think you need to rethink why you are trying to do this to begin with. Or maybe just stick with setting the values back to their defaults using jQuery, which can be found on w3schools. Or maybe create a style in the stylesheet that sets the values to their defaults, and give the element that style. OR just give us a little more info, and we may be able to suggest a better way around your problem.
I think you may be asking the wrong question.
It looks like you want to be able to restyle an element without removing its existing class. A far easier way to do this is to ADD an additional class to the item you want differently styled, and then handle it in the CSS definition.
For instance:
('.hero').addClass("blank");
with CSS:
.hero.blank { background-color: transparent; }
As .hero.blank is more specific than .hero, it'll be the style applied first.
You have to set a default style for elements. Few default CSS properties from W3C. Most of default properties are listed here.
it looks like to me you're trying to adjust several css attributes in the same function.
if you want to clear the background image and make the background transparent then you just need to change both in the same .css function
try
$('.hero').css("background-image:none; background-color:transparent");
or just set up a 2nd css class that has the style preformatted "heroAlt" and use jQuery to remove old class/add new class
$('.hero').removeClass(function(){
$(this).addClass("heroAlt");
});
hope that helps
First of all, the following will work if used correctly:
$('.hero').css('background-image', 'none').css('background-color', 'transparent');
See: http://jsfiddle.net/Az7VZ/
That being said, there are a few pitfalls to watch out for.
You run your JavaScript before the HTML document containing the .hero div loads. This has the effect of jQuery selecting nothing to apply the CSS to.
Your CSS uses the "!important" modifier. You will not be able to overload that style with jQuery.
Also, don't forget the "$" or "jQuery" in your script.
Note: this DOES NOT override the actual .hero class. Therefore, if you add another element with the "hero" class, then it will have the original CSS styling. You would need to run the jQuery script again to apply the new style to the new element.
A great alternative to this, is creating different classes with the desired styles. Then removing/adding the CSS class via jQuery:
$('.hero').removeClass('hero').addClass('hero2');
See: http://jsfiddle.net/Az7VZ/1/
Related
I need to change the z-index in css with javascript #content>ul {z-index: 100;}.
I tryed this $('content ul').css("z-index", 49); and other similars, but with no good result.
jQuery accepts CSS selectors just fine:
$('#content > ul').css("z-index", 49);
Demo: http://jsfiddle.net/hgt9p/1/
try this..
$('content ul').css("z-index", "49");
To change z-index, the position of the element needs to be other than static. This is the only way I can think of how you're going wrong. The other attributes the position property takes are: absolute, relative, fixed. Sorry if you already knew this, it's the only thing that I can think of which might be going wrong. Also, make sure you're including jQuery and it's working, many a time i've been fooled by an out-of-date jQuery link or for some reason it wasn't working (e.g you weren't including the jQuery Library above the jQuery script).
$('content ul').css("z-index", "49");
should work with JQuery. However are you sure content is a tag name? I'm guessing it's a class name and you should then use
$('.content ul').css("z-index", "49");
Use the inspector to check if the elements are getting the property.
Also the element needs to be absolute, relative or fixed for z-index to work correctly.
That said, using that Jquery selector isn't good for performance. You should look at something like
$('.content').find('ul').css("z-index", "49");
this will give you better performance. As you are now mapping directly to findElementByClassName and findElementByTagName.
We are developing a bookmarklet, and when the bookmarklet loads on different websites, eg: cnn.com, bbc.co.uk, yahoo.com it displays in various styles and we have struggle to reset these styles.
The bookmarklet content is in the current page DOM and not in an iframe (because we need cookies and access to DOM).
We tried using CSS reset, but that resets only some basic stuff, like margins. And pages where for example there is a custom form, or rounded table rectangles it inherits and it should not.
Is there a way that we can completely isolate this DIV area in the current page to look only as we want?
How about trying to replace your div with some obscure element that is unlikely to be on their pages.
eg. b or em or i or maybe even one of the newer html5 elements if you're not fussed about browser support.
And styling them to display: block to function like a div which is a block element.
Your resultant HTML is not going to be valid or pretty, but it's a bookmark so, meh.
Short of that, a really good reset is what you'll need.
Or you'll just have to live with slight differences in your styling.
We end up using https://github.com/premasagar/cleanslate
CleanSlate is an extreme CSS reset stylesheet. It is used to reset the styling of an HTML element and all its children, back to default CSS values. It is composed exclusively of !important rules, which override all other types of rules.
Well, you can use either the unique id and adding !important to each property afterwards - for resetting the generated element in the DOM - or you could use the new scoped attribute in "HTML5".
But that may result in problems with all explicit "inherit" valued styles on that element or the parents. For example, relative font sizes will result in problems, too.
Therefore is the experimental scoped attribute on the style section, but last time I tried it only Chrome/Chromium supported it, Firefox may have landed support for it recently, too - because there was a huge discussion on the mailing list.
http://updates.html5rocks.com/2012/03/A-New-Experimental-Feature-style-scoped
Edit:
Another solution could be to use a custom element that is not in the DOM by default.
Something like document.createElement("thisisfrommyapp");
You can style them like other elements, but have to apply display:block or whatever behaviour want for them.
Also, IE allows using them, but you actually need to insert them into Tridents' parser before. If you want to use them in HTML, you have to do the createElement() before the DOM is parsed (so it's most likely inside the head of your document).
<html>
<head><script>document.createElement('customelement');</script></head>
<body><customelement>is stylable in IE8, too</customelement></body>
</html>
You have to do the createElement stuff for Trident only, because otherwise you will result in weird parsing behaviours due to their display:inline-block defaulted model :)
If you are using XHTML on the website for whatever stupid reasons (there are no valid reasons to use XHTML over HTML, due to parsers stripping out XML tags anyways), you should use a custom namespace for it.
~Cheers
Follow this 2 steps to sandbox a container.
<div class="namespace-box">
<h1 class="namespace-title">Title</h1>
<p class="namespace-text">Text</p>
</div>
Unset all properties of the container's namespace, all: unset; is just a placeholder:
[class*="namespace-"],
[class*="namespace-"]:after,
[class*="namespace-"]:before,
[class*="namespace-"]:hover:after,
[class*="namespace-"]:hover:before {
all: unset;
// properties to be unset
}
Use a Grunt or Gulp task to add the attribute selector to your original CSS. This increases the cascade and prevents overrides by the unset hack:
[class*="namespace-"].namespace-box,
[class*="namespace-"].namespace-title,
[class*="namespace-"].namespace-text {
// original properties
}
You can automate the specification with the postcss-increase-specificity task.
Enjoy your bulletproofed container.
I have a page in magento which has some dynamically created elements but the problem is the classes are named the same. I would like to change the styling of the second class but not the first.
How would I go about this? I was thinking possibly jQuery but wasn't 100% sure where I should be looking for that.
Use the nth-child selector:
$(".YourClassName:nth-child(2)").css("PropertyToChange", "ValueOfProperty");
Here's a working fiddle to illustrate.
I have page which has several Button & images inside the <div>. I have such requirement :
On clicking over any image or button a div/page appears which contains all the css property and gives option to change the CSS property of concern element. eg. color, value, font size etc....
Is there any plugin available for that or do i need to create by own. I'd appreciate your suggestion
Thanks
you can refer these plugins and modify the source code according to requirement....
changecss
http://www.bramstein.com/projects/jsizes/
I doubt there will be such plugin which will know the ids/names of all your elements. The only way to have such plugin is if it searches by element type, but that will be really uncleaver, since it may list 100+ html elements, while you need to change only 5 (for example). It will be better and smarter to write it by yourself in my opinion.
jQuery makes such changes trivial, take a look at the .css() function. In order to get all elements you'll probably want to look at DOM traversal.
If you only need this for debugging purposes, you can use Chrom'e developper tools or Mozilla Firebug. They allow you to visualize and change CSS attributes on the fly.
If you need this for a shipping product, then good luck. It seems very hard, notably handling the CSS priority rules. Maybe you can get some reusable code from Firebug's code, which is mostly JS.
Use jquery for setting the desired css properties.
Use selector and google for setting css properties using Jquery.
anyone know how i can style a form element with javascript, but without a framework?
Found a nice plugin for jquery but I don't use jquery at all on my website so I want to avoid it if possible..
I want to create a select box that looks like this:
http://iforce.co.nz/i/qebncmoz.png
to clarify, i want to set an image/background on the select box so that I can have a custom dropdown arrow
You can style elements through the style attribute (replacing '-' with camel case) like this:
document.getElementById('elem').style.backgroundColor = 'red';
But it's better to put the styles in CSS and just change classes in JavaScript instead:
document.getElementById('elem').className = 'roundedCornerButton';
You have to use a different element. <select> can't be used because you can't style it very well using CSS, save for the background colour and font.
The best direction I can point you in is http://v2.easy-designs.net/articles/replaceSelect/ - it seems to explain how to do what you want to do pretty well.
You won't need Javascript for that, pure CSS will do.
Check this article for example:
Style Web Forms Using CSS
The styling is done through CSS, not JS. JQuery is used for shortcuts in Javascript.
There is no "replacement" happening - the tag is still there under the scene but good use of CSS is what makes it look like that image.
There is a number of drop down menu replacements out there that don't require a framework. Try Googling javascript drop down. See a fancy example here.
But consider using a framework. 20-50kb are not that much anymore in these times, it's not that much even for a dialup line. Frameworks provide a lot of little helpers for all sorts of tasks and you can link even to Google hosted versions, with the great likelihood that the user already has them cached.
If the form element has an ID associated, then you can use code similar to the following:
elem = document.getElementById(elemId);
elem.style.background = 'white';
I assume you want to dynamically change the element style; differently, you don't need JavaScript to obtain what you want.
It's not possible without javascript see here my question How to style a <select> dropdown with CSS only without JavaScript?
And if uyou don't want to use any framework then try this
http://v2.easy-designs.net/articles/replaceSelect/