Problème de scrollbar pour un projet de Timeline

Bonjour, je rencontre un souci dans la réalisation de mon projet de Timeline pour une communauté de joueurs en ligne.

Voici la page en question : http://temp.cer-mmorpg.com/timeline/

Il y a une scrollbar en bas, et selon la résolution, nous avons le début mais ma scrollbar ne peut pas aller tout à droite car la légende de la scrollbar ne défile pas.

J'ai suivi ce tutorial pour ce projet : http://tutorialzine.com/2010/01/advanced-event-timeline-with-php-css-jquery/


Merci d'avance de votre aide.

Je vous mets le code de mes pages.


Voici celui du fichier JS :

$(document).ready(function(){

	/* The number of event sections / years with events */
	var tot=$('.event').length;
	
	$('.eventList li').click(function(e){
			showWindow('<div>'+$(this).find('div.content').html()+'</div>');
	});
	
	
	/* Each event section is 320 px wide */
	var timelineWidth = 320*tot;
	var screenWidth = $(document).width();
	
	$('#timelineScroll').width(timelineWidth);
	
	/* If the timeline is wider than the screen show the slider: */
	if(timelineWidth > screenWidth)
	{
		$('#scroll,#slider').show();
		$('#centered,#slider').width(120*tot);
		
		/* Making the scrollbar draggable: */
		$('#bar').width((120/320)*screenWidth).draggable({

			containment: 'parent',
			drag: function(e, ui) {
	
				if(!this.elem)
				{
					/* This section is executed only the first time the function is run for performance */
					
					this.elem = $('#timelineScroll');
					
					/* The difference between the slider's width and its container: */
					this.maxSlide = ui.helper.parent().width()-ui.helper.width();

					/* The difference between the timeline's width and its container */
					this.cWidth = this.elem.width()-this.elem.parent().width();
					this.highlight = $('#highlight');
				}
				
				/* Translating each movement of the slider to the timeline: */
				this.elem.css({marginLeft:'-'+((ui.position.left/this.maxSlide)*this.cWidth)+'px'});
				
				/* Moving the highlight: */
				this.highlight.css('left',ui.position.left)
			}
		});
		
		$('#highlight').width((120/320)*screenWidth-3);
	}
	
});

function showWindow(data)
{
	/* Each event contains a set of hidden divs that hold
	   additional information about the event: */
	   
	var title = $('.title',data).text();
	var date = $('.date',data).text();
	var body = $('.body',data).html();
	
	$('<div id="overlay">').css({
								
		width:$(document).width(),
		height:$(document).height(),
		opacity:0.6
		
	}).appendTo('body').click(function(){
		
		$(this).remove();
		$('#windowBox').remove();
		//location.reload();// rechargement de la page [smile]
	});
	
	$('body').append('<div id="windowBox"><div id="titleDiv">'+title+'</div>'+body+'<div id="date">'+date+'</div></div>');

	$('#windowBox').css({
		width:800,
		height:510,
		left: ($(window).width() - 800)/2,
		top: ($(window).height() - 510)/2
	});
	
}

Le code du CSS :

.event{
	/* Contains the event header and body list */
	float: left;
	padding: 5px;
	text-align: left;
	width: 310px;
	margin: 0;

}

.eventList li{
	/* The individual events */
	list-style:none;
	margin: 5px 10px;
	padding: 8px 4px;
	color: #000;
	background: #eee;
	
	/* CSS3 rounded corners */
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

.eventList li:hover{
	/* The hover state: */
	cursor:pointer;
	background:#eee;
}

li span{
	/* The event icon */
	display: block;
	float: left;
	height: 28px;
	margin-right: 5px;
	 margin-left: -2px;
	margin-top: -8px;
	width: 28px;
}

/* Individual background images for each type of event: */

li.news span.icon { 	background:url(../img/cer.png) no-repeat; }
li.image span.icon { 	background:url(img/icons/camera.png) no-repeat; }
li.milestone span.icon { 	background:url(img/icons/chart.png) no-repeat; }

div.content{
	/* This div contains additional data for the content */
	display: none;
}

.eventHeading{
	/* The colorful year headings at the top */
	background: url(../img/bg_eventHead.png) repeat-x left top;
	font-size: 18px;
	line-height: 38px;
	text-align: center;
	text-transform: uppercase;
	
	/* CSS3 rounded corners */
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

/* Three color styles for the headings: */


#timelineLimiter{
	/* Hides the overflowing timeline */
	width:100%;
	overflow: auto;
	padding-top: 10px;
	margin: 40px 0;
}

#scroll{
	/* The small timeline below the main one. Hidden here and shown by jQuery if JS is enabled: */
	display:none;
	line-height:30px;
	background:#404040;
	color:#FFF;
}

.scrollPoints{
	/* The individual years */
	float:left;
	font-size:1.4em;
	padding:4px 10px;
	text-align:center;
	width:100px;
	
	position:relative;
	z-index:10;
}

#centered{
	/* Centers the years, width is assigned by jQuery */
	margin:0 auto;
	position:relative;
}

#slider{
	/* Holds the scroll bar */
	margin:10px auto;
	height:25px;
	display:none;
}

#bar{
	/* The scroll bar */
	background:url(../img/slider_center.png) repeat-x center center;
	height:25px;
	cursor:pointer;
}

#barLeft{
	background:transparent url(../img/slider.png) no-repeat scroll left center;
	height:25px;
	width:20px;
	left:0;
	top:0;
	position:absolute;
}

#barRight{
	background:transparent url(../img/slider.png) no-repeat scroll right center;
	height:25px;
	position:absolute;
	right:0;
	top:0;
	width:20px;
}

#overlay{
	/* The overlay that darkens the page when an event is clicked */
	position:absolute;
	z-index:10;
	top:0;
	left:0;
	background-color:#222222;
}

.image {
float: left;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	margin: -30px 0 0 0;
	box-shadow: 4px 4px 8px #aaa; 
	
}
#windowBox{
	/* Shows details about the event on click */
	position: absolute;
	z-index: 20;
	background-color: #fff;
	font-size: 12px;
	padding: 10px;
	color:#000;
	box-shadow: 8px 8px 12px #000; 

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

.content_plus {
	margin-left: 265px;
	background: #CCC;
	padding: 10px;
	height: 425px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.content_plus p {
	overflow: auto;
	height: 425px;
	
}

#titleDiv{
	/* The title of the windowBox */
	color:#000;
	font-size: 24px;
	margin-bottom:10px;
	margin-left: 255px;
	padding: 5px 10px;
}

#date{
	/* The date on the bottom of the windowBox */
	bottom: 15px;
	color: #999999;
	font-size: 14px;
	font-style: italic;
	position: absolute;
	right: 15px;
	padding: 2px;
	background:#FCFCFC;
}

#highlight{
	/* The blue highlight that moves with the scroll bar */
	height:38px;
	position:absolute;
	z-index:0;
	left:0;
	top:0;
	
	background:#333;
	border-width:0 1px;
}

.clear{
	clear:both;
}

Modifié par Alfala (28 Apr 2011 - 08:50)