We Keep Coding

Figure out if an element is visible by its CSS using pure JavaScript or Prototype?

I know there is the visible() function in prototype. I cant use it though since it only checks for the inline style display:none. How can I check if an element is visible by looking at its CSS?
Thanks!

Maybe the prototype getStyle function is what you are looking for, even though it got some limitations.
JQuery got the .css() method as meantioned in the answer to this question.

The method visible() is working correct only for inline styles. Try instead:
$('your_element_id').getStyle('display')=='none'?0:1
to check if your element is visible or not.
Domus71

How to remove CSS attribute from a stylesheet using JQuery?

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/

Change all CSS property at run time

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.

CSS / JavaScript: Make :nth-child(n) work in IE with jQuery script?

I’m trying to get the CSS pseudo :nth-child(n) function to work in Internet Explorer and that isn’t an easy task.
I founded some JavaScript in jQuery to get the job done in IE but I can’t seem to get it to work. The examples I’ve tried is with unsorted lists (ul and li’s) but my CSS code (which works well in all other browsers) looks like this:
#portfolio div:nth-child(4) { some styling }
#portfolio div:nth-child(3) { some styling }
#portfolio div:nth-child(2) { some styling }
The javascript I tried to run by appending it to my existing script.js file is:
$('div#portfolio div:nth-child(4)').css({' filter:' : progid:DXImageTransform.Microsoft.Matrix(M11=0.99984770, M12=-0.01745241, M21=0.01745241, M22=0.99984770); ‘});
But that does not work. I’ve tried to remove the “div#portfolio” and retype it but nothing I do will make it work in IE.
Any help would be appreciated.
Sincere
- Mestika

here's sample fiddle I did for an earlier example, link
I would suggest you maybe use the jQuery to add a class to the nth-child (I've done so for the "yellow" class), then add the rules to the CSS with the others, though note that the classed rule can't be grouped with the nth-child original selector which may not be a duplication problem if you're using it for a filter anyway ;)

You could try IE9.js: http://code.google.com/p/ie7-js/
Just include the Javascript file in your page, and your nth-child CSS should work properly in IE.

Someone else has already mentioned Dean Edwards' ie7/ie8/ie9.js, which tries to retro-fit a whole range of broken and missing features into IE.
You could also try Selectivizr, which concentrates on adding advanced CSS selector support to IE. It requires another library such as JQuery to do the heavy lifting of the working with the selectors, but since you specified that in the question anyway, it should be a good fit for you.

Is that the exact code you are using, because the nth-childpart is ok, the syntax for the .css() call is completely wrong.
Drop the space and the colon from the first parameter ('filter') and the second parameter has to be a string to.

How to check visibility of multiple div's in simpler way?

Currently i'm using below code which works well.
$("#topperAtBaseLevel:visible, #lowerAtBaseLevel:visible, #midAtBaseLevel").hide();
any optimised code? (i cant use same class)
i mean how to use :visible rightly?

That is the way to achieve what you're going for. You are using the selectors correctly and efficiently.
You could make it a little faster if you maintained an array of the ID's of the tags that need to be hidden, and then construct your selector dynamically to find by ID. (This would be faster even though the selector might be longer. Selecting by ID is very fast.)
But, the optimization is not needed, is it? We're talking about going from lightening fast to double lightening fast. A super-duper jQuery pro would just do what you've done.

That code seems perfect; you are using :visible correctly.
You can take a look at the jQuery :visible selector help page if you want to know exactly how it works, but in a few words it selects visible elements =)

Well, all I can think of, is:
$('[id$="AtBaseLevel"]:visible').hide();
That would match any element whose ID ends in AtBaseLevel. Mind you, shorter does not mean faster, since ID lookups are about as fast as it gets. Attribute-based selectors are not that optimised.

You can do it like this:
$("#topperAtBaseLevel, #lowerAtBaseLevel, #midAtBaseLevel").filter(":visible").hide();
However, this results in everything being hidden, calling .hide() on a hidden element is fine, nothing wrong there, so it could just be this:
$("#topperAtBaseLevel, #lowerAtBaseLevel, #midAtBaseLevel").hide();