I'm trying to find the best technique for showing a navigation/menu for a mobile site I'm working on. So far all my solutions have flaws, and I was wondering if anyone could point me in the right direction. (You may have to reduce browser window size to make the examples work as intended)
First off, take a look at this "basic" example: http://audunaas.no/menu/problem.html
You'll notice the content is still scrollable while the navigation is open. This is confusing and annoying.
My first attempt at a fix was to set the body to overflow:hidden and position:fixed whenever the navigation is open. Example here: (Had to remove link because maximum 2 links in post)
This, however, causes the body to snap back to the top and "forget" its scroll position. This means you are taken back to the top of the page whenever you open the navigation. Not good.
Lastly, my best solution so far is one where i put all the page content inside a #scroll-area-div with a fixed position taking up most of the screen, and body scroll set to hidden. Example here: http://audunaas.no/menu/
This solves most of the problems in the page itself, but breaks the "memory" of the back button. This means whenever you click back in your browser you are taken to the top of the page instead of back to where you were before you decided to click a link. (Mobile safari seems to be the only browser that remembers scroll position on div's aswell as body)
I can't really think of any more solutions to this, except for maybe some sort of javascript. Does anyone have some experience with similar cases, or any ideas on how to accomplish this?
The solution must:
Prevent scrolling on page content when navigation is open
Preserve scroll position on page content when navigation is open
Remember scroll position on previous page when back-button is used
Related
I know this question sounds confusing, so here's a better explanation:
I'm using a mobile. Say there's a scrollable element somewhere in the body. When I scroll the element and it reaches the bottom, I want instead of getting stuck for keep scrolling the element, it scrolls the page instead. That's also true if I reach the top of the element, it scrolls up the page, not getting stuck.
I tested it on two different mobile phones with the latest version of Chrome. The First one does exactly that. Weirdly enough, the second one only works when it gets to the top but not to the bottom. Is there any way to make it always work irrespective of the environment (mobile phone or browser) we are using?
Edit: What I'm trying to achieve with this
Desktop:
I want a way so that the buttons placed at the bottom of the content are not so distanced from the user's view. If we remove the scrollbar, then the users have to scroll all the way to the end of the content to be able to click the buttons.
The problem with this method is that, on mobile, in some browsers, it blocks the user from scrolling the page, even after reaching the end of the element. So they have to touch the edges of the screen to be able to scroll the page instead of the element.
What I want is, for users having difficulty touching the edges, they can still scroll the element. And when it reaches the bottom of the element, it scrolls the page.
I know this is weird. I know some of the better tricks like using the Read More-Read Less button, but it requires JavaScript I guess? I'm in a situation that's really hard to use JavaScript at the moment (shortly because of how bad the code is organized), and looking for a way if there's a simple trick using pure CSS. Any help or idea is appreciated!
I am having a weird problem and cannot even diagnose what is causing it. I am working on my professor's website: jurgec.net
The problem is only on the mobile website. If you click one of the links such as "I am an undergraduate student" then scroll down a little bit, and then press back, the website doesn't fully land at the top of the page. You can see a bit of the yellow page at the bottom.
I have a feeling its because each section's height depends on the browser's screen size. And since on mobile chrome, scrolling down causes the URL bar to disappear, it changes browser's height hence ruining the size of the website's sections.
Any help is greatly appreciated!
This is because the back button returns you to the previous "state" of the website you were at. If you scroll down it's going to go to that part where you were when you made the Click.
Does $(document).ready() functions fire after a back button press?? If they do (not sure at the moment) you could do something like this.
$(document).ready(function(){
scroll(0,0)
});
Which if that works shouldn't really affect you because on initial page load you are already at (0,0) so you wouldn't notice any jumping. Not sure if this would work for you, but good luck!
Please have a look at my sample page.
On that page notice the portion with the gibberish text. This is the "content part" which is meant to be scrolled. All other parts are supposed to be fixed.
If you move your mouse over the left navigation or the header and try to scroll, then naturally nothing happens.
How do I make the content part scroll even when the user's mouse is over the header or left navigation or any other fixed parts?
PS. I am trying to imitate Google Plus here. They seemed to have a scroll listener, but the Javascript code is too mangled for me to understand.
I was wrong in my previous conclusion that Google+ is using Javascript for this.
Yesterday broke down their site into pieces using Firebug. Now it is clear that they too are using position: fixed for fixed parts.
Here is my updated sample page. Notice that now we can use keyboard arrows too to move the page up or down. This page is not using any Javascript.
I am currently designing a webpage that is extremely vertical, my idea was that users would not scroll around the page, but only when they clicked on links with internal anchors (href="#someDiv"), the page would automatically scroll down to that section.
So that the elements of the page are organized into bundles, and the user clicks to go up or down to one section of the single page or another.
I've uploaded the page to the following url:
DWS - Prototype
The page is fairly straightforward, and I am using a smooth-scroll jQuery plugin for the automatic scrolling. All I want is for the user to not be able to wander about on his/her own.
I have tried using overflow:hidden, and looked for javascript or jQuery to get this done, but can't seem to find a viable solution. Overflow hidden prevents the page from loading past the screen, so you can't link to the other elements of the page.
I haven't really tested the HTML/CSS beyond Mac OS, but it works fine on Safari, Firefox and Chrome.
You can disable the scroll bar on a page using the following css property
body{overflow: hidden;}
This will disable both the scroll bar and the mousewheel (im not sure about Pg Up and Down Buttons)
While you definitely have an interesting concept I think it will be very hard to pull off the way you're wanting. What happens if I have the height of my browser window set so small that I can't see your Navigation menus and I also can't scroll? Chances are I'm just gonna get fed up with your site and leave.
When users see a vertical scrollbar they expect to be able to scroll up and down. Taking that way from users is more likely to frustrate and anger them as opposed to them thinking 'This is really cool'.
That being said you could load up jQuery and do something like this:
$(document).ready(function() {
$('html, body').scroll(function(e) {
e.preventDefault();
});
});
This should prevent the scrollbar from going up or down. disclaimer: I have not tested this.
I suggest you make the sections (partially) collapsible. E.g. like here.
I have a dynamic page where clicking a link triggers some javascript that sets some page elements to display:none, and thus changes the height of the page. The typical browser behavior for this is that the scroll position from the top of the page is retained. I want to retain the scroll position from the bottom instead, because the link is near the bottom of the page and I would like the user's cursor to remain over the link after it is clicked.
The code I have to do this is:
var scrollBottom=getDocHeight()-getScrollTop();
//do stuff to change height
window.scrollTo(0,getDocHeight()-scrollBottom);
(using cross-browser functions I found to obtain document height and scroll position).
This works fine in chrome and internet explorer, but in firefox, there is a small delay between the page height changing and the scroll position changing. As a result there is a flicker as the page quickly realigns itself, which is bothering me a great deal.
Can anyone suggest a fix or a more natural way to remember the scroll position from the bottom of the page instead of the top?
Thank you.