Question

I am having 3 input box, and i would like to dim the complete screen except the particular input box which is being clicked.
I tried this:
http://jsbin.com/equre3/2

But when i click the textbox everything including the text box get dimmed.

On text box click this is what i needed.

all div: opacity: .5  
contactForm div: opacity .75  
current labelTextHolder div: opacity: 1    

Also, what changes should i do in CSS so that text and input show in one row.

Answer 1

Ok, this is just a barebones example…I’m not going to animate it or add any labels or inputs or anything…but here’s how it works in principle. The most important thing to remember about manipulating the CSS z-index property is that any element with a z-index MUST be positioned (i.e. position:relative, position:absolute, etc.):

HTML (hypothetically):

<div id="overlay"></div>
<div id="div1" class="usable"></div>
<div id="div2" class="usable"></div>
<div id="div3" class="usable"></div>​

CSS:

​#overlay {
    position:absolute;
    height:100%;
    width:100%;
    background-color:#333;
    opacity: 0;
    z-index:0;
}

div.usable {
    position:relative;
    z-index:1;
    width:100px;
    height:100px;
    background-color:#F0F;
}

div.active {
    background-color:#F00;
    z-index:5;
}

jQuery:

​$(document).ready(function(){
    $("div.usable").hover(
    function(e){
        $("#overlay").css({"z-index":2,"opacity":.5});
       $(this).addClass("active"); 
    },
    function(e){
        $("#overlay").css({"z-index":0,"opacity":0});
        $(this).removeClass("active");
    }
  );
});​

As for the whole “text and input in one row” thing, I’d recommend looking at changing the display CSS properties of the inputs and labels to show them inline or inline-block if that’s feasible within your application. Example:

input.rowStyle {display:inline;}

Hope this helps!

​