views:

106

answers:

2

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.

+1  A: 

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.

Gabriel
can you post a solution?
Rakesh Juyal
+2  A: 

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!

Trafalmadorian
yes! answer with the example :)
Rakesh Juyal
Thanks! Really appreciate it :)
Trafalmadorian