Scrollbar horizontale zoom [Résolu]

yeste64 · 26/08/2011, 15h43

Bonjour à tous.

Je cherche à réaliser une scrollbar horizontale ayant pour effet de changer la taille de la police d'une div de ma page.

J'ai essayé de chercher mais je n'ai même pas trouvé d'exemples..
Je me dis que ça doit quand même exister, mais je ne sais pas du tout comment m'y prendre.

Si vous pouvez me donner quelques indications..

Merci d'avance!

mekal · 26/08/2011, 19h15

dans ce style

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
<script type="text/javascript">
      function process(lui) {
        document.getElementById('dvtaille').style.fontSize=(lui.scrollLeft/10)+16+'px'
      }
</script>
</head>
	<body>
 
 
	<div id='defile' style='overflow-y: hidden; overflow-x: scroll;width:300px;margin-left:20px' onscroll='process(this)'>
	<div id='defibar'style='width:1000px;height:20px;'></div>
	</div>
 
<br><br>
 
	<div id='dvtaille' style='overflow:auto;height:300px;width:600px;background-color:silver;margin:auto'>
	gjkgkjlhkl jhlkjmlkmlkùm kmkkkùmlùl jopjmkmkùkùm gjkgkjlhkl jhlkjmlkmlkùm kmkkkùmlùl jopjmkmkùkùm
    </div>
 
	</body>
</html>

dans un autre genre il faut jouer avec la molette de la souris dans la zone rouge pour modifier la taille

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
<script type="text/javascript">
 
function deplace(e){
 
var delta = 0;
delta =((e.wheelDelta) ? e.wheelDelta/120 : -e.detail/3)
var val=((delta<0) ? -1 : 1)
document.getElementById('dvtaille').style.fontSize=parseInt(document.getElementById('dvtaille').style.fontSize)+(val)+'px'
}
 
function sel(ev){
 
(navigator.appName.substring(0,3)=="Mic") ? event.returnValue = false : ev.preventDefault();
}
 
	function init(){
 
var el=document.getElementById('rouge')
if(navigator.appName.substring(0,5)=="Micro"){
el.attachEvent('onmousewheel',deplace);
el.attachEvent('onmousewheel', sel)
}
else{
var elmouse=(navigator.oscpu ? 'DOMMouseScroll' : 'mousewheel')
el.addEventListener(elmouse, deplace, false);
el.addEventListener(elmouse, sel, false)
}
}
onload=init;	  
 
</script>
</head>
	<body>
 
<br><br>
	<div style='height:50px;width:50px;background-color:red' id='rouge'></div>
	<div id='dvtaille' style='font-size:16px;overflow:auto;height:300px;width:600px;background-color:silver;margin:auto'>
	gjkgkjlhkl jhlkjmlkmlkùm kmkkkùmlùl jopjmkmkùkùm de gjkgkjlhkl jhlkjmlkmlkùm kmkkkùmlùl la jopjmkmkùkùm
    </div>
 
	</body>
</html>

yeste64 · 26/08/2011, 20h38

Oui c'est exactement la fonctionnalité attendue. Mais n'est-il pas possible de faire une ligne avec un rond défilant dessus, plutôt qu'une scrollbar système?

En gros, de créer le processus avec des éléments lambda ?

mekal · 27/08/2011, 12h52

regarde ca

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
<script type="text/javascript">
 
 
function ajoutevent(e){
 
		e.preventDefault();
		process(e)
		document.documentElement.addEventListener("mousemove", process, false);
		document.documentElement.addEventListener("mouseup", retireevent, false);
	}
 
function retireevent(){
 
		document.documentElement.removeEventListener("mousemove", process, false);
		document.documentElement.removeEventListener("mouseup", retireevent, false);
	}
 
      function process(e) {
var db=document.getElementById("defibar")	  
	    var ixe =e.clientX-db.parentNode.offsetLeft;
		var taille=db.parentNode.offsetWidth-db.offsetWidth;
		var fac=ixe/taille;
		fac = fac>1 ? 1 : fac;
		fac = fac<0 ? 0 : fac;
		document.getElementById('dvtaille').style.fontSize=fac*taille+16+'px';
		db.style.marginLeft=fac*taille+'px';
      }
</script>
</head>
	<body>
 
 
	<div style='height:10px;width:300px;margin-left:20px;background-color:red' onmousedown='ajoutevent(event)'>
	<div id='defibar'style='width:10px;height:10px;background-color:black'></div>
	</div>
 
<br><br>
 
	<div id='dvtaille' style='overflow:auto;height:300px;width:600px;background-color:silver;margin:auto'>
	gjkgkjlhkl jhlkjmlkmlkùm kmkkkùmlùl jopjmkmkùkùm de gjkgkjlhkl jhlkjmlkmlkùm kmkkkùmlùl la jopjmkmkùkùm
    </div>
 
	</body>
</html>

pour le designe c'est du css et il n'e marche pas avec ie 7 et 8 il faudrait modifer la fonction sur les ajout d'evenement attacheEvent et detacheEvent

bigboomshakala · 29/08/2011, 06h55

salut,

jQuery UI peut t'être utilise si tu as besoin d'un certain nombre d'éléments graphiques

maniT4c · 29/08/2011, 10h30

Regarde ce script: Scrollbar javascript. En l'adaptant tu devrais pouvoir faire ce que tu veux et personnaliser l'aspect graphique autant que nécessaire.

yeste64 · 29/08/2011, 12h04

Merci beaucoup à tous pour vos réponses, je suis finalement passé par jQueryUI.

Voilà le code final que j'utilise :

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
<script type="text/javascript">
$(function() {
	$( "#zoomCursor" ).slider({
		value: <?php echo $fontSize; ?>,
		min: 10,
		max: 22,
		step: 1,
		slide: function(event, ui) {
			document.getElementsByClassName('displayTab')[0].style.fontSize= ui.value+"px";
			//On mémorise la nouvelle taille dans une variable de session
			$.ajax({
				type : 'POST',
				url : 'lib/ajax_session.php',
				data : 'fontSize='+ui.value
			});
		}
	});
});
</script>
 
<div id="zoomCursor"></div>

J'en suis satisfait, mis à part un manque de fluidité (mais c'est inévitable car le changement de la taille des polices sur un gros tableau est une opération assez lourde, ça ne vient donc pas du scroller), et aussi le fait que le curseur du scroller soit en focus quand on le déplace, c'est assez désagréable à l'utilisation, je ne sais pas s'il est possible de changer ça..

Vous pouvez voir un aperçu du résultat final ici

26/08/2011, 15h43	#1
yeste64 Membre à l'essai Développeur Web Inscription : mai 2011 Messages : 85 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Développeur Web Secteur : Communication - Médias Informations forums : Inscription : mai 2011 Messages : 85 Points : 21 Points : 21	Scrollbar horizontale zoom Bonjour à tous. Je cherche à réaliser une scrollbar horizontale ayant pour effet de changer la taille de la police d'une div de ma page. J'ai essayé de chercher mais je n'ai même pas trouvé d'exemples.. Je me dis que ça doit quand même exister, mais je ne sais pas du tout comment m'y prendre. Si vous pouvez me donner quelques indications.. Merci d'avance!
	00

29/08/2011, 06h55	#5
bigboomshakala Rédacteur/Modérateur Ingénieur développement logiciels Inscription : avril 2004 Messages : 2 051 Détails du profil Informations personnelles : Sexe : Âge : 32 Localisation : France Informations professionnelles : Activité : Ingénieur développement logiciels Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : avril 2004 Messages : 2 051 Points : 2 425 Points : 2 425	salut, jQuery UI peut t'être utilise si tu as besoin d'un certain nombre d'éléments graphiques __________________ Modérateur/Rédacteur Tutoriels/Articles : - Espace de noms (ou namespace) en JavaScript - Créer une table HTML éditable en JavaScript (nouveau) - Smile.Fx : Bibliothèque d'effets visuels en JavaScript (en cours - démo disponible) mon espace
	00

26/08/2011, 20h38	#3
yeste64 Membre à l'essai Développeur Web Inscription : mai 2011 Messages : 85 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Développeur Web Secteur : Communication - Médias Informations forums : Inscription : mai 2011 Messages : 85 Points : 21 Points : 21	Oui c'est exactement la fonctionnalité attendue. Mais n'est-il pas possible de faire une ligne avec un rond défilant dessus, plutôt qu'une scrollbar système? En gros, de créer le processus avec des éléments lambda ?
	00

29/08/2011, 10h30	#6
maniT4c Invité régulier Inscription : juin 2009 Messages : 12 Détails du profil Informations forums : Inscription : juin 2009 Messages : 12 Points : 8 Points : 8	Regarde ce script: Scrollbar javascript. En l'adaptant tu devrais pouvoir faire ce que tu veux et personnaliser l'aspect graphique autant que nécessaire.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email