How to hide which have calc css?

Question

I wanted to hide the element which have calc css3:

nav{width: calc(100% - 20px); height: 50%;}

I tried this:

 $('*').filter(function() {
     return $(this).css('width') == 'calc';
 }).css("display","none");

But seems wrong way to do?

demo

Refer following link it may help you http://stackoverflow.com/questions/17820559/hide-image-of-specific-size-by-css — Lachu, Mar 07 '14 at 08:52
`css` returns the _computed_ styles, you should read and filter the CSS rules which is _very expensive_. — Ram, Mar 07 '14 at 09:01

Ram · Accepted Answer · 2014-03-07T09:23:55.133

2

css method returns the computed value of the properties, you should read and filter the initial CSS rules:

var s = document.styleSheets[1], // the second stylesheet (for jsfiddle)
    rules = s.cssRules,
    selector = [],
    l = rules.length;

for ( var i = 0; i < l; i++ ) {
    if ( rules[i].style['width'].indexOf('calc') > -1 ) {
        selector.push( rules[i].selectorText );
    }
}

$( selector.join() ).hide();

http://jsfiddle.net/webozine/9EZ3k/

edited Mar 07 '14 at 09:23

answered Mar 07 '14 at 09:18

Ram

143,282
16
168
197

does it work even if the browser doesn't support calc because which is not supported that remove the style from them? – Bhojendra Rauniyar Mar 07 '14 at 09:28
@C-link No, since `calc` is an unknown(_or invalid_) value for them, those browsers should set the value to an empty string. – Ram Mar 07 '14 at 09:34
if so can i use an empty string? no- this is not good way. So any idea? – Bhojendra Rauniyar Mar 07 '14 at 09:36
@C-link Well, the only option is reading the stylesheet's body, probably using regex. – Ram Mar 07 '14 at 09:49

albusshin · Answer 2 · 2014-03-07T09:12:39.830

0

jQuery doesn't support a filter with the calc() function in CSS. Following is the screenshot of me testing zooming in and see the css property changing of the nav object.

enter image description here

Here's a somewhat ugly hack I've come up with, it does filter your requirement though.

$('*').filter(function() {
     return  $(this).css('width') == $(this).parent().width()-150 + "px";;
 }).css("display","none");

Or, indeed, add a css class and problem solved..

edited Mar 07 '14 at 09:12

answered Mar 07 '14 at 09:01

albusshin

3,930
3
29
57

FYI: See this demo http://jsfiddle.net/7DrVE/15/ this is not filter but background which won't work? – Bhojendra Rauniyar Mar 07 '14 at 09:10
Yeah you're right, sorry. The updated js function would filter a css class with property of "width:calc(100% - 150px)", please check that – albusshin Mar 07 '14 at 09:13

score 0 · Answer 3 · answered Mar 07 '14 at 09:40

0

In Jquery you can also try by indexOf()

SEE DEMO

$('*').filter(function() {
          return $(this).css('width').indexOf('calc');
 }).css("display","none");

answered Mar 07 '14 at 09:40

Rituraj ratan

10,260
8
34
55

How to hide which have calc css?

3 Answers3