Zoomer sur un objet sur tablette galaxy tab sous android

Version imprimable

04/05/2012, 12h30
LanfeustXIII

Zoomer sur un objet sur tablette galaxy tab sous android

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

Code:

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

Code:

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:

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

11/05/2012, 08h47
LanfeustXIII

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

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

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
 
<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.

16/05/2012, 14h09
LanfeustXIII

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.