Tag: JavaScript

Cloud Zoom: Feature Rich Image Zoom Plugin

1 Comment

Cloud Zoom is a lightweight, highly customizable jQuery plugin that allows you to add image zooming in your web pages. You can use this plugin to create zoomable images with different features such as tint effect, inner zoom and soft focus. It is a cross browser plugin that works in all major web browsers including IE6.

Cloud Zoom is very easy to implement and is very well documented. You can easily customize the appearance of the smaller image, lens and zoom window using CSS. It offers several configuration options enabling you to customize its behavior including: height, width & positions of zoom window; tint; opacity; amount of smoothness/drift of the zoom image as it moves; enable or disable titles.

Below is a simple example HTML page which creates a single Cloud Zoom instance and gallery facility. Please study the page as it contains useful comments and tips. You can see the same page working here.
<html>
<head>

<!-- Load the Cloud Zoom CSS file -->
<link href="/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />

<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- Load the Cloud Zoom JavaScript file -->
<script type="text/JavaScript" src="/js/cloud-zoom.1.0.1.min.js"></script>

</head>
    <body>

        <!--
        An anchor with class of 'cloud-zoom' should surround the small image.
        The anchor's href should point to the big zoom image.
        Any options can be specified in the rel attribute of the anchor.
        Options should be specified in regular JavaScript object format,
        but without the braces.
        -->

        <a href='/images/zoomengine/bigimage00.jpg' class = 'cloud-zoom' id='zoom1'
            rel="adjustX: 10, adjustY:-4">
            <img src="/images/zoomengine/smallimage.jpg" alt='' title="Optional title display" />
        </a>

        <!--
        You can optionally create a gallery by creating anchors with a class of 'cloud-zoom-gallery'.
        The anchor's href should point to the big zoom image.
        In the rel attribute you must specify the id of the zoom to use (useZoom: 'zoom1'),
        and also the small image to use (smallImage: /images/....)
        -->

        <a href='/images/zoomengine/bigimage00.jpg' class='cloud-zoom-gallery' title='Thumbnail 1'
        	rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage.jpg' ">
        <img src="/images/zoomengine/tinyimage.jpg" alt = "Thumbnail 1"/></a>

        <a href='/images/zoomengine/bigimage01.jpg' class='cloud-zoom-gallery' title='Thumbnail 2'
        	rel="useZoom: 'zoom1', smallImage: ' /images/zoomengine/smallimage-1.jpg'">
        <img src="/images/zoomengine/tinyimage-1.jpg" alt = "Thumbnail 2"/></a>                  

        <a href='/images/zoomengine/bigimage02.jpg' class='cloud-zoom-gallery' title='Thumbnail 3'
        	rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage-2.jpg' ">
        <img src="/images/zoomengine/tinyimage-2.jpg" alt = "Thumbnail 3"/></a>

    </body>
</html>

List of Really Useful JavaScript Libraries

1 Comment

Popular JavaScript frameworks probably provide every common function a developer may need. The ability to extend these frameworks with new plugins makes them even more powerful. But you may still face situations when you don’t want to use these frameworks or you may find lack of support for specialized functions. This is where a lot of really useful stand alone JavaScript libraries can provide help.

W3Avenue has compiled a list of really useful standalone JavaScript libraries that will help you when your favorite JavaScript framework like Prototype, jQuery, MooTools, etc don’t provide functions for your specific needs or you prefer not to use them for some reason.

Animation

  • JSTweener
    A tween library for JavaScript based on Tweener Class for tweening and other transitions via ActionScript code for Flash.
  • $fx() – JavaScript Animation Library
    $fx() is the really small (less than 4 KBs) and pretty flexible library to animate HTML elements. It lets you to alter any CSS property along time line by passing just simple configuration. Moreover you can combine effects, group them to the chains and run parallel, also you have ability to set different callbacks what gives you even more flexibility.
  • Facebook Animation
    Animation library gives developers an easy way to improve their user interface with a line of code or two. All animations are CSS based, so a working knowledge of CSS will really help you out here. An open-source version of FBJS Animation can work on pages outside of Facebook.
  • More Libraries: FX, Bytefx, Animator.js, jsAnim

Audio / Video

  • SoundManager
    SoundManager wraps and extends the Flash Sound API, and exposes it to JavaScript. The flash portion is hidden, transparent to both developers and end users.
  • Flowplayer JavaScript API
    The Flowplayer JavaScript API provides you with an easy-to-use, yet powerful way to control one or more Flowplayer instances on a html page. Flowplayer consists of two parts: the Flowplayer SWF object, that is a wrapper around a Flash object, and a JavaScript library that translates the easy-to-use API commands into the more complex interaction with the Flowplayer SWF object (that in turn controls the Flash object).

Cookies

  • Cookies
    This is a JavaScript library for accessing and manipulating HTTP cookies in the browser. You can get one or a list of cookies, set cookies, delete cookies, test if the browser accepts cookies. jQuery is not required to use this library, but jQuery bindings are available when jQuery is present on the page. When jQuery is available, you can cause form fields to automatically set cookies, or auto fill form fields with cookie values.
  • EasyCookie
    Simple & easy JavaScript cookie management script.

Cryptography

  • JavaScript MD5
    JavaScript implementation of MD5 allows you to perform simple cryptography.

Database

  • Taffy DB
    Taffy DB is a free and open source JavaScript library that acts as thin data layer inside Web 2.0 and Ajax applications. Compatible with major Ajax libraries, its main features include: CRUD Interface (Create, Read, Update, Delete), Sorting, Looping, Advanced Queries, etc.
  • ActiveRecord.js
    ActiveRecord.js is a cross browser, cross platform, stand-alone object relational mapper. It shares a very similar vocabulary to the Ruby ActiveRecord implementation, but uses JavaScript idioms and best practices. It can operate using an in memory hash table, or with a SQL back end on the Jaxer platform (SQLite and MySQL), Adobe’s AIR (SQLite) and Google Gears (SQLite).

Date / Time

  • Date.js
    Datejs is an open source JavaScript date library; which allows you to work with date and time effortlessly. It supports over 150 cultures and is packed with functions that allow you to set, parse, compare, change dates, etc.

Debugging / Logging

  • Firebug Lite
    Firebug is probably one of the most popular debugging extension for Firefox –  Firebug Lite is an alternative solution if you need to test your pages in Internet Explorer, Opera, and Safari?  It a JavaScript file you can insert into your pages to simulate some Firebug features in browsers.
  • Blackbird
    Open Source JavaScript Logging Utility. It offers a simple way to log messages in JavaScript and an attractive console to view and filter them.
  • NitobiBug
    NitobiBug is a browser-based JavaScript object logger and inspection tool – similar to Firebug. NitobiBug runs across different browsers (IE6+, Safari, Opera, Firefox) to provide a consistent and powerful tool for developing rich Ajax applications.

Fonts / Text / Typography

  • strokeText.js
    strokeText.js is an unobtrusive javascript library working in all the major browsers – Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. The library provides cross API text stroking capability for Canvas and VML. The (built in) sans-serif font is also adapted for SVG to ensure an identical representation.
  • typeface.js
    Allows you to embed custom fonts in your web pages so that you don’t have to render text to images. Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.
  • Cufón
    Fast text replacement with canvas and VML – no Flash or images required.
  • Hyphenator.js
    Automatically hyphenates texts on websites if either the web developer has included the script on the website or you use it as a bookmarklet on any site.
  • More Libraries: sIFR, Facelift Image Replacement,FontJazz

Form Validation

  • LiveValidation
    LiveValidation is a small open source JavaScript library for making client-side validation quick, easy, and powerful. Two versions are provided – a prototype.js version, and a standalone version. Both are fully tested on most modern browsers with a comprehensive test suite.
  • wForms
    Unobtrusive JavaScript library that adds commonly needed behaviors to traditional web forms without the need for any programming skill.
  • Validanguage
    Validanguage is an inheritance-driven, unobtrusive, open source JavaScript validation library designed to be the feature-rich, user-friendly validation framework.
  • More Libraries: Yav, qForms JavaScript API

Flash

  • SWFObject
    SWFObject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file.
  • AS3Wrapper
    It’s a JavaScript library, compatible with IE and Firefox, that enables entire Flash API accessible from regular script tags. Owing to the similarities between the two languages, coding Flash in JavaScript is actually incredibly natural, and what’s more, it also seems to have pretty nice performance!
  • Aflax
    JavaScript Library that enables developers to use JavaScript to fully utilize all of the features of Adobe’s Flash 8 runtime – including graphics, networking, video and camera support.

Game Programming

Graphs / Charts

  • PlotKit
    Chart and Graph Plotting Library for JavaScript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support.
  • JS Charts
    JS Charts is a free JavaScript based library that lets you create charts in different templates like bar charts, pie charts or simple line graphs. Just include jscharts.js file, prepare your chart data in XML or JavaScript Array and your chart is ready!
  • Flot (Requires jQuery)
    JavaScript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. Flot is cross-browser and works with Internet Explorer 6/7/8, Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+.
  • More Libraries: JavaScript Diagram Builder

HTML Tables

  • SortTable
    Allows you to make all your tables sortable. It uses DOM, it is completely unobtrusive and it knows how to sort a variety of different data types.
  • DragTable
    Enable users to change order of table columns by simply dragging them.
  • KeyTable
    KeyTable is a JavaScript library which provides keyboard navigation and event binding for any HTML table. With KeyTable Excel style table navigation can be employed to provide features such as editing of a table without requiring a mouse.

Image Processing / Visualization / Drawing

  • Processing.js
    Processing.js uses JavaScript to draw shapes and manipulate images on the HTML5 Canvas element. The code is light-weight, simple to learn and makes an ideal tool for visualizing data, creating user-interfaces and developing web-based games.
  • Raphaël
    JavaScript library that will simplify your work with vector graphics on the web. It uses SVG and VML as a base for creating graphics and currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
  • Pixastic Image Processing Library
    Allows you to perform a variety of operations on images using just a bit of JavaScript. The effects supported out of the box include desaturation/grayscale, invert, flipping, brightness/contrast adjustment, hue/saturation, emboss, blur, and many more.
  • VectorGraphics Library
    High Performance JavaScript Vector Graphics Library. Draw Line, Circle, Ellipse (Oval), Polyline, Polygon, Rectangle.
  • Reflection.js
    Allows you to add reflections to images on your pages. It uses unobtrusive JavaScript to keep your code clean. It works in all the major browsers – Internet Explorer 5.5+, Mozilla Firefox 1.5+, Safari, Google Chrome and Opera 9+. On older browsers, it’ll degrade and your visitors won’t notice a thing. Best of all, it’s under 5KB.
  • CVI Libraries (Canvas Vml Image Effects)
    The CVI libraries uses unobtrusive JavaScript to keep your code clean and they work in all the major browsers – Mozilla Firefox 1.5+, Opera 9+, IE6+ and Safari. All scripts are distributed under the Netzgestade Software License Agreement. License permits free of charge use on non-commercial and private web sites only. There are also Commercial Software Licenses available. Libraries: bevel.js, corner.js, curl.js, edge.js, filmed.js, glossy.js, instant.js, reflex.js, shiftzoom.js, snapfit.js, slided.js, sphere.js
  • Drag & Drop for Images and Layers
    A cross-browser JavaScript DHTML Library which adds Drag Drop functionality and extended DHTML capabilities to layers and to any desired image.
  • ExplorerCanvas
    Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages.
  • Canvas 3D JS Library (C3DL)
    Provides a set of math, scene, and 3d object classes to make the canvas more accessible for developers that want to develop 3D content in browser but do not want to have to deal in depth with the 3D math needed to make it work. Requires Canvas 3d enabled browser (Firefox 3.5 or higher)
  • jsDraw2D
    Open Source JavaScript Graphics Library that allows your to draw advance drawings like cubic Bezier curve, general Bezier curve (The general Bezier curve can be of any degrees including linear, quadratic and cubic), open curve passing through given points and closed curve passing through given points. This is a pure JavaScript library that works without using another framework, plugins, SVG or VML.

Keyboard

  • Shortcuts.js
    Makes it easy to add keyboard shortcuts(or accelerators) to your JavaScript application.
  • QFocuser
    JavaScript class for keyboard navigable AJAX widgets for better usability and accessibility

Mapping

  • Mapstraction
    Mapstraction is a library that provides a common API for various JavaScript mapping APIs to enable switching from one to another as smoothly as possible. Developers can code their applications once, and then easily switch mapping provider based on project needs, terms and conditions, and new functionality.

Maths

  • Sylvester
    Sylvester is a JavaScript library designed to let you do mathematics with vectors and matrices without having to write lots of loops and throw piles of arrays around. It includes classes for modeling vectors and matrices in any number of dimensions, and for modeling infinite lines and planes in 3-dimensional space. It lets you write object-oriented easy-to-read code that mirrors the math it represents.

Regular Expressions

  • XRegExp
    XRegExp is a JavaScript library that provides an augmented, cross-browser implementation of regular expressions, including support for additional modifiers and syntax. Several convenience methods and a powerful recursive-construct parser are also included.
  • textMonster
    Lets you chain as many regular expressions as you want together and iterate over their results in a straightforward manner.

URL

  • JavaScript URL Library
    This JavaScript library facilitates the easy construction and deconstruction of URL strings by breaking the URL into it’s various components. This library is capable or taking a URL as a string or using the current window.location and parsing it into a URL object. Any of the components of the URL can then easily be manipulated as required and the modified URL string can be retrieved.
  • UED (URL Encoded Data)
    This script only consist of one function which will take an array as its argument and return the data encoded in UED format – as a string. You can use that string to send the data via POST or GET in the query part of the URL.

Utilities (Others)

  • MoreCSS
    JavaScript library that can assist you with all the daily JavaScript things like pop-ups, tabs, tooltips, hyphenation, advanced list styling and more without forcing you to learn any JavaScript. If you already know CSS you can easily use it using CSS like syntax.
  • Modernizr
    Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.
  • IE7.js
    IE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
  • Sizzle JavaScript Selector Library
    A pure JavaScript CSS selector engine designed to be easily dropped in to a host library. Sizzle supports virtually all CSS 3 Selectors – this even includes some parts that are infrequently implemented such as escaped selectors (”.foo\\+bar”), Unicode selectors, and results returned in document order.
  • DD_Roundies
    This is a JavaScript library that makes creation of rounded-corner HTML boxes easier, with a focus on Internet Explorer.
  • DD_BelatedPNG
    JavaScript library that adds PNG image support into IE6. You can use PNGs as the SRC of an <IMG/> element or as a background-image property in CSS. Both background-position and background-repeat work as intended.
  • SocialHistory.js
    Enables you to detect which social bookmarking sites your visitors use.
  • SyntaxHighlighter
    This JavaScript library helps you to display code with color coded syntax on your website.
  • PHP.js
    JavaScript library that ports PHP functions to JavaScript. By including the PHP.JS library in your own projects, you can use your favorite PHP functions client-side. Using PHP.JS may speed up development for PHP developers who are increasingly confronted with client-side technology.

Please feel free to suggest any addition to the list in your comments. You may also want to look at:

40 Useful jQuery Techniques and Plugins

1 Comment

In this post, we present 40 useful but obscure jQuery plug-ins that will hopefully help you improve the user experience on your websites. We look forward to your ideas and suggestions in the comments to this post.

Tips, Hints, Navigation

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.

JS-00 in 40 Useful jQuery Techniques and Plugins

Contextual Slideout Tips With jQuery & CSS3

A set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours.

Js-t1 in 40 Useful jQuery Techniques and Plugins

jQuery Slider plugin (Safari style)

jQuery Slider is easy to use and multifunctional jQuery plugin.

JS-52 in 40 Useful jQuery Techniques and Plugins

jSquares

jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover. It is basically identical to the image grid found on www.ted.com. Works like a charm in IE6+, FF 3+, Safari 3+ and Opera 10.

Js-x1 in 40 Useful jQuery Techniques and Plugins

Nav-o-Matic

Single sprite navigation is great, but we all know it can get a little bit tedious. All that measuring of pixel perfect photoshop slices, careful coding of your CSS and subsequent calculator bashing is enough to drive anyone to start microwaving fluffy kittens. Wouldn’t it be great to have a fancy online tool to take care of all the boring stuff for you in a few simple clicks? Well wish no more…

JS-58 in 40 Useful jQuery Techniques and Plugins

Jquery Two Sided Multi Selector

This Plugin converts a multi select list into a two-sided multi-select list. This means you display a list of options in the left hand box and items you select are moved into the right hand box.

JS-01 in 40 Useful jQuery Techniques and Plugins

jQuery MegaMenu Plugin

JS-11 in 40 Useful jQuery Techniques and Plugins

jQuery Keyboard Navigation Plugin

The jQuery Keyboard Navigation Plugin provides the capability for elements on a page to be navigated and activated via the keyboard’s up, down, right and left arrow keys.

JS-77 in 40 Useful jQuery Techniques and Plugins

FullCalendar – Full-sized Calendar jQuery Plugin

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

JS-89 in 40 Useful jQuery Techniques and Plugins

Forms

iPhone Style Radio and Checkbox Switches using JQuery and CSS

A simple technique for creating radio button and checkbox switches with jQuery.

JS-86 in 40 Useful jQuery Techniques and Plugins

jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select Element

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.

JS-17 in 40 Useful jQuery Techniques and Plugins

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.

JS-24 in 40 Useful jQuery Techniques and Plugins

Sliding Labels

Tim Wright came up with a jQuery technique that presents labels in input fields by default but then slides them to the left (or up) rather than removing them on click. If JavaScript is turned off, the labels are displayed above the input fields. The small jQuery snippet works in all major browsers and can be used for input and textarea elements.

JS-59 in 40 Useful jQuery Techniques and Plugins

Login or Signup with jQuery

Some users doesn’t like to filling the registration form. So that I had implemented login and singup fields in same block just controlling with jquery and PHP. It’s is very simple javascript and basic PHP code.

Js-y1 in 40 Useful jQuery Techniques and Plugins

Uniform – Sexy forms with jQuery

Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all browsers? If so, Uniform is your new best friend. Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

JS-66 in 40 Useful jQuery Techniques and Plugins

Slideshows and Galleries

jQuery Quicksand plugin

Reorder and filter items with a nice shuffling animation.

JS-82 in 40 Useful jQuery Techniques and Plugins

Nivo Slider: Slideshow jQuery Script

Nivo Slider is a simple and powerful jQuery image slider plug-in that fits the bill. The tool has nine unique transition effects built in, as well as plenty of options to fiddle with: for instance, you can define functions to be applied before and after the image has changed, set the animation speed and activate pause on hover.

Slideshow in 40 Useful jQuery Techniques and Plugins

#grid

#grid is a little tool that inserts a grid onto the Web page. You can hold the grid in place and toggle it between the foreground and background. To display the grid, just press a hot key on your keyboard, and you can set your own short keys to switch views. #grid comes set up with a 980 pixel-wide container, with 20-pixel gutters, and assumes one lead of 20 pixels. You can download the source code (JavaScript and CSS) and use classes for multiple grids.

Analog in 40 Useful jQuery Techniques and Plugins

Improving The Content

Dynamic Footnotes With CSS and jQuery

Lukas Mathis has come up with an elegant solution to improve user experience with footnotes: his jQuery script shows the content of footnotes as soon as the user indicates that they are interested in it – i.e. when they move the cursor over the footnote symbol.

Footnote in 40 Useful jQuery Techniques and Plugins

jQuery Captify Plugin v1.1.3

Captify is a plugin for jQuery written by Brian Reavis to display simple, pretty image captions that appear on rollover. It has been tested on Firefox, Chrome, Safari, and the wretched Internet Explorer. Captify was inspired by ImageCaptions, another jQuery plugin for displaying captions like these. The goal of Captify is to be easy to use, small/simple, and completely ready for use in production environments (unlike ImageCaptions at the moment).

JS-88 in 40 Useful jQuery Techniques and Plugins

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.

JS-41 in 40 Useful jQuery Techniques and Plugins

Layouts

Columnizer jQuery Plugin

This jQuery plugin will help you create a multi-column layout without complex CSS hacks. Works across all major browsers.

JS-71 in 40 Useful jQuery Techniques and Plugins

jQuery Grid Plugin

JS-50 in 40 Useful jQuery Techniques and Plugins

Charts and Graphs

Dygraphs: Create interactive graphs from open source Javascript library

Dygraphs is an open source JavaScript library that produces an interactive, zoom-able charts of the present time series. It is mainly designed to display the dense data sets and enable the users to explore and interpret them. It is a JavaScript Visualization Library.

JS-38 in 40 Useful jQuery Techniques and Plugins

gMap – Google Maps Plugin For jQuery

gMap is a lightweight jQuery plugin that helps you embed Google Maps into your website. With only 2 KB in size it is very flexible and highly customizable.

JS-65 in 40 Useful jQuery Techniques and Plugins

10 jQuery Plugins for Easier Google Map Installation

The plugins below offer not only an easier method to install a map, they also offer the option to add extra functionality, should you choose to need them. They also all come with a varied degree of docs, some are extensive and some non-existent, so choose your plugin wisely.

JS-78 in 40 Useful jQuery Techniques and Plugins

Images and Visual Effects

jQuery imageless buttons a la Google

This jQuery plugin is an attempt to recreate Google’s imageless buttons and prove that it doesn’t take a whole team of engineers and an endless cycle of code revision and quality control (their own words) to pull this off. I don’t know how Google did it, but my buttons automatically adapt to paddings and other styling you wish to use. They allow for a lot of stylistic customisatoin via a few lines of css while keeping all the display critical css rules hidden deep inside the plugin.

JS-67 in 40 Useful jQuery Techniques and Plugins

jQuery Presentation Plugin

jQuery Presentation Plugin: Say NO to Keynote!

JS-90 in 40 Useful jQuery Techniques and Plugins

jQuery pageSlide

This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript. By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.

JS-74 in 40 Useful jQuery Techniques and Plugins

jqFancyTransitions: jQuery Image Rotator Plugin

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

JS-15 in 40 Useful jQuery Techniques and Plugins

A demo of AD Gallery

A highly customizable gallery/showcase plugin for jQuery.

JS-16 in 40 Useful jQuery Techniques and Plugins

Pines Notify jQuery Plugin

Pines Notify’s features include: timed hiding with visual effects, sticky (no automatic hiding) notices, optional hide button, supports dynamically updating text, title, icon, type, stacks allow notice sets to stack independently, control stack direction and push to top or bottom.

JS-51 in 40 Useful jQuery Techniques and Plugins

Animate Panning Slideshow with jQuery

In today’s tutorial we’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides. It may not fit every project, but diversity is always welcome in the world of web design.

JS-79 in 40 Useful jQuery Techniques and Plugins

Sponsor Flip Wall With jQuery & 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.

JS-39 in 40 Useful jQuery Techniques and Plugins

Last Click

CofeeScript

CoffeeScript is a little programming language that compiles JavaScript while simplifying the code that developers actually have to deal with. It works with current JavaScript libraries and compiles clean code, leaving even comments intact. Once developers familiarize themselves with how CoffeeScript works, they could potentially save themselves a lot of time and headaches with the simplified code.

Coffeescript in 40 Useful jQuery Techniques and Plugins

Brosho ‘Design in the Browser’ jQuery Plugin

With this Plugin you can style your markup right in your browser with a build-in element selector and CSS editor. Generate the CSS code of altered elements with one click and use it in your own stylesheet.

JS-62 in 40 Useful jQuery Techniques and Plugins

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

JS-13 in 40 Useful jQuery Techniques and Plugins

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.

JS-35 in 40 Useful jQuery Techniques and Plugins

Is adding round-ups to our regular content a good idea?

What do you think, is adding more round-ups to our regular content a good idea?
Yes, absolutely!Yes, why not.No, rather not.No, absolutely not!It depends (see my comment)