How to Add a “Reading Mode” to Your Posts

57

Reading Mode Preview

In this post, I will show you a simple way to add a distraction-free “Reading Mode” to your blog. You can see the end result on this Reading Mode demo site (Click the highlighted “Reading Mode” link).

The purpose of adding a feature like this is to enable a visitor to remove all the clutter of your site, and focus solely on the post itself.

In an ideal world; there would never be a need for such a feature. In reality though, sites have numerous other goals to achieve, such as brand building, serving ads, promoting other content etc. In this way, you can compromise between the two. Do what you need when the user first arrives, but get out of the way when they decide what to read.

Read More »

How to Make a Floating Share Box

198

Floating Share Buttons

This is one of the most common questions I get asked; how do you make a floating box with share links?

Today, we’re going to see just how simple it can be. We will:

  • Set up the current trinity of search (Facebook, Twitter, +1).
  • See how to make sure they share the right URL.
  • Align the box to the bottom left of the user’s browser.
  • Hide the box if the user’s browser is too small (So it never overlaps our content).

You can see the demo site here (Try resizing your browser smaller).

Read More »

Validate Forms in WordPress with jQuery

91

Validate WordPress Forms with jQuery

Update (1 Feb 2013): I’ve updated the script here, primarily to jump to the latest version of the bassistance plugin.

This article will teach you how to add validation to your WordPress comment forms, using jQuery.

With validation, users can submit their comment and instantly see if they’ve hit an issue. There is no need to submit the page and get WordPress’ default “There is a problem…” page. Instead, errors are displayed inline instantly.

In our example, we will build a plugin which you can drop into any theme and will work instantly.

Just like last week, you can see the finished product in action on the demo site. And you can download the completed files here.

Read More »

Load Next WordPress Posts With AJAX

253

AJAX Load Posts

Today, we’re going to replace the standard “Older Posts” links on your blog. Our plugin will create a button to instantly load the next page of posts, without reloading the page (Similar to what Twitter used to do at the bottom of profiles)

Click here to load the demo site and see the final project in action.

You can also download the completed files as a plugin here (Just upload and activate it).

Read More »

Add a jQuery DatePicker to Event Posts {WP}

68

jQuery Events DatePicker in WordPress

In previous posts, we set up an events system for WordPress. Users could enter the date of an event, and we had great archives for displaying and categorizing them.

Today, we want to improve the admin end of things. Instead of using custom fields, we’ll make a box for the event’s date, and use jQuery to let users pick the date from a calendar.

Read More »

30 Pro jQuery Tips, Tricks and Strategies

139

Whether you’re a developer or a designer, a strong jQuery skillset is something you can’t afford to be without. Today, I’m going to show you 30 handy jQuery coding tricks that will help you make your scripts more robust, elegant and professional.

Getting Started

These tips and tricks all have one thing in common- they are all smashingly useful. With this stuff in your back pocket, you’ll be ready to go change the world, and even better, write jQuery like you know what you’re doing. It’s gonna be fun.

Read More »

50 jQuery Tools for Awesome Websites

131

compleate-jquery

By now, everyone has heard of jQuery. It’s a framework that makes JavaScript development much easier, and has become massively popular for adding JavaScript functionality to websites.

In this post, we’ve picked out 50 of the best scripts we know of and talked about why they rock. They can help in just about any aspect of a website, so enjoy!

Read More »

Page 1 of 212