how to create a cross-browser compatible "spotlight" effect ?

Question

i found a spotlight plugin for Jquery, but it is not functional in IE.

so is there a way to make the rest of the background fade to a dark color while selected or element of focus remains the same ?

Answer 1

I'm sure there is a cross-browser solution somewhere. Other than that, it might be halfway easy to achieve using a fixed, fullscreen overlay:

.overlay
 { position: fixed;
   background-color: white; 
   opacity: 0.5; /* Add IE opacity here */
   top: 0px; right: 0px; left: 0px; bottom: 0px;
   z-index: 1000;
  }

... fading it in, and giving the focused input element "position: relative" and a z-index of 1001. Not tested but should work cross-browser. There will be problems with Flash elements and such, for which you will find workarounds in lightbox-style scripts.

Answer 2

You can take a look at jQuery Tools's Expose, which should work in IE 7 and 8. If you want it to work in IE 6 there might need to be some customization done to either make a lattice GIF (half transparent and half gray pixels in a checkerboard pattern) or use some sort of filter.