Scrollbar horizontale zoom

**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!

Invité · 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 ?

Invité · 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

Scrollbar horizontale zoom

JavaScript

Discussions similaires

Partager

Partager