Tag Archives: jquery

Using and Styling Infinite Scrolling

infinitescrolling
I came across the curious idea of “infinite scrolling” in the past week, as I searched for ways to make a Tumblr theme less annoying to browse. Especially on blog sites like Tumblr, the idea of having no page numbers to click has caught on as a way to make browsing easier–new posts and search results pop up without having to click or tap again.

Google’s Image Search and Pinterest both famously do this, as well as Facebook, Twitter, and 9gag–and those are just the websites I use most often that have infinite scrolling enabled. It’s becoming more and more popular with mobile-friendly sites especially, since scrolling on a mobile device is as simple as the flick of a finger. But I wondered whether it was really worthwhile. Should I dedicate time to learning this technique and using it on my pages, just because it’s Internet-popular?

I decided the best way to test it was to approach infinite scrolling as a user would, rather than as a designer. Read on to find out pros and cons, which sites can use infinite scrolling, and how best to style and set up your infinite scrolling layout!

Infinite Scrolling: Pros and Cons from My Experience

Pros

  • Passively taking information in has never been simpler
  • Works great when all you have to do is click briefly on something to save it for later
  • Especially easy to browse for images this way
  • Great for scanning items quickly for content

Cons

  • Can’t reliably return to your “position” in the item stream if you follow a link or click to “read further”
  • Always updates so you never get to the bottom of any results
  • Item feed usually displays one at a time, so it can get boring to search through endless data
  • Hard to find items again if you pass them by accidentally

Where Infinite Scrolling Works Best (and Worst)

If you have a website with quick blurbs of content and images, where links don’t take you out of the “stream” of information, infinite scrolling works well. This is great for news sites and some blogs–and I can see why it’s become popular with Tumblr themes, too. When you’ve got lots of posts with just a few images, a quote, or a short paragraph, infinite scrolling saves your user a lot of clicks.

But if you’ve got a website with a lot of links or in-depth content, such as this very blog you’re reading right now, infinite scrolling is definitely not your friend. Users will have a hard time searching your site for information, and every time they click to “read more,” they end up at the top of the page–very frustrating! Infinite scrolling on sites with fewer but longer posts (and/or more links to external content) doesn’t work nearly so well.

If You’re Going to Use Infinite Scrolling…

  • Make sure your posts are tagged thoroughly so that once people find one post they like, they can use its tags to find other similar posts on your site. (Example: an LOLcat picture could be tagged with “lolcat”, “cats”, “humor”, and “meme”.)
  • Use CSS to design your posts so that each one stands out on the page–make your posts’ headlines big and bold, surround each of them with a differently-colored “box” from the background. Anything you can do to separate out individual posts while people browse will help them navigate better!
  • Make your navigation either stick to the top of the page or scroll in a fixed position alongside the content. Infinite scrolling where navigation is only found at the top of the page = NOT a great idea, at all.
  • Give your users a separate “tag list” page where they can quickly scan through and see what kinds of posts you have on your site. That way, they don’t have to waste time scanning through your post stream to find things they like.

For Further Reading

jQuery4U: 5 jQuery Infinite Scrolling Demos
Awwwards: Best Infinite Scroll Websites
NNGroup: Infinite Scrolling is Not for Every Website
SmashingMagazine: Infinite Scrolling–Let’s Get to the Bottom of This
CodySherman.com: Infinite Scrolling Javascript

Query: What is jQuery?

[/shameless parody of Lt. Commander Data in blog title]

Most web designers are familiar with HTML, CSS, and Javascript–they are the most basic web languages out there, forming the foundations of what the rest of the Internet is built on. Javascript in particular can make very pretty Web sites, in the sleek Web 2.0 style with subtle animations (like tidy menus you can pull out or put away with just a click).

Alas, Javascript is generally implemented through clunky individually-written or copy-pasted scripts, some outdated and some not. Poorly-written and bloated Javascript is one of the top Web features that can slow a page’s load time, as I well know from trying to load Javascript over dialup.

But what if I told you that Javascript isn’t just a random assortment of scripts and functions anymore? What if I told you that someone was bored awesome enough to gather all that Javascript can do into a single resource that developers can draw from?

It’s called jQuery…and it rocks.

What IS jQuery, Anyway?

Basically, whatever page element you’d like to animate, manipulate, or just plain select, jQuery can do that for you, just with the addition of one file to your site directory.

Think I’m kidding? Look at the detailed list of stuff jQuery can do, according to w3schools.com:

  • HTML element selections
  • HTML element manipulation
  • CSS manipulation
  • HTML event functions
  • JavaScript Effects and animations
  • HTML DOM traversal and modification
  • AJAX
  • Utilities

What this means is that you can now do page animations without images, slide various menu “panels” in and out of place temporarily, give blocks of text or images new formatting…practically all the other stuff you’re used to JavaScript being able to do. And, you can access all of those functions through code as short and simple as this:

<head>
<script type=”text/javascript” src=”jquery.js”></script>
</head>

You no longer have to copy-paste multiple iterations of <script type=”javascript”> into the <head> section of your webpages; all those functions are right there, waiting for you to ask for them (one reason it’s called “jQuery”).

jQuery’s Syntax

To include functions, you still have to put the script reference in thesection of your document, like you’re used to doing with individual JavaScripts. However, the syntax (how you write the script itself) is a little bit different.

Code Example

<html>
<head>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).hide();
});
});
</script>
</head><body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

This example from w3schools.com, shown here for easy reference within this article.

Explaining This Code, Step by Step

First, you call for the jQuery library (the first <script> tag); that alerts the browser that “hey, we’re going to be doing something with this, so have your jQuery book open to the right page!”

Next, you start the individual script you’d like to run. In this case, the script’s function is to hide paragraphs when a button is clicked.

(Note: Before you have the script do anything else, it’s good practice to add in the “document ready” line before calling any other function in jQuery, because it gives the page time to load before the script starts running.)

After the “document ready” line, the actual script starts. This particular script selects all button elements on the page, and designates that when every button on this page is clicked, all elements will be hidden.

Changing This Script: Hiding One Paragraph

If, however, you wanted only one button on your page to do this effect, and only one paragraph to be hidden, you would change the script to the following:

$(“#click”).click(function(){
$(“#hideme”).hide();

And you would change the HTML code to the following:


<body>
<h2>This is a heading</h2>
<p id=”hideme”>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button id=”click”>Click me</button>
</body>
</html>

In this modified example, you can see that adding an ID to both elements you want the script to use will make a difference in how the script runs. Instead of all buttons hiding all <p> elements, now only the button with the ID of “click” will affect the paragraph with the ID of “hideme”. Simple, but page-changing!

Changing This Script: Hiding One Class of Paragraphs

Say you wanted one button on your page to hide all <p> elements of a specific class? You can do that, too! Just make a tiny adjustment to the “hideme” ID, changing it to a class instead:

$(“#click”).click(function(){
$(“.hideme”).hide();

Make the corresponding change to your HTML code, like so (an additional <p> element has been added so you can test how it only hides the specific class):

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is more stuff you’d like hidden.</p>
<button id=”click”>Click me</button>
</body>
</html>

More Examples of jQuery’s Abilities

You can see a couple of other examples through the w3schools website’s Try It! pages. For instance:

Fade out an element
Slide an element out of the way and back
Change the CSS of a particular element

Going Further with jQuery

If you want to learn more about the host of wonderful things jQuery can do for your webpage, the w3schools page on jQuery is a great place to start. (I’m personally going to be exploring jQuery for possible use in my domain’s next layout… :D)