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.

1

Sunday, December 5th 2010, 7:34pm

Script for cross-browser compatibility

Hi Everyone,

Has anyone successfully been able to write instructions to detect browser and have different target sizes. Right now if I set my height and width on the swf you cannot effectively view it on an ipad or ipod touch. If you leave eveything in full screen then the ipad and iphone shows thumbs and images correctly but the issue is when you open a regular browser then it shows everything in fullscreen as well. I've been looking at javascript sites to write something but not being a coder I can't get something to work and unfortunately all my clients have different sizing requirements.

Hope someone can help.

Thanks in Advance.
Robert

Quoted

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Optical Trends 4U</title>
<link type="text/css" rel="stylesheet" href="fb/floatbox.css" />
<script type="text/javascript" src="fb/floatbox.js"></script>
<script type="text/javascript" src="fb/options.js"></script>

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style>
body{ font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; background-color:#FFFFFF; margin:0; padding:0; }
* html, * html body{ overflow: hidden; }
a{ color:#AAAAAA; text-decoration:underline; }
a:hover{ color:#FFFFFF; text-decoration:underline; }
</style>
</head>
<body>

<div id="krpanoDIV" style="width:100%;height:100%;">
<noscript><table style="width:100%;height:100%;"><tr style="valign:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
</div>

<script type="text/javascript" src="javascript/swfkrpano.js"></script>
<script type="text/javascript" src="javascript/swfobject.js"></script>
<script type="text/javascript" src="javascript/swfkrpanomousewheel.js"></script>

<script>

// <![CDATA[

var viewer = createPanoViewer({swf:"krpano.swf", id:"krpanoSWFObject", width:"900", height:"700", target:"krpanoDIV"});

//viewer.useHTML5("whenpossible"); // incomment to use the HTML5 krpanoJS viewer always when possible (Safari5)

if( viewer.isDevice("iPhone|iPad|Android") )
viewer.addVariable("xml", "startup_mobile.xml");
else
viewer.addVariable("xml", "startup.xml");
viewer.addParam("allowFullScreen","true");
viewer.addParam("wmode","opaque");

viewer.embed();

// ]]>
</script>

</body>
</html>

2

Monday, December 6th 2010, 4:25pm

Hi,

what do you want to achieve?

best regards,
Klaus

3

Monday, December 6th 2010, 5:01pm

Hi Klaus,

I would like to be able to set the swf to a certain height and width so that it can be viewed correctly on IE, FF, etc without it messing up on an ipad or iphone. If i remove the height and width in the following statement;

Quoted

var viewer = createPanoViewer({swf:"krpano.swf", id:"krpanoSWFObject", target:"krpanoDIV"}); --- Uses all screen real estate when viewed in IE, FF etc. but works correctly on ipad or iphone.

Quoted

var viewer = createPanoViewer({swf:"krpano.swf", id:"krpanoSWFObject", width:"900", height:"700", target:"krpanoDIV"}); --- Embeds in page and sized correctly for IE, FF etc. but when viewed by ipad or iphone the set width and height causes problems and almost seems like it is zoomed in and cannot see thumbs.

4

Monday, December 6th 2010, 5:12pm

Hi,

I'm still not sure what you want to achieve
but you could simply check for the useragent:

Source code

1
2
3
4
5
6
7
8
var viewer = null;

var ua = String(navigator.userAgent).toLowerCase();
if (ua.indexOf("iphone"))
  viewer = createPanoViewer({swf:"krpano.swf", id:"krpanoSWFObject", target:"krpanoDIV"});
else
  viewer = createPanoViewer({swf:"krpano.swf", id:"krpanoSWFObject",  width:"900", height:"700", target:"krpanoDIV"});
...


or alternatively keep the 100% width and height use CSS iphone orientation settings to size the krpanoDIV element
itself dynamically depending to the screen size and orientation,

best regards,
Klaus

5

Monday, December 6th 2010, 5:26pm

Thanks Klaus,

I'll try the example and see if I can get it to work. But to explain myself hopefully clearer, my client has their own website and they have allocated space on a page, they want to use one html file to open in an allocated space of 700px x 550px so I set that one statement to do that. They want to use the same html file should someone come in on an ipad and view it correctly there. The width/height settings mess up the images on the ipad and everything is zoomed in and it doesn't show the thumbs at the bottom left nor the intro image in the center. It moves it down out of the view of the screen.

I'll work with the user agent and see if it will solve the problem.

Thanks

Robert

6

Tuesday, December 7th 2010, 8:07pm

ok, I can't get Klaus' example to work. Here is a visual attempt to try and explain what is happening with the iphone. The image below shows the clients webpage and the flash side is embedded. It is embedded with width and height set 700px x 550px



The second image shows how it looks on the iphone when the flash is width and height is set. Notice the image appears zoomed and you cannot see the thumbs



Now look at the the image when the width and height are removed. Notice, now you can see the thumbs and the image appears normal. Also the flash embedded on the client site just opens at 100% which forces scrollbars to appear.



Hope now everyone see the problem and can offer a solution.

Thanks.

Robert

7

Wednesday, December 8th 2010, 5:44pm

Hi,

the most krpano examples html files are designed to set the window size to native iPhone/iPad resolution,
see this line in the html:

Source code

1
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />


so your fixed size element can be larger then the window viewport,
the same would happen when you resize the browser window to a size smaller then 700px for example,

if don't want to use the native width and height because you are using absolute pixels sizes,
just change the reference screen size with the meta viewport settings,

here some further links about web design for the iPhone:
http://www.mobilexweb.com/blog/iphone4-i…safari-viewport
http://www.boutell.com/newfaq/creating/iphone.html
http://csswizardry.com/2010/01/iphone-cs…phone-websites/

best regards,
Klaus