This is a migrated thread and some comments may be shown as answers.

Programmatically Zooming, is it possible?

1 Answer 111 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Rizky asked on 02 Feb 2014, 08:24 AM

I have a few divs with a different size in zoomable view, lets say that my viewport size is 10k x 10k and my div's size is 100x100, and left position is 600, top position is 1000. I can using animatedScrollTo() function to scroll to the top, left position in my viewport to see my div box, but i need to zoom it programmatically to make the div's size fit in my browser size. Any idea?

This is my example to programatically scrolling to div position, but i really need to zoom it to make div's size fit in my browser size. Thank you.

01.<!DOCTYPE html>

02.<html>

03. <head>

04. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

05. <style>

06. #container {

07. width: 10000px;

08. height: 10000px;

09. position: relative;

10. }

11.

12. #myBox {

13. position: absolute;

14. top: 600px;

15. left: 1000px;

16. height: 100px;

17. width: 100px;

18. padding: 10px;

19. background: red;

20. }

21. </style>

22. </head>

23. <body>

24. <div data-role="view" id="myViewport" data-zoom="true" data-init="initHome">

25. <div id="container">

26. <div id="myBox">Foo</div>

27. </div>

28. </div>

29.

30. <script>

31. function initHome(e)

32. {

33. var scroller = e.view.scroller;

34. var bTop = $("#myBox").position().top;

35. var bLeft = $("#myBox").position().left;

36. scroller.animatedScrollTo(-(bLeft), -(bTop));

37. }

38.

39. new kendo.mobile.Application();

40. </script>

41. </body>

42.</html>

Programmatically Zooming, is it possible?

1 Answer, 1 is accepted