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:
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: /. 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();..
}
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:
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();..
}
- Paste some of you code or a fiddle. Without code we cant help much.Use CSS. – AnaMaria Commented Jul 22, 2013 at 8:03
- for starters have at look at this stackoverflow.com/questions/4049342/… – Sunny Patel Commented Jul 22, 2013 at 8:04
- 1 @sunny. He is not looking to zoom into the entire site. he's looking to zoom only the text part... – AnaMaria Commented Jul 22, 2013 at 9:03
- I updated my post. It includes a basic fiddle now ;) Thanks for helping in advance. – Bram Commented Jul 22, 2013 at 9:42
- you can try add event listner and prevent defaults (user can't zoom page) and after that zoom a specific element – David Commented Jul 28, 2013 at 9:01
2 Answers
Reset to default 23 +50In 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...
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