All geek questions in one place

JQuery disables shadow box on load

I have some elements that have CSS3 shadows around them if the user has javascript enabled, although I would like to hide the window shadow.

I am currently using the code below to hide other elements, and this method works fine except for the shadow window. I did some tests, that is, put another code where "box-shadow: none" is, and it always works as expected, so I assume that this is a problem with the CSS3 box-shadow attribute and jquery compatibility.

Can anyone think about how to get around this? Or perhaps another way to disable the box-shadow attribute when loading a 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 submenu title

 .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; }
+4
source share
2 answers

You can 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 the javascript file:

 $("html").removeClass("no-js");
+3
source

If you cannot change your css, the best way to do this is to use the jQuery css method. Make sure the box-shadow property is not specified otherwise than the class selector in your css:

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

Source: https://habr.com/ru/post/1382452/

More articles:


All Articles