I made a tour with the standard template, integrated it into a page here:
http://bit.ly/1bzxBTt
Clicking on the fullscreen icon in every browser works fine, except for internet explorer. If you click fullscreen, it just makes the tour a centimeter larger.
Has anyone else run into this problem and how did you fix it?
Thanks,
Dean
Tour refuses to go fullscreen in IE 11
- 360Texas
- Moderator
- Posts: 3684
- Joined: Sat Sep 09, 2006 6:06 pm
- Location: Fort Worth, Texas USA
- Contact:
Real great Responsive Web Page design. Keep in mind that a RESPONSIVE page is not exactly the same as a normal html page. A responsive page is designed to expand and collapse according to the visitors device screen size.
Observations and Constructive suggestions:
There appears to be a panorama mismatch view port size between when you created the pano2vr project and the view port size you are allowing in the responsive page design. Example. You created the pano2vr project using a view port of 900 wide x 700 high pixels. In the responsive page design appears be 900 wide x 500px high. This is evident by the floor plan being truncated vertically. I did notice that your page collapses in a uniform format as I resize my browser window.
EDIT 7:12pm 13Dec13: I found our width spec. In my site template I have a stylesheet.css attached to my index.html. I found the page width called max-width: 980px in this .css spec. The margins inside the 980 wide content area are for Top margin, Right margin, Bottom margin and Left margin. 0px auto 0px auto. Appears the right and left margin are set for auto fit.
Your thumbnail bar below the panorama does not appear to behave nicely when collapsing the responsive page. It extends the left and right page boundary edges. Maybe make it only 3 thumbnails wide and have the thumbs slide 3 at a time as a group.
Your FULLSCREEN button is working. The Full Screen is expanding properly to the borders of Actual Page definition. It probably is not the way you are expecting. Your Responsive page WIDTH layout is restrained by the 'Actual Page content area' code width. I could not find the layout page area width snippet code string in the html so it must be specified in your associated .CSS page.
I am in the middle of trying to build my own responsive page.. and no I have not yet figured out how to jump to full screen. Lacking any real progress, who knows I might take the site out to the backyard and burn it.
Observations and Constructive suggestions:
There appears to be a panorama mismatch view port size between when you created the pano2vr project and the view port size you are allowing in the responsive page design. Example. You created the pano2vr project using a view port of 900 wide x 700 high pixels. In the responsive page design appears be 900 wide x 500px high. This is evident by the floor plan being truncated vertically. I did notice that your page collapses in a uniform format as I resize my browser window.
EDIT 7:12pm 13Dec13: I found our width spec. In my site template I have a stylesheet.css attached to my index.html. I found the page width called max-width: 980px in this .css spec. The margins inside the 980 wide content area are for Top margin, Right margin, Bottom margin and Left margin. 0px auto 0px auto. Appears the right and left margin are set for auto fit.
Code: Select all
/* Layout */
.page { position: relative; margin: 0px auto 0px auto; max-width: 980px; }
Your FULLSCREEN button is working. The Full Screen is expanding properly to the borders of Actual Page definition. It probably is not the way you are expecting. Your Responsive page WIDTH layout is restrained by the 'Actual Page content area' code width. I could not find the layout page area width snippet code string in the html so it must be specified in your associated .CSS page.
I am in the middle of trying to build my own responsive page.. and no I have not yet figured out how to jump to full screen. Lacking any real progress, who knows I might take the site out to the backyard and burn it.
IE11 does not yet fully support webgl:
http://msdn.microsoft.com/en-us/library ... s.85).aspx
A couple options come to mind:
1. Put this statement in the head tag of your pano tour page. It tells IE11 browsers to behave like IE10. Let me know if this works, because even an IE10 browser might not break out of an iframe? See next option #2.
2. “View Source” on your pano tour page shows that your pano tour is displayed via an iFrame. Use the iframe’s onclick event to open the tour in a separate window, because I see the Full Screen button works well in IE11 when the pano tour is not inside an iFrame. (The Full Screen button does work inside the iframe on IE11, but "full screen" in that context is the full iframe.)
3. Other options?
http://msdn.microsoft.com/en-us/library ... s.85).aspx
A couple options come to mind:
1. Put this statement in the head tag of your pano tour page. It tells IE11 browsers to behave like IE10. Let me know if this works, because even an IE10 browser might not break out of an iframe? See next option #2.
Code: Select all
<meta http-equiv="X-UA-Compatible" content="IE=10" />
3. Other options?
- 360Texas
- Moderator
- Posts: 3684
- Joined: Sat Sep 09, 2006 6:06 pm
- Location: Fort Worth, Texas USA
- Contact:
Don you are probably correct. It is really hard to determine which browser API is supported or not that causes these issues
Internet search found this: According to the folks at caniuse.com IE 11 is:
HTML5 that use CSS3 3D transformations
WebGL supported
http://caniuse.com/transforms3d
Note below Partial support in IE10 refers to not supporting the transform-style: preserve-3d property. This prevents nesting 3D transformed elements.
And
3D Canvas Graphics
WebGL supported
http://caniuse.com/webgl
Internet search found this: According to the folks at caniuse.com IE 11 is:
HTML5 that use CSS3 3D transformations
WebGL supported
http://caniuse.com/transforms3d
Note below Partial support in IE10 refers to not supporting the transform-style: preserve-3d property. This prevents nesting 3D transformed elements.
And
3D Canvas Graphics
WebGL supported
http://caniuse.com/webgl
- 360Texas
- Moderator
- Posts: 3684
- Joined: Sat Sep 09, 2006 6:06 pm
- Location: Fort Worth, Texas USA
- Contact:
Just finished looking at your site with my Samsung GS4 using office router for internet connection.
O/S is Android 4.3 Chrome Browser used is 31.0.1650.59 November 18 28.77
Suggestions:
When building your panoramas suggest anchoring the < > + - tool bar to far left bottom corner of the pano view window.
Currently you have it centered bottom. Reason is because when I look at the panoramas...
In Portrait orientation... the tool bar is off screen right and not seen at all.
In landscape the tool bar is too wide and the last two icons on right are not visible.
O/S is Android 4.3 Chrome Browser used is 31.0.1650.59 November 18 28.77
Suggestions:
When building your panoramas suggest anchoring the < > + - tool bar to far left bottom corner of the pano view window.
Currently you have it centered bottom. Reason is because when I look at the panoramas...
In Portrait orientation... the tool bar is off screen right and not seen at all.
In landscape the tool bar is too wide and the last two icons on right are not visible.
Nope, I'm wrong. At least partially wrong. I researched and tested on my own panos displayed in iframes:360Texas wrote:Don you are probably correct....
1. This line of code does not solve the iframes >> fullscreen issue. However, it does solve other pano-related web page issues that began for me as soon as IE11 was released. Note that "IE=10" is not the same as "IE=edge" which may be found in the top of the pano.html page output by pano2vr v4.5 beta:
Code: Select all
<meta http-equiv="X-UA-Compatible" content="IE=10" />
A. https://developer.mozilla.org/en-US/doc ... creen_mode
B. http://msdn.microsoft.com/en-us/library ... s.85).aspx
3. Meanwhile, this work-around is good for me: Wrap the iframe in a div tag with a visible border. The div tag has an onclick event that opens the source of the iframe in a new in window, full-browser. From the full-browser window, the user may click FullScreen button on the pano skin if desired.
4. This other work-around is similar and probably more appropriate for Dean and others: Place a hyperlink on the web page that says, "Enlarge". The hyperlink opens the pano in a new window, full-browser. From the full-browser window, the user may click the FullScreen button on the pano skin if desired.
Edited footnote: The iframe's onclick event does not fire for me. Maybe somebody else can get the iframe's onclick to fire and post their sample code? I expect I could force it to fire by adjusting the settings on the iframe, but then those iframe settings, as I have experienced, are likely to make the pano less navigable, or not navigable at all. So for me, work-around #3 does the job, and work-around #4 seems very reasonable too.
Thanks for the feedback and ideas, guys! So while not supported now, there is a chance that with a new version, IE will behave like all other browsers? haha.
A quick question - it seems as if Don's suggestions are the only way to go, but it is not elegant in execution as it requires a user to hit enlarge and then fullscreen. Is there a way through javascript or otherwise to programmatically make a link that says "view fullscreen" and then opens up a new browser window that opens the tour in fullscreen automatically? I don't really want to have to create two tours - one in the sized dimensions to fit in the page and then one made "fullscreen" in the HTML settings.
Thanks again!
Dean
A quick question - it seems as if Don's suggestions are the only way to go, but it is not elegant in execution as it requires a user to hit enlarge and then fullscreen. Is there a way through javascript or otherwise to programmatically make a link that says "view fullscreen" and then opens up a new browser window that opens the tour in fullscreen automatically? I don't really want to have to create two tours - one in the sized dimensions to fit in the page and then one made "fullscreen" in the HTML settings.
Thanks again!
Dean
Maybe, and for this to work, you need to tweak a few things on your two web pages:DDiCarlo wrote:...Is there a way through javascript...to...make a link that says "view fullscreen" and then opens up a new browser window that opens the tour in fullscreen automatically? ...
Step #1. The <body> of your "tour.html" web page needs to have zero margins so the <div id='container'> fills the page, like this:
Code: Select all
<body style="margin-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;">
Code: Select all
<div id="container" style="border:none;bottom:0px;left:0px;position:absolute;right:0px;top:0px;">
Code: Select all
<div id="divFullScreenLink" style="text-decoration:none;color:blue;cursor:default;font-family:arial;font-size:12px;" onclick="makeFullScreen();">View Full Screen</div>
Code: Select all
<script id="myScripts" type="text/javascript">
function makeFullScreen() {
divObj = document.getElementById('container');
if (divObj.requestFullscreen) {
//1. Try to open pano fullscreen.
divObj.requestFullscreen();
}
else if (divObj.mozRequestFullScreen) {
//2. Try to open pano fullscreen.
divObj.mozRequestFullScreen();
}
else if (divObj.webkitRequestFullscreen) {
//3. Try to open pano fullscreen.
divObj.webkitRequestFullscreen();
} else {
//4. If all else fails, open pano as big as possible in a new window.
window.open('tour.html', 'myTour', 'channelmode=yes,fullscreen=yes');
}
}
</script>
C. The window.open syntax is shown here: http://www.w3schools.com/jsref/met_win_open.asp
I just integrated this and it worked like a champ!
See the new site with new fullscreen link in the lower left corner.
Is there a way to make this button a part of the tour as opposed to part of the HTML wrapper? The only problem having it as part of the HTML is that I cannot use the "enter fullscreen / exit fullscreen" events to change elements in the tour and add more functionality when in fullscreen.
Thanks so much for the code Don!
Dean
See the new site with new fullscreen link in the lower left corner.
Is there a way to make this button a part of the tour as opposed to part of the HTML wrapper? The only problem having it as part of the HTML is that I cannot use the "enter fullscreen / exit fullscreen" events to change elements in the tour and add more functionality when in fullscreen.
Thanks so much for the code Don!
Dean
- malaga360VR
- Posts: 43
- Joined: Tue Sep 18, 2012 10:36 pm
- Location: Spain / Málaga
- Contact:
That way works fine on Safari on Maveriks , right link freezes when you try to go out form full screen , as usual ( HTLM ) ....
But left link to fullcreen makes backward compatible , it works perfect.
Its posible to implement that call into an element in the skin ?
But left link to fullcreen makes backward compatible , it works perfect.
Its posible to implement that call into an element in the skin ?
Thanks Malaga,
Yes, I haven't taken out the old inoperative "fullscreen" yet. Working on that right now
Glad the left most is working. Still not sure of a way to trigger an "enter fullscreen" message to the tour when clicked. Anyone have a solution for that?
Dean
Yes, I haven't taken out the old inoperative "fullscreen" yet. Working on that right now
Glad the left most is working. Still not sure of a way to trigger an "enter fullscreen" message to the tour when clicked. Anyone have a solution for that?
Dean
DDiCarlo wrote:...Is there a way to make this button a part of the tour as opposed to part of the HTML wrapper? ...
Try this: Remove my Step #3 above, i.e. delete the <div id="divFullScreenLink"> tag from your web page. Then, in your skin editor >> fullscreen button >> Actions >> Mouse Click. Instead of "Toggle Full Screen" select "Go To Url". In the URL field enter, "javascript:makeFullScreen();" . Probably leave the Target field empty, or maybe put "fullscreen" in the Target field, not sure. Experiment. Let me know if it works? I intend to try myself, except not until this weekend...lots of holiday distractions around here.malaga360vr wrote:...Its posible to implement that call into an element in the skin ?
Remember, this is not a GG issue, it is an html5 standards issue. IE, Firefox, Chrome, Safari, Opera and the many other browsers will all get on the same page someday...
- malaga360VR
- Posts: 43
- Joined: Tue Sep 18, 2012 10:36 pm
- Location: Spain / Málaga
- Contact:
Hy I have tried to do your suggestions and it works but not fully 100% for me , surely I have done something wrong , Im not web programer .
I works ok , but from direct link , not from iframe .
This is a direct link from html - flash backward compatible . http://www.imasoft.es/panoramas/avanced ... al360.html
This is same panorama but linked to iframe http://www.imasoft.es/iframe-3/index.html
I have tested also on Explorer 11 and same , from iframe doesn't work for me, well It launch a new window , but is not a real full frame , on Maveriks this either doesn't work, simply it doesn't nothing, so I must done something wrong.
Maybe you can help , I put here both html , original and modified , I can learn if I can see where are you making the changes .
Thanks !!
I works ok , but from direct link , not from iframe .
This is a direct link from html - flash backward compatible . http://www.imasoft.es/panoramas/avanced ... al360.html
This is same panorama but linked to iframe http://www.imasoft.es/iframe-3/index.html
I have tested also on Explorer 11 and same , from iframe doesn't work for me, well It launch a new window , but is not a real full frame , on Maveriks this either doesn't work, simply it doesn't nothing, so I must done something wrong.
Maybe you can help , I put here both html , original and modified , I can learn if I can see where are you making the changes .
Thanks !!
- Attachments
-
- HML files.zip
- HTML updated and original
- (5.14 KiB) Downloaded 189 times
You did good, just remember html web pages should only have one opening <body> tag and one closing </body> tag. Other than that your html page is correct.malaga360vr wrote:Hy I have tried to do your suggestions and it works but not fully 100% for me , surely I have done something wrong , Im not web programmer...
You are correct: In the makeFullScreen javascript, if the visitor's browser DOES NOTrespond to the "requestFullscreen", "mozRequestFullScreen" or "webkitRequestFullscreen" commands, then when all else fails the "window.open" command fires. The "window.open" command will open the pano "as big as possible". And when that happens, "as big as possible" is not the same as full screen, but simply "as big as possible", i.e. the browser header, location field, and browser border will be visible.
On the other hand: In the makeFullScreen javascript, if the visitor's browser DOES respond to "requestFullscreen", "mozRequestFullScreen" or "webkitRequestFullscreen", then the pano will display full screen, i.e. full bleed, entire device screen, theater mode, no browser header or borders.
The "window.open" command is from the old days, and works in all browsers when javascript is enabled. The "requestFullscreen", "mozRequestFullScreen" or "webkitRequestFullscreen" commands are newer code. Someday they will become one single command, but at the moment they are 3 different, yet similar commands. Most browsers support one of the three commands, but not all the browsers yet. When that happens, then the "window.open" command will do the trick. The "window.open" command is just a work-around, not a final solution.
PS: Your two reference links both display your pano in flash. The flash pano FULLSCREEN skin button works fine in IE11, at least it does for me, today. The "window.open" work-around is intended for html5 panos displayed by IE11.
PSS: I guess-timate Microsoft will update IE11 sometime within the next 6 to 12 months and this "window.open" work-around will be forgotten.
- malaga360VR
- Posts: 43
- Joined: Tue Sep 18, 2012 10:36 pm
- Location: Spain / Málaga
- Contact:
Thanks for help
But I am jealous , I understand what you are explaining, what i don't understand is why your "html5 fullscreen iframe link" works nicely in Chrome , Firefox, Safari ( Maveriks ), and launch in IE11 a new window, it works as you expect .
My skin workaround, it doesn't , only in flash back compatible mode, if you disable flash compativility in browsers it only works for me in firefox , and IE11. Chrome and Safari (Maverkis) simply does nothing.
Anyway your tip is the best help give by now.
But I am jealous , I understand what you are explaining, what i don't understand is why your "html5 fullscreen iframe link" works nicely in Chrome , Firefox, Safari ( Maveriks ), and launch in IE11 a new window, it works as you expect .
My skin workaround, it doesn't , only in flash back compatible mode, if you disable flash compativility in browsers it only works for me in firefox , and IE11. Chrome and Safari (Maverkis) simply does nothing.
Anyway your tip is the best help give by now.