how to deal with IE fullscreen mode toolbar hiding page content - javascript

IE has a interesting fullscreen mode. I still don't understand it very well but I have observed two cases:
The menu bar and additional attached toolbars hide (slide up) and it is a real real fullscreen experience. This is kind of nice.
The window frame (chrome) disappears but the menu bar and other bars still remain. They float and hide the page content partiallly.
I have looked at some pages and they basically don't deal with it. Stackoverflow.com is an example of this. The black top toolbar is hidden and the scrollbar is hidden partially too. I cannot know whether I am logged in or not (or how many reputation I have). This is problematic since I have various buttons near the top corner and when in fullscreen mode the user is not able to click on them.
Should I try to deal with it? If so how? (I would need to know how many pixels the toolbar takes to move my button accordingly. It varies since people are can attach as many as toolbars as they want)
Any help is highly appreciated.

I have upgraded from version 11.0.9600.17420 to 11.0.9600.18204 and it works consistently now. The page is only hidden when the mouse is near the top :)

Related

jScrollPane on touch devices - drag button is in reverse

I've implemented jScrollPane and I'm having an issue on touch devices.
The example I'm using is http://jscrollpane.kelvinluck.com/drag_size.html where I have a vertical scroll using a circular button image for the scroll on the track. The class that's added to this is jspDrag.
On desktop, when you click and scroll the vertical button, it drags down and the content scrolls up, which is natural in my eyes.
The issue I'm facing is on touch devices (check the example URL above in Chrome using iPhone/iPad emulation in dev. tools) where you can't actually drag the button down - you actually have to scroll it up for the content to scroll?!
Users are definitely not going to know this as it's a button rather than a content block that you're using as a control.
I'd like to be able to touch and drag the button down on touch devices, rather than up, to make the content scroll.
Has any one come across this issue and managed to solve it? I've searched SO and Google Groups with no luck.
Thanks.
Unfortunately jScrollPane seems to just work like this, with an annoying caveat, which is unfortunate - I really liked the plugin.
I came across http://manos.malihu.gr/jquery-custom-content-scroller/ which functions the way it should and runs super smooth on touch devices.

Full page scrolling plugins (fullPage.js, scrollify.js, etc) prevents default mobile Safari UI behavior

On iOS devices, scrolling plugins like Scrollify.js, FullPage.js, and OnePage-Scroll.js seem to keep Safari's address and navigation bars in place, instead of the way they typically minimize when the user scrolls the page.
Is there any kind of workaround for this? I understand that when those UI bars minimize, the inner viewport height is changed, and so the plugin would need to recalculate the height. Also, the UI minimizes during the scroll event, and maybe that's problematic for the scrolling plugin? Is there a way to maybe hide the UI when the scroll event finishes?
When you change the orientation of the iPhone from portrait to landscape, the bars disappear, but if you bring them back by tapping the top or bottom, they stay put when you scroll.
I'd really like to have that extra height!
Is there any kind of workaround for this?
You can also use it without autoscrolling, but that might no be what you are looking for: autoScrolling:false.
If you are worried for the landscape mode, if you avoid using anchors and you load the page in portrait mode to then change to landscape, it won't show the top bar at all on iOS at least. Not the best solution, but it might help.
Personally I would recommend you to use the option responsiveWidth or responsiveHeight to change the behavior of the page on small screen devices and remove the auto scrolling and possibly have bigger sections.
In general, mobile browsers do not allow access to the top or bottom bars behaviors and there's no much developers can use to deal with them.

Durandal modal/dialog context that allows scrolling on mobile devices

Durandal provides a modal dialog facility which works great on desktop devices, and it allows you to control the presentation of the dialog via the "dialog context".
The default dialog context will, among other things, "display your dialog's view centered on the screen." Observationally, I can see that this means centering the dialog in the viewport--which means that as you scroll up and down, it remains in the same location, in the middle of your viewport.
This works fine a screen large enough to see the entire dialog; but on mobile devices, particularly phones, the dialog may be larger than the screen, especially if the user zooms in. When this happens, it is impossible for the user to pan around the dialog.
I would like to change this behavior by using a custom dialog context that positions the dialog in the center of the viewport initially, but then leaves it anchored to a fixed spot on the page, so the user can pan around.
So far I have been unable to figure out how to setup a custom dialog that observes the regular Durandal defaults, except for the "center in the viewport" rule. I'm not even positive I want or need to do this as a custom context; there may be a CSS rule that will accomplish this? Any help would be greatly appreciated.
As suggested by Abhinav Gauniyal and PW Kad (thank you!), a CSS solution turned out to be much simpler than a custom context.
After some digging, I found that by changing position: fixed to position: absolute in durandal.css, on the .modalHost rule, I was able to get the behavior I was looking for.
Better would be a completely separate UX for mobile devices that was tailored to their screen size, and that's definitely the direction we want to head--but today I wanted to at least make it possible for existing users to pan around and see the entire modal dialog, instead of leaving them with something completely unusable until we've got a "complete" mobile UX in place.

Fixed position not working on ios devices

I am working on implementing a couple of instances of http://amsul.ca/pickadate.js/ but i seem to be running into a couple of problems with the css. If you view the above site on an ipad or iphone, the calendar is positioned correctly, as the container covers up the window as a good fixed position element should do. But if you were to see my site, and pull up the calendar, then you would see the calendar container (the greyed out background) starting from the bottom left corner of the input that it is next to (as if it were positioned relative) and extending with the same dimensions of the window. In addition to this, when I inspect in mobile safari's web inspector on my mac, the blue box, which usually indicates where the div is being positioned is fixed to the top of the document and not necessarily the window.
The only error I'm getting are a 404 from a stylesheet that has nothing to do with this plugin.
here are 3 screenshots of the problem that i am facing, the first has shows the input that the div with the calendar is just after
http://www.dumpt.com/img/viewer.php?file=rvipsnuyfyuv8u6xt5dr.png
the second is where inspector seems to think it is rendering and you can see the translucent background further down the page
http://www.dumpt.com/img/viewer.php?file=nc7el13lcthqlzrsfarg.png
and the third shows that it seems to be the correct dimensions and everything, but the calendar does not seem to be positioning itself correctly
http://www.dumpt.com/img/viewer.php?file=8hbswbfv9abwobkth8iq.png
If anyone has any ideas about why this might be I would love to hear them because right now, i'm at a loss.
EDIT
This page has been tested on android devices and works perfectly.
Ok, so it seems that mobile does not support fixed elements very well.
http://www.quirksmode.org/m/css.html
Search: fixed
which is really unfortunate. If anyone has any workarounds for this, that would be really great.

Android browser floating menu issue while fast scrolling

I have a problem with fixed floating menu on android phones browsers (not tested on other phones) and still can't find any solution.
Let's take this as an example: (the first link I found on google)
http://www.backslash.gr/demos/jquery-sticky-navigation/
Scrolling and clicking on menu works, but if I make fast scroll and let the scroll stop automatically 'til it reaches phone browser's bottom or top, the floating menu becomes inactive (not able to click on floating menu, focus-link position is changed). If I make fast scroll and stop scrolling by touching the screen (don't let the scroll to reach bottom or top and stop automatically) the floating menu works and links are active.
I have tried about 10-20 examples I found on google, even bootstrap has the same issue.
Also tried libraries like mCustomScroll and iscrool, but they are too slow for phone browser or have other issues.
Tested on android > 4.x several different phones and versions.
I hope you understood the problem and can suggest anything.
Also it would be nice if anybody could test it on iphone (but I think its Android problem).
Thank you.
Found good enough solution https://github.com/filamentgroup/Overthrow/
So I was able to create fast scrolling page and make workaround for described bug.

Categories