tripwire magazine » developer toolbox

15 Really Awesome and Totally New jQuery Plugins

Lars — Thu, 11 Feb 2010 22:41:33 +0000

There are plenty of plugins for jQuery addressing nearly any front end need you can think of. The apparent abundance of plugins available on the other hand does not stop creative and skilled developers from creating even more goodies for the jQuery community, Thanks You all for contributing! In this post I have hand-picked a set of very interesting and brand new plugins that have been released within the last few weeks. Take a look I’m sure you will find something useful!

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. Now there’s NO excuse for not using maps… with jQuery its has been made easy for anyone.

jQuery MultiSelect Plugin

This is a jQuery MultiSelect Plugin that focus on speed and ThemeRoller support. It turns an ordinary HTML select control into an elegant drop down list of checkboxes. The plugins provides an optional header with check all / uncheck all / close links, Keyboard support, Ability to hook into 5 different event callbacks, much more and it is only 6kb minified.

Uniform

Have you ever wished you could style check boxes, 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.

jQuery Formwizard Plugin

The form wizard plugin is a jQuery plugin which can be used to create wizard like page flows for forms without having to reload the page in between wizard steps. The plugin is unobtrusive and gives the developer great freedom on how they set up the flow of the different steps in their wizards, as the plugin supports creating specific routes in the form; depending on the user input. Supports multiple “submit”-steps and much more.

Sliding Labels

This plugin solves a common problem in an really new way. It has become popular to put form labels into the fields – because it look great. Problem is that once users click a field the label is gone and it can be difficult to remember if you put in the right content in to each field… This plugin lets you have nice looking forms and simply slides the label out once the form is taken into use.

jQuery plugin: Simplest Twitter-like dynamic character count

The best way to explain what this plugin does is to mention Twitter. Twitter posts are limited to 140 characters. While typing the Twitter post there is this always present information about how many characters the users have before reaching the limit. The information is not only provided merely by displaying a number, there are different colors applied to certain stages to notify the user about the status.
On your site you might have a comment box or contact form fields limited to certain character count. You can use this simple plugin to provide user with that useful information.

jQuery PhotoShoot Plugin

The jQuery PhotoShoot plugin gives you the ability to convert any div on your web page into a photo shooting effect, complete with a view finder. You can check out the demonstration, or a nice tutorial on how to use it here.

Flickr-Style Photo Tagging With jQuery

The jQuery Photo Tagger plugin allows you to add Flickr-style photo tagging to your images. You can create box-like overlays on top of your image and assign messages to each box. The plugin communicates with the server using the supplied API URLs such that the photo tags can be saved, persisted, and deleted when needed.

Sweet AJAX Tabs With jQuery 1.4 & CSS3

Organizing the content of a page in a both intuitive and eye-catching manner, is a must in modern web design. One principle that has been around for some time is dividing text into tabs. This is a AJAX-powered tab page with CSS3 and the newly released version 1.4 of jQuery.

jQuery Easy Slides

jQuery Easy Slides is as the name designate really really simple to use and still look great. You need to set up a few parameters (where to pick up images, captions, etc.) and then you need one line of Javascript.. that’s it.

jDiv: A jQuery navigation menu alternative

This is actually a tutorial showing how to use jQuery for taking an entire hidden div structure and makes it appear as a drop down panel on mouse over. This can be pretty useful.

sexyCycle image jQuery plugin

This is a extremely simple image slider supporting various parameter to control the flow. One of the good things about sexyCycle is that you’re not forced to stick with a fixed width of all images.

A jQuery Heat Map

Here is a very simple way ho to create a heat map with jQuery. The idea is to track the clicks of a user and then display the click pattern with semi-transparent dots on an overlay.

jQuery Lint

jQuery Lint is a simple script you can download and use with jQuery. It works over the top of jQuery and diligently reports errors and any incorrect usage of jQuery. It will also, to some extent, offer guidance on best practices and performance concerns.

Easy Full Screen Background Images with jQuery

Backstretch is a simple plugin recreated from the code used on Central, derived from the ideas presented in existing CSS and JS solutions. It is meant to be used by those who want a lightweight, minimalist implementation of dynamically-resized background images that can be executed in one line of Javascript, with nothing more than a link to an image. To really understand how this plugin works you should try the demo.

Guaranteed pass 000-118 exam with online HP0-S26 training, you can also get best quality 642-627 dumps for your guaranteed success.

25+ Free Editors and IDEs for Freelance Developers on a Tough Budget

Lars — Thu, 28 Jan 2010 06:56:58 +0000

Spending hundreds of dollars on a text editor or IDE may give you a great tool with loads of nice features, regular updates, great documentation etc…. It’s an option but actually there are very useful and completely free alternatives. In this article tripwire magazine provides a list of more than 25 free Editors and IDEs useful for most developers on a tough budget. Please drop a comment if a great tool was missed in the post.

Editors

jEdit

jEdit is a mature programmer’s text editor with hundreds (counting the time developing plugins) of person-years of development behind it. To download, install, and set up jEdit as quickly and painlessly as possible, go to the Quick Start page.

While jEdit beats many expensive development tools for features and ease of use, it is released as free software with full source code, provided under the terms of the GPL 2.0.

Vim

Vim is a highly configurable text editor built to enable efficient text editing. It is an improved version of the vi editor distributed with most UNIX systems. Vim is distributed free as charityware.

KompoZer

KompoZer is a complete Web Authoring System that combines web file management and easy-to-use WYSIWYG web page editing capabilities found in Microsoft FrontPage, Adobe DreamWeaver and other high end programs.

GNU Emacs

GNU Emacs is an extensible, customizable text editor—and more. At its core is an interpreter for Emacs Lisp, a dialect of the Lisp programming language with extensions to support text editing. The features of GNU Emacs include

Content-sensitive editing modes, including syntax coloring, for a variety of file types including plain text, source code, and HTML.
Complete built-in documentation, including a tutorial for new users.
Full Unicode support for nearly all human languages and their scripts.
Highly customizable, using Emacs Lisp code or a graphical interface.
A large number of extensions that add other functionality, including a project planner, mail and news reader, debugger interface, calendar, and more. Many of these extensions are distributed with GNU Emacs; others are available separately.

Bluefish

Bluefish is a powerful editor targeted towards programmers and webdesigners, with many options to write websites, scripts and programming code. Bluefish supports many programming and markup languages, and it focuses on editing dynamic and interactive websites. See features for an extensive overview, take a look at the screenshots, or download it right away

intype

Intype is a powerful and intuitive code editor for Windows with lightning fast response. It is easily extensible and customizable, thanks in part to its support for scripting and native plug-ins. It makes development in any programming or scripting language quick and easy.

SciTE

SciTE is a SCIntilla based Text Editor. Originally built to demonstrate Scintilla, it has grown to be a generally useful editor with facilities for building and running programs. It is best used for jobs with simple configurations – I use it for building test and demonstration programs as well as SciTE and Scintilla, themselves.

SciTE is currently available for Intel Win32 and Linux compatible operating systems with GTK+. It has been run on Windows XP and on Fedora 8 and Ubuntu 7.10 with GTK+ 2.12. Here is a screenshot of SciTE.

Emerald Editor

Emerald Editor is a multi-purpose text editing package currently in development for Windows, Linux, Mac OS X and BSD, featuring powerful text manipulation tools to make writing – and programming – a breeze. merald Editor is licensed under the terms of the GNU General Public License which allows the software to be distributed for free. The source code is also available from our Subversion repository.

medit the text editor

medit is a text editor. Started originally as a simple built-in editor component in GGAP, it grew up to a real text editor. The intention now is to make it a useful programming and around-programming text editor.

gedit

gedit is the official text editor of the GNOME desktop environment. While aiming at simplicity and ease of use, gedit is a powerful general purpose text editor.

Nano

GNU nano is designed to be a free replacement for the Pico text editor, part of the Pine email suite from The University of Washington. It aims to “emulate Pico as closely as possible and perhaps include extra functionality”.

Notepad++

Notepad++ is much more than just replacement for Notepad. It has a lot of features, such as Syntax Highlighting, Syntax Folding, Auto Completion, Multi Documents tab view, Full Drag and Drop supported, Zoom in and out, Bookmark, Macro Recoding and powerful search feature. Users can have their own custom defined syntax highlighting, and this is among my most favorite feature of Notepad++.

Free Coffeecup Editor

The CoffeeCup Free HTML Editor is a full-featured Web design system. With built-in FTP uploading, wizards for tables, frames, fonts, and more, and 100% valid code output, it’s a great tool for anyone who wants to design their own Website.

netpadd

This is as close to notepad as it gets but a some features have been hidden behind the simple interface.

HAPedit

HAPedit is useful for people who develop both dynamic and static web pages. It provides syntax highlighting for HTML, ASP, PHP, JavaScript; provides a project manager; features code completion, an SQL console, FTP manager, PHP code “compilation”, integrated PHP help, brace matching, search and replace with regular expressions, statistics on your page (ie, rendered size, images, links, etc), and so on.

Arachnophilia

This editor comes with built-in FTP facility, making it possible for you to author your web page and publish it without leaving the editor. It has a spell-checker, an internal browser view mode that is able to show your HTML changes as you type, a global search and replace facility across all open documents, built-in tutorial on HTML, JavaScript, frames; etc. There are apparently two versions available – the older one runs on Windows systems, the newer one is written in Java and is apparently cross-platform.

Visual Web Developer 2008

Being a free editor this is a very feature rich and strong editor that can be used even if you’re not coding .net. It’s far from its big brother Visual Studio but also much simpler and faster to load if you just need to edit one file.

Amaya

Amaya started as an HTML + CSS style sheets editor, but now it is a complete web browsing and authoring environment. It has standard text editors features, with extra supports on web editing features.

Programmer’s Notepad

It is a promising text editor which has a lot of features such as bookmarks, code folding, projects and projects ground with multi-level folders, support for unicode files and powerful syntax highlighting.

RText

RText is a full-feature text editor that can run on any platform. Currently, it supports syntax highlighting for 23 languages include some popular languages such as PHP, HTML, C#, C, C++ and so on.

PSPad

PSPad is yet another powerful text editors for Windows. It has cool features such as syntax highlighting, multiple documents supported, saved desktop sessions, built in FTP client, full HEX editors, text difference with color-coded differences highlighted and a lot of other features. If these features are not enough for you, then you may view their extensions library for 3rd party extensions.

NoteTab Light

NoteTab Light is a free Notepad replacement and a handy HTML editor. It has a simple tab interface and able to search text, strip HTML tags and format text quickly. If you want more advanced features, you may go for NoteTab Standard or NoteTab Pro.

Crimson Editor

Crimson Editor is a great code editor for developers which has a fast loading time and very small in file size. It supports standard text editors features such as syntax highlighting, multiple documents supported, spell checkers, find and replace, and so on.

Komodo Edit

Komodo Edit is a free and open source multi-language editor that makes writing quality code easy. It support Windows, Linux, and Mac. Example of the programming languages supported are Perl, PHP, Python, Ruby, Javascript, CSS, HTML, XML, and so on. Komodo Edit is based on the award-winning Komodo IDE, so you can guess how powerful it is!

TotalEdit

TotalEdit is free for commercial and non-commercial purposes. It has language-specific syntax coloring/highlighting, fully customizable environment, file explorer, external tool integration and built-in spell checker.

Scriptly

Scriptly is an extensive, almost overloaded freeware-code-editor for coding in HTML and PHP. The editor offers 7 styles of syntax highlighting, code completion, code consistency check, code inspector, tree view of the source code for HTML, PHP and CSS, browser preview in IE and Firefox, print preview and image editing.

HTML-Kit

HTML-Kit is a freeware full-featured editor designed to help HTML, XHTML and XML authors to edit, format, lookup help, validate, preview and publish web pages. Despite its name and the light download size, HTML-Kit is a multi-purpose tool that has support for several scripting and programming languages.

IDEs

geany

Geany is a small and lightweight Integrated Development Environment. It was developed to provide a small and fast IDE, which has only a few dependencies from other packages. Another goal was to be as independent as possible from a special Desktop Environment like KDE or GNOME – Geany only requires the GTK2 runtime libraries. Geany is known to run under Linux, FreeBSD, NetBSD, OpenBSD, MacOS X, AIX v5.3, Solaris Express and Windows. More generally, it should run on every platform, which is supported by the GTK libraries. Only the Windows port of Geany is missing some features.

aptana

This is without question among the best free IDEs available. It comes as standalone and as a plugin for Eclipse and likely all the features you need. Aptana support many programming languages and as an example offers great support for Ajax including support for the leading Ajax libraries like jQuery, mootools, ptototype etc.

netbeans

NetBeans IDE is open-source and free. You get all the tools you need to create professional desktop, enterprise, web, and mobile applications with the Java language, C/C++, and even dynamic languages such as PHP, JavaScript, Groovy, and Ruby. The NetBeans IDE is easy to install and use straight out of the box and runs on many platforms including Windows, Linux, Mac OS X and Solaris.

Eclipse

Eclipse is an open source extensible IDE. At present, it works well as a Java IDE, and includes Java development tools. It requires that you have the Sun Java runtime environment (JRE) installed. The IDE supports Windows XP, Windows 2000, Windows 98, Windows ME, Linux, Solaris, QNX, AIX, HP-UX, Mac OS X, and possibly other systems as well.

Enjoy the real success in exam with help of testking 70-536 training materials plus also download testking 70-236 questions and testking 70-663 dumps for next exam.

15 jQuery Plugins Giving Web Interfaces Drag ‘N Drop Capabilities

Lars — Sun, 24 Jan 2010 21:32:50 +0000

Like most others with a great interest in web front end development jQuery have a special place in my heart. jQuery manages to brings the real goodies to us with only a few lines of code and every day it gets better. This is because the huge jQuery community keeps shipping awesome plugins; great thanks to everyone contributing!. With jQuery it is possible to create user friendly and sophisticated web user interfaces in a lightweight and elegant way. One of the most important aspects of creating good user interfaces is taking care of the user events; like fx. user dragging stuff around on the page. Typically in web development this has not been trivial at all but with jQuery the dark clouds are gone. This post give you 15 jQuery Plugins that will give you the poser to add Drag N’ Drop capabilities to you web front ends.

$.event.special.drag

This is a jquery special event implementation of a drag event model. It is intended for use by developers who don’t need one bloated script full of idiot-proof logic and a million different options. This plugin simplifies handling drag events, by taking care of the DOM events when you bind a “drag” event handler, and triggering any other handlers at the appropriate time.

(mb)ConteinersPlus

This is a useful plug in to build full featured and fully skinnable containers. The container can be set to draggable, resizable, collapsable and minimizable.

resizable

With this plugin you can resize your DOMs in a easy way!

$('.resizeDiv').resizable({ handler: '.handler', min: { width: 300, height: 150 }, max: { width: 500, height: 400 }, onResize: function(e) { state.html('target style: {width: ' + e.data.resizeData.target.css('width') + ', height: ' + e.data.resizeData.target.css('height') + '}'); }, onStop: function(e) { $('#state').html('stopped'); } });

jQuery Iconize Plugin

The jQuery iconizer plugin aims to be a stable, light-weight, cross-browser jQuery plugin to add iconizing functionality (the ability to be able to reduce an element to an icon state) to any HTML element.

ppDrag

ppDrag is a Drag&Drop plugin for jQuery, which mimics the interface of jQuery UI‘s Draggable. Currently supported is a small subset of its options, but the implementation is different (ppDrag focuses on performance).

NestedSortable

NestedSortable is an extension to the original Sortable from the Interface plugin that allows you to both sort vertically and nest (make one item a child of other item) elements at the same time, using drag-and-drop. If can be set up exactly like a regular Sortable and allows you to use most options that are inherited from it.

jQuery File Tree Aza’s revised version

Modified version of http://abeautifulsite.net/notebook/58 to include drag’n'drop, callbacks and other stuff.

Dragscrollable

Scroll a large nested layer within a viewport using native scroll from the container. It does not require drag and drop functionality from UI and it is faster than UI dragging. Can be used to build a similar effect as in Google maps where you drag contents of a div acting as a viewport.

dragndrop

Get Drag and drop in a easy way.

Collidable Draggables

Adds collision detection to draggable objects.

Add “collide: ‘block’” or “collide: ‘flag’” when you create a draggable:

$(".box").draggable({collide: 'flag'});
or
$(".box").draggable({collide: 'block'});

In ‘flag’ mode overlapping objects receive new classes – ‘ui-draggable-overlapping’ for the object being dragged and ‘ui-draggable-overlapped’ for the other object. In ‘block’ mode objects are blocked from overlapping other objects by being snapped to the edge of the object they collided with.

jQuery UI multiple draggable plugin

The jQuery multiple draggable plugin is an extension to the jQuery UI Draggable plugin. This plugin extends the current functionality to allow for elements to be grouped and dragged as a group.

jQuery List DragSort

A lightweight jQuery plugin that provides the ability to sort lists using drag and drop.

Jquery iviewer

JQuery.iviewer is a jquery plugin used to load and view image in container with ability to zoom image and to drag it with mouse in container.

(mb)ImgNavigator

A photogallery for viewing very large images using a navigator map and drag. You can drag your large image in the display by the navigator or the image itself.

$().mapbox

Mapbox is a plugin for creating zooming, draggable maps of limited size and depth, which have a defined boundary. It has many methods such as the ability to center the map on any given point, zoom in or out, zoom to any particular level, and move in any direction. All of these may also be accomplished either by dragging the map or with the mousewheel in conjunction with the mousewheel plugin.

55% USA IT professionals are holding cisa and crm certification and they are keep updating their career paths for network and cwna exam field.

15 jQuery Plugins You will find useful in 2010

Lars — Thu, 31 Dec 2009 13:01:01 +0000

2009 was the year I started tripwire magazine. It has been fun, hard work and I have learned a lot. During the year tripwire magazine have had more than 2 million page views and received great feedback and support from readers and sponsors (please check them out in the right sidebar). Thanks to everyone for visiting, commenting and contributing and for making tripwire magaszine a great place for web designers and developers.

In this last post in 2009 you will find a collection of excellent jQuery plugins that will help you out in in you web projects far into 2010.

In-Field Labels jQuery Plugin

This is a simple plugin that turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focussed and disappear when text entry begins. Clearing a field and leaving brings back the label.

Coda Slider

Using this jQuery script you can create a nice-looking slider just like at Coda’s website.

bxSlider

bxslider is just yet another slider plugin for jQuery and one of the smallest having a size of only 8kb. It is extremely simple to use and looks OK.

Flexigrid for jQuery

A lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source to load the content. Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.

jAni

jAni is a simple plugin for jQuery which allows you animate background images. The jAni loads a long vertical image and changes its background position with the speed you setup, giving you good control of the animation.

ContextMenu Plugin

This plugin enables you to display a custom context menu on right click in browsers that support it. This is commonly used in web applications that are simulating desktop behavior or wish to add advanced functionality for their users. demo

Blend Effect

A jQuery based animation / effects, progressive enhancement plugin for CSS backgrounds.A jQuery based animation / effects, progressive enhancement plugin for CSS backgrounds. This light-weight (only 1.4KB) plugin for jQuery adds a nice blend effect to your website.

Jquery Fade In-Fade Out

Hi there in this tutorial il show you some simple effects you can use to spice up your websites using jquery. Your probably thinking oh no not another coding language ive got to learn. Dont worry its real simple to use and implement. Demo Download

Build a Better Tooltip with jQuery Awesomeness

This tutorial will show you a method for replacing the built-in browser tooltips that appear on elements such as images and links with title attributes.

iMask

Who haven’t ever wanted to apply an input mask to an HTML form field? This very common feature in traditional GUI applications is not natively supported by web applications. iMask goal is to implement an easy way for developers to add mask into their form fields, increasing the database and software consistency with standard compliant XHTML and unobtrusive JavaScript.

iMask is an open source (free) javascript tool for creating input and textarea masking. It is built on Mootools, supports keyboard control and dynamic charset definition.

jQuery form wizard plugin

The form wizard plugin is based on jQuery and can be used to simulate wizard like page flows for forms without having to navigate between different pages.

The plugin is very unobtrusive and gives the developer great freedom on how they set up the flow of the different steps in their wizards, as the plugin supports creating specific routes in the form depending on the user input. Demo

A jQuery inline form validation

When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. This is something the author have tried to remedy with this script. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed.

qTip

qTip is an advanced tooltip plugin for the ever popular jQuery JavaScript framework. Built from the ground up to be user friendly, yet feature rich, qTip provides you with tonnes of features like rounded corners and speech bubble tips.

Growl

Growl allows you to present DOM-inserted elements (divs by default) that are perfect for user warnings, messages, and status update notifications.

Access Key Highlighter

The Access Key Highlighter plugin provides various options for highlighting access keys on web forms when the user presses their browser’s access key shortcut key, e.g. Alt in Internet Explorer and Safari, Shift+Alt in Firefox.

45+ Incredible jQuery Plugins Making Images more Dynamic and Elegant

Lars — Sun, 27 Dec 2009 01:07:34 +0000

This article will introduce you to more than 45 jQuery plugins providing enhancements to how you can display images on your web pages. This is essential for creating dynamic state of the art web solutions and jQuery makes it simple and elegant. If you know other great jQuery plugins or would just like to share another great way of working with images in web development, them please drop a comment.

jQuery Captify Plugin

Captify is a plugin for jQuery written by Brian Reavis (@brianreavis) 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). Also, it’s only 2.3kb!

Supersized 2.0

Supersized cycles images with transitions and preloading. It offers several useful features fx. Transistions: Fade, Sliding (Up, Down, Right, Left), and None. It automatically resizes images to fill browser while maintaining image dimension ratio.

MopBox

MopBox displays a box that can be moved by dragging. The box have an awesome scroll-bar to change the display. It has been tested and works with all current major web browsers. This plugin requires jQuery UI to enable draggable, resizeable features. Demo

jQuery Panel Gallery

jQuery Panel Gallery is a compact image gallery that can easily be configured. Not one image needs to be sliced or edited to work with this plugin. The plugin handles everything itself. You can even configure fading transitions per image.

jQ SlickWrap

If you’ve ever felt the need to wrap stuff around an irregularly-shaped image using CSS’s float, you may have been somewhat disappointed to find out that it’s forced to wrap around the image’s bounding box, rather than the actual contents of the image. This fixes that.

Full Screen Image Gallery Using jQuery and Flickr

The Full Screen Image Gallery plugin is full screen image gallery that automatically scales the image with kept aspect ratio to fill the browser background. It comes packaged with a flickr search engine, thumbnails, captions, and with a preloader. It basically loads image links one by one and replaces it with a full screen image gallery and it scales the image using CSS only (with some JS for IE6).

CrossSlide

CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself (a lot.). This is a great solution for creating dynamic effects fx. in a header.You simply have to see the effect for yourself demo here.

Spacegallery – jQuery plugin

Space Gallery uses a fresh method for displaying a slideshow of images. When you click on the gallery it will, with a nice transition effect, rotate to the image behind. The gallery and its transitions can be easily customised with fairly extensive array of functions.

Highslide JS

Highslide JS is an open source image, media and gallery viewer written in JavaScript. It is an excellent, unobtrusive lightbox-style script with a multitude of uses. It is free for non commercial uses.

These are some of it’s features:

Quick and elegant looking.
No plugins like Flash or Java required.
Popup blockers are no problem. The content opens within the active browser window.
Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
Lots of configuration options and scalability without compromizing on simplicity. A component system lets you strip away unused features down to a filesize of 10kB.
Free user support for both commercial and non-commercial users.
Compatibility and safe degrading. If the user has disabled JavaScript or is using an old browser, the browser redirects directly to the image itself or to a given HTML page.

Galleriffic

Galleriffic is a jQuery plugin that has been optimized to handle high volumes of photos while conserving bandwidth. This feature rich and easily customizable plugin is fairly easy to install and with its image pre-loading, thumbnail navigation (with pagination) and its integration with the jQuery.history plugin (supports bookmark-friendly URLs per-image) it has become very popular.

JQZoom

JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.

Easiest Tooltip and Image Preview Using jQuery

An incredibly easy way of achieving tooltip like bubble popups that appears when you roll over link or a thumbnail.

InnerFade with JQuery

It’s designed to fade you any element inside a container in and out. These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.

AD Gallery

I love this gallery plugin. It is simple, yet powerful. It is a plugin that supports many transition efects, ir preloades the images, with cations and… hell, it can pretty much do everything you would want from an image gallery. Just have a look at the feature list.

Animated InnerFade

Full w3c compliant animated slideshow with sliding effect on large images. Check it you you need to see the effect.

jQuery spherical panorama viewer

A javascript viewer for displaying spherical panoramas. An alternative to Java and QuickTime technology. To use this plugin you need to generate views from your spherical panoramic image. You can download and install MPRemap from Helmut Dersch website for this purpose.

Zoomer Gallery

GalleryView is a plugin that allows you to easily transform your image lists into beautiful galleries with Flash-like zoom effects in them. It’s a simple yet elegant way of giving your interfaces a nice little shine and at only 2KB in size, it’s both compact and surprisingly easy to use.

prettyPhoto a jQuery lightbox clone

jQuery lightbox style script that support images, galleries, flash, qtime, iframe etc.

jQuery virtual tour

This virtual tour plugin has the particularity to be accessible and can run even if javascript has not been activated.

crop, labelOver and pluck

Crop-Gives your visitors the power to crop any image on the fly using JavaScript only. Also there are 2 other plugins: LabelOver and Pluck.

Step Carousel Viewer

Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps. And fear not in taming this script to go exactly where you want it to- two public methods, two custom event handlers, and three “status” variables are here for that purpose.

jQuery image zoom effect

Tutorial teaching you the technique used to zoom an image thumbnail and display a overlay of text. Really a cool feature to make a specific area gain extra attention.

jQuery Cycle plugin

This is a lightweight slideshow plugin that supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. The effects look very good!

Fancy Box

FancyBox is tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page. Automatically scales large images to fit in window, adds a nice drop shadow under the full-size image, image sets to group related images and navigate through them. Also support media.

Galleria

Is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

Jcrop

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

AnythingZoomer jQuery Plugin

You have a small area. You mouse over it. An area pops up giving you a zoomed in closer look. This is a jQuery plugin that does it. I’m not going to tell you what you should use it for or elaborate use-case scenarios. Your own creativity can help you there. Demo & Download

ImgAreaSelect

imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image.

PanView

This plugin allows your visitors view details of a big image and move around with the mouse.

Create a gallery by using z-index and jQuery

In this tutorial we will combine the CSS property ‘z-index’ and the power of jQuery to create a unique gallery which have a appearance of a pile of pictures.

Create an Image Rotator with Description

An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.

ImageSwitch

The main point of this plug-in is to make an easy-to-use, simple and fast plug-in to create effect when you switch between images. Minimize the arguments you need to input and still give some decent effects.

Create Featured Content Slider Using jQuery UI

s3 Slider

This is an easy way to add a good looking image slideshows with text flyin to your website.

Lightbox Plus

Lightbox Plus is a plugin that implements Lightbox JS by Lokesh Dhakar. Lightbox Plus is used to create overlay display images on the web-page and to automatically add the correct overlay links to images.

Shadowbox

Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page. Can run alone but also has an adapter for jQuery and other frameworks.

Image Cross Fade Transition

Image rollovers were the staple JavaScript nugget of the 90s, and for a lot of JavaScript developers I know, one of the starting places their passion for JavaScript. Today, rollovers are a no-brainer – either in CSS or with the simplest of JavaScript:

$(function () {
  $('img.swap').hover(function () {
    this.src = 'images/sad.jpg';
  }, function () {
    this.src = 'images/happy.jpg';
  });
});

View the working example and the source

Scrollable

Scrollable is useful jQuery plug-in for creating scrollable content. Scrollable items can contain any HTML. You can make items scroll horizontally or vertically and choose how many items are visible at once.

jQuery Infinite Carousel

This tutorial will walk through the fundamentals of recreating the effect carousel used on the Apple Mac ads page

Image Loading

This tutorial will show how to load images in the background, and once loaded handle the event and create your own response. Try Demo | View Code

Creating a polaroid photo viewer with CSS3 and jQuery

This example is making use of CSS3 and jQuery. It really shows the effect when combining two powerful techniques. The CSS3 is injected by jQuery, keeping the CSS file clean. The result is nice looking polaroidsthat you can drag around on the page…cool!

Easy Slider 1.7 – Numeric Navigation jQuery Slider

Great slider plugin for content and images.

PHP & jQuery image upload and crop

Awesome solution for allowing users to upload and crop images on your site.

Agile Carousel

Jquery plugin that allows you to easily create a custom carousel. Call Jquery UI to enable many different additional transition types and easing methods. Uses PHP to draw images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!

Sliding Boxes and Captions with jQuery

All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.

AnythingSlider jQuery Plugin

AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. In other words, to create a really “full featured” slider that could be widely useful.

Creating a Slick Auto-Playing Featured Content Slider

25+ Highly Useful jQuery Plugins Bringing Life back to HTML Tables

Lars — Sat, 19 Dec 2009 11:58:43 +0000

Most people have turned their back to tables for implementing web page layouts. This is because tables compared to table-less layout beased on CSS Positioning has several disadvantages. But tables are not useless at all! They should just be used to render tabular data as they originally was designed for. By adding a bit of jQuery you will be able to create very useful solutions with html tables that your users will find easy and intuitive to use.

If you dont find what you need in this article I recommend you check our latest jQuery compilation: 165 Awesome jQuery Sliders and Other Useful jQuery Effects

PicNet JQuery Table Filter

This plugin adds a row to the section of a table and adds filters that allows real time filtering of tabular data. Please see the home page for full details.

TinySort

A plugin to sort child nodes by (sub) contents or attributes. Very useful for ordering unordered lists or tables, but works on any type of node. Download it to get documentation and examples.It doesn’t get easier to sort fx. listsbut it is also possible to apply more complex sorting logic:

$(”li”).tsort();
$(”ul#people>li”).tsort();
$(”ul#people>li”).tsort(”img”,{order:”desc”,attr:”alt”});

Graph data from an HTML table using jQuery and flot

Draw graphs from html tables. graphTable() takes up to two objects as arguments: the first is an object with the arguments for graphTable; the second is an object with arguments to be handed off to flot

jLINQ

If you’ve used the .NET Framework, chances are you’ve also used LINQ. The features found in LINQ allow you to work with collections in-memory to query, sort and manage data, much like you would with a SQL command. LINQ also allows you to connect directly to a database to manage records all within your IDE.

jLINQ works like .NET LINQ and lets you use commands to query collections that are in memory. jLINQ copies many of the same commands you find in LINQ like skip or take along with certain aggregate functions like sum.

Floating header plugin

A jQuery plugin that makes the header of a table floating if the original header isn’t visible due to scrolling. The plugin will automatically choose the thead tag as the header for a table. If thead isn’t found it will search for rows marked with the class ‘floating’. The behavior can be changed by setting the option forceClass to true.

jExpand

jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.

columnHover

columnHover lets you highlight whole columns in a table when hovering over them.

Scrollable HTML Table

Scrollable HTML Table plugin for jQuery able to convert a table into scrollable.

DataTables

DataTables is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. Some key features include: variable length pagination, on-the-fly filtering, and multi-column sorting with data type detection.

HeatColor

HeatColor is a plugin that allows you to assign colors to elements, based on a value derived from that element. The derived value is compared to a range of values, either determined automatically or passed in, and the element is assigned a “heat” color based on its derived value’s position within the range.

Fixed Header Tables

Fixed Header Tables takes valid table HTML and builds a fixed header and scrolling body with optional footer.

Colorize – jQuery Table Plugin

Colorize is a jQuery plugin to add background color to alternate HTML table rows, highlight a row/column on mouse over, and colorize a row/column when you click your mouse button over it. You can colorize as many table rows or columns as you want. A repeat mouse click reverts the row/column to the original background color.

Flexigrid

Flexigrid gives you a lightweight but rich data grid with resizable columns and scrolling data to match the headers. It also has the ability to connect to an xml based data source using Ajax to load the content.

jQuery TableRowCheckboxToggle

This plugin can add toggle checkbox to any rows that can be specified through the CSS class names.

Striping Your Tables the OO Way

This demonstartion is an adaptation of a well written snippet of code by Mathew Pennell – “Striping Your Tables the OO Way”

Ingrid

Ingrid is an unobtrusive jQuery plugin that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.

JQTreeTable

With JQTreeTable, you can have a treeview in your table. With this plugin, users still get the plain table even thought they disable Javascript.

rowSelect

Simple little plugin to allow selecting of rows (single or multi) in a table.

treeTable 2.0

treeTable allows you to turn a column in your table into a tree. One notable feature is the ability to move an entire branch in the tree by dragging and dropping.

Tablesorter

Tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. Tablesorter can successfully parse and sort many types of data including linked data in a cell.

NReco jSquared

jSquared is a jQuery plugin that enables ability to add/remove HTML table columns and rows ‘on-the-fly’. Its functionality is very similar to Google Squared UI and useful for building advanced search interfaces.

Table Pagination

This jquery plugin is used to create a pagination element under a table element. You can customize your pagination needs through various settings.

columnManager

columnManager allows you to toggle the visibility of table columns (collapsing and expanding them) and to save the state until the next visit.

Table Drag and Drop

Table Drag and Drop allows the user to reorder rows within a table, for example if they represent an ordered list (tasks by priority for example). Individual rows can be marked as non-draggable and/or non-droppable (so other rows can’t be dropped onto them). Rows can have as many cells as necessary and the cells can contain form elements.

Chromatable

Chromatable allows you to easily create scrolling tables with fixed headers.

uiTableFilter

uiTableFilter is a plugin that makes filtering table rows very easy.

We have a lot of good articles for you. If you want to make your life a little bit easier and create automated content you should have a look at WP Robot for WordPress. We like to showcase and inspire you with nice things like this beautiful Epiphone Les Paul vintage Sunburst. Please have a look.

Also don’t miss these best wordpress themes if you’re looking for a great theme for your website.

10+ Brilliant On-line Tools for Freelancers

Lars — Thu, 17 Dec 2009 22:06:22 +0000

It’s amazing how many great free tools one can find on-line. If you’re a freelancer with a limited budget some of the free on-line tools listed below may be just what you’re looking for. Please share with us in a comment if you know on-line tools that belongs to the category “brilliant anyone should know about!”.

Adobe BrowserLab

Adobe BrowserLab made me say wow. In a very high quality interface it provides an easy and fast solution for cross-browser testing. You can preview and test your web pages on leading browser and operating systems online and it is free. This will help you get your results in real time, from virtually any computer connected to the internet. The tools allows you to zoom in and inspect details and compare results in different browers side by side.

browsersize at googlelabs.com

Google Browser Size is a visualization of browser window sizes for people who visit Google. For example, the “90%” contour means that 90% of people visiting Google have their browser window open to at least this size or larger.

Snipplr

Snipplr is a public source code repository that gives you a place to store and organize all the little pieces of code making it easy to find when you need it. Snipplr also lets you share your code snippets with other coders and designers.

net2ftp

net2ftp is a simple free web based FTP client. It will offer the features needed for managing websites using a browser. You can edit code, upload/download files, copy/move/delete directories recursively, rename files and directories.

Wordoff

Wordoff applies a set of rules to strip the cruft that is pasted into WYSIWYG editors from Word. This is really useful for cleaning up text before posting it to your website. Wordoff is written in Python and runs on Django in Google App Engine

Convert PDF Document to Word

Ever received a PDF document that you need to update fast? If your preferred tool for this is Word then this service is great. It converts PDFs into word for free in a few seconds.

ShowDocument

ShowDocument is a free service for online meetings with fully synchronized sharing of documents, whiteboards etc.. It is a quick and simple way to share with other people at a remote meeting.

Stripemania

Stripemania is a simple and free web 2.0 tool build to help you create stripes for your designs… yearh why not? You are able to choose the size of the stripes and the spacing between those. You can even add color gradient effect for all of your stripes.

LOOP PDF

LOOP PDF is a free web-based service that allows you to convert and combine files to PDF. LOOP PDF allows you to convert, organize, and combine files to PDF. This is very useful for generating official documents like agreements etc. if you cannot afford the real adobe solution… This tool is very simple to use and fast. No registration needed.

Go2Convert

Go2Convert is a set of free web based tools that allow you to convert, resize a picture without having to install any software on your computer. Once you have finished working with an image you can choose to copy image’s URL or download it directly to your computer – It doesn’t get easier than that.

16 Project Management Apps That Help Make Web Development More Efficient

Tom Walker — Wed, 16 Dec 2009 18:05:09 +0000

Web developers are often guilty of devoting too much time to their core work, at the expense of effective project management and admin. It’s all very well building an amazing website, but if it’s not delivered on schedule and within budget, you’re going to end up losing money and repeat business. Project management apps are key to streamlining your operations and improving productivity.

The invaluable apps explored below detail below are all of great use to web developers specifically, although many were not designed with web developers in mind. Some are ideal for freelancers who tend to work alone, others are great for those who work in small groups, and others still are suitable for bigger web development companies with a large, decentralized, often project-specific workforce.

Keeping close tabs on your projects can be very difficult and time-consuming, especially if you’re working on several simultaneously. These 16 apps will save you hassle, heartache and numerous wasted hours by performing a range of useful functions, from planning to document sharing, time and expense tracking, communication and reporting.

1. Assembla

Assembla offers the whole package: repositories, ticketing, collaboration and management tools. Assembla’s repositories, stored in Amazon EBS, keep your code safe, while allowing specified users to view and edit it in a secure fashion. Tickets, which can be posted and assigned to team members within seconds, help users accomplish tasks more quickly and efficiently.

2. Free project management

Using Podio for online project management, everyone involved is always on the same page. Keep team and project discussions in one centralized place where all relevant files and information is created and securely stored. Use the unique Podio App Builder to fully customize your project management apps to fit your work flows – no technical skills needed! Get out of your inbox. Work the way you want with Podio as your web-based project management software.

With Podio managing projects is easy and intuitive. Simply set up your project alone or together in your team within minutes. Stay on top of deliverables and deadlines with the built-in task manager, and use Podio reporting and the intelligent calendar to easily keep track of milestones, meetings, budgets and work progress.

3. @task

@task is web-based project management software that helps companies get work done. You’ ll love how easy it is to get more from your teams and bring your projects in on time and on budget. Use @task to plan your project life cycle and provide your teams with the project management tools they need to succeed.

4. 5pm

5pm is a project management tool suitable for any web developer, regardless of team size. This web app consists of two instantly understandable panels. The panel on the left lists your projects. Once you’ve selected a project, any files, discussions or other activity related to this project is displayed in the right panel. It couldn’t be easier.

5. Ta-da Lists

Ta-da Lists is perfect for those who write so many “to do” lists, stickies and notes that they can hardly keep track of them all. It’s far superior to an ordinary text editor that you may or may not keep open on your computer while working, as Ta-da List information is on the cloud and accessible from anywhere.

6. Basecamp

Basecamp is the world’s leading project collaboration tool, with thousands of very satisfied web developer customers. Write communal and personal “to do” lists, store and share files (up to 75GB) effectively between team members, write on your group’s message boards, add milestones to keep track of what’s due and who’s responsible, and track your own and others’ time.

7. SpringLoops

Designed specifically for web developers, SpringLoops enables groups to code together and safely share code between each other. It ultimately saves time by eradicating repeated activities performed on a day-to-day basis. It even backs up old versions of code, allowing users to quickly undo poor decisions.

8. Tenrox

Tenrox is perfect for web developers who not only have to manage their own work, but that of a small workforce, which might even spread around the world. Tenrox eliminates time wasted constantly constructing and circulating emails, letting a whole team view and edit all necessary documents. With Tenrox, you can keep track of time and expenses, perform cost and revenue accounting and track everyone’s progress.

9. Genius Project

Genius Project helps users manage every stage in the web development process, from project selection to execution. Group, compare and rank actual and potential projects, plan with interactive Gantt charts, maximise utilisation of human and other resources, track time and expenses, manage costs and budgets, generate invoices and much more.

10. Eclipse

Eclipse is a web application which deals with three key areas: portfolio management, project management and resource management. It lets you consolidate information from various projects in one accessible place, organise your schedule and prioritise every activity, track and report in a consistent manner and keep detailed tabs on all resources. Eclipse is simple to use and can be integrated with existing project management software.

11. workspace.com

workspace.com provides eight distinct applications, useful for all web developers, especially those who work as part of a team. These eight applications include “Requirements”, which ensures that you’re constantly working with the most recent version of a project; “Plans”, for planning schedules, budgets and resources; and “Tests”, which tracks and manages your testing process. The price you pay depends on which of the eight applications you require, as well as the size of your team.

12. Klok

Ever find yourself performing unnecessary tasks just to fill the time? Does each project end in a mad rush to get things finished? If the answer’s yes, then Klok is the app for you. It’s a simple work timer which lets you time manage each project in fine detail. Compare recent with past projects to make sure your efficiency is improving.

13. Less Time Spent

Another time tracker, Less Time Spent does exactly what its name suggests: it enables users to organise themselves more efficiently, saving hours and minutes which, after all, equate to potential dollars and cents! It tracks your operations in real time and supports Google ID login.

14. Nozbe

Nozbe is a great time and project management web app suitable for individuals and small teams. It lets users arrange their tasks into projects, focus on what needs to be done next, group tasks by context (home, office, phone etc) to maximise productivity, and collaborate with a team. What’s more, you can send notes to Nozbe from Twitter and Gmail, and manage Nozbe from your Mac dashboard.

15. Google Apps

With all the excellent project management apps currently available, it’s easy to forget that Google Apps offers a range of tools for web developers who want to move everything to the cloud. Google Groups and Google Sites can be used in conjunction to ease communication and encourage secure sharing of calendars, documents, videos and lots more. Admittedly, Google Apps is unlikely to be as suited to your needs as some of the other apps in this list, but it is highly accessible, well designed and completely free to use.

16. Redmine

Redmine offers a host of really useful tools. At its simplest, it lets users manage a great number of projects simultaneously, defining personal roles and assigning tasks to specific team members. At its more complex and customisable, it lets users manage tasks as subprojects of main projects, automatically creating Gantt charts and calendars.

17. Central Desktop

Central Desktop offers users an online workspace where they can share files and documents, manage tasks and discuss projects in a group without the need for constant email writing and checking. It’s free to use in a limited capacity.

Author : Ben Bate

Tom works at CartridgeSave.co.uk, a supplier of printer cartridges based in the UK. Click here to read more of his work.

Whether you are interested in comptia a+ or ant to achieve cissp certification for your career sake, testking offers you up to date n10-004 material with 100% success guarantee.

10 Useful jQuery Techniques to Improve Your Code

Lars — Tue, 15 Dec 2009 23:40:51 +0000

jQuery is known for making things that where hard or almost impossible for most people with regular Javascript simple and elegant. While the jQuery community is growing so is the number of plugins available for anyone to address nearly any client side need. Problem is that using jQuery this way is so simple that getting to know the framework well isn’t really needed. I believe jQuery is worth investigating further and web every front end developer and designer would benefit from knowing a bit more of what is going on under the shiny surface. This post will show you jQuery techniques and give you some insight and inspiration that you may use going forward.

If you find this post useful I will recommend that you take a look at these previous posts:

#1 – Load the jQuery framework from Google or jquery.com

This is a tip you see in most jQuery pospts but it can’t hurt to repeat it. Google have been hosting several JavaScript libraries for a while now on Google Code and you may want to load it from them instead of from your server to take advantage of their great bandwith.

You can actually also load the latest jQuery version from jquery.com using this code:

#2 How to make sure an image has loaded properly

You can do this by using the .load() method on an “img” element and put a callback function in it. In the example below the “src” attribute of an image tag is changed to load a new image and attaches a simple load function. This technique can fx. be useful when building a captcha form validator.

$('#myImage').attr('src', 'image.jpg').load(function() {
 alert('Image Loaded');
 //perform action that is dependant of image being fully loaded
});

#3 Easy Vertical Align

If you need to center an element to the documents height this jQuery snippet will be very useful. Using it is very simple as all you need to do is to add the class verticalcenter to the object that you want to center to your document. In the example below “TESTER” will be moved when “Do it” is clicked.

Do it
TESTER
;

#4 Replace a
with jQuery

A simple and possibly the most simple way is to use the replaceWith method.

$('#targetdiv').replaceWith('going to be inserted!
');

#5 manipulate text with Regular Expressions and jQuery

You can perform quite power full actions with text by using regular expressions Regex. jQuery support Regex in a simple way and if you know Regex you will pick this up fast. Here is an example where the word “test” is removed from text in an element on the page. If you need to read up on Regex you may want to read this post.

Do it
Remove it: test

#6 Opening links in new a window based on class or attribute

This jQuery technique is a simple and quick way to make all your external links open in new browser window. In order to make the code below work you need to add the attribute rel=”external” to your external links.

Another advantage of this trick is that target=”blank” attribute is not valid XHTML 1.0 Strict. If you are using the following code, you can achieve the same functionality without having validation problems.

$("a[@rel~='external']").click( function() {
    window.open( $(this).attr('href') );
    return false;
});

Another way to control this and taking it a bit further by setting window size is shown below. Use the code by setting a class “popupwindow” on a link.

$('a.popupwindow').live('click', function(){
 newwindow=window.open($(this).attr('href'),'','height=220,width=170');
 if (window.focus) {newwindow.focus()}
 return false;
});

To open a link only as a tab you can use this code (requires a browser that support tabs). Use the code by setting a class “newtab” on a link.

jQuery('a.newTab').live('click', function(){
newwindow=window.open($(this).href);
jQuery(this).target = "_blank";
return false;
});

#7 Verify if an Element is empty

This is a simple way to test in jQuery if an element is empty. The code will print “Yes (?)” in an alert box because div #test is as empty as it can be.

Test it: Is target element empty?

#8 Simple but useful way to get the number of elements returned by a selector

This will return the number of matched elements. It’s simple and clean and typical for jQuery:

$('targetelement').size();

#9 Disable right-click contextual menu

There are a lot of examples and scripts in javascript covering this topic, but also this time jQuery makes you life much easier!:

$(document).ready(function(){
  $(document).bind("contextmenu",function(e){
    return false;
  });
});

#10 Parsing XML with jQuery (will be useful for AJAX operations)

XML is an important part of AJAX and AJAX is an important part of front end development. With jQuery, when you receive XML from a callback, you’re not actually getting raw text, you’re actually getting a DOM (document object model) that jQuery can traverse very quickly and efficiently to give you the data you need.

Lets take a look at some jQuery that will request a XML document on the server.

$(document).ready(function()
{
  $.ajax({
    type: "GET",
    url: "test_jquery_xml.xml",
    dataType: "xml",
    success: parseXml
  });
 });

Assuming you have the file “test_jquery_xml.xml” on the server you are ready to start parsing the XML. Lets assume the xml retrived looks like this:



    someone
    person
    Reminder
    Just a simple note!


someone else
    another one
    Reminder
    Just another simple note!

Accessing the xml data is simple and elegantly achieved in jQuery as show below.

function parseXml(xml) {
 //find every note and print the type
 $(xml).find("note").each(function()
 {
   $("#output").append($(this).attr("type") + "
");
 });
}

Output will be:
public
private

40+ jQuery Plugins Improving Your Website Look and Feel

Lars — Thu, 03 Dec 2009 21:16:11 +0000

Making more and more appealing and interactive user interfaces have been one of the never ending competitions between web designers since html and browsers where in the mid nineties. The competition is there for a reason. The number of website on-line has experienced a nearly exponential growth and you need to stand out to be seen! Actually it is kind if scary if this trend is going to continue… Anyway most of you reading this post is probably agreeing that websites need to be special, look good and have features that is not found everywhere. I believe jQuery is the answer today just as Flash was 5 years ago. With simple steps and limited programmer skills jQuery will allow you to add goodies to your website you wouldn’t even allow yourself to dream about! This post is listing a lot of really cool plugins you can simply download and setup to impress your visitors!

qTip

Tab SlideOut

Create a side tab that expands content for a feedback form or contact info. Make your own image to use as a tab and apply this plugin to any div to hide the content off the right side of the screen, It animates to show the content, when the handle/tab is clicked.

Toolkit with 6 Awesome jQuery User Interface components

This is a great set of jQuery UI Tools. The effort used to present these tools on-line and document them is amazing. Its all in a single JavaScript file weighs only 5.72 Kb.

“The beauty of this library is that all of these tools can be used together, extended, configured and styled. In the end, you can have hundreds of different widgets and new personal ways of using the library.”

Documentation of the jQuery Tools library is good and way above what you would expect from a free set of jQuery plugins.

jQuery Confirm Plugin

This plugin displays a confirmation message in place before doing an action. It does not require adding any extra code apart from a call to the plugin itself. One call to $(element).confirm() will do the magic. Also, this plugin does not require you to provide a callback function; it figures it out on its own. Demo Download

Create a jQuery Popup Bubble

Learn how to add a cool popup bubble to an RSS feed link using jQuery. Demo

Horizontal Slide Nav Using jQuery & CSS

Learn to create a spectacular sliding navigation whose animation is triggered when the user hovers over a navigation item. Demo

SimpleModal

This jQuery plugin is a flexible and straightforward way of providing modal window functionality on your site.

Image Overlay Plugin

The Image Overlay Plugin lets you present more information about your images. Hovering over an image reveals associated text on top of it.

jQuery Corner

It s important to understand that this corner plugin is pulling off its magic by adding more elements to the page. Specifically, it adds div “strips” to the item to be cornered and sets a solid background color on these strips in order to hide the actual corners of the real item. So if you step back and look at the cornered element, think of there being solid colored divs hiding the true squared off corners of the item you wish to be changed. This helps you understand the inherent limitations of this small plugin. It s best suited for rounding off block-level elements (divs, paragraphs, etc) and may present more challenges when trying to round off inline elements (spans, anchors, etc). Demo Download

AutoCompleter Tutorial – jQuery(Ajax) PHP MySQL

I thought i would write this tutorial because most of the auto completer applications i have seen just dump the code into a zip and tell you how to use it rather than how and why it works, knowing about this enables you to customise it a lot more (this has been demonstrated with the other apps i have written here). Demo Download

SlideBox

Do you need a sliding div panel at the top (or bottom) of web pages that can contain more links or your login/sign-in feature? Check out SlideBox.

Build a Better Tooltip with jQuery Awesomeness

This tutorial will show you a method for replacing the built-in browser tooltips that appear on elements such as images and links with title attributes.

Using jQuery Slider to Scroll a Div

Todays tutorial is going to show how to create a horizontally scrolling div using jQuery, html, and css. The main part of this tutorial is going to focus on the jQuery which is used to build the slider which controls the scrolling. One of the first questions that is going to pop into your head is, “why?”. Well the main reason to do this is to be able to build a custom scroll bar/slider. You can also introduce extra functionality using the jQuery slider. Demo Download

BeautyTips

The plugin creates rollover balloon-help style tooltips for any element on your page. While there were a few different tool tips plugins that existed for jQuery, none of them seemed to quite meet my need for a NetFlix (or Google Maps) style talk-balloon popup. Demo Download

jQDialog

jQDialog is a jQuery plugin for exhibiting unobtrusive modal windows for in-page notifications that can replace the alert(), prompt(), and confirm() JavaScript functions.

Panel Gallery

Panel Gallery is an image slideshow with a unique transitional effect. It transitions to another image in a sequential panel manner.

Creating a Floating HTML Menu Using jQuery and CSS

This jQuery-based navigation menu tutorial will show you how to create a menu that follows you up and down the page as you scroll.

Simple jQuery Modal Window Tutorial

This modal window tutorial uses a rel attribute to indicate whether a link opens a modal window using inline content. You’ll witness a few popular jQuery methods in action like the .click() and .css() methods.

Columnize

Columnize creates a newspaper-like column layout. The original HTML code only needs small adaptions. In most cases, it is not necessary to adapt the HTML code at all.

Smart Tooltips with jQuery

This tooltip technique will check whether a link has a title attribute or not, and if it doesn’t, it skips it title.

Facebook Style Alert Confirm Box with jQuery and CSS

I received a request from my reader that asked to me how to implement facebook style alert box. So I had designed Facebook Style Alert Confirm Box with jquery plug-in jquery.alert.js. It is simple just changing some lines of CSS code. Demo Download

ColorBox

ColorBox is a light-weight, customizable lightbox plugin for jQuery 1.3. Demo Download

Improving Search Boxes with jQuery

Create search boxes that are highlighted when the user focuses on them by following along this excellent jQuery tutorial.

Jquery Fade In-Fade Out

jQuery Iconize

jQuery Iconize allows you to reduce or expand page elements into an “icon state”, providing your web app a user-friendly way of minimizing page objects.

Create Sliding Image Caption with jQuery

This image gallery tutorial shows you an interesting interaction technique for having captions that slide up to reveal more information about a particular image when the user hovers over it.

PikaChoose

PikaChoose is a super lightweight image gallery that’s a cinch to integrate into your website. You can see it in action on the Belvedere Inc website.

Favorite Rating with jQuery and Ajax

I received a mail from my reader that asked to me how to implement Show the love rating system like amypink.com. So I had designed Favorite Rating with jQuery and Ajax.. It is very simple, just changing little code on my old post Voting system with jQuery, Ajax and PHP. Demo Download

Growl

Growl allows you to present DOM-inserted elements (divs by default) that are perfect for user warnings, messages, and status update notifications.

Simple jQuery Image Slide Show with Semi-Transparent Caption

In this tutorial, you’ll learn about the concept of tweaking opacity of elements, as well as using the setInterval function to delay the firing off of another function.

Easy Image Gallery

Creating image thumbnail galleries is a snap when you implement the Easy Image Gallery jQuery plugin into your site’s template.

Boxy – Facebook-like Dialog Overlay With Frills

Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening. It differs from other overlays I have seen by providing an object interface to control dialogs after they have been created. And for simple usage scenarios, boxy also provides a jQuery plugin for automatically hooking up links and forms, as well as an ask() helper for presenting multiple choices to the user. Demo Download

Image Reveal using jQuery

This quick and easy tutorial shows you the concept of hiding and showing elements by watching out for window events (in this instance – mouse hovers).

jQuery Text Resizer

The Text Resizer plugin attempts to solve one problem: that of resizing text on demand by the user. A lot of us have visited sites, particularly news websites, where the user is given the option to enlarge or decrease the size of the website’s text. This is especially useful for sites where it is expected that older visitors will make use of the site.

PfeLoader

This jQuery plugin allows you to display a progress bar for page components that are being downloaded – useful for image galleries that share large-scale photos.

nyromModal

nyromModal is a useful jQuery plugin that has a robust set of features and options for you to truly create a customized modal window for your web pages.

Quovolver

Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way.

Mouse Over Animation for Text

MOAText is a spiffy jQuery plugin for giving you the ability to animate HTML text triggered when the mouse cursor hovers over them.

How to create a stunning and smooth popup using jQuery

In this jQuery tutorial, you’ll discover a technique for creating a slick modal window that appears when the user clicks on the triggering element (in this case, form submit input, but you can easily modify it into other HTML elements like ). The tutorial will also show you how you can deal with keypress events so that you can incorporate keyboard shortcuts into your interface.

DragScrollable

Twit

Twit is a jQuery Plugin to Display Twitter Tweets on a Blog.

jParallax

jParallax turns a selected element into a window, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way. Demo Download

Uploadify

Uploadify is a package written on top of jQuery that gives you both the client-side and server-side functionality you’ll need to handle single-file and multi-file uploads.

jLoupe

jLoupe adds a “loupe” or “magnifying glass” effect to images. Applying the plugin is as easy as adding the class “jLoupe” to the images you want to enable the effect on. There are several ways to enable the zoom behavior depending on how you are loading the images on your page. The best way is to simply scale a large image using the html attribute “width” or “height”. But if you are displaying a gallery of small thumbnails, you can apply jLoupe by adding the URI of the larger image to the “longdesc” attribute to your image tag.

Tip! JavaScriptBank.com: provide thousands of free JavaScript codes, free JavaScript tutorials, free JavaScript training videos

Complete mcp and ccna certification passing guarantee by actual test exam material.