Javascript loading content when scrolled to section - javascript

I had a question about a particular feature i wanted to build with javascript/jQuery.
An example of the feature can be seen in the site below:
http://nicolasbouliane.com/
If you scroll to the Example section, you can see how the content is loaded in when you get to the section and it has a transition (slides in)
How would i create something like this, or perhaps there are scripts out there?
Regards

This can be easily done using skrollr.js
https://github.com/Prinzhorn/skrollr
typical usage as simple as :
<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>
where data-number represents current scroll position.
you may also wanna try:
http://johnpolacek.github.io/superscrollorama/

Related

Animation to changing HTML page

I've been trying, for a few days, to add an animation between two different HTML pages/files (index.html -> about.html). My idea is to animate/have a transition when going from one page to the other: in my case from the index.html to the about.html page.
I found a lot of answers on Google and on StackOverflow, but the problem is that the transition happens on the same page which means that the HTML code for both pages is in the same file and my index.html becomes unreadable, especially if I am working on a project that's quite big.
I saw that Google Photos had something quite similar to what I want to achieve. Just open Google Photos and click on an image, and as you might notice, the URL changes from https://photos.google.com to https://photos.google.com/photo/PHOTO_ID and an animation occurs.
Any idea on how Google does this or how I can do it? :)
Any help would be greatly appreciated!
The solutions I'd rather avoid are:
AJAX (but it's ok if Google uses it, and I doubt they do)
Having the HTML for both pages in a single, one file.
AngularJS (I'd prefer pure JS)
( this isn't a duplicate, I'd like to know how Google did it ;) )
You could use jQuery to load an HTML file into the body. Here is some very untested pseudo code to make this boneless, single-page-app work:
jQuery
//disable link action and load HTML inside the body tag
$('a').on('click', function(){
e.preventDefault();
$('body').load($(this).attr('href'));
}
HTML
<body>
<h1>title</h1>
link
</body>
If you wish to add an animation effect, you can prepend new HTML to the body, fade the previous HTML, then remove the hidden content.
While I'm not exactly sure of the method Google uses to achieve this, I do know that many of the solutions you would like to avoid are definitely some of your greater options.
Anyhow, a hack to achieve this would be splitting the code up amongst the two pages. Set up a fade out/any animation after a link is clicked on one page and make the other page fade in/any animation after load on the destination page. This is somewhat similar to how I would do it using an XML request, it's just a bit out of general practice.
Again this is a very 'hacky' method, but it gets the job done with very minimal JavaScript code, depending on how you go about it.

Linking paginated articles to sidebar

My google fu is currently letting me down so I thought I'd ask here for some help..
I have a page that has a single article on it (url.com/article/article-headline). When you scroll down the page using jQuery it loads the next article and changes the url (url.com/article/next-article-headline).
My issue is, I have a left hand sidebar which has a list of all the articles. What I'd like to happen is to have the current article highlighted. So when you scroll down the page and the next article loads the next sidebar article title is highlighted etc etc.
If you need an example of what I mean you can see it in action on time.com
http://time.com/4010146/smartphones-dinner/ (scroll down the page and watch the URL and sidebar)
I'm really struggling to find what it's called in order to do a proper search. I guess it's something similar to scrollspy but I'm not sure. Are there any plugins that exist for this?
You need to add data-attributes to your sidebar and the article section at the main content. With the help of which you could determine the article title.
Using jQuery then add a class named "active" which would determine the current article is active and style the "active" class later just for the sidebar.
Example: .sidebar-article.active { color: #f00; }
IF you need a solution you need to also provide appropriate HTML structure and jQuery code with the help of fiddle. So that rest of the code snippet we could provide and also not harm your current code base.

Dynamic Breadcrumbs using sections of page for hierarchy

Working on creating a dynamic breadcrumb plugin using either jQuery or Javascript, and I do not have the knowledge to make it change dynamically while you scroll the page.
So we have a fixed header element, that will house the navigation and breadcrumbs.
While scrolling down the page, I would like the breadcrumb navigation element to change based on what section I am scrolling past.
Is this possible?
I appreciate any help or suggestions.
I believe this is possible. You can use <name> or <id> tags similar to the way you want to direct someone to a certain part of a page.
I would use those to determine whether an element is in the viewport or outside of it.
If you are okay with using a plugin you should go with the JQuery isInViewport plugin :
https://plugins.jquery.com/isInViewport/
You can also take a look at the raw code and change it to your liking.

Responsive Site - Load html based on dimensions

Is there any JS library that can help load different html files based on the dimensions? I guess this would be a mixture of responsive and adaptive, not sure if that's kosher.
Basically I want the site to show a different top menu on a phone.
Instead of arguing with you about how you're approaching the problem, I'll say that yes, there are JS libraries that could help you out.
There's a good writeup about enquire.js at http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/. This one lets you set callbacks for breakpoints.
Another you might be interested in is breakpoints.js which, similarly, will let you write jQuery to be executed at certain breakpoints.
Is there a reason you'd want to avoid doing this with a purely responsive design? You could include both a phone navigation and desktop navigation, then hide/show via CSS based on browser dimensions.
I agree with #Kolink's comment..
But if you want to do this anyway I would suggest enquire.js.
You will be able to do something like this:
enquire
.register("screen and (max-width:50em)", function() {
// Load top menu content 1 via AJAX.
// Show content menu 1
})
.register("screen and (max-width:40em)", function() {
// Load top menu content 2 via AJAX.
// Show content menu 2
});
The ideal situation is to load just an HTML and change the CSS rules applied to it through responsive design.
If you want to have different HTML versions, then you should redirect to another URL if the request comes from a mobile browser. Look at the following link with different recipes depending on your platform:
http://detectmobilebrowsers.com/

SEO Problems while using Pagination technique

i created a video photo library / video library, there i have many rows where i places the icons against video or Image, & because of the length of the page i used the jquery pagination technique, Now i have 2 problems (1) SEO Problem, if anyone search any data that i have on the other than the 1st page, it shows in search engine & when user click on that link it land on the 1st page, not on the relevant page, (2) when user click on the next page, the view will stile on the pagination i want it goes on the top of the page or top of the table,
Link of that page "http://funswith.com/Multimedia/Video/Indian-Songs.html#pg=1"
any one can help me in this situation?
Thanks In Advance.
Have a read of Making Ajax Applications Crawlable as written by google.
In brief: Instead of www.example.com/ajax.html#key=value use www.example.com/ajax.html#!key=value as your scheme.
Then respond appropriately to requests in this format: www.example.com/ajax.html?_escaped_fragment_=key=value
To solve your scrolling issue, you'll want to add just one line of code to pager.showPage(). To scroll to the top of the table, add this line:
document.getElementById(tableName).scrollIntoView();
Or, to scroll to the top of the page, add this line:
scrollTo(0, 0);
For the SEO work, follow wombleton's advice.
See that your url container fragement #pg=1 by default when you point to such link it will move your view there. As an workaround you can write window.scroll(0,0); on your page to always be on top. For your SEO problem it seems like a usability problem which has to be resolved using some design changes. Also doesnot your search results give the url as
http://funswith.com/Multimedia/Video/Indian-Songs.html#pg=4
http://funswith.com/Multimedia/Video/Indian-Songs.html#pg=3
i mean the page numbers.

Categories