Scrollbar horizontale zoom

**yeste64** · 26/08/2011, 16h43

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, 20h15

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, 21h38

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, 13h52

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, 07h55

salut,

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

**maniT4c** · 29/08/2011, 11h30

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.

Scrollbar horizontale zoom

JavaScript

Vue hybride

Discussions similaires

Partager

Partager