Site web et scrolling vertical

**Doppleganger** · 21/02/2013, 15h17

Bonjour, j'aimerais mettre en place sur mon site web, un effet de scrolling, lorsque je clique sur un lien pour me diriger vers un ID de la page.

J'ai trouvé d'innombrable javascript permettant d'éffectuer cette manoeuvre.

Cependant, aucun n'as fonctionné dans mon cas, car en examinant et en essayant de comprendre comment fonctionnais ces scripts, ils étaient tous incapable de me redirigé vers l'ID que je voulais, ou en tout cas, pas avec l'effet de scrolling.

http://www.hostingpics.net/viewer.ph...reenBlabla.jpg

Voilà la gueule du truc, en gros, la plupart des scripts font en sorte que le scrolling s'effectue sur la page, alors que moi, tout se passe dans le petit encadré qui possède une scrollbar.
Je voudrais cliquer sur un des mots en gras, et qu'il m’emmène vers les paragraphes inférieurs.

Voilà, si quelqu'un avait une piste pour m'aider à me sortir de cette situation.
Et mes capacités en javascript ne sont pas à la hauteur pour tenter une modification des scripts que je possède...

**CosmoKnacki** · 21/02/2013, 17h12

Bonjour,

Tu ne donnes pas suffisament d'éléments pour qu'on puisse t'aider.
Si tu ne veux pas dévoiler les informations top-secrètes de ton futur site, je te conseille:

1) choisi un script parmi ceux que tu as pu trouver. En général ceux-ci sont agrémentés de démos donnant une idée du rendu, ce qui te permettra de faire ton choix
2) essai de l'implémenter sur une version simplifiée de ta page en changeant les "informations personnelles" au passage, pour voir si déjà ça fonctionne
3) Si ça ne fonctionne pas, donnes-nous les éventuelles erreurs affichées et surtout ton code, car avec une copie d'écran on ne peut rien faire

**Doppleganger** · 21/02/2013, 17h33

Voilà le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="fr" />
<link href="style.css"	title="Défaut" rel="stylesheet" type="text/css" media="screen" />
 
<title>Titre</title>
 
<!--------------------- Chargement de tout le javascript, attention les yeux! ------------------------------>
<script type="text/javascript" src="scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" src="scriptaculous/src/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="linkToFade.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">      <!-- étant donné que je me sert de la librairie jQuery et prototype en meme temps, ce dispositif me permet d'utiliser les deux -->
        jQuery.noConflict();
        jQuery('#jquery').addClass('jquery');
 
 
        $('prototype').addClassName('prototype');
    </script>
<script type="text/javascript" src="tinyscrolling/tinyscrolling.js"></script>
<script type='text/javascript' language='javascript'>
	  Event.observe(window,'load', 
	    function () {
	      $('page').hide();
	      new Effect.Appear('page');
	      initiateLinkToFade();
	    }  
	  );
	</script>
 
 
 
 
	<div class="blackboard"> <!-- Il s'agit de l'intégralité du tableau dans lequel les textes sont affichés -->
 
<?php 
include_once ("Haut de page.html"); /* Ici je fais appel à la baniere et au menus qui sont placés à gauche, ainsi lorsque je désire les modifier je n'ai qu'à modifier le fichier les concernant, car à la base le site devait contenir plusieurs pages.*/
include_once ("Menus.html");
?>
 
<body>
 
<div class="cadre_milieu">
<div id="page">
 
 
<div class="contenu_milieu">
<div class="polaroidME">
<img src="images/PolaroidCollegeRESIZEDV2.png">
</div>
 
<div id="acceuil">
Premier paragraphe contenant une description sommaire et dont le contenus importe peu
</div>
 
<div class="separateur"></div>
 
 
<div id="SEGPA">
<div class="punaisegreen"><img src="images/punaisegreenRESIZED.png"></div> <!-- les classes polaroides et punaises sont deux div, qui sont censés représenter une image avec un effet polaroide, ces images accompagne charque article -->
<div class="polaroid">
<img src="images/banniere2RESIZED.jpg">
DEuxieme paragraphe contenant un article dont le contenu importe peu
</div>
 
<div class="separateur"></div>
 
<div id="nonfranco">
<div class="punaisegreen"><img src="images/punaisegreenRESIZED.png"></div>
<div class="polaroid">
<img src="images/globePays.jpg">
<p> Classe non francophone </p>
</div>
 
Troisieme paragraphe patatipatata
 
 
</div>
 
 
 
 
 
 
 
 
 
</div>
</div> 
</div>
 
 
<?php
include_once ("gallery.html"); <!-- ici il s'agit d'une galerie d'image situé en bas à gauche du site -->
?>
 
</div>
</html>

Le code du menu

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<div id="menu_gauche"> <div id="case_menu" >1ere Catégorie </div>
					<ul>
								<li>	<a href="#acceuil"id="case_menu"> BLA BLA</a> </li>
								<li >	<a href ="#SEGPA"  id="case_menu"> SEGPA</a> </li>								
								<li>	<a href="#nonfranco" id="case_menu"> non-Francophone</a> </li>
 
					</ul>
 
        </div>

Le javascript que j'utilise pour le scrolling

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/* Tiny Scrolling - a smooth navigation between internal links and their destinations
by Marco Rosella - http://www.centralscrutinizer.it/en/design/js-php/tiny-scrolling
based on the works by Travis Beckham and Brian McAllister.
                v0.3 - March 27, 2006
*/
 
window.onload = function() {
	tinyScrolling.init();
	}
 
var tinyScrolling = {
	speed : 1,      //set here the scroll speed: when this value increase, the speed decrease. 
	maxStep: 500,	 //set here the "uniform motion" step for long distances
	brakeK: 1,		 //set here the coefficient of slowing down
	hash:null,		
	currentBlock:null,
	requestedY:0,
	init: function() {
			var lnks = document.getElementsByTagName('a');   
			for(var i = 0, lnk; lnk = lnks[i]; i++) {   
				if ((lnk.href && lnk.href.indexOf('#') != -1) &&  ( (lnk.pathname == location.pathname) ||
				('/'+lnk.pathname == location.pathname) ) && (lnk.search == location.search)) {  
				lnk.onclick = tinyScrolling.initScroll;   		
				}   
			}
	},
	getElementYpos: function(el){
			var y = 0;
			while(el.offsetParent){  
				y += el.offsetTop    
				el = el.offsetParent;
			}	return y;
	},		
	getScrollTop: function(){
			if(document.all) return (document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
			else return window.pageYOffset;   
	},	
	getWindowHeight: function(){
			if (window.innerHeight)	return window.innerHeight;
			if(document.documentElement && document.documentElement.clientHeight) return document.documentElement.clientHeight;
	},
	getDocumentHeight: function(){
			if (document.height) return document.height;
			if(document.body.offsetHeight) return document.body.offsetHeight;
	},
	initScroll: function(e){
			var targ;  
			if (!e) var e = window.event;
			if (e.target) targ = e.target;
			else if (e.srcElement) targ = e.srcElement;   
			tinyScrolling.hash = targ.href.substr(targ.href.indexOf('#')+1,targ.href.length); 
			tinyScrolling.currentBlock = document.getElementById(tinyScrolling.hash);   
			if(!tinyScrolling.currentBlock) return;
			tinyScrolling.requestedY = tinyScrolling.getElementYpos(tinyScrolling.currentBlock); 
			tinyScrolling.scroll();  
			return false;
	},
	scroll: function(){
			var top  = tinyScrolling.getScrollTop();
			if(tinyScrolling.requestedY > top) {  
				var endDistance = Math.round((tinyScrolling.getDocumentHeight() - (top + tinyScrolling.getWindowHeight())) / tinyScrolling.brakeK);
				endDistance = Math.min(Math.round((tinyScrolling.requestedY-top)/ tinyScrolling.brakeK), endDistance);
				var offset = Math.max(2, Math.min(endDistance, tinyScrolling.maxStep));
			} else { var offset = - Math.min(Math.abs(Math.round((tinyScrolling.requestedY-top)/ tinyScrolling.brakeK)), tinyScrolling.maxStep);
			} window.scrollTo(0, top + offset);  
			if(Math.abs(top-tinyScrolling.requestedY) <= 1 || tinyScrolling.getScrollTop() == top) {
				window.scrollTo(0, tinyScrolling.requestedY);
				if(!document.all || window.opera) location.hash = tinyScrolling.hash;
				tinyScrolling.hash = null;
			} else 	setTimeout(tinyScrolling.scroll,tinyScrolling.speed);
	}		
}

Voilà, s'il manque des choses n'hésiter pas à me prévenir, je travail sur ce dysfonctionnement depuis plusieurs heures, enfin, travail, j'essaie de trouver une méthode qui puisse s'appliquer à mon cas.

**CosmoKnacki** · 21/02/2013, 18h40

Ok! Avant de me plonger (me noyer?) plus profond dans ton code, juste une petite remarque:

Tu as besoin de 3 effets javascript (s'il y en a d'autre, n'hésites pas à le signaler):
1- le fadein fadeout des pages entre-elles
2- sûrement d'un bidule de galerie d'images/gestion de miniature machin chose
3- du fameux effet de smooth scroll

Or ces trois effets peuvent être réaliser avec jquery seul et ses éventuels plugins. (et fort probablement avec scriptaculous seul ou autre librairie, et évidement sans librairie du tout)
Pourquoi alors charger 25 framewôks différents? Bien que jquery puisse se régler en "noConfict" pour permettre, de manière ô combien magnanime, aux autres scripts de fonctionner, mieux vaut éviter autant que faire ce peux d'utiliser des frameworks différents.

Après une recherche rapide, j'ai trouvé:
-- http://www.onextrapixel.com/2010/02/...e-transitions/
-- http://www.creativejuiz.fr/blog/tuto...ilement-fluide

Je regarde ton code de plus prés, à bientot.

**Doppleganger** · 21/02/2013, 19h00

Oui c'est un peu le bordel :p Heureusement que j'ai fait des includes d'autres pages :p

Euh car j'ai choppé ces bout de codes sur des tutoriaux, et chacun avait sa sauce :/

**CosmoKnacki** · 21/02/2013, 20h50

Avant d'attaquer la partie javascript, tu devrais regarder ton code html/css et vérifier les points suivants:

- choisir une DTD
- les balises <head>, <body>
- indentation du code (par exemple 4 espaces à chaque niveau)
- la fermeture des balises, les chevauchements éventuels
- choisir les balises en fonction de leur contenu ( <h1> à <h6> pour les titres à la place de <div>, <p> à la place de <div> pour les paragraphes )
- supprimer les balises inutiles (ne pas encadrer x fois le même contenu, ça doit se régler avec les CSS)
- choisir une convention de nommage des classes et id
- doit on utiliser une classe ou une id?

La liste n'est pas exhaustive, l'idée est la rigueur et la réflexion à tous les niveaux possibles. Ça peut sembler rebutant, mais ce n'est pas pharaonique, ça évite bien des déboires et au final ça fait gagner du temps.
À ta place, je ne chercherai pas à placer un quelconque javascript sur un code html bancal (idem pour le css). C'est le croutage quasi assuré, un coup à se retrouver coincé toute une après-midi!

Bon courage

**Doppleganger** · 21/02/2013, 23h59

Ah! J'ai jamais su la différence entre la création de class et de ID en css

C'est juste que la fonction javascript fadeout qui permet de faire un effet de disparition, demandait que le contenu soit dans une div avec l'id Fade, du coup quand je voulais toucher à cette div sans passer par l'id je passais par une classe.

Mais sinon je vois pas trop la différence xD

Mais quel est l’utilité des balises head et body? C'est juste pour mieux se repérer? Graphiquement ça n'influe pas sur le code?

Après c'est clair que niveau mise en page je vais devoir faire un effort... un gros...
Après les encadrements à répétition j'ai du penser des choses dans ma tête pour en arriver là, mais rien n'est "inutile" à priori, peut être LARGEMENT optimisable, mais pas inutile.

Merci de tes conseils je vais commencer par revoir tout ça déjà.

EDIT:
Bon j'ai essayé de suivre tes conseils.
Et j'ai fait une petite beauté à mon code (enfin je trouve)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
 
	<title>Collège René Cassin</title>
 
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="content-language" content="fr" />
	<link href="style.css"	title="Défaut" rel="stylesheet" type="text/css" media="screen" />
	<script type="text/javascript" src="scriptaculous/lib/prototype.js"></script>
	<script type="text/javascript" src="scriptaculous/src/scriptaculous.js?load=effects"></script>
	<script type="text/javascript" src="linkToFade.js"></script> 
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">      
                        jQuery.noConflict();
                        jQuery('#jquery').addClass('jquery');       
                        $('prototype').addClassName('prototype');
        </script>
	<script type='text/javascript' language='javascript'>
                  Event.observe(window,'load', 
                        function () {
                          $('page').hide();
                          new Effect.Appear('page');
                          initiateLinkToFade();
                                                }  
                                                );
        </script>
	<script type="text/javascript" src="tinyscrolling/tinyscrolling.js"></script>
</head>
 
<body onload="start()" >
	<div class="blackboard">
 
	<?php
        include_once ("Haut de page.html");
        include_once ("Menus.html");
        ?>
 
		<div class="cadre_milieu" id="page">	
			<div class="contenu_milieu">
				<div id="acceuil">
				<div class="polaroidME">
					<img src="images/PolaroidCollegeRESIZEDV2.png">
				</div>				
			       TEXTE 1
				</div>
 
			<div class="separateur"></div>
 
				<div id="cassin">
				<div class="punaisegreen"><img src="images/punaisegreenRESIZED.png"></div>
				<div class="polaroid">
					<img src="images/renecassin.jpg">
					<p> Rene Cassin </p>
				</div>				
				TEXTE 2
				</div>
 
			<div class="separateur"></div>
 
				<div id="SEGPA">
				<div class="punaisegreen"><img src="images/punaisegreenRESIZED.png"></div>
				<div class="polaroid">
					<img src="images/banniere2RESIZED.jpg">
					<p> SEGPA </p>
				</div>
				<TEXTE 3
				</div>
 
			<div class="separateur"></div>
 
				<div id="nonfranco">
				<div class="punaisegreen"><img src="images/punaisegreenRESIZED.png"></div>
				<div class="polaroid">
					<img src="images/globePays.jpg">
					<p> Classe non francophone </p>
				</div>
				TEXT 4
				</div>
 
			</div>
		</div> 
 
 
	<?php
        include_once ("gallery.html");
        ?>
 
	</div>
</body>
</html>

3eme edit: x)
Tiens un exemple, tu vois l'encadrer de la balise [CODE] où est affiché tout mon code? Et bien lorsque je tente de faire un effet de scroll, il va d'abords chercher à faire bouger la barre tout à droite de ton écran, qui te permet de naviguer sur la page, alors que moi non, ça serais pour un petit encadré comme celui ci.
j'ai testé de mettre le texte sur toute la page et ca marche pas enfaite.

**CosmoKnacki** · 22/02/2013, 14h56

C'est déjà mieux!

DTD

En première ligne, tu dois indiquer au navigateur dans quel langage la page est écrite. La DTD sert à ça. Dans ton cas, on va choisir celle du xhtml1-transitionnal:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Balises inutiles et id/class

En général, quand on place des balises inutiles, c'est pour pallier à un problème de positionnement avec CSS. Donc des modifications à ce niveau vont t'obliger à faire des corrections dans ton fichier style.css

Maintenant on peut faire la chasse aux balises pas forcément utiles:
-- pourquoi avoir encadré deux fois ton bloc principal.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div class="cadre_milieu" id="page">    
    <div class="contenu_milieu">
        ...
    </div>
</div>

une fois suffit pour pouvoir le positionner et pour délimiter un ensemble cohérent.

-- quelle est l'utilité des blocs <div class="separateur"></div>?

Pour ce qui est des id et des classes, c'est pas bien compliqué: une id désigne un élément unique dans la page (ex:blackboard) et la class permet d'appliquer des styles communs à plusieurs éléments.
Outre l'aspect purement stylistique de cette différence, l'id permet notament à un javascript d'atteindre un élément directement. (document.getElementById('blackboard') ou $('blackboard') avec un framework). Ce qui sera utile pour la suite.

Si en faisant ces modifs tu n'arrives plus à positionner les articles (cassin,segpa,nonfranco) il peut être utile de leur créer une class 'article' (et de gérer le "separateur" avec des margin/padding et un background s'il s'agit d'une image)

**Doppleganger** · 22/02/2013, 15h54

Non, ma DIV cadre et milieu et contenu milieu ne peuvent pas etre enlevé, je te montre

Voilà ce que ça donne avec mes deux div.
http://www.hostingpics.net/viewer.ph...4Sanstitre.jpg

Et sans
http://www.hostingpics.net/viewer.ph...Sanstitre2.jpg

La différence n'est pas énorme, c'est juste que dans le deuxieme une barre horizontale apparait, et je trouve ça inestetique, et j'ai beau tourné les div dans tous les sens impossible de l'enlever, alors que dans le premier cas, horizontalement tout rentre et c'est beau :o

Mais pourquoi est ce qu'on pourrait pas donner à des DIV des ID similaire? Ca reviendrait à la meme chose que de créer des classes?

Sinon pour mon probleme de scrolling, j'ai repris le code et je l'ai appliqué de la maniére la plus simple possible, pour qu'il fonctionnne sur une page quasiment vide, une fois qu'il a fonctionné, j'ai essayé de l'encrer à mon application mais ca ne marche pas, quand je clique sur le lien qui est censé me rediriger vers une partie de ma page (en utilisant le HREF='#"), il y a un petit temps de latence, surement équivalent au temps du scrolling, mais rien, il y a un temps de latence puis la page arrive directement à l'emplacement voulut mais sans effet de scrolling.

**Doppleganger** · 25/02/2013, 12h06

Je me permet un petit up car j'ai trouvé un truc plutot pas mal

http://jsfiddle.net/uaewc/209/

En haut à gauche vous avez mon html (approximativement)
en bas à gauche c'est le code javascript que je veux faire fonctionner
en haut à gauche mon css
en bas à droite ma page html tel qu'il est censé s'afficher

Donc vous pouvez cliquer sur le menu
Acceuil
Rene Cassin
SEGPA
non-Francophone

Vous verrez la scrollbar de tout à droite descendre, pour faire en sorte que la page complète cadre vers l'ID que je souhaite atteindre, mais par contre le petit encadré intérieur, celui contenant le texte possédant aussi une scrollbar, lui ne bouge pas d'un poil, alors que c'est précisément ce que je cherche à faire.

Je suis vraiment pas calé en javascript, je comprends un petit script, mais je ne connais pas les librairies du coup je suis paumé quand il faut créer quelque chose.

EDIT: Bon, ça marche http://jsfiddle.net/uaewc/210/
Dans le javascript j'ai remplacé le

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$(''html, body'').animate({  
            scrollTop:$(the_id).offset().top  
        }, 'slow');

par

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$('div[class^="cadre_milieu"]').animate({  
            scrollTop:$(the_id).offset().top  
        }, 'slow');

Donc sur la plateforme EditThisFiddle le scroll marche, (en tout cas il bouge, même s'il ne le fait pas forcement au bon endroit)

Mais lorsque je le met en action sur mon site web, RIEN, toujours rien, aucun effet de scrolling, il me redirige de manière complétement brute.

EDIT:
Bon j'ai réussi, j'ai appliqué tout ce que j'ai fais précédement et puis j'ai.... mis le code javascript à la fin de la page et ça marche.
Donc voilà, topic à classer "RESOLUT" (j'ai pas réussi à trouver le bouton pour le faire )

Site web et scrolling vertical

JavaScript

Discussions similaires

Partager

Partager