28173 sujets

CSS et mise en forme, CSS3

[resolu]Syler la scroll bar (comme ci-dessous) : comment m'y prendre

Bonjour,


Je voudrais modifier la scroll bar par de defaut de windows.
Je voudrais la simplifier pour la remplacer par juste 2 fleches (haut et bas) sans ascensseur.

si vous aller a cette page :
http://www.lemondeestanous.ch/blog-tour-du-monde-carnet-de-voyage
puis cliquer sur le bouton indonesie.
Vous pouvez voir ce que je voudrais obtenir visuellement. Le menu de gauche defile avec les fleches bleues qui passent jaunes au survol.
Il s'agit d'un exemple en flash, donc pas de soucis. Ici ca marche

Mais je suis en train de realiser la meme page en dynamique (html/css et jquery) :
http://www.lemondeestanous.ch/blog-tour-du-monde-carnet-de-voyage
Cliquez sur le bouton nepal
Ici je n'arrive pas a styler ma scrollbar.

Je suis en train d'essayer le plugin jquery jScrollPane.js mais je ne parviens pas a le faire marcher. C'est pourtant simple mais quelquechose m'echappe.

Comment m'y prendre pour styler ma scrollbar comme sur le exemple ci-dessus?
Quelles solutions envisager ? Qu'est ece qui est le plus simple ?

Merci pour votre aide.
Modifié par boucdur00000 (26 Feb 2010 - 14:12)
Bonjour,

Ce n'est pas styler la scrollbar mais plutôt simuler une scrollbar.

Quelques lignes de jQuery feront ça très bien.

Tu imbriques 2 divs. Via le JS tu définis une taille réduite sur la div mère ( et pas en CSS pour que ça reste totalement lisible sans le JS ) et tu lui applique un overflow:hidden.

Tu places tes 2 flèches en CSS.

Tu applique position:relative sur le div fils et à chaque clic sur les flèches tu fais évoluer le top du div fils via le JS.

C'est une idée comme ça, il y aura surement quelques trucs à modifier mais l'idée est là.
Ok je crois que je suis le principe.
Au passage je crois que je comprend pourquoi je n'arrivais pas a faire marcher les plugin jquery puisqu'il fonctionne sans doute avec la meme logique.

Dans ton exemple ce que je ne vois pas. C'est comment faire pour que les fleches soient la uniquement quand le contenu depassera de son conteneur.
En effet mon contenu est dynamique. Les fleches seront donc parfois superflues.

Il faut que les fleches n'apparaissent que quand il y a besoin de scroller. C'est a dire quand du contenu est cache par le conteneur. Ce qui ne sera pas forcemment le cas.
Modifié par boucdur00000 (25 Feb 2010 - 12:31)
Dans ce cas tu fais un simple test pour savoir si la taille du div fils avant redimensionnement est plus grand que la taille que tu veux lui affecter.

Si c'est le cas tu ajoute les flèches avec un .append() ( ou similaire ) et tu les place en absolute.
Oui ok j'ai compris. Je devrais y arriver pour le comportement des fleches.

Par contre pour l'apparation des fleches ce qu'il faut faire en jquery c'est ca :

"si div hauteur div enfant plus grande que hauteur div parent
alors
fleches de scroll display:block
else
fleches de scroll display:none

Je ne sais pas si je connais la syntaxe pour ca.
Mais je vais chercher un peu.

Merci pour l'aide Andromede.
Modifié par boucdur00000 (25 Feb 2010 - 12:44)
Re bonjour,

J'ai bien reussi a creer un scrollbar avec la propriete animate
Mais j'ai encore 2 problemes :

1/ comment faire apparaitre cette scrollbar uniquement quand c'est pertinent :
C'est a dire quand la div enfant est plus grande que la div parent et que du contenu est cache.J'ai tente ca mais sans succes, il y a peut etre une faute de syntaxe:

if  
			($("ul.menu_articlesparpays").height()>=150){
			$("div.moduletable_scrollbar").css("display","block");
		}



2/ Comment imposer des limites a mon deplacement (avec .animate) de la propriete "top"
Acutellement chaque fois que je clique la div se deplace de 30 px.
Mais il faudrait un moment ou on ne peut plus deplacer cette div. Sinon elle peut partir tres loin.

voila mon code :
$("div.moduletable_scrollbar div.flechehaut_scrollbar").click(function() {					 
									 $("ul.menu_articlesparpays").stop().animate({top: "-=30px"}, 0400 );
									 });	
		
		$("div.moduletable_scrollbar div.flechebas_scrollbar").click(function() {					 
									 $("ul.menu_articlesparpays").stop().animate({top: "+=30px"}, 0400 );
									 });


Si Andromede ou meme quelqu'un savait m'aider ce serait super.
Modifié par boucdur00000 (25 Feb 2010 - 16:25)
$(document).ready(function(){

	var parent = $('#menu-scroll');
	var content = $(parent).find('.content');;
	
	content.css('position','relative');
	content.css('top','0px');
	
	var heightMaxi = 150;
	var heightInit = $(content).height();
	
	if  (heightInit>heightMaxi){

			$(parent).css("height",heightMaxi);
			$('#fleches').fadeIn();// .css('display','block') marche aussi
			
			var compteur = 0;
			
			$("#fleche-haut").click(function() {
				if(compteur>0){			
					$(content).animate({top: "+=30px"}, 200 );
					compteur-=30;
				}
			 });	

			$("#fleche-bas").click(function(){	
					if(compteur<heightInit){
						$(content).animate({top: "-=30px"}, 200 );
						compteur+=30;
					}
			});	
		} 
	
});


Un truc dans le genre. Ça règle tes 2 problèmes.

Je limite le déplacement avec un simple compteur. Après faut ajuster parce que y a quelques trucs à rectifier, mais l'idée générale est la.
Modifié par Andromede (25 Feb 2010 - 17:45)
Tres tres interessant. C'est vraiment super sympa.


Le principe du compteur est tres malin. Je connaissais pas.
Ca va marcher c'est sur, j'ai plus qu'a adapter.
Le probleme de la limitation du scroll est reglee.

Par contre pour l'apparition.
J'ai compris ce qui bloque.
Meme avec ta methode je vais certainement avoir ce meme probleme.

En fait le height de mon element $(".content") est mesurable au chargement de la page.
Un alert me donne le resultat 57.
Mais la hauteur de l'element $(".content") change quand on passe du bouton inde au bouton nepal. En effet il y a plus de contenu dans nepal que dans inde. La hauteur est differente.
Pourtant je crois que jQuery ne parvient pas re-mesurer le height de $(".content").
Un alert me renvoit le resultat 0.
Je crois que c'est une histoire de chargement du DOM


Si je renomme chaque menu de chaque pays. Je parle bien de ca $(".content")
Alors ca marche parfaitement. Par contre pour que ca marche il faut que je duplique le code pour chaque menu (a faire defiler ou non).


C'est tres complique. Je ne sais pas si tu comprends ce que j'essais d'expliquer?

Pour l'instant je vais essayer de donner des noms de class differents pour chacun de mes menus de liens dans chaque pays. Ca va me faire ecrire plein de code au lieu d'etre concis. Mais au moins ca va marcher. Et puis je vais appliquer ta solution du compteur pour la limitation de deplacement du scroll.

Grand merci Andromede
Modifié par boucdur00000 (25 Feb 2010 - 18:20)
Le height du div enfant est calculé une seule fois juste après le chargement du DOM.

Si tu utilise AJAX pour remplir la zone en question, il est normal que cela ne fonctionne plus. Si c'est le cas, il faudrait refaire un calcul de la hauteur après chaque chargement.

Tu utilises bien AJAX ?
Modifié par Andromede (25 Feb 2010 - 18:53)
Salut Andromede,

oui j'importe bien du contenu issu de ma base de donnee. Mais il est genere par mon CMS (Joomla). Je ne peux pas parler d'ajax mais c'est un peu ca.

Je ne peux pas nomplus re-calculer la hauteur apres chaque chargement car il n'y a qu'un chargement. En fait tout mon contenu est charge quand la page s'affiche. Seulement j'utilise la propriete display:none en css pour en cacher une grande partie.

J' utilise ensuite le jquery pour cacher ou rendre visible telle ou telle partie du contenu. C'est a dire les menus de liens notamment.

En tout cas ma page ne se recharge qu'une seule fois.

Tous mes menus de liens (Inde Nepal Thailande ...) avaient 2 noms de class. Un meme nom de class en commun pour tous et un autre pour les differencier.

Un seul des mes menus de liens est visible a la fois et tous les autres sont a display:none.
Mon code jquery utilisait le nom de class commun et faisait appel a un calcul de hauteur pour fonctionner : (Si height de menu de liens superieur a 150px alors scrollbar s'affiche). Le script etait recharge a chaque fois qu'on cliquait sur un des boutons du cote qui change le menu de liens a afficher. Je pensais que la hauteur serait recalcule en fonction de celui visible.
En fait apparemment la hauteur est enregistree au chargement de la page. Comme au chargement c'est le menu de liens "INDE" qui est affiche, c'est la hauteur de l'inde qui est enregistree. Quand on change de page la hauteur n'est pas recalculee car meme si c'est mon menu de liens NEPAL qui est visible et qu'il a le meme nom de class que celui de l'inde, le height de ce nom de class n'est calcule qu'une fois.

C'est dommage car ca m'aurait permis de faire fonctionner ca en pratiquement une seule ligne de code.
J'ai finalement change mon jquery pour qu'il ne fasse plus appel au nom de class en commun mais au nom de class qui les differencie. Seulement ca me fait reecrire la fonction a chaque fois pour chaque menu de liens.
Ca marche maintenant c'est l'essentiel. Le code est juste beaucoup moins concis.

Je ne sais pas si il y a quoi que se soit a faire pour ce probleme de chargement de page ?


Ce dernier probleme n'est pas du tout esssentiel a resoudre pour l'instant meme si ca me rend curieux de savoir si d'autres ont deja eu ce probleme.

J'ai reussi a faire ma scrollbar grace a toi Andromede. Grand merci.
Modifié par boucdur00000 (26 Feb 2010 - 11:25)
Ah ok,donc si tu n'as qu'un seul chargement de page sans utiliser AJAX, c'est sur que le système actuel ne marchera pas.

Ce que tu peux faire pour factoriser le code est de calculer toutes les hauteurs au chargement et les stocker dans un tableau associatif "paysHeightInit" ayant comme clé le nom du pays et en valeur la hauteur.

A chaque clic sur un pays tu te débrouille pour obtenir le nom du pays en question et le stocker dans une variable "paysCourant".

Ensuite dès que tu dois faire appel a heightInit tu fais plutot : paysHeightInit[paysCourant]

Sur ce principe tu devrais pouvoir faire quelque chose de plus propre.
C'est vrai ca me permettrait d'avoir un code plus propre. Mais finalement cette page ne vas pas beaucoup evoluer. Je vais donc m'en tenir la pour le code.

Je garde ta solution dans un coin de tete pour le jour ou je devrais refaire ce genre de choses.
Ca risque d'arriver, les contraintes de joomla etant ce qu elles sont.

Un dernier grand merci. J'ai bien avance dans ma comprehension de jquery.
C'etait pas evident de comprendre cette histoire de chargement du dom
Je marque ce sujet resolu.
Sujet clos
Aller à