I'm having an issue with a page auto scrolling to the middle rather than starting at the top when the user reaches it via links. For instance, when I click any of the buttons that say "[#] Recommendations" below the image, the link takes me to that image's recommendations page. The problem is that if the page has more than one recommendation, as in these particular requests:
http://whatgoeswiththis.co/#request/8
http://whatgoeswiththis.co/#request/5
The page loads scrolled halfway down. If there isn't a recommendation uploaded yet, it appears to load fine.
Appears to be a problem on all browsers, and it appears that the scroll is set to a random location depending on number of recommendations that have been uploaded. The page has a regular HTML/CSS header, but everything below the top inch is handlebars.js scripts.
How can I make it so that any time the user reaches the recommendations page it starts at the top of the page? I don't want to add a new javascript tag, I'd prefer to remove whatever is causing the scrolling if possible. Thanks!
I finally realized what the problem was. I had this exact same problem on a Backbone app I was working on awhile back. The problem is that the page remains at the exact same scroll position when you click on a request-card. So depending on how far down the home page you scroll will determine where on the request page it looks like you landed.
I'm not sure how best to fix this on your site, so I'll describe what we did to fix it on ours. On our website, we just rebuilt the DOM of the main element on our site so that the scroll position would be reset to 0. For your site, this would mean that the template for the homepage would only have the elements within #homepage, and when you click on a link, a new template is used that contains everything inside #requestpage.
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!
Wondering how I can achieve the following effect on a website I'm building:
Div with 100vw width and 100vh height (we'll call this #container2) hides to the right of the home page (we'll call the home page #container1).
Moving mouse towards the right edge of the page causes #container2 to peek out.
If the user clicks on the visible portion of #container2, it slides all the way to the left, fully obscuring #container1.
The user is now on a new page with a corresponding URL, where they can scroll down and view more content.
I've got the first 3 steps more or less figured out. What I need help with is figuring out the best way to:
Handle the URL transition from site.com into site.com/newpage during the sliding animation
How to dynamically load the new page's content to the #container2 once the page transition happens, so the user can scroll down and see the new pages content if they click into it, but don't have to load the content if they choose to stay on the homepage.
Making it so if someone types or is linked directly to site.com/newpage, they will see the same thing that someone who started on the home page, clicked #container2, and watched the transition animation sees (but without showing a page transition).
I don't have any code snippets to show because I'm not really sure where to start. Any help or direction would be greatly appreciated. If possible, I'd like to use a vanilla javascript solution, as I've managed to make all the other features on the site run without JQuery. If JQuery is the only way to do this though, I'd still love to hear the solution.
There are a lot of ways you could do this. My intuition would be to have only one page that has different url fragments. Your question is fairly broad so my answer will also be broad.
One approach would be to use the target pseudo-class in css. All you need to do is make container2 a link that adds fragment to the end of the url that matches the classname of said container. You could have a some style for :hover that makes the container slide out and some settings for :target that brings the container to the center of the page. Container2 could have have a second section beneath the fold that contains the rest of the content for the page.
You could do something very similar with javascript by adding and removing classes from the various elements, but using the target pseudo class will help with your last bullet point. If a user goes directly to the link with the fragment, they will see the page with that container displayed.
I hope that gives you a place to start. Here is some info about the target pseudo-class.
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've got a JQueryMobile site, and I want to place a div at the top, that isn't visible on the first page load, but only when the user scrolls up. It's meant to emulate a pull-to-refresh. Basically like what these guys did, using this Javascript. This isn't a pull-to-refresh, but they're doing what I want to, which is 'hiding' a div above the initial view.
Unfortunately, JQueryMobile waits until the site is fully loaded, then automatically scrolls all the way back up to the top. So even though I can scroll the page down immediately, a few seconds later (random time), it'll scroll back up.
Is there any way to either stop the scrolling-back-up of JQueryMobile, or to create this div using HTML/CSS?
You can set display:none on your header so it isn't visible, then show it and scroll at the same time. See http://jsfiddle.net/Lanny/CDhmr/1/. Even if there's a significant delay between your page being rendered and your javascript executing scroll will happen at the same time that you extend the document.
It seems that $.mobile.defaultHomeScroll might help here.
Haven't used JQueryMobile, but noticed this pull request on GitHub:
https://github.com/jquery/jquery-mobile/pull/5751
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.