Main Content Areas:

Welcome to JavaScript Kit, a comprehensive resource for JavaScript tutorials, scripts, and more.

JavaScript Kit- What's New?

Youtube Player API and creating a simple Youtube lightbox

See how to create a simple Youtube video lightbox, by first creating a responsive and vertically centered Youtube iframe, then using Youtube URL parameters and the Youtube Player API to control it.

JK Responsive Youtube and Image Gallery v2.0

JK Responsive Gallery has just been updated to v2.0, which adds support for Youtube videos! The script lets you display a single or group of images/ Youtube videos in a lightbox that's responsive and mobile friendly.

Understanding JavaScript's requestAnimationFrame() method for smooth animations

requestAnimationFrame() is a JavaScript method for creating smoother, less resource intensive JavaScript animations. See how to take advantage of this method in this comprehensive tutorial.

Determining how much the user has scrolled the page using JavaScript or jQuery

Learn how to detect the amount the user has scrolled the page using JavaScript or jQuery, in either pixels travelled or as a percentage of the whole page.

Using CSS3 keyframe animation to create a swinging image

In this short tutorial, we'll see how easy it is to create an image that swings like a pendulum continuously using CSS3 keyframes animation.

Displaying RSS feeds using YQL, a Google Feed API alternative

This tutorial looks at how to use Yahoo's YQL service as an alternative to the now defunct Google Feed API to quickly display RSS feeds from external sources using JavaScript only.

JavaScript Kit Try-It Editor

Use our new online editor to quickly try out any HTML, CSS, or JavaScript code. Bye bye page reloads!

Reading and copying selected text to clipboard using JavaScript

In this tutorial, we'll see how to read the textual contents of a user selection, dynamically select some text on the page, and last but not least, copy whatever is selected to clipboard, all using just JavaScript. It's certified Flash free!

Beginner's Guide to JavaScript Promises

JavaScript Promises are a new addition to ECMAscript 6 that aims to provide a cleaner, more intuitive way to deal with the completion (or failure) of asynchronous tasks. In this tutorial we'll deliver the promise of JavaScript Promises to the uninitiated!

Creating a sticky header bar using jQuery and CSS

A hot trend in web design these days is the use of sticky headers, where the header becomes temporarily fixed on the page whenever the user starts to scroll past it, keeping the element in view. In this tutorial we'll dissect the making of a well engineered sticky header using jQuery and CSS.

Overview of JavaScript Arrow Functions

One of the exciting new additions to ECMAscript 6 is Arrow Functions, a compact way to define anonymous functions that also simplifies the handling of the "this" object inside it. In this tutorial we'll go over all you need to know about the new function syntax before it supplants anonymous functions everywhere.

Creating an off-canvas side menu using CSS3 (and a touch of JavaScript)

In this tutorial, we'll see how to create the iconic off-canvas side menu from scratch using CSS3 only, and with the help of a little JavaScript, polish it off so it's fully ready for real world use.

Fixing mobile usability issues to comply with Google- a quick start guide

A site's mobile usability will now play an important role in how well your site ranks on Google for mobile searches. In this quick start guide we show you how to quickly address the key mobile issues that result in a failing grade for Google, and also, tips on taking your site a step further to become fully responsive.

Matching multiple CSS media queries using window.matchMedia()

A common question that gets asked is how to use JavaScript's window.matchMedia() method to react to multiple CSS media queries. In this tutorial we explore how.

Overview of CSS3 multiple column layout

CSS3's multi-column module magically divvies up any piece of content across the desired number of columns, creating that elegant newspaper layout. In this tutorial we'll take a look at how it all works, and also, creating responsive CSS3 columns.

A pure CSS Before and After image effect

In this tutorial we'll see how some careful stacking of two images in CSS can make way for a quick "before" and "after" image effect, whereby moving the mouse over the image container peels back one image to reveal another.

Creating a basic parallax scrolling effect using CSS and JavaScript

Parallax scrolling is a visual technique where elements on the page move or animate at different speeds as the user scrolls the page, creating depth and visual intrigue. This tutorial walks you through how to create a simple parallax scrolling effect using CSS and JavaScript.

Creating a live CSS clock using CSS3 and requestAnimationFrame()

Pure CSS only interfaces are all the rage these days, so lets explore that concept with our very own CSS3 clock, then see it come to life using some JavaScript.

Manipulating CSS3 transitions using jQuery

In this tutorial we look at how to use jQuery to dynamically modify CSS3 properties and react to when a transition has completed. It's the key to injecting logic to your transitions!

Introduction to Touch events in JavaScript

In this tutorial lets get touchy feely with JavaScript, by examining its touch related events and how they are used to detect and respond to touch and swipe events.

Setting CSS3 properties using JavaScript Updated

With the numerous CSS vendor prefixes one has to contend with when it comes to defining CSS3 properties such as -moz-box-shadow or -webkit-border-radius, setting them in JavaScript can be even more confusing. This tutorial looks at how to how to streamline the setting of CSS3 property values in JavaScript, by checking for and targeting only the version of a CSS3 property the browser supports. Updated with new section "Creating a generic CSS3 property retriever function".
More Additions

Introduction to CSS media queries

With today's challenge of building webpages that look right in the myriad of different devices comes CSS media queries, a nifty CSS feature that builds upon CSS Media types of CSS 2.1 to help you easily cater your page based on the aforementioned factor and more.

Going beyond cookies- Using DOM sessionStorage and localStorage to persist larger amounts of info

HTML5 introduces DOM Storage, a new way of storing data on the client side that overcomes the disk space limitations of JavaScript cookies. This tutorial looks at how to take advantage of DOM Storage in browsers today.

Using document.createElement() to test for browser support for an element

Most of us are familiar with using object detection or the Navigator object to check for backing for a given JavaScript object or method, but these techniques do not work well when the objective is to check whether the browser supports a particular HTML element, such as the <canvas> element. This is where document.createElement() can be very helpful.

The onmousewheel event of JavaScript

The onmousewheel event fires whenever the user moves the mouse wheel either upwards or downwards, and can provide yet another way for users to interact with your JavaScript. In this tutorial, lets see how to take advantage of onmousewheel across browsers.

Getting global and external style sheet values in DHTML

This useful tutorial looks at how to use DHTML to retrieve inherited CSS property values from global and external Style Sheets.

Overview of CSS3 Structural pseudo-classes

There are some new classes this Fall, CSS3 Structural pseudo-classes that is. Learn about how they let you select and style child elements of a container based on a variety of generic criteria such as the odd and even rows of a table.

Performing GET and POST requests using Ajax

Ajax, once stripped of all its fanciness, basically describes just two things- performing "GET" and "POST" requests asynchronously. This tutorial explains Ajax frankly and gently, while also covering the important topics of fetching XML and JSON files using Ajax.

Dynamically loading an external JavaScript or CSS file

External JavaScript or CSS files do not always have to be synchronously loaded as part of the page, but dynamically as well. In this tutorial, we'll see how to load, remove, and replace external JavaScript and CSS files on demand and asynchronously. It the era of Ajax, it's a handy thing to know.

Sorting an JavaScript array using array.sort()

See how to harness the sort() method of JavaScript to sort an array alphabetically, numerically, or even shuffle the array elements.

Displaying RSS feeds easily using Google Ajax Feed API

Displaying RSS feeds from other sites on your own is a nice way to show constantly updated content automatically. In this tutorial, we show you how to use Google Ajax Feed API to display RSS feeds from other sites on your own easily and without hosting the files on your own server.
"Learning jQuery (Packt Publishing)" book review We review "Learning jQuery", a book aimed at introducing new comers to the jQuery framework.
Plus Size image viewer
This script automatically adds a caption beneath the images of your choice that when clicked on launches a "plus size" version of the image.
Scripts/ Tutorials
JavaScript Tools:
Site Info
Our Supporters

CopyRight (c) 2016 JavaScript Kit. NO PART may be reproduced without author's permission. Contact Info