www.javascriptkit.com Open in urlscan Pro
50.31.114.161  Public Scan

URL: http://www.javascriptkit.com/
Submission: On February 21 via api from US — Scanned from DE

Form analysis 1 forms found in the DOM

GET http://www.javascriptkit.com/search/search.php

<form id="jksitesearch" method="get" action="http://www.javascriptkit.com/search/search.php" class="zoom_searchform">
  <input type="text" name="zoom_query" id="zoom_query" size="20" value="Search JavaScript Kit" class="zoom_searchbox">
  <input class="zoom_button" type="image" src="http://www.javascriptkit.com/jkincludes/search.gif" title="Search JK">
  <input name="zoom_per_page" id="zoom_per_page" type="hidden" value="10">
  <input name="zoom_and" id="zoom_and" type="hidden" value="1">
  <input type="hidden" name="zoom_sort" value="0">
  <div id="jksitesearch_cat">
    <b>Categories:</b> <input type="checkbox" name="zoom_cat[]" value="-1" id="searchall" style="margin-left: 5px"><label for="searchall">All</label> <input type="checkbox" name="zoom_cat[]" id="javascriptssearch" value="0"><label
      for="javascriptssearch">Free JS/ Applets</label> <input type="checkbox" name="zoom_cat[]" id="tutorialsearch" value="1"><label for="tutorialsearch">Tutorials</label> <input type="checkbox" name="zoom_cat[]" id="referencesearch" value="2"><label
      for="referencesearch">References</label>
  </div>
</form>

Text Content

Categories: All Free JS/ Applets Tutorials References
 * Home
 * Free JavaScripts
 * Tutorials ▼
 * References ▼
 * Developer Courses
 * CSS Examples

JavaScript Tutorials DHTML/ CSS Web Building Tutorials
JS Reference DOM Reference CSS Reference



MAIN CONTENT AREAS:

 * Free JavaScripts
 * JavaScript Tutorials
 * Developer/ CSS Tutorials
 * Web Design Tutorials

 * JavaScript Reference
 * DOM Reference
 * Web Developer Courses
 * Free Java Applets

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


JAVASCRIPT KIT- WHAT'S NEW?


HOW TO SET UP YOUR DESK AS A PROGRAMMER FOR MAXIMUM PRODUCTIVITY

See the best, most relevant frontend courses online to take to succeed as a
frontend developer in 2019 and beyond.


BEST DEVELOPER FRONTEND COURSES

See the best, most relevant frontend courses online to take to succeed as a
frontend developer in 2019 and beyond.


CREATING A CLEAN CSS COMPARISON TABLE WITH CSS FLEXBOX

In this tutorial I'll show you how to create a responsive CSS comparison table
using nothing but UL lists and CSS flexbox.


SMOOTH SCROLLING HTML BOOKMARKS USING JAVASCRIPT (NATIVELY OR JQUERY)

See how to use native JavaScript to create smooth scrolling HTML bookmark links
inside the page, and for those that need legacy browser support, using jQuery
instead. This promises to be one smooth tutorial!


CREATING AN EQUAL HEIGHT PRICING TABLE USING CSS FLEXBOX

In my opinion, pricing tables are the effective way to quickly capture and
convey to potential customers your services and the benefits at a glance. See
how easy it is to create an equal heights, responsive CSS pricing table using
the power of CSS Flexbox.


WEB ANIMATION API- UNLEASHING THE POWER OF CSS KEYFRAMES IN JAVASCRIPT

Animate elements in JavaScript using the power of CSS keyframes animation with
the Web Animation API! In this tutorial, I'll introduce you to WAAPI, browser
support and polyfill, and how to start using this awesome API today.


TOP FIVE FEATURES IN JAVASCRIPT ES6 WORTH MASTERING

JavaScript ES6 adds a slew of new features to the JavaScript language, some more
groundbreaking and widely applicable than others. In this article I list the top
5 JavaScript ES6 features I find most indispensable.


UNDERSTANDING LET AND CONST IN JAVASCRIPT ES6

Get to know all about "let" and "const" in JavaScript ES6, and how it differs
from the age old "var" keyword in defining variables.


DISPLAYING CONTENT IN FULL SCREEN USING THE FULLSCREEN API IN JAVASCRIPT

See how to open up any content on your page in full screen mode with just a few
lines of JavaScript using the Full Screen API.


LOWERCASE, TITLE AND SENTENCE CASE CONVERTER TOOL

This is a simple online JavaScript tool to easily convert a string to lowercase,
uppercase, title, capital, or sentence case, depending on your needs.


INTRODUCTION TO JAVASCRIPT ASYNC FUNCTIONS- PROMISES SIMPLIFIED

See how to use JavaScript async functions with JavaScript Promises to further
simplify asynchronous operations in JavaScript, and produce code that's easier
to read and debug to boot.


INTRODUCTION TO CSS VARIABLES

A comprehensive introduction to CSS Variables, which is a new browser feature
that lets you store and reuse CSS values in your CSS. Unlike variables in CSS
Preprocessors, CSS variables are live, and accessible using JavaScript.


CREATING A SLICK, ANIMATED FULL SCREEN SEARCH FORM WITH CSS3 AND JAVASCRIPT

The trend for search boxes these days has been bigger and bolder. This tutorial
shows how to create a slick, well engineered full screen search form that works
beautifully across all modern browsers and devices.


FOUR ESSENTIAL JAVASCRIPT FUNCTIONS TO TAME CSS3 TRANSITIONS AND ANIMATIONS

See four JavaScript functions that help you unlock the full potential of CSS
Transitions and Animations, by pausing them, detecting when they've finished
playing, and more.


DISPLAYING THE LOCAL TIME OF ANY CITY USING JAVASCRIPT AND GOOGLE TIME ZONE API

This tutorial looks at how to use Google Time Zone API to reliably display the
local time of any city or location in JavaScript.


CREATING A SIMPLE PAGE TRANSITION USING CSS AND JAVASCRIPT

See how to build a simple but sleek page transition using CSS3 transitions and
animation that appears while a page is loading.


4 NOVEL WAYS TO DEAL WITH STICKY :HOVER EFFECT ON MOBILE DEVICES

CSS's venerable :hover pseudo class presents a bit of a conundrum on touch
screen devices, where the :hover style stays with the element the user just
tapped on until he/she taps again elsewhere in the document. This tutorial looks
at 4 creative ways to deal with "sticky hover" effects on mobile devices.


CSS FLEXBOX 101- INTRODUCTION AND SAMPLE PATTERNS

In this tutorial, I'll go over the key elements that make up CSS Flexbox, plus
show you some common Flexbox patterns to validate its usefulness. After this
leisurely read you'll wonder how you ever went by so long without flexing.


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.


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.


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!
More Additions


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.


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.


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.


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.
Features
"Learning jQuery (Packt Publishing)" book review We review "Learning jQuery", a
book aimed at introducing new comers to the jQuery framework.

Features
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
 * Free JavaScripts
 * JavaScript Tutorials
 * DHTML Tutorials
 * Web Design Tutorials
 * Java Applets

References
 * JavaScript Reference
 * DOM Reference
 * IE Filters/ Transitions Reference

JavaScript Tools:
 * Try it Code Editor
 * LowerCase Convert
 * Password generator
 * Popup Window generator
 * onMouseover whipper
 * Combo box whipper
 * HTML Validation Tool

Site Info
 * Advertising Info
 * Submit a script
 * FREE Newsletter
 * Email Us
 * Privacy Statement
 * Follow Us
 * Facebook Fan Page

ads by BSA



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