Grow your CSS skills. Land your dream job.

changing the z-index property

  • # November 9, 2012 at 12:20 pm

    Actually i’m working on a slider.I have 3 pics that slide.Only the 3 pic which is on top of the other two is visible.i’ll paste the code below

    html file
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">








    css
    #container{
    position: relative;
    width:150px;
    overflow: hidden;
    height:150px;
    }

    #pic1,#pic3,#pic2{
    position: absolute;
    top: 0px;
    left: 0px;
    height:150px;
    width:150px;
    z-index:0;

    }

    js file

    //function passes the pics one by one at an interval of 3 seconds ,
    //which is approx time a pic that is already passed takes to slide away

    var slidePic = function(){
    var pics = [document.getElementById("pic1"),document.getElementById("pic2"),document. getElementById("pic3")];
    console.log(pics[0].style.left);
    var i =0;
    var int = setInterval(function(){
    while(i < 3){
    if(i===0)console.log(“hi”);
    slide(pics);
    i++;
    }
    },3000);
    }
    //function to slide an element that is passed on to it
    var slide = function(picture){

    ‘use strict’;

    var pixel = 1;

    var interval = setInterval(function(){
    if(picture.style.left != ’150px’){
    var left = parseInt(picture.style.left);
    console.log(left);
    var totalPos = left + 1;
    //pic.style.left = totalPos.toString() + ‘px’ ;
    if(picture.style.zIndex){
    console.log(“yeah”);
    }
    picture.style.left = pixel.toString() + ‘px’;
    }

    pixel += 1;

    if(picture.style.left == ’150px’){
    picture.style.left = ‘-150px’;

    console.log(picture.style.left);
    pixel = -150;
    clearInterval(interval);
    }
    },16.66);

    }

    window.onload = slidePic;

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".