Scrollbar

Bonsoir les tardifs ;-)
Alors voila, j'ai un petit problème. J'ai il y a peu arrangé un code type de scrollbar à ma sauce pour qu'il convienne à l'esthétique de mon site web. Cela fonctionne parfaitement, voici le code (donc il est intégré dans une page web vide, c'etait juste pour voir ce qu'il donnait, m'exercer jusqu'a atteindre l'effet souhaité) :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Titre page</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="style scrolling" href="css/style scrolling.css" />
	
	<script type="text/javascript" src="java/fleche.js"></script>
   </head>
   <body>
   

   
<div id="support_scrollbar" >	
	<div id="contenu_scrollbar">
		Texte <br />
Texte <br />
Texte <br />
Texte <br />
Texte <br />
Texte <br />
Texte <br />
Texte <br />

	</div>
	
	<div id="barrehaut_scrollbar">
		
			<img onmouseover="moveLayer(1);" onmouseout="clearTimeout(Timer);" src="css/images/flechehaut.png" style="cursor:pointer; position:absolute; right:45%; top:0;" alt="" />	
	</div>
	<div id="barrebas_scrollbar">
		
		<img onmouseover="moveLayer(-1);" onmouseout="clearTimeout(Timer);" src="css/images/flechebas.png" style="cursor:pointer; position:absolute; right:45%; bottom:0;" alt="" />
				
	</div>
</div>
   </body>
</html>

et voici le code Css:

#support_scrollbar
{
background-color:#f5feac; 
position:relative; 
width:350px; 
height:150px; 
overflow:hidden; 
border:none;
}
#contenu_scrollbar
{
text-align: center; 
position:absolute; 
top:0;
padding: 30px 0;
}
#barrehaut_scrollbar
{
background-color:#f5feac; 
width:350px; 
height:20px; 
position:absolute; 
right:0; 
border-bottom: 4px ridge #865826; 
}
#barrebas_scrollbar
{
background-color:#f5feac; 
width:350px;
 height:20px; 
 position:absolute;
 right:0; 
 bottom:0 ; 
 border-top:4px ridge #865826 ;
}

Et javascript :

var Timer;
var pas = 2;
function moveLayer(sens) {
	var objet=document.getElementById("contenu_scrollbar");
	var top=parseInt(objet.style.top);
	if(isNaN(top))
		top=0;

	if(top + pas*sens>0)
	{
        	objet.style.top = '0';
		clearTimeout(Timer);
		return false;
	}
	else if(top + pas*sens<-(objet.offsetHeight-document.getElementById("support_scrollbar").offsetHeight))
	{
        	objet.style.top = -(objet.offsetHeight-document.getElementById("support_scrollbar").offsetHeight)+'px';
		clearTimeout(Timer);
		return false;
	}

	objet.style.top = (top + pas*sens) + "px";

	Timer = setTimeout(function () { moveLayer( sens ); }, 30);
}

function molette(event)
{
	if(!survol_contenu)
		return false;

	var sens;
	if(!event)
		event=window.event;

	if(event.wheelDelta)
		sens=(window.opera)?-event.wheelDelta/120:event.wheelDelta/120; 
	else
		sens=(event.detail)?-event.detail/3:0;
	moveLayer(sens*5);
	clearTimeout(Timer);
}

if(window.addEventListener)
	window.addEventListener('DOMMouseScroll',molette,false);

else
{
	window.onmousewheel=molette;
	document.onmousewheel=molette;
}

var survol_contenu=false;
function overcontenu()
{
	survol_contenu=true;
}
function outcontenu()
{
	survol_contenu=false;
}
function charge()
{
	if(document.getElementById("contenu_scrollbar").addEventListener)
	{
		document.getElementById("contenu_scrollbar").addEventListener('mouseover',overcontenu,false);
		document.getElementById("contenu_scrollbar").addEventListener('mouseout',outcontenu,false);
	}
	else if(document.getElementById("contenu_scrollbar").attachEvent)
	{
		document.getElementById("contenu_scrollbar").attachEvent('onmouseover',overcontenu);
		document.getElementById("contenu_scrollbar").attachEvent('onmouseout',outcontenu);
	}
	else
	{
		document.getElementById("contenu_scrollbar").onmouseover=overcontenu;
		document.getElementById("contenu_scrollbar").onmouseout=outcontenu;
	}
}
if(window.addEventListener)
	window.addEventListener('load',charge,false);

else if(window.attachEvent)
	window.attachEvent('onload',charge);

else
	window.onload=charge;

Alors a partir de la, vu que tout fonctionnait bien, j’ai décidé de l’intégrer dans ma page web :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title> </title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="cliff" href="css/cliff.css" />
	  	   <link rel="stylesheet" media="screen" type="text/css" title="style scrolling" href="css/style scrolling.css" />
	    <link rel="shortcut icon" href="css/images/favicon.ico" />
	   <script type="text/javascript" src="JAVA/menu.js"></script>
		<script type="text/javascript" src="JAVA/fleche.js"></script>
	
   </head>
   <body>
   <div id="en_tete">
  
	</div>
	
	
<?php include('structure/menu.php'); ?>

	
 
   
 
   
 
<div id="corps">

<div id="support_scrollbar" >	
	<div id="contenu_scrollbar">
		Texte <br />
Texte <br />
Texte <br />
 
Texte <br />
Texte <br />
Texte <br />
	</div>
	
	<div id="barrehaut_scrollbar">
		
			<img onmouseover="moveLayer(1);" onmouseout="clearTimeout(Timer);" src="css/images/flechehaut.png" style="cursor:pointer; position:absolute; right:45%; top:0;" alt="" />	
	</div>
	<div id="barrebas_scrollbar">
		
		<img onmouseover="moveLayer(-1);" onmouseout="clearTimeout(Timer);" src="css/images/flechebas.png" style="cursor:pointer; position:absolute; right:45%; bottom:0;" alt="" />
				
	</div>
</div>
</div>   

	
<?php include('structure/menu2.php'); ?>

<?php include('structure/piedpage.php'); ?>		 


       
   </body>
</html>

J’ai essayé en version Html et en version PHP, mais rien n’y fait, cela est complètement déstructuré, comme si la page ne prenait pas en compte les fichiers CSS et Javascript du scrollbar, j’ai pourtant vérifié les chemins indiqué dans la balise head en script et link, et ceux-ci sont corrects.
Et le pire c’est que je me rappelle avoir essayé d’intégrer ce code dans ma page il y a quelques jours, et cela fonctionnait. Voila pourquoi je ne vois absolument pas pourquoi cela ne veut plus fonctionner. C’est surement un truc tout bête, mais cela sautera surement directement à vos yeux, moi je ne vois pas où se situe l’erreur….
Un grand merci,
Désolé du dérangement et bonne nuit

Difficulté à intégrer dans une page

Scrollbar

Supprimer

Modérer

Signaler le message aux modérateurs