Sujet Précédent Sujet Suivant

Intégration Scrollbar

Fermé
Garffy - 29 août 2010 à 02:31
niconovice Messages postés 954 Date d'inscription lundi 10 novembre 2008 Statut Membre Dernière intervention 3 mars 2014 - 29 août 2010 à 02:56
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 ^^

2 réponses

Réponse 1 / 2
Ovo
29 août 2010 à 02:55
Hello,

J'ai l'impression que c'est lié à l'appel de la feuille de style "cliff.css".
J'ai commenté la ligne "<link rel="stylesheet" media="screen" type="text/css" title="cliff" href="css/cliff.css" />" et ça a l'air de marcher.

Il faudrait voir avec ce fichier. Tu peux poster le code si tu veux...
0
Réponse 2 / 2
niconovice Messages postés 954 Date d'inscription lundi 10 novembre 2008 Statut Membre Dernière intervention 3 mars 2014 86
29 août 2010 à 02:56
celà ne peut que venir du chemin...
as tu verifié les chemin comme:
css/images/flechebas.png
css/images/flechehaut.png
etc...

en tout les cas re-vérifie les chemins d'après tes dires cela ne peut que venir de là

have fun :)
0

Discussions similaires

Comment bloquer l'intégration de vidéos Youtube ?
Marcus_5413 -
Utilisateur anonyme -

3 réponses
idm pour opera
mouhe12 -
escaliso -

4 réponses
Problème avec l'intégration de IDM
tarakbeji -
OuSs -

48 réponses
Internet Download Manager sur opera
noetits -
lafouinefr -

3 réponses
double scrollbar
zacreur -
zacreur -

2 réponses