You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

Tuur

Sage

  • "Tuur" started this thread

Posts: 3,189

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

1

Thursday, May 30th 2013, 4:51pm

viewport question javascript

Hi,

i have a problem

the website for ipad and iphone is 900px width.

i made an js function to size the div between 300x400 to 'fullscreen' triggered by the fullscreen button.

but the viewport tag in the index says device-width
when i change that to 900 and when i make it possible to zoom by changing the initial-scale=1, minimum-scale=1.0, maximum-scale=1.0"
to something else then the pano goes to 100% of that 900px width and not just fullscreen.
ofcourse i mean with fullscreen on iPad full brouwser screen.

(we are talking tablet and mobile here..

So is there a substitution for this js code so it works nice, also with different viewport settings?

Source 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
        <script type="text/javascript" language="javascript">

        function fun() {
	   
            var div1 = document.getElementById("pano");

            if (div1.style.width != "100%") {
                mt = div1.style.marginTop;
                ml = div1.style.marginLeft;
                w = div1.style.width;
                h = div1.style.height;
                document.getElementById("pano").style.marginTop = "0px";
                document.getElementById("pano").style.marginLeft = "0px";
                div1.style.width = "100%";
                div1.style.height = "100%";
            }

            else

             { 
                div1.style.width = w;
                div1.style.height = h;
                div1.style.marginTop = "0px";
                div1.style.marginLeft = "0px";
                document.getElementById("pano").style.marginTop = "475px";
                document.getElementById("pano").style.marginLeft = "180px";
                }

            return false;
    }
	
    </script>


i hope there is an solution for this.

i tried some stuff to build in the function like:

Source code

1
2
3
4
 if (uagent.search("iphone") > -1)
      DO THE ABOVE FUNCTION BUT DIFFERENT
   else
      DO THE ABOVE FUNCTION


*confused*
can't get it.
Any wizzkid here?

Cheers
Tuur *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur

This post has been edited 1 times, last edit by "Tuur" (May 31st 2013, 1:11pm)


Tuur

Sage

  • "Tuur" started this thread

Posts: 3,189

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

2

Friday, May 31st 2013, 6:59pm

Or maybe dynamically change the viewport by js just before the div size change....
But how?

Tuur *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur