CODEWITHSUNDEEP
jqueryhtmlcssz-index
Davide Valdo
Davide Valdo

Reputation: 164

Changing overlapped images z-index with jQuery

I have three rectangular images overlapped within a diagonal line, the first fully visible on the top-left corner, the second in the center partially hidden by the first and the last in the bottom-right corner partially hidden by the second. I want the image which is clicked to go on top of the others. I'm trying to achieve this by manipulating z-index with jQuery but it doesn't seem to work. It actually seems like jQuery isn't even recognized.

This is my test code:

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
    $(document).ready(function () {
        $('#launch').click(function () {
            alert('Ok');
        });

        $('.bottom-pic').click(function () {
            $(this).css('z-index' : '1');
            $('.bottom-pic').not(this).css('z-index' : '0');
        });
    });
    </script>
    <style type="text/css">
    #pictures {
        width: 650px;
        height: 300px;

        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        margin-bottom: 50px;

        position: relative;
    }

    #top {
        top: 0;
        left: 0;

        position: absolute; 
        z-index: 1;
    }

    #center {
        top: 60px; 
        left: 200px;

        position: absolute; 
        z-index: 1;
    }

    #bottom {
        top: 150px; 
        left: 400px; 

        position: absolute; 
        z-index: 0;
    }
    </style>
    </head>
    <body>
    <div id="pictures">
         <img src="bottom-pic.jpg" id="top" class="bottom-pic">
         <img src="bottom-pic.jpg" id="center" class="bottom-pic">
         <img src="bottom-pic.jpg" id="bottom" class="bottom-pic">
    </div>
    <input type="button" value="Try" id="launch">
</body>
</html>

Still when I click the "launch" button nothing even happens.

Upvotes: 5

Views: 2718

Answers (5)

wunth
wunth

Reputation: 634

just some suggestions here

  1. As Ahmed pointed out your script is inside a script tag which has a separate src and url value - create a separate one for your inline script as well. Are you happy you've done this right?
  2. Try putting your button input between opening and closing form tags or at least some block level element like a div or p. Apparently some scrict doctypes don't accept it otherwise.
  3. I've had some troubles with scripts not working when linked to js files with multiple dots in the filename such as 1.7.1.min.js - I link to the google hosted code which has those dots in the directory path instead such as .../1.7.1/jquery.js

I obviously need to work out how to include code samples - clicking the "{}" button or adding 4 spaces doesn't seem to work!

Upvotes: 0

Smit
Smit

Reputation: 1569

Change you scripts as follows:

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
          $('#launch').click(function () {
              alert('Ok');
          });

          $('.bottom-pic').click(function () {
              $(this).css('z-index' , '1');
              $('.bottom-pic').not(this).css('z-index' , '0');
          });
        });
    </script>

That should work.

Upvotes: 0

box86rowh
box86rowh

Reputation: 3415

You are having a javascript syntax error. In your css commands, replace the : with , also, you need to wrap your custom script in its own javascript tag, not inside the jqueryimport tag

Upvotes: 0

Eric
Eric

Reputation: 1

I recommend you remove all the z-indexes from your css. Then create a class called '.veryHighZ-Index, for example, and add this class to the clicked image & remove the class from the previously clicked image...

I modified your code a little bit, but this code here should work.

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
$(document).ready(function () {


        // #pictures div catches all divs inside the #pictures
    $('#pictures div').click(function () {
            $('.veryhighz-index').removeClass('veryhighz-index');
            $(this).addClass('veryhighz-index');
    });
});
</script>
<style type="text/css">
#pictures {
    width: 650px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 50px;
        background: lime;
    position: relative;
        overflow: hidden;
}

#top {
    top: 0;
    left: 0;
    position: absolute; 
}

#center {
    top: 60px; 
    left: 200px;
    position: absolute; 
}

#bottom {
    top: 150px; 
    left: 400px; 
    position: absolute; 
}

    .top, .center, .bottom {
    width: 300px;
    height: 300px;
    border: 2px solid red;
    }
    .top {background: red;}
    .center {background: yellow;}
    .bottom {background: blue;}


    .veryhighz-index {
        z-index: 999999;
    }



</style>
</head>
<body>


    <div id="pictures">
        <div id="top" class="top"></div>
        <div id="center" class="center"></div>
        <div id="bottom" class="bottom"></div>
    </div>

</body>
</html>

In short, add the following code to your css

   .veryhighz-index {
    z-index: 999999;
    }

and this code to the javascript functions

   // #pictures img catches all images inside the #pictures
    $('#pictures img').click(function () {
        $('.veryhighz-index').removeClass('veryhighz-index');
        $(this).addClass('veryhighz-index');
    });

Upvotes: 0

Ahmed Masud
Ahmed Masud

Reputation: 22402

Okay i just realized that you made small mistake you are using the SAME tag for both loading query and DECLARING your inline javascript... you can't do that. You have to use two separate script tags.

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
    </script>

NOTE the new script tag:

  <script type="text/javascript">
    $(document).ready(function () {
        $('#launch').click(function () {
            alert('Ok');
        });

        $('.bottom-pic').click(function () {
            $(this).css('z-index', '1');
            $('.bottom-pic').not(this).css('z-index', '0');
        });
    });
   </script>

...

The rest of the answer still applies.. Namely you have to get rid of the z-index in #top, #middle, and #bottom....

Upvotes: 1

Related Questions