Partage
  • Partager sur Facebook
  • Partager sur Twitter

Scrollbar

Sujet résolu
garffy
    21 août 2010 à 20:12:18

    Bonsoir ;-)
    Je viens d'essayer de créer une scrollbar sur mon "site". Je me suis inspiré du codage de ce site ;
    http://www.wikistuce.info/doku.php/javascript/recreer_une_scrollbar_en_javascript.
    Alors le code fonctionne bien, je l'ai essayé et remodelé a ma facon, et aucun problème. J'ai juste voulu apres cela séparer le Css et Java du code HTML vu que c'est beaucoup plus pratique, comme je l'ai appris dans les tuto de ce site (super au passage, merci bcp ! ).
    Mais une fois que je place le CSS et le java a part, cela ne fonctionne plus... (la mise en page reste bonne par contre. Voici mes code :
    <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="style" href="style.css" />
	
<script type="text/javascript" src="menu.js"></script>
   </head>
   <body>
   

   
<div id="support" >	
	<div class="contenu">
		 Quand la mode fait son cinéma

Le magnifique espace de la Maison Bouvy s'ouvrant, <br />
côté femmes, sur l'avenue Louise, côté homme, surbr <br />
 l'avenue de la Toison d'Or, est passé à l'heure d'été.<br />
 Rare sont ceux qui n'ont pas encore emprunté ce <br />
 chemin de l'élégance.<br />

Si l'on reproche souvent à de nombreuses enseignes <br />
de proposer partout « la même chose », chez Bouvy,<br />
 le choix des collections est le résultat d'un <br />
 véritable parti pris qui a déjà fait ses preuves. <br />
 Pour les hommes et les femmes, le quotidien ou les <br />
 jours d'exception, le meilleur de la mode s'expose. <br />
 Le magnifique espace de la Maison Bouvy s'ouvrant, <br />
côté femmes, sur l'avenue Louise, côté homme, surbr <br />
 l'avenue de la Toison d'Or, est passé à l'heure d'été.<br />
 Rare sont ceux qui n'ont pas encore emprunté ce <br />
 chemin de l'élégance.<br />

Si l'on reproche souvent à de nombreuses enseignes <br />
de proposer partout « la même chose », chez Bouvy,<br />
 le choix des collections est le résultat d'un <br />
 véritable parti pris qui a déjà fait ses preuves. <br />
 Pour les hommes et les femmes, le quotidien ou les <br />
 jours d'exception, le meilleur de la mode s'expose. <br />
	</div>
	
	<div class="barrehaut">
		
			<img onmouseover="moveLayer(1);" onmouseout="clearTimeout(Timer);" src="flechehaut.png" style="cursor:pointer; position:absolute; right:45%; top:0;" alt="" />	
	</div>
	<div class="barrebas">
		
		<img onmouseover="moveLayer(-1);" onmouseout="clearTimeout(Timer);" src="flechebas.png" style="cursor:pointer; position:absolute; right:45%; bottom:0;" alt="" />
				
	</div>
</div>
   </body>
</html>



    #support
{
background-color:f5feac; 
position:relative; 
width:350px; 
height:150px; 
overflow:hidden; 
border:none;
}
.contenu
{
text-align: center; 
position:absolute; 
top:0;
}
.barrehaut
{
background-color:f5feac; 
width:350px; 
height:20px; 
position:absolute; 
right:0; 
border-bottom: 4px ridge #865826; 
}
.barrebas
{
background-color:f5feac; 
width:350px;
 height:20px; 
 position:absolute;
 right:0; 
 bottom:0 ; 
 border-top:4px ridge #865826 ;
}


    var Timer;
var Pas = 3;
function moveLayer(Sens) {
	Objet=document.getElementById("contenu");
    if(parseInt(Objet.style.top) + (Pas*Sens)>0)  {
		clearTimeout(Timer);
	}
	else if(parseInt(Objet.style.top) + (Pas*Sens)<-(Objet.offsetHeight-document.getElementById("support").offsetHeight)) {
		clearTimeout(Timer);
	}
    else {
        Objet.style.top = (parseInt(Objet.style.top) + (Pas*Sens)) + "px";
	}
	Timer = setTimeout("moveLayer(" + Sens + ");", 30);
}


    C'est donc une page sur laquelle je m'exerce ne contenant que le code de la Scrollbar. Et donc si je rassemble tout ca en un document sur une page HTML (donc html+script+java), il n'y a aucun soucis...
    Pourtant je pense avoir recopié parfaitement le tout.

    Un grand merci,
    Bonne soirée^^
    • Partager sur Facebook
    • Partager sur Twitter
    Kyle Katarn
    • Javascript
      22 août 2010 à 10:25:23

      Le Javascript n'est pas du Java.
      Un code bien indenté, c'est plus sympa à regarder.

      Petit oubli de # devant f5feac.
      Ensuite, il il faut utiliser id="contenu" pour pouvoir utiliser la fonction getElementById, ça ne marche pas avec class.

      [EDIT, trouvé]

      Oui, j'avais oublié cette subtilité : la propriété style des objets HTML ne contient que les styles incorporés et pas les styles CSS. Donc, il faut rajouter une petite ligne pour lui dire que s'il ne trouve pas style.top, alors c'est que ça vaut 0 :

      var Timer;
var Pas = 3;
function moveLayer(Sens) {
	var Objet=document.getElementById("contenu");
	var Top=parseInt(Objet.style.top);
	if(isNaN(Top))
		Top=0;

	if(Top + Pas*Sens>0)
		clearTimeout(Timer);

	else if(Top + Pas*Sens<-(Objet.offsetHeight-document.getElementById("support").offsetHeight))
		clearTimeout(Timer);

	else
        	Objet.style.top = (Top + Pas*Sens) + "px";

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


      PS: Il vaut mieux passer à setTimeout une fonction plutôt qu'un code à exécuter, c'est plus sûr, plus rapide et plus compatible.
      PPS: Pas besoin des parenthèses autour de Pas*Sens, la multiplication est prioritaire sur l'addition.

      [Double edit]
      Je sais pas si ça t'intéresse mais en tout cas, c'est cadeau : voilà un petit complément à ton script pour pouvoir faire défiler le texte avec la molette de la souris (je te suggère de le mettre parce que les fainéants dans mon genre détestent avoir à déplacer la souris pour scroller le texte, quand on a des habitudes bien ancrées on est vite dérangés par ce genre de choses) :
      var Timer;
var pas = 3;
function moveLayer(sens) {
	var objet=document.getElementById("contenu");
	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").offsetHeight))
	{
        	objet.style.top = -(objet.offsetHeight-document.getElementById("support").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").addEventListener)
	{
		document.getElementById("contenu").addEventListener('mouseover',overcontenu,false);
		document.getElementById("contenu").addEventListener('mouseout',outcontenu,false);
	}
	else if(document.getElementById("contenu").attachEvent)
	{
		document.getElementById("contenu").attachEvent('onmouseover',overcontenu);
		document.getElementById("contenu").attachEvent('onmouseout',outcontenu);
	}
	else
	{
		document.getElementById("contenu").onmouseover=overcontenu;
		document.getElementById("contenu").onmouseout=outcontenu;
	}
}
if(window.addEventListener)
	window.addEventListener('load',charge,false);

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

else
	window.onload=charge;



      PS: Suggestion pour que le contenu soit intégralement visible et pas coupé en haut et en bas, un petit padding sur le div de contenu :
      padding:30px 0;
      • Partager sur Facebook
      • Partager sur Twitter
      Holowar | Carbon | Pug for PHP
      garffy
        22 août 2010 à 14:18:41

        Un grand merci, ca fonctionne ;-)
        Désolé pour les petites erreurs un peu stupides, je me suis lancé dans la création web il y a maxi une semaine, donc parfois je me perds un peu avec la grande quantité d'infos à absorber ^^
        Pour le padding je venais effectivement de le modifier, merci du conseil, juste une petite question (stupide surement ^^), mais le fait de mettre le "0" après le "30px" du padding donne quoi exactement comme attribut? ;-)
        Voila, en tout cas grand merci de ton coup de main et du petit plus avec la molette que t'a également apporté

        [EDIT] Une dernière petite question ;-)
        Je vais intégrer cette scrollbar dans le corps de mon site, et juste au dessus j'ai un menu horizontal déroulant. Le problème, c'est que quand je vais sur mon menu déroulant, la scrollbar passe au dessus de mon menu et je ne vois donc plus mon menu. En bref, le corps (étant après le menu dans mon code html)est prioritaire sur le menu dans le cas de la scrollbar. Comment faire pour que mon menu soit prioritaire sur la scrollbar? Je suppose que c'est juste un attribut à ajouter dans le CSS mais je ne vois pas laquelle.En espérant avoir été clair dans mes dires ^^,
        Merci bien ^^
        • Partager sur Facebook
        • Partager sur Twitter
        Shivaan
        • Javascript
          22 août 2010 à 14:57:46

          z-index ^^
          • Partager sur Facebook
          • Partager sur Twitter
          Directeur technique, créateur de jeux HTML5 et fan de JavaScript | La suite de OnHack est sur les rails !
          Kyle Katarn
          • Javascript
            22 août 2010 à 15:49:57

            garffy > Commençons par un peu de vocabulaire histoire qu'on parle de la même chose : l'attribut c'est en HTML :
            <div class="truc">

            La balise div a pour attribut class="truc", class est le nom de l'attribut et truc est la valeur de l'attribut.

            En CSS, ce sont des propriétés :
            div
{
    z-index : 2;
}

            La balise div a pour propriété z-index:2, z-index est le nom de la propriété et 2 est sa valeur.

            Ensuite, pour padding et margin, il existe de multiple façon de faire :
            .classe1
{
    padding : 10px;
    /* 10 pixels de tous les côtés */
}
.classe2
{
    padding-top : 1px;
    /* 1 en haut */
    padding-right : 2px;
    /* 2 à droite */
    padding-bottom : 3px;
    /* 3 en bas */
    padding-left : 4px;
    /* 4 à gauche */
}
.classe3
{
    padding : 1px 2px 3px 4px;
    /* Identique à la classe2 */
}
.classe4
{
    padding : 30px 0;
    /* 30 pixels en haut et en bas */
    /* 0 pixel à gauche et à droite */
    /* le 0 n'a pas besoin d'unité, mais on aurait pu écrire 0px */
}
            • Partager sur Facebook
            • Partager sur Twitter
            Holowar | Carbon | Pug for PHP
            garffy
              22 août 2010 à 18:22:03

              Merci bien pour tous ces conseils ;-)
              • Partager sur Facebook
              • Partager sur Twitter

              Scrollbar

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
              • Editeur ●
              • Markdown