jQuery CSS Z-Index Change

Question

I am having a problem getting my photoviewer to change photos when a link is clicked (live site http://ericnaff.com/web2/index-FILL-IN.html). I've looked everywhere for a solution and got nothing. Here's my HTML, then CSS, then my jQuery. I got the links to work but when you re-click, it won't change the image. Example- I click on a link and the photo changes to the right photo. If I try to go back to a photo by clicking, it doesn't work.

 <body>

<div id="imageWindow">
    <div class="imagePane firstPic"></div><!-- ends first -->
    <div class="imagePane secondPic"></div><!-- ends second -->
    <div class="imagePane thirdPic"></div><!-- ends third -->
    <div class="imagePane fourthPic"></div><!-- ends fourth -->

    <ul>
        <li class="firstPic">first-pic</li>
        <li class="secondPic">second-pic</li>
        <li class="thirdPic">third-pic</li>
        <li class="fourthPic">fourth-pic</li>
    </ul>

</div>

THE CSS

    #imageWindow {/* 1 CSS attribute */position:absolute 0px 0px;}

/* common image container and stacking */
    .imagePane {
        /* 4 CSS attributes */
        position:absolute;
        background-image: url(http://www.ericnaff.com/web2/images/park-    
                    sprite.jpg);
        width:450px;
        height:400px;
        }

/* these classes are used to determine the stacking order of the image container divs */
    .front {/* 1 CSS attribute */ z-index:1}
    .behind {/* 1 CSS attribute */ z-index:-1}

/* used to display a different picture in each container */             
    .firstPic {/* 1 CSS attribute */ background-position:0px 0;}
    .secondPic {/* 1 CSS attribute */background-position:450px 0;}
    .thirdPic {/* 1 CSS attribute */background-position:900px 0;}
    .fourthPic {/* 1 CSS attribute */background-position:1350px 0;}


/* used to style the list */
    ul {        
        /* 2 CSS attributes */
        width:75px;
        margin-left:450px;
    }

    li {
        /* 1 CSS attribute */
        list-style-type:none;           
    }

    li:hover {
        /* 2 CSS attributes */
        background-color:#999999;
        cursor:pointer;
    }

MY JQUERY-

    $(document).ready(function(){
    $('li.firstPic').click(function() {
                $('.firstPic').fadeIn().addClass('front');                  

            });

        $('li.secondPic').click(function() { 
                $('.secondPic').fadeIn().addClass('front');

            });

        $('li.thirdPic').click(function() {
                $('.thirdPic').fadeIn().addClass('front');

            });

        $('li.fourthPic').click(function() {
                $('.fourthPic').fadeIn().addClass('front');

            });

    });

Any ideas? I can't change the HTML and have to use the amount of CSS shown. I'm new to this and really confused. I was trying this solution-

$('.targetX').functionA('targetS').functionB('targetT');                    
$('tag.targetY').functionA('targetT').functionB('targetS');

I don't know how to get it to work though. Like I said, got the first part working, just can't get a link to work more than once. Thanks for any help/suggestions.

Eric

bondythegreat · Accepted Answer · 2012-11-11 23:59:59Z

1

it's because before add front class, the previous front is not cleared yet. in your every click blocks add this $('.front').removeClass('.front');

but i think i can propose something like this :

$('.imagePane').click(function() {
   //get the second class name as the selector of li
   var picSelector = $(this).attr('class').split(" ")[1];

   $('.front').removeClass('front');
   $('li.'+picSelector).addClass('front');
});

im sorry i havent tested it yet, but i hope you got the idea..

edited Nov 11, 2012 at 23:59

answered Nov 11, 2012 at 23:48

bondythegreat

1,40912 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Eric Naff Over a year ago

Awesome! It worked. I added your $('.front').removeClass('front'); to each item and it worked. Thanks for the help. It was answered above pretty close now that I think about it and what he wrote after getting your solution to work. Thanks to you both!

Eric Naff Over a year ago

So either way then, using z-index wouldn't matter? The reason I have the .addClas is to change the class to front, which has a z-index value. Is it possible to do it that way? By z-index?

Eric Naff Over a year ago

I ask because it does change the class to front, but the others don't change to behind.The front class has a z-index of 1 and .behind has one of -1. Is there a way to get the classes to make the order change? Like the viewable pic has the front class, and the others get the behind class?

bondythegreat Over a year ago

your current approach makes sense IMHO.. assuming the default pic list is -1 of z-index, and focus only to the front pic (which has bigger z-index value). as long as it's only 1 pic that has .front class, it's ok... (and by calling the removeClass('front') before is to make sure of it)

bondythegreat Over a year ago

ah sorry, just check your css. i dont think you need .behind class.. just add z-index: -1 of .behind in .imagePane (this is what i meant by the default z-index, they are all has 'behind' class by default) and we can focus on the .front after that

|

Francis Nepomuceno · Accepted Answer · 2012-11-13 01:03:16Z

1

Each link adds a front class to its corresponding <div>, but doesn't remove any previously added ones.

For example, you can add this function on each click:

function resetClasses() {
    $('li').each(function() {
        $(this).removeClass('front');
    });
}

$(document).ready(function(){
    $('li.firstPic').click(function() {
                resetClasses();
                $('.firstPic').fadeIn().addClass('front');                  

            });

    $('li.secondPic').click(function() { 
            resetClasses();
            $('.secondPic').fadeIn().addClass('front');

        });

    $('li.thirdPic').click(function() {
            resetClasses();
            $('.thirdPic').fadeIn().addClass('front');

        });

    $('li.fourthPic').click(function() {
            resetClasses();
            $('.fourthPic').fadeIn().addClass('front');

        });

});

edited Nov 13, 2012 at 1:03

answered Nov 11, 2012 at 23:56

Francis Nepomuceno

5,1154 gold badges32 silver badges35 bronze badges

4 Comments

Eric Naff Over a year ago

I added the function definition before AND after the doc ready. Now it just doesn't work at all. I see your logic. I just can't get it to work. I get syntax errors in Dreamweaver and it doesn't work live. I get the errors when I add this- function resetClasses() { $('li').each(function() { $(this).removeClass('front'); } }

Eric Naff Over a year ago

I got it to work! After getting the other solution listed to work, I see what you were talking about now. Thanks for the help.

Francis Nepomuceno Over a year ago

Sorry, missed a closing parenthesis, fixed now

Eric Naff Over a year ago

Thanks for the help! I totally ended up getting it down right.

Collectives™ on Stack Overflow

jQuery CSS Z-Index Change

2 Answers 2

6 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related