I'm working on a responsive website and want to make an overlay menu like on play.google.com.
My layer get's dynamicaly the height of the window to fill the screen from top to bottom and get's "position:fixed" to stay where it is.
I do "window.scroll(0,100)" to vanish the navigation bar. But when I try to scroll inside my menu by touch the whole page scrools up and shows the navition bar again. Then it's no longer possible to scroll the page. The result of this behavior is, that man menu is now to long and the bottom of the menu is no longer visible on the page.
On the google play website they used something that the navigation bar never vanishes and I think this could help to avoid my problem also, but I haven't found out how to do that, yet.
I hope someone of you has some experiance in that.
thanks in advance
Frank
Related
Can you direct me or give me some advice please on how to create a navigation bar (Angular 1, jQuery, css, etc) that behaves like Google Chrome bookmarks bar when the page is resized. Basically as the page size gets smaller a new button/symbol (>>) appears on the bar. Buttons from the right that cannot fit due to the smaller resolution move under the >> symbol. If you press the symbol a drop down appears with the hidden buttons. When the page reaches mobile resolution of course I will switch to mobile menu, but I need this step between the full menu and the mobile.
Google Chrome browser manages bookmarks bar view when you resize the page in a great way. If in Chrome you have a lot of bookmarks two arrows (>>) appear on the right side and when you make the window smaller more bookmarks hide under these arrows.
Thanks a lot for your help.
Making menu div overflow:auto would be simplest solution. Here's plunk for that
http://plnkr.co/edit/vAYTGgNnQtH1iE2vsIpS?p=preview
For your particular requirement, here is horizontal slider with arrows in the end to handle scroll
https://codepen.io/mahish/pen/RajmQw
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!
I am using the Dopetrope meanu form html5up.net:
http://html5up.net/uploads/demos/dopetrope/left-sidebar.html
This template is simply great but I am having an issue with the left hand menu when in mobile view. When you click the famous burger icon (no matter which page) the menu slides in as expected and it works some of the time but not everytime. It is not something I have added as it does it on the official demo site (above) too.
Go to the above URL and without clicking navigation links, just scroll the page up and down a few times, then click the burger icon. Keep doing this a few times and you will find that on some occasions the left hand links and icon toggle disappears (just leaving the dark background). But if you do see the burger icon, you can click it again and the menu will show again.
This only happens on mobile (android samsung S4 mini - happens pretty much 100% of the time). Iphone 6 - happens say 40/60.
Could anyone help with providing a fix for this? Or perhaps point me to the code that calls the menu to see if I can override a setting such as z-index or call the function twice?
Many thanks for anyone who can help.
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
I'm building a one-page site with the content area as large content boxes stacked down the page.
http://salondoreen.com/lowercasemenu.html
I'm looking for ideas on a way to use javascript to jump to each content box. With a one-page site like this, it takes a lot of scrolling to get to the bottom.
My idea is to somehow make this easier. If you are in one box, and you scroll down just a single click, I want the next box to scroll all the way up the page in one jump. That way the content stays easy and readable, and a box will never be half-on half-off the page. Theoretically you could scroll to the bottom of the page in less than ten clicks.
Does that make sense? I'm thinking of something similar to the home screen on android phones. It jumps horizontally between screens, no matter how little you swipe. There will only be one box on the page at time.
Disclaimer: I am a noob web developer, any and all help is appreciated. Thanks!
I would point you toward binding on the scroll event with jquery .scroll(), and using either IDs via http://myurl.com/derp#scrollhere style of links or use the jquery.ScrollTo plugin