IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Scrollbar horizontale zoom


Sujet :

JavaScript

  1. #1
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    146
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Atlantiques (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2011
    Messages : 146
    Par défaut 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!

  2. #2
    Invité
    Invité(e)
    Par défaut
    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>
    Dernière modification par Invité ; 26/08/2011 à 20h28.

  3. #3
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    146
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Atlantiques (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2011
    Messages : 146
    Par défaut
    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 ?

  4. #4
    Invité
    Invité(e)
    Par défaut
    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
    Dernière modification par Invité ; 27/08/2011 à 17h46.

  5. #5
    Rédacteur
    Avatar de bigboomshakala
    Homme Profil pro
    Consultant Web .NET
    Inscrit en
    Avril 2004
    Messages
    2 077
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Consultant Web .NET
    Secteur : Finance

    Informations forums :
    Inscription : Avril 2004
    Messages : 2 077
    Par défaut
    salut,

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

  6. #6
    Membre averti
    Profil pro
    Inscrit en
    Juin 2009
    Messages
    15
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2009
    Messages : 15
    Par défaut
    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.

  7. #7
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    146
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Atlantiques (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2011
    Messages : 146
    Par défaut
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Forcer une scrollbar horizontale à se déplacer
    Par MiJack dans le forum Composants VCL
    Réponses: 10
    Dernier message: 09/01/2008, 14h37
  2. [C#] Contrôle scrollbar horizontale avec la souris
    Par heavydrinker dans le forum Windows Forms
    Réponses: 2
    Dernier message: 18/10/2006, 15h21
  3. repeat x et scrollbar horizontale
    Par la.sophe dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 17/03/2006, 17h59
  4. DBGrid scrollbar horizontale décalée + clic
    Par solic dans le forum Bases de données
    Réponses: 5
    Dernier message: 27/02/2006, 17h45
  5. Tester si la scrollbar horizontale est affichée.
    Par Etanne dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 19/09/2005, 14h01

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo