18041 sujets

Questions générales et questions de débutants

[Résolu] Navigation entre pages d'un document

Bonsoir
Je cherche des idées sur la facon de visualiser la navigation entre pages d'un document.

Je m'explique:
J'ai un "document" qui est très long, genre thèse de 3ème cycle, 50 pages de Word, qui est actuellement découpé en 12 fichiers HTML.
Lorsqu'on affiche une page de ce document, on affiche en tête et en fin de la page une barre de navigation permettant d'atteindre une autre page par un clic sur le numéro de page.
Cette barre est actuellement un gros pavé inesthétique contenant PAGE1 PAGE 2 ..... PAGE 12
C'est d'autant plus inesthétique que l'écran est petit: ça fait 2 lignes de texte sur un écran d'ordinateur et jusque 6 lignes sur un écran de téléphone, "responsiveness" oblige ! Et encore sur un téléphone les textes sont trop près les uns des autres, il faudrait les écarter, mais ça ne tiendrait plus sur l'écran

Je cherche de bonnes idées pour remplacer cette horreur par quelque chose de plus esthétique et moins encombrant

Je suis sûr que certains d'entre nous ont déjà eu a faire face à un problème similaire, et je n'ai pas envie de réinventer la roue ou le fil à couper le beurre.

Merci de vos propositions de solutions.
Salut PapyJp,
d'abord un menu top en position:fixed ;
ensuite un 'next' ou 'previous' qui encadre 1 2 3 pages.

Non ?

ps : ce n'est pas la roue qui fut une invention, c'est l'axe autour duquel elle révolutionne ...
Modifié par pictural (15 Aug 2015 - 00:23)
pictural a écrit :
Salut PapyJp,
d'abord un menu top en position:fixed ;
ensuite un 'next' ou 'previous' qui encadre 1 2 3 pages.

Non ?

ps : ce n'est pas la roue qui fut une invention, c'est l'axe autour duquel elle révolutionne ...


Merci de ta réponse, mais franchement non.
D'abord un menu en fixed prend de la place sur l'écran même quand on est plus loin dans la page. C'est d'autant plus insupportable que l'écran est petit. C'est le sparadrap du capitaine Haddock. La page en question a déjà une flèche vers le haut en fixed en bas à droite pour remonter en tête de page, c'est utile mais pas très joli, je ne sens pas de mettre un autre truc en fixed.

Ensuite le propriétaire du site a déjà essayé ça et ça n'a pas l'air de lui plaire, c'est pour ça que je cherche une autre idée. Smiley sweatdrop
Bonjour l'Ami,
ce qui m’inquiètes, c'est que tu parles de pages html
ors en html sans php, pas de pagination facile !! tu peux m'en dire plus ?
De toute façon je te conseil ce type de boutons superbes et sobre

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML lang=fr xml:lang="fr" >
<HEAD><TITLE>Bouton</TITLE>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<META http-equiv=content-language content=fr>
</HEAD>
<BODY>
<style>
#contentPagination {
	MARGIN: 20px 0px
}

#contentPagination P.pagination {
	FONT-SIZE: 110%
}
.pagination A {
	BORDER-RIGHT: #ddd 1px solid; PADDING-RIGHT: 7px; BORDER-TOP: #ddd 1px solid; PADDING-LEFT: 7px; BACKGROUND: #fff; PADDING-BOTTOM: 3px; BORDER-LEFT: #ddd 1px solid; COLOR: #298787; PADDING-TOP: 2px; BORDER-BOTTOM: #ddd 1px solid; TEXT-DECORATION: none
}
.pagination SPAN {
	BORDER-RIGHT: #ddd 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #ddd 1px solid; PADDING-LEFT: 4px; BACKGROUND: #fff; PADDING-BOTTOM: 3px; BORDER-LEFT: #ddd 1px solid; COLOR: #ccc; PADDING-TOP: 2px; BORDER-BOTTOM: #ddd 1px solid
}
.pagination A.pagin-next {
	PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #298787; PADDING-BOTTOM: 5px; COLOR: #fff; BORDER-TOP-STYLE: none; PADDING-TOP: 4px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}
.pagination A.pagin-prev {
	PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #298787; PADDING-BOTTOM: 5px; COLOR: #fff; BORDER-TOP-STYLE: none; PADDING-TOP: 4px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}
.pagination A:hover {
	BORDER-LEFT-COLOR: #b0004b; BORDER-BOTTOM-COLOR: #b0004b; COLOR: #fff; BORDER-TOP-COLOR: #b0004b; BACKGROUND-COLOR: #b0004b; BORDER-RIGHT-COLOR: #b0004b
}
.pagination A.pagin-next:hover {
	COLOR: #fff; BACKGROUND-COLOR: #b0004b
}
.pagination A.pagin-prev:hover {
	COLOR: #fff; BACKGROUND-COLOR: #b0004b
}
.pagination A.active {
	BORDER-LEFT-COLOR: #298787; BACKGROUND: #fff; BORDER-BOTTOM-COLOR: #298787; COLOR: #298787; BORDER-TOP-COLOR: #298787; BORDER-RIGHT-COLOR: #298787
}
.pagination A.active:hover {
	CURSOR: default
}
.pagination A.disabled {
	BORDER-RIGHT: #eee 1px solid; BORDER-TOP: #eee 1px solid; DISPLAY: none; BORDER-LEFT: #eee 1px solid; CURSOR: default; COLOR: #ddd; BORDER-BOTTOM: #eee 1px solid; TEXT-DECORATION: none
}
.pagination A.disabled:hover {
	BORDER-RIGHT: #eee 1px solid; BORDER-TOP: #eee 1px solid; DISPLAY: none; BORDER-LEFT: #eee 1px solid; CURSOR: default; COLOR: #ddd; BORDER-BOTTOM: #eee 1px solid; TEXT-DECORATION: none
}

</style>
<DIV id=contentPagination>
<P class=pagination>
<A class=pagin-prev href="#"<< Précédent</A>
<A href="#">1</A>
<A href="#">2</A>
<A href="#">3</A>
<A href="#">4</A>
<A href="#">5</A>
<A class=active>6</A>
<A class="pagin-next disabled">Suivant >></A> <br /><br /></P><br /><br /></DIV>
</BODY></HTML>


D'autre part en fixed au milieux de la hauteur, bloqué a gauche juste une petite flèche vers le haut (donc discret ) et en haut tes boutons !
Christele a écrit :
Bonjour l'Ami,
ce qui m’inquiètes, c'est que tu parles de pages html
ors en html sans php, pas de pagination facile !! tu peux m'en dire plus ?

Bonjour à toi en ce jour férié, mais pas tout à fait chômé !
Le site en question est un site ancien en cours de relooking.
Il est très bien structuré, avec un répertoire par "document" qui contient un sous répertoire pour les images et des fichiers HTML contenant les texte desdites "pages" en deux langues.
Le tout a une excellente discipline de nommage: en d'autres termes, cette structure de fichiers est une base de données artisanale plutôt bien faite.
Les "pages" d'un même document sont nommées docname_nn.htm ce qui permet effectivement de constituer l'index de navigation par php.
Comme il y a une bonne centaine de "documents", près de 1000 "pages" et des milliers de photos, il n'est évidemment pas question de tout refaire avec une autre techno.

Edit: j'ai regardé en pratique ce que donne ta proposition d'index voir http://paralletes.free.fr/tests/pagination.html
Comme tu peux voir, ce n'est pas fondamentalement différent du point de vue occupation de la page.
J'ai déjà une flèche qui renvoie vers le début, en fixed en bas de page. Je peux bien sûr la styler un peu mieux.
Modifié par PapyJP (15 Aug 2015 - 14:51)
C'est quoi le problème d'avoir juste les quatre liens classiques: début, précédent, suivant, fin ?
Ou alternativement: chapitre précédent, page précédente, page suivante, chapitre suivant
C'est une approche très sommaire de la navigation, mais si tu n'as pas de place, c'est ce qui en consommera le moins; surtout si tu remplaces les liens par des icônes ou des flèches.


Sinon, si on est à la page 12 sur 50, tu peux afficher quelque chose du style :
1 ... 10 11 12 13 14 ... 50.
Avec en bonus le ... qui lors du clic fait afficher un formulaire Où on peut rentrer le numéro de page, ou encore mieux, quelque chose qui permet d'afficher la table des matières.
QuentinC a écrit :
C'est quoi le problème d'avoir juste les quatre liens classiques: début, précédent, suivant, fin ?
Ou alternativement: chapitre précédent, page précédente, page suivante, chapitre suivant
C'est une approche très sommaire de la navigation, mais si tu n'as pas de place, c'est ce qui en consommera le moins; surtout si tu remplaces les liens par des icônes ou des flèches.


Sinon, si on est à la page 12 sur 50, tu peux afficher quelque chose du style :
1 ... 10 11 12 13 14 ... 50.
Avec en bonus le ... qui lors du clic fait afficher un formulaire Où on peut rentrer le numéro de page, ou encore mieux, quelque chose qui permet d'afficher la table des matières.

Oui, c'est une des solutions auxquelles je pense;
Tu verrais quoi comme "quelque chose" sur lequel cliquer pour faire apparaître la liste.
J'ai cherché en vain sur Internet une icône "parlante", car pour un site bilingue je préfère éviter un texte.
pictural a écrit :
Quelque chose comme ce crypto ?

upload/59366-liste.png

Hmmm! Un peu critique cryptique ton crypto! A part ça il est chouette et il me conviendrait bien. C'est un super big Mac, les gens se sont habitués au hamburger pour les menus, mais crois tu qu'ils vont comprendre ?
Modifié par PapyJP (15 Aug 2015 - 23:06)
PapyJp,
en voyant ceci fort explicite sur leur usage, j'ai pensé à ton besoin de hamburgers au menu :

upload/59366-menu1.jpg

upload/59366-menu2.jpg
Modifié par pictural (18 Aug 2015 - 04:25)
PapyJP a écrit :
Merci beaucoup
C'est effectivement la piste sur laquelle je suis parti, après avoir fait plusieurs essais j'en suis à
http://paralletes.free.fr/tests/pageIndex1.html
tout à fait dans cette ligne

Juste un détail :
1. associer au 'burger' et au texte le cursor:pointer
2. l'event du clic :
<p style="cursor:pointer" onclick="showHide(this.parentNode, 'nav');">
<img src="/pageIndex.png" alt="" /> Page 7 / 12
</p>
Ton cryto me semble explicite.

D'autres retours, d'autres avis ?
Modifié par pictural (18 Aug 2015 - 15:59)
Salut PapyJp,
en plus de ce que je te suggérais (ci-avant), ce serait judicieux de dynamiser les appels alternatifs aux 'burgers' (quel qu'en soit le nombre) ; par exemple avec ceci :

script
	function AlterneTout(id) /* qui remplace ta fonction showHide(id) */
{
this.id=id;
if (typeof this.highlighted_1=='undefined' || this.highlighted_1=='')
	{
document.getElementById(this.id).className='img_1';
this.highlighted_1=this.id;
	}
else
	{
if (this.id!=this.highlighted_1)
		{
document.getElementById(this.id).className='img_1';
document.getElementById(this.highlighted_1).className='img_0';
this.highlighted_1=this.id;
		}
else if(this.highlighted_1=this.highlighted_1)	//Alternance sur le meme element
		{
document.getElementById(this.highlighted_1).className='img_0';
this.highlighted_1="";
		}
	}
}
où tu fais basculer les id d'un class à l'autre. Les class="img_1" class="img_0" sont en fait quelconques ... Tu les configures en css comme tu veux, notamment (et pourquoi pas ! si compatible smartphone et tablette) avec un effet de transition css3. Veille toutefois à attribuer dans le html le class originel des id, qui serve de repère initial grâce auquel le js va opérer.

Ainsi d'un clic n'importe où, tu déploies n'importe quel menu en réduisant simultanément celui (et n'importe lequel) qui a été déployé ... J'utilise ce bout de script pour moi-même qui fonctionne bien sans encombre.

Pour d'autres usages js de la sorte sur une même page, il te suffirait de modifier this.highlighted_1 par this.highlighted_2 this.highlighted_3 etc. pour de nouvelles et différentes fonctions (avec un nom différent) en pouvant modifier les class, donc effectuer également d'autres et de nouvelles alternances.
Modifié par pictural (19 Aug 2015 - 19:48)
Merci pour ces conseils

Effectivement quand on est amené à faire plusieurs menus déroulants il est préférable d'avoir ce genre de fonction, je vais sans doute faire un truc dans ce genre.

Je ne suis pas trop fana des animations, du moins dans le contexte de ce site. Je vais quand même faire apparaître les deux widgets progressivement car pour des raisons techniques je suis amené à les générer par AJAX après le chargement de la page, l'appel au seveur peut prendre un peu de temps et voir apparaître un widget brutalement n'est pas du meilleur effet.
Suite à l'échange ci dessus j'ai modifié la page d'exemple http://paralletes.free.fr/tests/pageIndex1.html
J'ai essayé de faire une fonction Javascript compacte, et des définitions de propriétés CSS qui soient généralisables. 

function showHide(icon) {
	if(! icon) return;
	var curMenu = icon.parentNode;
	var curMenuActive = curMenu.classList.contains('active');
	var ActiveMenus = document.querySelectorAll('.active');
	for(var i = 0; i < ActiveMenus.length; i++) 
            ActiveMenus[ i ].classList.remove('active'); /* il ne devrait y en avoir que 0 ou 1*/
	if(!curMenuActive) curMenu.classList.add('active');
}

Questions:
1-pensez vous que l'utilisation de l'objet classList soit raisonnable, sachant qu'elle est toute récente et peut être pas supportée par les navigateurs anciens?
2 - est-il préférable de faire ma propre implémentation de cet objet -- sous un autre nom bien entendu pour éviter les conflits?
3 - existe-t-il un moyen simple de tester si cet objet est supporté par le navigateur?

Merci de votre coopération
Sujet clos
Aller à