Managing z-index when jquery present

Question

68thorby68 4 Junior Poster in Training

12 Years Ago

I have a simple html/css page (attached) that uses a jquery function to enlarge images on hover. However, no matter how I try and manipulate the z-index of each html element, the enlarged image is always behind all other html elements.

I have trid to change the css class .image to:

.image {
    display:inline-block; /*<<<<THIS HAS CHANGED*/
    position:relative; /*<<<<THIS HAS CHANGED*/
    width:80px;
    height:80px;
    padding: 5px 5px 5px 5px;   
    border:1px;
    border-style:solid;
    border-color:#CCC;
    float:left;
    z-index:2;  
}

and to

.image {
        display:block; /*<<<<THIS HAS CHANGED*/
        position:relative; /*<<<<THIS HAS CHANGED*/
        width:80px;
        height:80px;
        padding: 5px 5px 5px 5px;   
        border:1px;
        border-style:solid;
        border-color:#CCC;
        float:left;
        z-index:2;  
    }

This partially solves the z-index problem, however the images are static on the page in IE when the vertical scroll bar is used.

I've also tried to change the jquery to:

$(this).animate({
               height: "250",
               width: "250",
               left: "-=50",
               top: "-=50",
               zIndex: "2"
            }, "fast");
        }, function() {
            // hover out
            $(this).animate({
                height: "80",
                width: "80",
                left: "+=50",
               top: "+=50",
               zIndex: "2"
            }, "fast");

But to no avail. Can anyone help me make my expanded image display on top of all other elements?

My FULL CODE is below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<title>Untitled Document</title>
<style>
.contentcontainer {
    display:block;
    width:600px;
    height:400px;
    overflow-x: hidden;
    overflow-y: auto;
    border:1px;
    border-style:solid;
    border-color:#000;  
}
.detailcontainer {
    display:block;
    width:100%;
    height:150px;
    margin:10px 10px 10px 10px;
    float:left;
    z-index:1;
}
.image {
    display:inline-block;
    width:80px;
    height:80px;
    padding: 5px 5px 5px 5px;   
    border:1px;
    border-style:solid;
    border-color:#CCC;
    float:left;
    z-index:2;  
}
.textsubcontainer {
    display:inline-block;
    width:300px;
    height:100px;
    float:left;
    margin-left:15px;
    z-index:1;
}
.title {
    display:inline-block;
    width:280px;
    height:15px;
    padding: 10px 10px 10px 10px;   
    float:left;
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    color:#003300;
    z-index:1;
}
.text {
    display:inline-block;
    width:280px;
    height:42px;
    padding: 10px 10px 10px 10px;   
    float:left;
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#669900;
    z-index:1;
}
.linksubcontainer {
    display:inline-block;
    width:100px;
    height:100px;
    margin-left:10px;   
    float:left;
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    color:#003300;
    z-index:1;
}
.price {
    display:inline-block;
    width:100px;
    height:40px;
    padding-top:10px;
    float:left;
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:bold;
    color:#003300;
    z-index:1;
}
.buy {
    display:inline-block;
    width:100px;
    height:40px;
    padding-top:10px;
    float:left;
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#003300;
    z-index:1;
}
</style>
<script>
$(document).ready(function() {
            $(".t_img").hover(function() {
            // hover in
            $(this).animate({
               height: "250",
               width: "250",
               left: "-=50",
               top: "-=50"
            }, "fast");
        }, function() {
            // hover out
            $(this).animate({
                height: "80",
                width: "80",
                left: "+=50",
               top: "+=50"
            }, "fast");
        });
    });
</script>
</head>

<body>
<div class='contentcontainer'>
<div class='detailcontainer'>
        <div class='image thumb' ><a href='bookbuy.php?item=brown' ><img src='add path to any image here' style='border:none;' height='80' width='80' class='t_img'/></a></div>
        <div class='textsubcontainer' >
            <div class='title'><a href='bookbuy.php?item=brown' class='green'>TITLE</a></div>
            <div class='text'><a href='bookbuy.php?item=brown' class='lgreen'>TEXT</a></div>
        </div>
        <div class='linksubcontainer'>
            <div class='price'><a href='bookbuy.php?item=brown' class='green'>PRICE</a></div>
            <div class='buy'><a href='bookbuy.php?item=brown' class='green'>Book 'n' Buy</a></div>            
        </div>
      </div>

      <div class='detailcontainer'>
        <div class='image thumb' ><a href='bookbuy.php?item=brown' ><img src='add path to any image here' alt='Click to view' style='border:none;' height='80' width='80' class='t_img'/></a></div>
        <div class='textsubcontainer' >
            <div class='title'><a href='bookbuy.php?item=brown' class='green'>TITLE</a></div>
            <div class='text'><a href='bookbuy.php?item=brown' class='lgreen'>TEXT</a></div>
        </div>
        <div class='linksubcontainer'>
            <div class='price'><a href='bookbuy.php?item=brown' class='green'>PRICE</a></div>
            <div class='buy'><a href='bookbuy.php?item=brown' class='green'>Book 'n' Buy</a></div>            
        </div>
      </div>

      <div class='detailcontainer'>
        <div class='image thumb' ><a href='bookbuy.php?item=brown' ><img src='add path to any image here' alt='Click to view' style='border:none;' height='80' width='80' class='t_img'/></a></div>
        <div class='textsubcontainer' >
            <div class='title'><a href='bookbuy.php?item=brown' class='green'>TITLE</a></div>
            <div class='text'><a href='bookbuy.php?item=brown' class='lgreen'>TEXT</a></div>
        </div>
        <div class='linksubcontainer'>
            <div class='price'><a href='bookbuy.php?item=brown' class='green'>PRICE</a></div>
            <div class='buy'><a href='bookbuy.php?item=brown' class='green'>Book 'n' Buy</a></div>            
        </div>
      </div>

      <div class='detailcontainer'>
        <div class='image thumb' ><a href='bookbuy.php?item=brown' ><img src='add path to any image here' alt='Click to view' style='border:none;' height='80' width='80' class='t_img'/></a></div>
        <div class='textsubcontainer' >
            <div class='title'><a href='bookbuy.php?item=brown' class='green'>TITLE</a></div>
            <div class='text'><a href='bookbuy.php?item=brown' class='lgreen'>TEXT</a></div>
        </div>
        <div class='linksubcontainer'>
            <div class='price'><a href='bookbuy.php?item=brown' class='green'>PRICE</a></div>
            <div class='buy'><a href='bookbuy.php?item=brown' class='green'>Book 'n' Buy</a></div>            
        </div>
      </div>

      <div class='detailcontainer'>
        <div class='image thumb' ><a href='bookbuy.php?item=brown' ><img src='add path to any image here' alt='Click to view' style='border:none;' height='80' width='80' class='t_img'/></a></div>
        <div class='textsubcontainer' >
            <div class='title'><a href='bookbuy.php?item=brown' class='green'>TITLE</a></div>
            <div class='text'><a href='bookbuy.php?item=brown' class='lgreen'>TEXT</a></div>
        </div>
        <div class='linksubcontainer'>
            <div class='price'><a href='bookbuy.php?item=brown' class='green'>PRICE</a></div>
            <div class='buy'><a href='bookbuy.php?item=brown' class='green'>Book 'n' Buy</a></div>            
        </div>
      </div>
 </div>     

</body>
</html>

jquery web-design

Edited 5 Years Ago by Dani because: Formatting fixed

2 Contributors
3 Replies
158 Views
21 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by KaletonMedia

KaletonMedia 14 Newbie Poster

12 Years Ago

Your css is being overwritten when the hover effect takes place, therefore your z-index rules are not being applied. You can apply the z-index to your .t_img class. In your jquery function you need to set it with the following: $('.t_img').css('z-index', 2).css('position','relative'); Of course this throws off your positioning as you mentioned so you will also need to modify your top and left coordinates. I have tried the following in the latest FF and IE (9) and it seems to work for me without altering the css in the head:

<script>
$(document).ready(function() {
            $(".t_img").hover(function() {
            // hover in
            $('.t_img').css('z-index', 2).css('position','relative');
            $(this).animate({
               height: "250",
               width: "250",
               left: "=0",
               top: "=0"
            }, "fast");
        }, function() {
            // hover out
            $('.t_img').css('z-index', 2).css('position','');
            $(this).animate({
                height: "80",
                width: "80",
                //left: "+=50",
               //top: "+=50"
            }, "fast");
        });
    });
</script>

Hope that helps you.

iamthwee commented: Excellent +14

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

68thorby68 4 Junior Poster in Training · Answer 1 · 2012-09-09T20:37:29+00:00

Many thanks, this not only helps me but solves the problem.

Can I ask, when javascript or jquery is invoked is all of the underlying CSS overwritten, or is it only the css classes used by the javascript/jquery that are overwritten?

Or, is it only the CSS styling specified in javascript/jquery that is overwritten?

Many thanks for your help.

KaletonMedia 14 Newbie Poster · Answer 2 · 2012-09-10T13:30:14+00:00

Hi. Glad I could help. To answer your question, the styles you define in your jquery/javascript are applied 'inline' to the class/id you specify in the function. Inline styles are given the most importance by web browsers, followed by styles defined in the head of a web document, followed finally by styles defined in an external style sheet (excepting !important, but that's another topic). Therefore your jquery will always overwrite any styles that are defined in either the head or in a css file. It will leave inline styling that you specify by style="xyz: abc;" in your html tag alone.