Home > Categories > jQuery
Page 1

How to create a sticky sidebar

A look we’ve seen utilized on a lot of sites recently is the sticky sidebar. That’s a sidebar that scrolls normally until it reaches the top of the screen, at which point it attaches itself to top of the viewport until you scroll back up the page. It’s an interesting piece of usability because it keeps the user in contact with a particular piece of navigation (often social media buttons). So today, we’re going to have a look at building a sticky sidebar using some simple jQuery and CSS. The HTML The...
Read more

Introducing touchSwipe

There are jQuery plugins for every type of interaction we have with the browser and they are much appreciated, but one thing that has been lacking when it comes to interactions is the type of interaction we have with our mobile devices. We can now create full blown mobile apps using only HTML, CSS and JavaScript but in order to make a fully functional app we need to be able to listen for the swipes and pinches of the user, and that’s where touchSwipe comes in. Using the plugin The first we need to do in order...
Read more

How to create a filterable gallery with jQuery

We see filterable galleries in plenty of portfolios, they're a nice and tidy way of showing off different categories of work without forcing the user to review everything. We're going to build a filterable gallery using the data attribute that came with HTML5, this way we don't have to tie everything up with classes. If you want a better idea of what we will be creating, here's a demo. The data attribute  I mentioned in the introduction that in this tutorial we will be using the data attribute,...
Read more

jQuery plugin for caching forms using HTML5 local storage

Have you ever started filling out a form or blog post only to have your session to expire or your browser to crash losing all of your work in the process? HTML5 introduced the concept of browser storage mechanisms. HTML5 storage has the ability to store string values in either local or session variables. The localStorage variable can persists across sessions and can be of any size. This behavior is similar to a cookie, however it does not suffer from the same limitations. In this tutorial we'll be utilizing...
Read more

Creating a Completely Customized Google Map Plugin for jQuery

Last week I briefly touched on the customization possibilities of Google Maps, this week we'll be taking a more in depth look at what exactly you can customize. The options available include customization for all aspects of the map such as: Roads Points of Interest e.g. Schools, Parks and Hospitals Methods of Transport Water Landscape features e.g. Man made or Natural This covers not only custom colors, but the icons and text associated with each element. Getting Started This tutorial is a follow on...
Read more

Adding a custom icon to a Google Maps Marker

I've used the Google Maps API a few times over the last while and one thing that I've never really touched on is it's fantastic customization options. You can pretty much style or customize everything. In this quick post I'll show you how to change the default marker (or pin) to something else. This is handy if you want to display your company logo or some other icon on the map. I'll also detail the other configurable options that you can change in the google.maps.Marker class. Getting Started We saw earlier...
Read more

HTML5 Geo-location API and Google Maps API

In this weeks tutorial we'll be creating a jQuery plugin that serves as an introduction to the HTML5 Geo-location API to request your current location. Once we have the location, we will then draw a route from there to Dublin, Ireland (or wherever you tell it to) using the Google Maps API. This could be used in a HTML5 web application or on a site to tell your customers how to get to you. Getting Started First of all we'll need to create our jQuery plugin wrapper. The $.extend function will allow us to provide...
Read more

Automatically generating a table of contents with a smooth scroll effect

Ever written a long article worthy of a table of contents and decided not to do it because it's just too much hassle? This week we'll be writing a jQuery plugin that will automatically search for your headings and create a table of contents based on them for your blog post. We'll also be adding a smooth scroll effect, so that when a user clicks on an entry they are brought to the right section. I know a table of contents is a bit of an unusual topic for a tutorial, but if you're writing a help file for your product,...
Read more