50 Popular javascript techniques and plugins

50 Popular javascript techniques and plugins

I am regularly collecting useful JavaScript and jQuery snippets, libraries, articles, tools and resources and present them in compact round-ups here, on coolajax This time we are again covering some useful JavaScript and jQuery techniques, plug-ins and tools that may help you improve the user experience for your site.

– Improving Search Boxes with jQuery

Improving Search Boxes with jQuery

This time we will learn how to improve a little more our sites by adding some additional interactions to our search boxes like autofocus, highlighting, autoreplace default text and more by using jQuery.

– fLABjs

fLABjs

fLABjs is a special API wrapper around LABjs which adapts the code to work properly in a file:// local filesystem environment. There are a number of things with core LABjs does which are not appropriate for local filesystems, such as XHR, special path handling rules, etc.

– Copy to Clipboard with ZeroClipboard Flash 10 and jQuery

Copy to Clipboard with ZeroClipboard Flash 10 and jQuery

With today’s post I will show you a contrived example to get you started. I eventually hope to add this to the contextMenu.js jQuery plugin that I use, but for now this should be pretty straight forward. I do want to note that in the demo and download I am loading the latest version of the jQuery library (1.3.1) from Google’s CDN for the first time in any of my posts. For more information on how to do this see the instructions from Google.

– Online javascript beautifier

Online javascript beautifier

This little beautifier will reformat and reindent bookmarklets, ugly javascript, unpack scripts packed by the popular Dean Edward’s packer, as well as deobfuscate scripts processed by javascriptobfuscator.com.

– Mind blowing JavaScript Experiments

Mind blowing JavaScript Experiments

The following JavaScript experiments demonstrates the amazing capabilities of the modern browsers such as Chrome and Safari. In this post I will showcase to you an array of experiments that will surely blows your mind off.

– CoffeeScript

CoffeeScript

CoffeeScript is a little language that compiles into JavaScript. Think of it as JavaScript’s less ostentatious kid brother — the same genes, roughly the same height, but a different sense of style. Apart from a handful of bonus goodies, statements in CoffeeScript correspond one-to-one with their equivalent in JavaScript, it’s just another way of saying it.

– How to Test your JavaScript Code with QUnit

How to Test your JavaScript Code with QUnit

QUnit, developed by the jQuery team, is a great framework for unit testing your JavaScript. In this tutorial, I’ll introduce what QUnit specifically is, and why you should care about rigorously testing your code.

– Compare JavaScript frameworks

Compare JavaScript frameworks

Modern Web sites and Web applications tend to rely quite heavily on client-side JavaScript to provide rich interactivity, particularly through the advent of asynchronous HTTP requests that do not require page refreshes to return data or responses from a server-side script or database system. In this article, you will discover how JavaScript frameworks make it easier and faster to create highly interactive and responsive Web sites and Web applications.

– WireIt

WireIt

WireIt is an open-source javascript library to create web wirable interfaces for dataflow applications, visual programming languages, graphical modeling, or graph editors.

– PhoneGap

PhoneGap

Easily create apps using the web technologies you know and love: HTML, CSS and JavaScript. PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about.

Supported Features:

The chart below shows which APIs are available for each device.

  • Accelerometer
  • Camera
  • Compass
  • Contacts
  • File
  • Geolocation
  • Media
  • Network
  • Notification (Alert)
  • Notification (Sound)
  • Notification (Vibration)
  • Storage

– Parser Generator for JavaScript

Parser Generator for JavaScript

PEG.js is a parser generator for JavaScript based on the parsing expression grammar formalism. It enables you to easily bulid fast parsers which process complex data or computer languages. You can use it as an underlying tool when writing various data processors, transformers, interpreters, or compilers.

– JavaScriptMVC

JavaScriptMVC

JavaScriptMVC is an open-source framework containing the best ideas in enterprise JavaScript development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.

– A Better jQuery In Field Label Plugin

A Better jQuery In Field Label Plugin

This is a pretty nice effect, and it can really help to save space on forms. There are a billion different ways to implement this, and I don’t suggest you use the example from above because that was just a quick way to show the effect. So let’s walk through a couple of different implementation approaches and figure out the best way to implement this feature.

– How to show hide a hidden input form field using jQuery

How to show hide a hidden input form field using jQuery

This past week I was working on a project at work which included building a request form with multiple fields. It was a rather large form that included a dropdown list with an ‘other’ option. I wanted to allow users to select the ‘other’ option which then would show an input field so they can enter a specific description of what that ‘other’ item is. I didn’t want to clutter the form by displaying that additional field by default so I used a little jQuery, thus displaying it dynamically and only when needed.

– jQuery Roundabout Shapes

jQuery Roundabout Shapes

Roundabout Shapes provide even more paths along which your Roundabout can move. The current version of Roundabout Shapes offers eleven additional movements.

– jQuery image zoom effect

jQuery image zoom effect

So today I’m going to run through the technique used to zoom the image thumbnails and display the overlay of text.

– Create a Content Rich Tooltip with JSON and jQuery

Create a Content Rich Tooltip with JSON and jQuery

Today we’re going to break the mold of the traditional tooltip. This tutorial will demonstrate how to build tooltips that are powered by jQuery, with information pulled from a JSON array.

– jQuery UI Selectmenu

jQuery UI Selectmenu

Our latest contribution to labs is the selectmenu plugin, which is designed to duplicate and extend the functionality of a native HTML select element, and lets you customize the look and feel, add icons, and create hierarchy within the options. Best of all, it’s built with progressive enhancement and accessibility in mind, has all the native mouse and keyboard controls, and is ThemeRoller-ready.

– jqFancyTransitions jQuery Image Rotator Plugin

jqFancyTransitions jQuery Image Rotator Plugin

jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.

– Getting Buggy CSS Selectors to Work Cross Browser via jQuery

Getting Buggy CSS Selectors to Work Cross Browser via jQuery

Below I’ve prepared a simple table that describes a number of CSS selectors that are not cross-browser compatible, along with the jQuery syntax for each. The syntaxes are exactly the same as they would be in CSS, save for the jQuery wrapper (just remove $() and the quotes to get the CSS syntax), so using these selectors in jQuery will provide somewhat of a practice ground to prepare you for when they’re fully supported by all commonly-used browsers.

– A javascript game engine with jQuery

A javascript game engine with jQuery

gameQuery is a jQuery plug-in to help make javascript game development easier by adding some simple game-related classes. It’s still in an early stage of development and may change a lot in future versions. The project has a Google Code page where the SVN repository of the project is hosted and a twitter page where you can follow the daily progress of the development.

– Create an Impressive Content Editing System with jQuery and PHP

Create an Impressive Content Editing System with jQuery and PHP

I’m going to show you how to use jQuery and PHP to build a content editing system that will allow you or your client to easily edit .html pages visually.

– Making a Mosaic Slideshow With jQuery and CSS

Making a Mosaic Slideshow With jQuery and CSS

Today we are making a jQuery & CSS mosaic gallery. Mosaic, because it will feature an interesting tile transition effect when moving from one slide to another.

– A Fresh Bottom Slide Out Menu with jQuery

A Fresh Bottom Slide Out Menu with jQuery

In this tutorial we will create a unique bottom slide out menu. This large menu will contain some title and a description of the menu item. It will slide out from the bottom revealing the description text and some icon. We will use some CSS3 properties for some nice shadow effects and jQuery for the interaction.

– Photo Zoom Out Effect with jQuery

Photo Zoom Out Effect with jQuery

Today we will show you how to create a simple image zoom out effect with jQuery. The idea is show some images which are zoomed in initially and when hovering over an image it gets zoomed out. This effect could be used in photography websites or image galleries. Our example uses some black and white images to focus on the effect.

– jquery timepickr

jquery timepickr

This is my humble attempt to enhence web time picking.

– jQuery Syntax

jQuery Syntax

jQuery.Syntax is an extremely fast and lightweight syntax highlighter. It has dynamic loading of syntax source files and integrates cleanly using CSS or modelines.

– Nivo Slider

Nivo Slider

The Most Awesome jQuery Image Slider

– TipTip jQuery Plugin

TipTip jQuery Plugin

TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window.

TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS.

– Sponsor Flip Wall With jQuery and CSS

Sponsor Flip Wall With jQuery and CSS

Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.

– Colorful Sliders With jQuery and CSS3

Colorful Sliders With jQuery and CSS3

In this tutorial we are using jQuery and the new transformation features brought by CSS3 to create a three dimensional dynamic slider effect. The techniques presented here – for creating sliders, and CSS dynamic resizable bars, can be used together or in part for powering all sorts of jQuery goodness.

Share It

Related Posts