52 Lessons To Learn And Code

Wait For iFrame To Load jQuery

February 5

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...

How To Reverse jQuery SlideUp And SlideDown

September 15

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...

How To Create A Show Password Button

March 21

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...


Using The jQuery .each() Function

February 22

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...


jQuery .html() Get Containing Element

January 21

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...

jQuery Build Dropdown From AJAX

July 12

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...

Add Delete Confirmation Modal To Form With jQuery

April 13

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...

Load Scripts Dynamically With jQuery

June 4

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...


Adaptive Backgrounds jQuery Plugin

February 21

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...


jQuery Copy To Clipboard

February 17

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...


Changing The Element Size With jQuery

December 18

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...

Create Password Strength Indicator With jQuery

July 22

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...


How To Find Events Bound To An Element With jQuery

May 28

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...


Lazy Load Social Media Buttons

May 27

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...


Add Google+ Comments To Any Website

April 27

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...


Display Disqus On Click Event

April 4

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...


Create An Interactive Metro Style Grid Dashboard

March 11

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...


Using jQuery In The WordPress Admin Area

January 8

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...


Create Google Maps With gmaps.js

December 12

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...


Create Your Own Share Buttons With Sharrre

December 10

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...


Handle Keyboard Shortcuts With Mousetrap.js

November 5

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...

Javascript Full Screen API

October 22

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...


Get Ready To Load Different Versions Of jQuery

October 8

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...


Manipulate The Favicon With Tinycon

August 20

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...


Working With Cookies In Javascript

July 18

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...


Create Always On Page HTML Elements

May 24

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...


Create A Real E-Book With Turn.js

May 5

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...


Using Social Media Hovercard jQuery Plugin

April 4

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...


No More Powerpoint I Have Impress.js

March 14

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...


How To Create Nice Looking Dropdowns Using DropKick.js

March 12

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....


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

March 5

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...


Get First X Number Of Elements With jQuery

March 1

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...


How To Use The jQuery Load Method

February 23

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...


Get Select Box Value With jQuery

February 12

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.


12 Annoying jQuery Functions

February 9

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...


Smooth Scrolling To Internal Links With jQuery

January 23

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...


Handle Image Loading Errors With jQuery

January 21

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...


How To Disable Enter Key On Forms

January 10

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...


How To Work Out Distance Between Mouse And Element

January 6

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...


Fallback on Local jQuery If CDN Fails

December 29

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...


How To Create An Animated Scroll To Top Button With jQuery

December 20

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...


Toggle Show/Hide HTML Element

December 6

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...


Build A jQuery Image Gallery

November 28

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...


How To Build A Slideout Feedback Form In jQuery

November 18

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...


Switch Stylesheets With jQuery

November 14

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...


How To Create A Simple Modal Box With JQuery

September 24

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...


Create Sticky Notes To-Do List In CSS And JQuery

September 9

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...


Validate Date Of Birth And Set Age Limit In jQuery

September 7

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...


Process Each Node Of XML In JQuery

June 20

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...


How to check if checkbox is checked using jQuery

April 1

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...


Add and Remove Options in Select using jQuery

February 20

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...


Check to see if a element exists in jQuery

February 5

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...