Zoom specific element on webcontent (HTML,CSS,JavaScript)

28
votes

I want to zoom only a specific element of my website (a certain div), if a user zooms the website on a mobile device. The following picture shows my idea:

enter image description here

As you can see, the test is zoomed but the top div stays the same size; only the div that contains test is zoomed / scaled.

Could someone give me some tips on how to achieve this? I really don't know where to start.

UPDATE: http://jsfiddle.net/WyqSf/. if I would zoom in on this page, it would scale both elements. I want to adjust just the content element when zooming. One way I can think of to achieve this is to retrieve the user-input and use javascript to adjust the div's width but this is contradictory with the usual behavior.

Pseudo-code:

container.mousemove {
   content.changeWidth();..
}
2
javascriptcssresponsive-designtouchzooming
Paste some of you code or a fiddle. Without code we cant help much.Use CSS. – AnaMaria
for starters have at look at this stackoverflow.com/questions/4049342/… – Sunny Patel
@sunny. He is not looking to zoom into the entire site. he's looking to zoom only the text part... – AnaMaria
I updated my post. It includes a basic fiddle now ;) Thanks for helping in advance. – Bram
you can try add event listner and prevent defaults (user can't zoom page) and after that zoom a specific element – David

2 Answers

21
votes

In order to do this, you would need to fix the user's viewport so that they cannot pinch zoom the page, and then use a touch events library like Hammer.js to attach a callback to the pinch zoom gesture that appropriately resizes the element on the page you'd like to scale.

viewport fixing happens in the head element of your html:

<meta name="viewport" content="width=device-width, maximum-scale=1.0">

you would use hammer.js to detect a "pinch zoom" gesture, and the library gives you a very detailed event.gesture object which you can use to detect how much/how fast the user is zooming.

The change in distance between the 2 touch points while pinching is represented by event.gesture.scale (see hammer documentation), if the scale increases, increase the text accordingly ... if it decreases decrease the text-size. Use Math:

$('body').hammer().on("pinch", function(event) {
    console.log(event.gesture.scale);
    // do math...
});

I imagine you get the idea...

1
votes

You could use the Zoomooz plugin. Inside the documentation, check the Zooming inside a container section -- this is what you may need:

<div class="zoomViewport">
    <div class="zoomContainer">
        <div class="zoomTarget">Target 1</div>
        <div class="zoomTarget">Target 2</div>
    </div>
</div>

Check the JS Fiddle