Slide a div over a li

JavaScript
1

Hi,
I’m stuck on this code
there isn’t js yet but I need a hint
I should show a timing div over the
li but I don’t find the right css rule.
Can you help me, please ?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta name="content-language" content="en" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
*{
  margin:0;
  padding:0;
}
body {
  text-align: center;
} 
ul,ol{
  list-style: none;
}
#container {
  width: 500px ;
  margin: 0 auto ;
  text-align: left;
}
#scheduleBox{
    width: 500px;
    height:80px;
    overflow: hidden;
    position:relative;
    margin-top:20px;
}
#scheduleBar{
    width: 900px;
    background-color: #A3A3A3;
}
#scheduleBar li {
    float:left;
    width:98px;
    height:60px;
    line-height: 60px;
    border-left: 1px solid #858585;
    border-right: 1px solid #858585;
    text-align: center;
    background-color: #A3A3A3;
}
#scheduleBar li div{
    width:98px;
    background-color: red;
    
}


</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">


$(function() {
   
 
    
});
</script>

</head>
<body>
<div id="container">  
<div id="scheduleBox">
<div id="scheduleBar">
<ul><li><div></div>primo</li>
<li><div> </div>secondo</li>
<li><div> </div>terzo</li>
<li><div> </div>quarto</li><li><div> </div>quinto</li><li><div> </div>sesto</li><li><div> </div>settimo</li><li><div> </div>ottavo</li><li><div> </div>nono</li></ul></div></div>  
</div>  
</body>

</html>

The bar is for a schedule web tv
with a timer the first li must be cover by the
div e than the bar slide on the left.
Bye.

2

I really got up on the wrong side
this morning :slight_smile:


#scheduleBar li {
    position:relative;
    float:left;
    width:98px;
    height:60px;
    line-height: 60px;
    border-left: 1px solid #858585;
    border-right: 1px solid #858585;
    text-align: center;
    background-color: #A3A3A3;
}
#scheduleBar li div{
  position: absolute;
  top:0;
  left:0;
  z-index:9999;
  opacity:0.4;filter:alpha(opacity=40);
  width:10px;
  background-color: red;
}
3 

var mySchedule = {
    data : [],
    scheduleNum : 0,
    marginLeftPos : 0,
    timingCurrentLi : function(){
        var startWidth = 0;
        var endWidth = 98;
        mySchedule.marginLeftPos -= 100;
        var timeoutID = setInterval(f, 100);
        function f(){
            if(endWidth>startWidth){
                startWidth++;
                $('#schedule_'+ mySchedule.scheduleNum +' div').width(startWidth);
            }
            else {
                mySchedule.scheduleNum++;
                clearTimeout(timeoutID);
                mySchedule.timingBar();
                mySchedule.timingCurrentLi();
            }
        }
         //alert(mySchedule.marginLeftPos);
        $('#schedule_'+ mySchedule.scheduleNum +' div').fadeTo("fast", 0.5);
    },
    timingBar : function(){
        $('#scheduleBar').animate({
            marginLeft:  mySchedule.marginLeftPos + 'px'
            }, 5000, function() {
               
        });
    },
    barBuilder : function(){
        var output = '<ul>';
        $.each(mySchedule.data, function(index, value) {
            output += '<li id="schedule_'+index+'"><div>' + mySchedule.data[index].title +'</div></li>';
        });
        output += '</ul>';
        $('#scheduleBar').html(output);
        
       mySchedule.timingCurrentLi();
        
    },
    getScheduleOfTheDay : function(){
        $.ajax({
            type: "POST",
            timeout:3000,
            url: sBasePath + '/' + defaultLang +   '/test/indexxhr',
            dataType: 'json',
            data:{} ,
            success: function(data){
                $('#scheduleLoader').remove();
                mySchedule.data = data;
                mySchedule.barBuilder();
            },
            beforeSend: function(){
                mySchedule.showLoader();
            },
            error:function(xhr, str, er){
              alert('error');
              return;
            }
        });
    },
    showLoader : function(){
        var wPadding = 0;
        var target= $('#scheduleBox');
        var loader= $('<div id="scheduleLoader"></div>');
        loader.fadeTo("fast", 0.8);
        loader.css({
            width: target.width() +  'px',
            height: target.height() + 'px'
        }).hide().appendTo(target);
        loader.show();
    },
    init :function(){
        mySchedule.getScheduleOfTheDay();
    }
}
$(mySchedule.init);

Any comments on how I should be doing this better would be gratefully appreciated.