CODEWITHSUNDEEP
javascriptjqueryhtmlslideshow
Justin Lathrop
Justin Lathrop

Reputation: 65

jquery slide show class changing is not working correctly

I am trying to make my own "slideshow" type of jquery effect. I have been messing around with this for quite a while now and just seem to be going in circles. So hopefully one of you can see what I'm missing.

The Javascript/jQuery Code:

    <script type="text/javascript">
    $(document).ready(function(){
        $("body").css("display", "none");
        $("body").fadeIn(500);
        $('.slideDeactive').click(changeSlide);
    });

    function changeSlide(){
        $('.slideActive').addClass('slideDeactive').removeClass('slideActive');
        $(this.id).addClass('slideActive').removeClass('slideDeactive');
        $('.slideDeactive').click(changeSlide);
    }//end changeSlide
</script>

The HTML Code:

<body>
<div id="slideShow">
    <div id="slideShowItem0" class="slideActive">
        ITEM 0
    </div>
    <div id="slideShowItem1" class="slideDeactive">
        ITEM 1
    </div>
    <div id="slideShowItem2" class="slideDeactive">
        ITEM 2
    </div>
</div>

The CSS Code:

#slideShow{
float: left;
border: solid white 2px;
width: 700px;
height: 200px;
}

#slideShowItem0, #slideShowItem1, #slideShowItem2{
position: relative;
width: 350px;
height: 100%;
}

.slideActive{
z-index: 1;
position: absolute;
left: 25%;
top: 0;

background-color: grey;
}

.slideDeactive{
background-color: fuchsia;

z-index: 0;
float: left;
top: -100%;

cursor: pointer;

/*Opacity compatible for all major browsers*/
filter: alpha(opacity=25);
-moz-opacity:0.25;
-khtml-opacity: 0.25;
opacity: 0.25;
}

I think I may have an error with my slideActive class too, because if the the slide is on the right then it may need a different left value than if it is on the left, I think.

Let me know what you all think, thanks for the help in advance!

Upvotes: 4

Views: 589

Answers (2)

Justin Lathrop
Justin Lathrop

Reputation: 65

Final solution for slideshow jquery/css code:

HTML Code:

<body>
<div id="slideShow">
    <div class="slideCenter">
        ITEM 0
    </div>
    <div class="slideLeft">
        ITEM 1
    </div>
    <div class="slideRight">
        ITEM 2
    </div>
</div>
</body>

jQuery Code:

    <script type="text/javascript">
    $(document).ready(function(){
        $("body").css("display", "none");
        $("body").fadeIn(500);

        $('.slideLeft').live('click', function(){
            $('.slideCenter').removeClass('slideCenter').addClass('slideLeft');
            $(this).addClass('slideCenter').removeClass('slideLeft');
        });

        $('.slideRight').live('click', function(){
            $('.slideCenter').removeClass('slideCenter').addClass('slideRight');
            $(this).addClass('slideCenter').removeClass('slideRight');
        });

    });
</script>

CSS Code:

#slideShow{
float: left;
border: solid white 2px;
width: 700px;
height: 200px;

margin-top: 200px;
}

.slideCenter{
z-index: 1;
position: absolute;
margin-left: 175px;
width: 350px;
height: 200px;
float: left;

background-color: grey;
}

.slideLeft{
z-index: 0;
background-color: fuchsia;
float: left;
cursor: pointer;
width: 350px;
height: 200px;

/*Opacity compatible for all major browsers*/
filter: alpha(opacity=25);
-moz-opacity:0.25;
-khtml-opacity: 0.25;
opacity: 0.25;
}

.slideRight{
z-index: 0;
background-color: yellow;
float: right;
cursor: pointer;
width: 350px;
height: 200px;

/*Opacity compatible for all major browsers*/
filter: alpha(opacity=25);
-moz-opacity:0.25;
-khtml-opacity: 0.25;
opacity: 0.25;
}

Thanks a lot Bibin for your help!

Upvotes: 0

Bibin Velayudhan
Bibin Velayudhan

Reputation: 3103

try this

$(document).ready(function(){
    $('.slideDeactive').live('click', function()
    {
        $('.slideActive').removeClass('slideActive').addClass('slideDeactive');
        $(this).addClass('slideActive').removeClass('slideDeactive');
    });
})

Instead of 

$('.slideDeactive').click(changeSlide);

and

function changeSlide(){
        $('.slideActive').addClass('slideDeactive').removeClass('slideActive');
        $(this.id).addClass('slideActive').removeClass('slideDeactive');
        $('.slideDeactive').click(changeSlide);
    }//end changeSlide

This will get effect of active and deactive.

Upvotes: 3

Related Questions