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