Tour refuses to go fullscreen in IE 11

Q&A about the latest versions
DDiCarlo
Posts: 114
Joined: Sun Nov 11, 2012 7:30 pm

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

Code: Select all

/* Layout */
.page { position: relative; margin: 0px auto 0px auto; max-width: 980px; }

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.
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
Don
Posts: 143
Joined: Thu Mar 07, 2013 2:59 pm
Location: Southern California

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.

Code: Select all

<meta http-equiv="X-UA-Compatible" content="IE=10" />
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?
User avatar
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
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
User avatar
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.
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
Don
Posts: 143
Joined: Thu Mar 07, 2013 2:59 pm
Location: Southern California

360Texas wrote:Don you are probably correct....
Nope, I'm wrong. At least partially wrong. I researched and tested on my own panos displayed in iframes:

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" />
2. As for the pano-in-an-iframe >> FullScreen skin button issue, it boils down to a battle of the browsers and how the html5 standard is evolving. My strategy will be to let GG do what GG does best by letting GG watch and respond to the issue as the html5 standard evolves.
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.
DDiCarlo
Posts: 114
Joined: Sun Nov 11, 2012 7:30 pm

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
Don
Posts: 143
Joined: Thu Mar 07, 2013 2:59 pm
Location: Southern California

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? ...
Maybe, and for this to work, you need to tweak a few things on your two web pages:
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;">
Step #2. The <div id='container'> on your "tour.html" web page needs to fill the <body>, like this:

Code: Select all

<div id="container" style="border:none;bottom:0px;left:0px;position:absolute;right:0px;top:0px;">
Step #3. On your property listing page, http://bit.ly/1bzxBTt, i.e. the same page that displays "tour.html" in an iframe, place the following <div id='divFullScreenLink'> somewhere outside the <div id='container'>. I suggest just below the pano, and perhaps below your thumbnails. Experiment later with floating <div id='divFullScreenLink'> over <div id='container'>, but for now let's just see if 'divFullScreenLink' works for you:

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>
Step #4. This code comes from reference 'B' in my earlier response. LOL, Microsoft's own code example would not work (for me anyway) in IE11 or dumbed-down to IE10. So I added a work-around to the work-around. The following works for me in IE11 and Firefox 25.0.1. Not yet tested in Chrome. Place this javascript within the <head> tag on your property listing page:

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>
REFERENCES:
C. The window.open syntax is shown here: http://www.w3schools.com/jsref/met_win_open.asp
DDiCarlo
Posts: 114
Joined: Sun Nov 11, 2012 7:30 pm

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
User avatar
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 ?
DDiCarlo
Posts: 114
Joined: Sun Nov 11, 2012 7:30 pm

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
Don
Posts: 143
Joined: Thu Mar 07, 2013 2:59 pm
Location: Southern California

DDiCarlo wrote:...Is there a way to make this button a part of the tour as opposed to part of the HTML wrapper? ...
malaga360vr wrote:...Its posible to implement that call into an element in the skin ?
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.

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...
User avatar
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 !!
Attachments
HML files.zip
HTML updated and original
(5.14 KiB) Downloaded 189 times
Don
Posts: 143
Joined: Thu Mar 07, 2013 2:59 pm
Location: Southern California

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

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.
User avatar
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.
Post Reply