Zoomer sur un objet sur tablette galaxy tab sous android

**LanfeustXIII** · 04/05/2012, 12h30

Bonjour

Je développe actuellement une application web en html5/JavaScript. Celle-ci doit être fonctionnelle sur tablettes et pc. Je dois pouvoir zoomer sur le contenu d'un de mes objets html.
Sur PC j'ai associé à mon objet un évènement onMouseWheel. Ainsi lorsque la souris survole l'objet, je suis capable d'effectuer un zoom sur celui-ci via la roulette.
Mon problème concerne le zoom sur la tablette car j'aimerais avoir le même comportement grâce au multitouch. Actuellement je peux zoomer sur la page entière, hors je voudrais que le zoom concerne un seul objet de ma page. Il faudrait ajouter l'évènement zoom uniquement à mon objet et supprimer le zoom sur la page entière. Quel évènement puis-je utiliser pour faire cela ? Est il possible de désactiver le zoom sur la page entière qui actif de base ?

Merci de vos réponses

Cordialement

David

**headmax** · 06/05/2012, 20h47

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
/* css */
#divZoom{
zoom:0;
cursor:pointer;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
function zoom(value){
if(value == null || value == undefined)
value = 0;
 var objZoom = document.getElementById("divZoom").style("zoom",value);
   return objZoom;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
/* html */
<input type="text" id="addzoom" value="">
<div id="divZoom" onclick="zoom(document.getElementById('addzoom').value)"></div>

**LanfeustXIII** · 11/05/2012, 08h47

L'évènement onclick ne fonctionne pas sur tablette, j'ai fait des tests et ça ne fonctionnait pas. :/

**headmax** · 14/05/2012, 23h25

Exemple sur un scroll dans une div avec overflow:auto (barre scroll)

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
 
<head>
    <script type="text/javascript">
        function MouseScroll (event) {
            var rolled = 0;
            if ('wheelDelta' in event) {
                rolled = event.wheelDelta;
            }
            else {  // Firefox
                    // The measurement units of the detail and wheelDelta properties are different.
                rolled = -40 * event.detail;
            }
 
            var info = document.getElementById ("info");
            info.innerHTML = rolled;
        }
 
        function Init () {
                // for mouse scrolling in Firefox
            var elem = document.getElementById ("myDiv");
            if (elem.addEventListener) {    // all browsers except IE before version 9
                    // Internet Explorer, Opera, Google Chrome and Safari
                elem.addEventListener ("mousewheel", MouseScroll, false);
                    // Firefox
                elem.addEventListener ("DOMMouseScroll", MouseScroll, false);
            }
            else {
                if (elem.attachEvent) { // IE before version 9
                    elem.attachEvent ("onmousewheel", MouseScroll);
                }
            }
        }
    </script>
</head>
<body onload="Init ();">
    Use the mouse wheel on the field below.
    <div id="myDiv" style="width:200px; height:200px; overflow:auto;">
        <div style="height:2000px; background-color:#a08080;"></div>
    </div>
    <br />
    The last roll amount: <span id="info" style="background-color:#e0e0d0;background-image:url(images/pdfdvp.jpg);"></span>
</body>

Comme quoi l'événement que tu cherche peu effectivement s'adapté au concept précédent du zoom avec css, sauf qu'il faudra l'adapté au niveau des valeurs event.wheelDelta; j'ai pas essayé, mais je pense que c'est tout a faire possible.
Dans ce code tu as l'avantage d'avoir la compatibilité "Full browser" pour l'événement scroll de la sourie.
A d'adapté selon tes besoins.

**LanfeustXIII** · 16/05/2012, 14h09

Oui mon application fonctionne de cette manière pour zoomer avec la souris sur le pc.
Mais sur ma tablette android cela ne fonctionne pas du fait que l'évènement de type onmousewheel n'est pas disponible. Il me faudrait utiliser l'évènement qui repère le double touché ( à deux doigts), pour ensuite pouvoir agir sur la valeur du zoom que je configure de la même manière que tu viens de le montrer à partir de event.

Zoomer sur un objet sur tablette galaxy tab sous android

JavaScript

Discussions similaires

Partager

Partager