How to dim other div on clicking input box using jQuery?

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!

​

Answer 2

When you change opacity of an element, all children get the same opacity.

Two options :

1- if your targeted browsers support it, use rgba for background of your container.

2- use absolute positioning to rearrange your elements so that your content is not a child of your container, but is positioned above it.