52 Lessons To Learn And Code

Wait For iFrame To Load jQuery

Recently I've had a project that needed to do some work in JavaScript on code within an iframe. The problem I was facing was that the website inside the iframe...

February 5

How To Reverse jQuery SlideUp And SlideDown

By default jQuery slideDown will obviously slide the element down to display the contents and slideUp will slide the element up to hide the contents. What if you want to...

September 15

How To Create A Show Password Button

In this tutorial we're going to have a quick look at how you can create a show password button on your register or login forms. When you're creating a register...

March 21


Using The jQuery .each() Function

In this article we're going to look into the usage of the jQuery each() function which will allow us to loop through different datasets such as arrays or objects. jQuery...

February 22


jQuery .html() Get Containing Element

Whenever you need to get all the contents of a HTML element in jQuery you can use a handy function .html(). See the demo above for a demo of how...

January 21

jQuery Build Dropdown From AJAX

In a recent project I had to correct a lot of AJAX requests that will populate a HTML select dropdown, in this post I'm going to show you a quick...

July 12

Add Delete Confirmation Modal To Form With jQuery

In this tutorial we are going to learn how you will add a confirmation modal box to your forms for things like deleting. Most tutorials I've seen on this only...

April 13

Load Scripts Dynamically With jQuery

A common tactic to help speed up your website is to use a technique called lazy loading which means that instead of loading everything your page needs at the start...

June 4


Adaptive Backgrounds jQuery Plugin

I recently found a good resource for changing the background colour of a containing div. This is a jQuery plugin that will search for the most dominating colour in an...

February 21


jQuery Copy To Clipboard

This tutorial is now out of date. I advise you to sue the default browser copy and paste functionality you can find out more information here Javascript copy and paste...

February 17


Changing The Element Size With jQuery

When you are changing the size of an element using jQuery there are two methods that you can use to change the size. First you can use the .css() method...

December 18

Create Password Strength Indicator With jQuery

With security being the biggest problem for most websites it's important to make websites as secure as possible. But after all the precautions a developer can do with their code...

July 22


How To Find Events Bound To An Element With jQuery

In this tutorial we are going to investigate ways you can tell what events a certain element has bound to it. This is really useful when you need to debug...

May 28


Lazy Load Social Media Buttons

With the page loading speed being so important to a websites success you need to try to speed up all areas of your website as much as possible. One of...

May 27


Add Google+ Comments To Any Website

On the 18th April 2013 Google announced that they have made a Google Plus commenting system which you can have on your website just like the Facebook comments. This allows...

April 27


Display Disqus On Click Event

I have recently redesigned Paulund and it was design to concentrate on page loading speeds, I wanted to make Paulund load as fast as possible. There are lots of things...

April 4


Create An Interactive Metro Style Grid Dashboard

Since Windows 8 released it's first pictures of the new design, people have been going crazy over the metro style. People love it, it's modern, it's clean, it's simple and...

March 11


Using jQuery In The WordPress Admin Area

When you are coding in the WordPress admin area, there may be times when you want to code some functionality which requires Javascript. Wordpress comes with an inbuilt Javascript library...

January 8


Create Google Maps With gmaps.js

How To Use GMaps.js GMaps is a javascript plugin that makes it really easy to use Google Maps to display a map to your user. There are multiple options that...

December 12


Create Your Own Share Buttons With Sharrre

People are now members of multiple social networks be it Facebook, Twitter, Google Plus, Linkedin etc. All of these social networks have created their own button which makes it really...

December 10


Handle Keyboard Shortcuts With Mousetrap.js

Mousetrap.js is a javascript plugin that makes it easy to setup keyboard shortcuts for your web applications. It allows you to define functions to run on certain key pushes, you...

November 5

Javascript Full Screen API

The full screen API is an easy way to get the full web content to be displayed on the page. It's very similar to pressing F11 on your keyboard but...

October 22


Get Ready To Load Different Versions Of jQuery

If you have done any sort of front-web development the you will understand the benefits that jQuery can bring you when developing your websites. One of the best benefits of...

October 8


Manipulate The Favicon With Tinycon

When you get alerts and notifications from Facebook, twitter or your email client depending on the browser you will be alerted of new activity. An example of this is if...

August 20


Working With Cookies In Javascript

Cookies are variables of temporary data which is stored on the visitors computers. They are normally used for things like remember my username on a login form. This can be...

July 18


Create Always On Page HTML Elements

A common trend in web design now is to make sure important content is always on screen by making the content move as you scroll down the page. Many websites...

May 24


Create A Real E-Book With Turn.js

In today's tutorial we are going to see how we can create a "real" ebook by using the jQuery plugin turn.js. Using this jQuery plugin you can create a real...

May 5


Using Social Media Hovercard jQuery Plugin

Displaying your social media account on your website gives them great exposure to your accounts and allows your readers to easily follow you on the different social networks. There is...

April 4


No More Powerpoint I Have Impress.js

In this tutorial you will learn how you don't need to use the old powerpoint presentation software now we have Impress.js. What Is Impress.JS Impress.js is a presentation framework which...

March 14


How To Create Nice Looking Dropdowns Using DropKick.js

In today's tutorial we are going to use a nice jQuery plugin which will change the style of your select boxes by converting them to use divs and list items....

March 12


How To Create An Exchange Rate Money Converter With Money.js

Update: 19/10/2012 You now have pay for the open exchange rates API. If you want to use this code on any future projects you will need to signup for an...

March 5


Get First X Number Of Elements With jQuery

Here is a quick snippet for getting the first lot of elements from a jQuery object. Lets say you want to get the first 5 paragraphs on a page then...

March 1


How To Use The jQuery Load Method

In today's tutorial we are going to learn how to create a small web application that will display an RSS feed on a web page using jQuery and PHP. To...

February 23


Get Select Box Value With jQuery

Use the following jQuery snippet to get the value of the selected option in the select box. First create a new jQuery function Then create your select box.

February 12


12 Annoying jQuery Functions

You will always come across websites that add some code in to try and stop you from doing things on there website, but the things they are trying to stop...

February 9


Smooth Scrolling To Internal Links With jQuery

jQuery allows you change the way you interact with your website with very little code. jQuery has an animate function which allows you to animate anything that jQuery does, including...

January 23


Handle Image Loading Errors With jQuery

If an image can't load correctly in the browser it will do a number of things depending on what browser you are using. It will either display a ? question...

January 21


How To Disable Enter Key On Forms

On HTML forms if you are filling out a text box and press the enter key it will submit the form, even if you haven't finished filling in the rest...

January 10


How To Work Out Distance Between Mouse And Element

In the tutorial today you will learn how you can use jQuery to get the distance of the mouse from a certain element on the page. This bit of code...

January 6


Fallback on Local jQuery If CDN Fails

Many big websites are now offering CDN services for things like jQuery. Google offers a few of the biggest Javascript libraries from their own CDN network. Microsoft also allows you...

December 29


How To Create An Animated Scroll To Top Button With jQuery

Creating a good user experience on your website is very important to keep people on the page. The best way to create a good user experience is to make it...

December 20


Toggle Show/Hide HTML Element

Below is different ways you can show or hide content. Javascript Is a function using raw Javascript which is passed an ID of a HTML element. We then use the...

December 6


Build A jQuery Image Gallery

Displaying images galleries on your web pages can be very complicated, much like the jQuery modal boxes, today you will learn a very simple way to create a nice looking...

November 28


How To Build A Slideout Feedback Form In jQuery

Demo Download You may have seen this before on many sites but it's a feature which I like and I have been asked how you would implement this feature. In...

November 18


Switch Stylesheets With jQuery

Jquery makes it very easy to manipulate the the DOM, this makes it so easy to change any element on your webpage. One of those elements is the reference to...

November 14


How To Create A Simple Modal Box With JQuery

There are loads of plugins out there to use for a modal box but some of over complicated for this simple task of showing a message on the screen in...

September 24


Create Sticky Notes To-Do List In CSS And JQuery

In this tutorial you will learn how you can create your own simple To-Do list using CSS and JQuery. First you will design the To-Do list, this is going to...

September 9


Validate Date Of Birth And Set Age Limit In jQuery

Using jQuery you are able to easily work out the age of a person by the date of birth. If you can work out the age you can add a...

September 7


Process Each Node Of XML In JQuery

JQuery is a very useful tool to use to loop through elements, this is because of the each function. It will loop through each of the elements it has in...

June 20


How to check if checkbox is checked using jQuery

I needed to find if a checkbox was checked in jquery but I knew of multiple ways to do this. But I wasn’t sure of the best way to perform...

April 1


Add and Remove Options in Select using jQuery

Removing an item from a select box using jQuery JQuery is a easy way of using JavaScript reducing the time it takes to code and reduces the amount of lines...

February 20


Check to see if a element exists in jQuery

In raw javascript using when dynamic elements you need to check to see if the element exists before you perform a certain action to the element or you will get...

February 5