Jump to content
Sign in to follow this  
greenace92

What is happening when you scroll through a website, and the url changes

Recommended Posts

This site qz.com uses this I'm not sure if it is called infinite scroll.

 

The url changes after the slash to me this seems like changing directories but the page does not reload... I imagine this could be linked with AJAX and probably Javascript or jQuery.

 

Is that what is going on?

Share this post


Link to post
Share on other sites

Hi Jacques1,

 

Thanks for your responses as always. To illustrate what I was talking about above, going from the first link here:

 

http://qz.com/537093/africas-democracies-need-to-reconcile-with-term-limits-and-not-just-to-keep-the-west-happy/

 

Then as you scroll down, the link suddenly switches to:

 

http://qz.com/537868/the-worlds-first-urine-malaria-test-could-save-thousands-of-lives-in-nigeria-and-beyond/

 

and then:

 

http://qz.com/538237/ordinary-angolans-are-asking-where-did-all-the-oil-riches-go/

 

and so on...

 

Every time there is a content divider, the url changes and the scrolling seems "infinite" as the scrollbar distance does not end.

 

But as I said the page is not refreshed, but the url changes and it seems like you are accessing different directories simultaneously as shown by the changing url.

 

Actually it does appear to refresh, but quite quickly where it appears to be continuous. The favicon logo briefly switches to a refreshing symbol and then returns to the Q logo so I guess it is refreshing?

Edited by greenace92

Share this post


Link to post
Share on other sites

No, it's not a refresh. If you open the developer tools of your browser, you'll see an Ajax request whenever new content needs to be loaded.

 

Have you looked into the history API I mentioned above?

Share this post


Link to post
Share on other sites

I briefly looked at it, saw some were obsolete and wasn't sure how "...browser session history..." applied.

 

What are these methods for? Javascript?

 

This is not huge on my list of things to implement/do but I was curious as to the driving mechanism like how it was accomplished.

 

It's nice not having to keep going to new locations for new content.

I have a scrolling project in mind that would use the same idea, loading "blocks" so to speak and adding them to the scroll feed and I could imagine how it may implement something like this. Good point about using the developer console.

 

I hate to think like "stealing" or "copying" an idea by looking at the code... but I guess in some way or another you're going to do that regardless as I'm not the first person to develop these technologies that many people use. I try to figure things out on my own or just blatantly ask how something is done or a hint.

Thanks for your input, I appreciate it.

Edited by greenace92

Share this post


Link to post
Share on other sites

The History API is the standard method for dynamically updating the URL with JavaScript. It's not obsolete in any way, and it's nothing special either.

  • Like 1

Share this post


Link to post
Share on other sites

Alright well then this seems to be what I was looking for. I was referring to History.current, History.next, and History.previous there is an obsolete sign next to them. I will get back to this post when I actually implement but I'm glad to have found more information about it thanks to your link and posts.

Share this post


Link to post
Share on other sites

You should know is not very good for bookmarking or search engines.

 

Unless you absolutely need to load dynamic content should not do this, instead use a paginated number system and single reference pages.

Is a lot of people that disable js, don't rely on it.

 

My biggest gripe is trying to see beyond a pile of content already seen using the "infinite" type loaders. You can just go to say page 20 of wanted to.

Some sites you go to are loading a pile images for each one, by the time you click a pile of times now have one extremely large page using lots of bandwidth and memory. Reminds me of old single page blogger sites.

Share this post


Link to post
Share on other sites

Can you accomplish both by paginating separately and then using one viewing page?

 

So the indexing/seo is not affected by the viewer as they are separate, the viewer just pulls files to be viewed.

Share this post


Link to post
Share on other sites

The index view would be the limited list of content and linking to a href each one either by it's id or "safe for urls" post slug

 

The pagination of that is different entirely where page 1 would be a limit of say 0-19 records, then each +1 increment page number is +20 records

You could do pagination for single post pages too if wanted to split huge data or is a multiple part data. Such as you saying including their files.

 

You should just rely on the id of the record and add the title sanitized at the end just for seo purposes, the title portion would never be required and extra at the end.

If you save posts as sanitized slugs in a database can make single pages linked directly to that. Trust me is better off linking to an id, especially same multiple titles and if need to edit those titles in the future changes the location. Using an autoincrement id will ensure are seeing only that record.

 

Do all the processing up top.

Determine if is a single page or the index.

Perform your query up top so can use that same returned data for seo and also later on for any checking and also the html content. Inject the opengraph and meta data in the head section of the html

 

If a url contains something specific to identify a single page you include either a different script or is coded in the same script using if/else or a switch

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.