Javascript | Free web design resources for designers & web developers | Page 4 of 21

TinyBox – a Lightweight and Standalone Modal Window Script

/ 0 Comments / Category: Javascript/Tags: Ajax scripts

TinyBox is a lightweight (3.5kb) and standalone modal window script – does not depend on any JavaScript frameworks.

At only 3.5KB it doesn’t include any slideshow capabilities built-in but allows for any AJAX or HTML content. It can also be used for images and auto hiding alerts. The popups fade in/out and dynamically size based on the content if enabled. The styling is completely customizable through the simple CSS.

Click here for the TinyBox demo

Page Peel Effect with jQuery

/ 0 Comments / Category: Javascript, jQuery/

Simple Page Peel Effect – tutorial on how to create page peel effect with jQuery and CSS, where you can peel a corner of a website and see a message underneath.

The concept is very simple and may come in handy one day.

View Example

Tokenizing Autocomplete Text Entry – jQuery Plugin

/ 0 Comments / Category: Javascript, jQuery/

Tokenizing Autocomplete Text Entry – a jQuery plugin to allow users to select multiple items from a predefined list, using autocompletion as they type to find each item.

Features:

Layout is easily customisable and fully controlled in CSS
Result caching reduces server load
Smooth animations when results load
Select items using the mouse or keyboard
No images required, just the plugin’s .js file and some CSS

Live Demo

jQuery Image Rotator with Description

/ 0 Comments / Category: Javascript, jQuery/

Create an Image Rotator with Description – a tutorial on how to create an image rotator with jQuery and CSS.

This tutorial will help you understand how the image rotator works and helps you create your own from scratch.

View Demo

Do keep in mind these jQuery driven image rotators do not degrade in the best fashion. When you disable JavaScript, each thumbnail must be clicked on to get the larger image.

s3Capcha jQuery plugin

/ 0 Comments / Category: Javascript, jQuery/

s3Capcha jQuery plugin – inspired by Fancy Drag and Drop Captcha we mentioned here at V-B.

s3capcha is advanced captcha script that is based on choosing the right image instead of writing hardly readable letters and numbers.

It is very easy to use, just include the jQuery library then include the s3Capcha javascript in the head of the page(s). s3Capcha source files are available for download with 2 icon sets and s3Capcha example.

View Demo.

Create a Vertical Sliding Menu using jQuery

/ 2 Comments / Category: Javascript, jQuery/Tags: Menus

Sliding jQuery Menu – learn how to create animated sliding menus using jQuery.

jQuery animates this vertical sliding menus. When the button is clicked it rolls out a box full of links, when the button is clicked again it rolls back in.

You can style all menu elements via CSS. Tutorial source files with sliding menu example are available for download.

View Example.

Animated tabbed content with jQuery

/ 1 Comment / Category: Javascript, jQuery/

Animated tabbed content – nowdays, a lot of websites are using tab based content as a way to save space in a webpage, and if used correctly, it can boost your website usability as well.

This step by step tutorial (with source files) will show you how to create your own animated tabbed content using jQuery.

View Example.

MooTools Open-Source File Manager

/ 0 Comments / Category: Javascript, MooTools/

MooTools FileManager – a MooTools based File Manager for the web that allows you to preview, upload and modify files and folders via the browser.

Features include:

Browse through Files and Folders on your Server
Rename, Delete, Move (Drag&Drop), Copy (Drag + hold CTRL) and Download Files
View detailed Previews of Images, Text-Files, Compressed-Files or Audio Content
Upload Files via FancyUpload (integrated Feature)
Option to automatically resize big Images when uploading
Use it to select a File anywhere you need to specify one inside your Application’s Backend
Use as a FileManager in TinyMCE

View Demos:

FileManager + Simple Image Selection + Localized FileManager

TinyMCE Integration

Slider Plugin for jQuery – tabSwitch

/ 0 Comments / Category: Javascript, jQuery/

tabSwitch – a jQuery plugin for creating tabs & sliders.

Currently, you could choose from 7 different effects with 2 view styles. You could also hot swap the effects around in runtime. TabSwitch support multi-level tab system and there is no limit what kind of HTML tag you use.

View Examples

All the code is commented so everyone could easily understand the code.

Thumbnail Hover Effect with jQuery

/ 0 Comments / Category: Javascript, jQuery/

Thumbnail Hover Effect – tutorial on how to make some really fancy Thumbnail Hover Effect with jQuery.

It may not be as smooth as the flash version, but its definitely a neat effect. If you switch up the absolute potion coordinates, you can create various ways the hover effect pops out as well.

View Demo