0

I am trying to created three overlap divs that have their z-Index changed dynamically with Javascript. I have the divs coming to the top of the stack when selected, but I can't click the other divs below the top div. Can someone help me out? Below is the Javascript I am using:

<script>
$(document).ready(function() {
$("div#box").click(function() {
    $(this).css({'z-index' : '9999'});
} , function() {
    $(this).css({'z-index' : '1'});
});
});
</script>

CSS:

 #container{
display: block;
position:relative;
margin: 0px;
padding: 0px;
width: 465px;
height: 350px;
 }

 .redBox {
display: block;
margin: 0px;
padding: 0px;
width: 450px;
border: 1px solid #ED1F24;
z-index: 100;
position: absolute;
top: 120px;
right:0px;
background-color: #FFF;
cursor:pointer;
  }

  .redBox h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #FFF;
background-color: #ED1F24;
display: block;
height: 10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
 }

 .redBox h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFF;
background-color: #ED1F24;
display: block;
height:10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
 }

 .redBox ul {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000;
margin: 0px;
height: 150px;
padding: 10px 10px 0px 20px;
 }

 .redBox p{
margin:0px;
padding:0px;    
 }

 .redBox .boxFooter {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
line-height: 1.1em;
color: #000;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 0px;
margin-top: 0px;
list-style-type: none;
margin-left: 5px;
}

.blueBox .footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
line-height: 1.1em;
color: #000;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 0px;
margin-top: 0px;
list-style-type: none;
margin-left: 20px;
 }

 .blueBox {
display: block;
margin: 0px;
padding: 0px;
width: 430px;
border: 1px solid #2B3087;
z-index: 50;
position: absolute;
top: 90px;
right:0px;
background-color: #FFF;
cursor:pointer;
 }

 .blueBox h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #FFF;
background-color: #2B3087;
display: block;
height: 10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
 }

 .blueBox h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFF;
background-color: #2B3087;
display: block;
height:10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
 }

 .blueBox p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.1em;
color: #000;
padding: 0px 0px 0px 20px;
margin: 5px 0px;
 }

 .blueBox p strong {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight:bold;
line-height: 1.1em;
color: #000;
 }

 .greenBox {
display: block;
margin: 0px;
padding: 0px;
width: 410px;
border: 1px solid #99CA3C;
z-index: 2;
position: absolute;
top: 60px;
right:0px;
background-color: #FFF;
cursor:pointer;
 }

 .greenBox h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
color: #FFF;
background-color: #99CA3C;
display: block;
height: 10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
  }

  .greenBox h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFF;
background-color: #99CA3C;
display: block;
height:10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
  }

  #hero {
display: block;
margin: 0px;
padding: 0px;
height: 315px;
width: 465px;
text-align: center;
  }

HTML:

 <td width="50%" rowspan="2" valign="top" style="position:relative;">
 <div id="hero"><img src="images/image.jpg" alt="" width="300" height="315" border="0" />
 </div>
 <div id="container">
 <div class="redBox" id="box">
        <h1>Rewards</h1>
        <ul>
          <li>Text</li>
                      <li>Text</li>
                      <li>Text</li>>
                  <li>Text</li>
                   </ul>
       <h2>Rewards</h2> 
</div>

<div class="blueBox" id="box">
           <h1>Service and Security</h1>
       <p>text</p>
           <p>text</p>
           <p>text</p>
           <<p>text</p>
           <p class="footer">Text</p>
           <h2>Service and Security</h2>    
</div>
<div class="greenBox" id="box">
           <h1>Redeem Rewards</h1>
        <ul>
                <li>text Here</li>
                    <li>text Here</li>
                    <li>text Here</li>
                </ul>
        <h2>Rewards</h2>    
</div>
</div>
</td>
3

2 Answers 2

1

There are several problems with your code. First of all you're targeting an id, which should be unique and not used to identify multiple elements. Your code will only target the first instance of that id. Instead use a class name to target the different divs. Second, click takes either one argument, an event handler, or two, where the first one is event data, and the second the handler. So, your code only executes the second function in there, and only for the first div.

Try this instead:

$(document).ready(function() {
    var zIndex = 9999;
    $(".box").click(function() {
        $(this).css({'z-index': zIndex++ });
    });
});​

HTML.

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
2
  • Thanks Joel. I tried your code, but the divs are not shifting now. I changed the code to: <div id="redBox" class="box">, <div id="blueBox" class="box">, <div id="greenBox" class="box">. I even changed the CSS back to #redBox, #blueBox, #greenBox, instead of .redBox, .blueBox, .greenBox.
    – Mike
    Apr 12, 2012 at 14:08
  • Have a look at this working example: jsfiddle.net/mChcW All I did was paste your code and use the javascript I posted and added the class name box to the three divs. Apr 12, 2012 at 14:33
0

I created a fiddle with a working solution. If you need to change an element's z-index, you must set it's position attribute to anything other than 'static'. Static is the default, so you can change it to 'absolute' or 'relative'. The browser ignores z-index if you don't do this. Also, when you're trying to change CSS properties via javascript, you can't use 'z-index', javascript uses camelcase for the names.

Here's the link to the fiddle: http://jsfiddle.net/vKeqD/

And here's the code for posterity:

$(document).ready(function() {
    var zIndex = 9999;
    $(".box").on('click', function() {
        $(this).css({'zIndex' : zIndex++ , 'position': 'absolute'});
    });
});

You'll see as well that I changed the event listener to use 'on' instead of 'click'. This is simply because you only add one event listener this way instead of attaching a different listener to every target element. In your case, you only have three targets. But, if you had say 100, you only attach one event listener instead of 100. Hope this helps.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.