Scrollbar horizontale zoom

Version imprimable

26/08/2011, 15h43
yeste64

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! :)

dans ce style

Code:

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:

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>

26/08/2011, 20h38
yeste64

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 ?

regarde ca

Code:

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

29/08/2011, 06h55
bigboomshakala

salut,

jQuery UI peut t'être utilise si tu as besoin d'un certain nombre d'éléments graphiques
29/08/2011, 10h30
maniT4c

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.

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

Voilà le code final que j'utilise :
Code:

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