CODEWITHSUNDEEP
jquerycss
Phil
Phil

Reputation: 1662

Jquery turn off box-shadow on load

I have some elements that have a CSS3 box-shadow around them as default, if the user has javascript turned on though I would like to hide the box-shadow.

I am currently using the code seen below to hide other elements and this method works perfectly except for the box-shadow. I have done a few tests, i.e put other code where 'box-shadow:none' is and it always works as expected, I therefore assume it's a problem with the compatibility of the CSS3 box-shadow attribute and jquery.

Can anyone think of a way to get around this? Or maybe another way to turn off the box-shadow attribute on load of the page.

Thanks in advance for any help. 

$('html').append('<style type="text/css">.sub-menu{width:897px;display:none;} .sub-menu-header{box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}</style>');

CSS for the sub-menu-header

.sub-menu-header{
   -moz-box-shadow: 1px 1px 5px #000;
   -webkit-box-shadow: 1px 1px 5px #000;
   box-shadow: 1px 1px 5px #000;
   border:1px solid #CCC;
   cursor:pointer; 
}

Upvotes: 4

Views: 4233

Answers (2)

Przemek
Przemek

Reputation: 6710

If you cannot modify your css, a better way to do it is by using jQuery's css method. Be sure if the box-shadow property isn't specified any other way than by the class selector in your css:

$(document).ready(function () {
  $(".sub-menu-header").css("box-shadow", "none");
});

Upvotes: 1

dodger
dodger

Reputation: 4965

You could add a no-js class to your html tag: <html class="no-js">

Add your styles:

.no-js .sub-menu-header{
   -moz-box-shadow: 1px 1px 5px #000;
   -webkit-box-shadow: 1px 1px 5px #000;
   box-shadow: 1px 1px 5px #000;
}
.sub-menu-header{
   border:1px solid #CCC;
   cursor:pointer; 
}

Then just remove the no-js class in your javascript file:

$("html").removeClass("no-js");

Upvotes: 3

Related Questions