0

I've got a DIV covering the entire document:

<DIV style="position:'fixed';left:'0px';width:'100%';height:'100%';top:'0px',z-index:-20">

The zIndex of -20 is to prevent the DIV from coming up on top of other elements and interfering with mouse events.

However, when the page is busy with an asynchronous request, I want to bring the DIV to the top. My async request function sets the class of a user-defined variable element to "AJaXBusy" and then I style that class however I want. However, in this case, the style of "zIndex:100" isn't working, because the default value of -20 is overriding it!

Here's the code I'm using the show the DIV:

css('.AJaXBusy').backgroundColor="#ffddff"
css('.AJaXBusy').zIndex='100 !important'

(The CSS function returns a style-sheet object style property, it's about 30 lines of code so I have omitted it.)

How do I get a CSS class definition to override the value that has been assigned directly to the element? I've read about specificity and inheritance, but it didn't seem to address effects applicable in the document itself.

Michael
  • 9,060
  • 14
  • 61
  • 123

3 Answers3

2

If you use JS to set element style (i.e. ele.style.zIndex), then '100 !important' is not a legal value (while '100' is), so the expression silently fails.

However, if you use ele.setAttribute('style', '.....'), then !important could be applied.

And, inline style has much higher previledge than css class, so you cannot override it.

A much better approach would be, if you could edit HTML, use different class definitions.

<style>
    .undercover { z-index: -20; }
    .cover { z-index: 100; }
</style>
<div class="AJaXBusy undercover">

Then change class name when you want to make it 

var ajaxBusy = document.querySelector('.AJaXBusy')
ajaxBusy.classList.remove('undercover')
ajaxBusy.classList.add('cover')
Leo
  • 13,428
  • 5
  • 43
  • 61
  • css('.AJaxBusy') is returning a CSSStyleDeclaration, which doesn't have a setAttribute function. But I agree, that is why it is silently failing. – Michael Apr 28 '15 at 02:14
  • @Michael well I mean use `setAttribute` on the element you are populating. Also I edit the answer with a better approach in my opinion. – Leo Apr 28 '15 at 02:18
  • looks like (at least for Firefox) I could try `styleObj.setProperty('zIndex',100,'important')` but that doesn't seem to work either – Michael Apr 28 '15 at 02:25
  • @Michael It may work, but it's hardly maintainable if you have more properties to manipulate. – Leo Apr 28 '15 at 02:29
0

use !important after your declaration. 

z-index:100 !important;
chrismillah
  • 3,704
  • 2
  • 14
  • 20
  • The override is defined in javascript, so ob.style.zIndex='100 !important'? – Michael Apr 28 '15 at 01:58
  • The `!important` would be in the CSS declaration. e.g. `.AJaXBusy { z-index:100 !important }`. Be very careful using `!important` however, as it can only be overridden by another `!important`. – ChicagoRedSox Apr 28 '15 at 01:59
  • @ChicagoRedSox I'm declaring the override CSS style in javascript via the style attribute of the relevant CSS class. – Michael Apr 28 '15 at 02:01
  • Looks like the string '100 !important' isn't recognized when assigning to the stylesheet via javascript. – Michael Apr 28 '15 at 02:10
0

As others have said, zIndex is how you update the property in javascript, elsewhere you refer to it as z-index.

I would recommend that instead of using a negative z-index to attempt to stop it interfering with the page, leave the z-index high, and hide the DIV using the css display:none; and only show the DIV when you want it to block page interaction (during AjaXBusy).

tonesforchris
  • 293
  • 3
  • 9