Develop Reference

Changing URL while displaying page change animation

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.

Website not scrolling fully to the top

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!

Page scrolls to bottom when reached from a link

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.

Javascript / css photo pop-up feature placement issues

I've used this site many times to find answers to my questions, but I can't seem to find an answer to my current issue. Any help would be great!
I'm using a custom photo pop-up feature add-on in Magento called TopUp. I contacted the original writer of the code and have not received a response. I Googled the issue and other users with Magento 1.6 and 1.7 are having the same issue.
When you click on a product image when viewing a product details page, the image should popup in the middle of the screen. Well, right now, the image pops up toward the bottom of the screen and when you click next or back, it re-positions itself further down.
Here's an exact link to a product where this applies (development site):
http://www.childress-media.com/shapingheartsforgod.org/index.php/shaping-hearts-series/pre-k-through-5th-grade/all-things-made-new/all-things-made-new-student-workbook-level-1.html
Here's the link to the Javascript pop-up program:
http://www.childress-media.com/shapingheartsforgod.org/skin/frontend/base/default/js/top_up/top_up-min.js
I've tried messing around with the CSS here and there within the file - but I can't make it do what I want.
Ideally, the pop-up would appear 100px from the top of the page and be centered and stay centered when you press next or previous.
Any help you guys can provide would be much appreciated. Thanks!

An easy, but raw way to do this is setting a css style, like:
document.getElementById('top_up').style.top = '100px';

Ajax changes scroll position

I have a short question for you. Could anybody help me figure out why after an Ajax request, the page scroll is changing back to the top? I think it's about JQuery. I can't find too much info on the web, so I ask for your help. This is the test page where I'm doing that. Try changing and see what is happening. Thank you so much!
www.*.ca/test/script.php
Got the answear. Thank's

I just ran into this situation with some embedded pagination and I came up with a trick for dealing with it. On page load I grab the calculated pixel height of the content div and then set that fixed height back onto itself. This keeps the div at a fixed size while the page contents are destroyed and replaced.
var height=$('#content').height();
$('#content').height(height);
Or more briefly:
$('#content').height($('#content').height());

Because the page momentarily becomes shorter, so the scrolling position cannot remain where it was or else the page would be scrolled past its contents.