Take Your HTML Tables to a New Level with JavaScript Frameworks

With basic HTML tables, the structure and the way the table are presented inherits the native html style. And if you like to change it then you need to change the underlying HTML code or spend time in adding attributes to all tables tags, in order to style it with CSS . But what if you want to make the tables more interesting, more dynamic, more visual appealing without spending so much time. Yes you can certainly use JavaScript for this, but coding it from scratch will be time consuming and it’s not worth. But JS libraries/frameworks will allow you to add a range of dynamic behavior to your tables and manipulate it for better presentation on a webpage without spending much time. We decided to list a few for the benefit of those who intend to use tables with JavaScript(JS). Most of these are for the popular jQuery, MooTools and Prototype/script.aculo.us JS frameworks. Since most of the JS frameworks mentioned below are plug-ins that work on top of existing JS frameworks, it is recommended that you take a look at those base frameworks first. But there are a few others that do not require an existing JS frameworks.

Link:
http://www.thepixelart.com/...

jQuery Plugin Repository

What I like about this plugin listing over the standard jQuery one is the images. Nice to get a quick look at what the plugin will do. Hopefully the site will be actively maintained.

Link:
http://www.jqueryplugins.com/

Block IE6 from browsing your website

jReject provides a simple, robjust, light-weight way to display rejections based on a the browser, specific browser version, specific platforms, or rendering engine. Provides full customization of the popup. Uses no CSS file (by default), and can easily be used on page load or during a specific page event. Also provides a flexible way to beautifully and cleanly display custom browser alternatives in the popup.

Using jReject you can block any browser from visiting your website. I would actually never do this. Why turn away anyone from your website just because of their browser preference.

jReject:
http://jreject.turnwheel.com/

jCryption a javascript HTML-Form encryption plugin

In short words jCryption is a javascript HTML-Form encryption plugin, which encrypts the POST/GET-Data that will be sent when you submit a form. It uses the Multiple-precision and Barrett modular reduction libraries for the calculations and jQuery for the rest.

Normally if you submit a form and you don’t use SSL, your data will be sent in plain text. But SSL is neither supported by every webhost nor it’s easy to install/apply sometimes. So I created this plug-in in order that you are able to encrypt your data fast and simple. jCryption uses the public-key algorithm of RSA for the encryption.

Link:
http://www.jcryption.org/

Easy Drag and Drop with jQuery

Drag’n drop generally looks hard-to-apply but it is definitely not by using JavaScript frameworks. Here is, how it is done by using jQuery & jQuery UI

Too easy!

Link:
http://www.webresourcesdepot.com/...

30+ Javascript/Ajax Techniques for Sliders, Scrollers and Scrollbars

Every once in a while we like to focus on different design elements and how to use javascript and ajax to make them more interactive and more flexible to the user. In this article we’d like to present a list of over 30 hand-picked Sliders, Scrollers and scrollbar techniques you can use to achieve some special visual effects in your designs.

Link:
http://www.noupe.com/javascript/...

Design Inspiration Roundup

10 UI Design Patterns You Should Be Paying Attention To:
In short, design patterns are solutions to recurring problems. By extension, UI design patterns are solutions to common user interface problems. This article goes over 10 interesting UI design patterns that you can use in your own projects. In fact, you may already be using them now without knowing it.

Pattern Tap:
Pattern Tap is here to satisfy and encourage the inspiration needs of my interface design peers and peeps. We aspire to be the one stop pattern shop for your next inspiration need.

40+ Helpful Resources On User Interface Design Patterns:
In this article, we share with you the best of the best, cream of the crop sites, galleries, online publications, and libraries devoted to sharing information and exploring concepts pertaining to User Interface design patterns.

Flickr Design Patterns:
A great collection of design patterns on Flickr that are organized by category.

UI Pattern Factory:
UI Pattern Factory is a mix of user interface design pattern library and UI gallery. It is a place to find user interface best practices, get design inspiration, and share design solutions with others

Open Source Design Pattern Library:
The Open Source Design Pattern Library is a place where individuals and organizations can share, collaborate, and discuss design patterns.

Yahoo! Design Pattern Library:
Welcome to the Yahoo! Design Pattern Library. We're thrilled to be sharing patterns and code with the web design and development community, we hope it's useful, and we look forward to your feedback.

User Interface Design Patterns:
Recurring solutions to solve common problems.

15 jQuery Plugins To Create An User Friendly Tooltip:
Tooltip is a good way to show extra information when user hovers the cursor over an element. The “hover box” will appear when the mouse hover in, and disappear when the mouse hover out. If the tooltip is being used appropriately, it can improve our site’s user friendly level, and also save us a lot of spaces. Today, we are going to see 15 jQuery plugins to create an user friendly tooltip.

25+ jQuery Plugins that enhance and beautify HTML form elements:
...collected over 25 jQuery plugins that enhance and beautify html form elements. Some of them add more capabilities that able to increase usability and user friendliness to a website.

20 Excellent JavaScript Navigation Techniques and Examples:
In this article you’ll discover some terrific and unique JavaScript-powered navigation techniques and examples.

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.

Link:
http://www.mind-projects.it/projects/jqzoom/

Roundup of JavaScript Techniques

50 Excellent AJAX Tutorials
This post serves as a collection of useful tutorials on working with AJAX in a wide variety of ways. You’ll find tutorials on working with forms, building shopping carts, creating chat features, working with log-ins and usernames and much more.

Link:
http://www.smashingmagazine.com/...


The Top 40 Free Ajax & Javascript Code for Web Designers
The list below is made up of the best FREE scripts available, they are all of the highest quality and more or less easy to configure.

Link:
http://speckyboy.com/2008/...


75 (Really) Useful JavaScript Techniques
Here are 75 more handy JavaScript techniques that have made websites much sleeker and more interesting.

Link:
http://www.smashingmagazine.com/...


jQuery and JavaScript Coding: Examples and Best Practices
The article will explore what constitutes best practices with regard to Javascript and, furthermore, why jQuery is a good choice of a framework to implement best practices.

Link:
http://www.smashingmagazine.com/...

Simple Modal

SimpleModal is a lightweight jQuery plugin that provides a simple interface to create a modal dialog.

The goal of SimpleModal is to provide developers with a cross-browser overlay and container that will be populated with data provided to SimpleModal.

Link:
http://www.ericmmartin.com/...

Create a one-time popup using jQuery

Thought I would go through the steps of creating a one-time popup for a webpage using jQuery. The goal is to create a styled popup that is shown to visitors a single time when they visit a webpage, but not shown on future visits to that pages.

What we will need:

• jQuery: Provides the JavaScript framework for the code and does a lot of the heavy lifting
• jQuery Thickbox: Provides the actual popup and gives us an amazing amount of control on whats shown
• jQuery Cookie: Provides the mechanism to track users coming back to the page to prevent them seeing the popup more than once

Getting a webpage ready:
With only few lines of code added the head of a page we can make it ready to handle our popup.

Add into the Head area (between the HEAD tags):

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.cookie.js"></script>
<script type="text/javascript" src="scripts/thickbox/thickbox.js"></script>
<link rel="stylesheet" type="text/css" href="scripts/thickbox/thickbox.css">

<script type="text/javascript">
$(document).ready(function(){
 if ($.cookie('20080521') != '1') {
  tb_show("<strong>We're Moving!</strong>",
              "#TB_inline?height=190&width=275&inlineId=mypopup","");
  $.cookie('20080521', '1', { expires: 20 });
 }
});
</script>

What the above does is first make reference to all the components we require to get the One-time popup to work.

The script section:

1. Checks if the document (page) has fully loaded
2. When its loaded it looks for the cookie that is set when the user has viewed the popup. What I did was date code the cookie so you can easily force a popup just by changing the cookie's name
3. If the cookie has not be set then a popup is displayed to the user and the cookie gets set with a 20 day expiration
4. Each subsequent visit to the page will not trigger the popup because the cookie has been set

Adding the popup:

<div id="mypopup" style="display:none">
<p id="msg">
         This is a sample popup.
</p>
</div>

This is the hidden content which will be displayed to the visitor as a popup. This can be any HTML code and can contain tables, forms or any styling you want and its location can be anywhere in a page between the BODY tags.

Wrap up:
You can see this is a very trivial task when you know the right components to use. With jQuery it couldn't be easier.

Even more jQuery samples

jQuery is a great JavaScript framework that opens the doors for a more advanced website giving the user a better experience. Below is more things that can be accomplished with jQuery.

Link:
http://www.noupe.com/jquery/...

Even more jQuery plugins

Accessible slider:
http://www.filamentgroup.com/lab/...


Coda Popup Bubbles:
http://jqueryfordesigners.com/coda-popup-bubbles/



Charts using canvas and jQuery:
http://www.filamentgroup.com/lab/...



Flexgrid:
http://webplicity.net/flexigrid/

Masked Input plugin for jQuery

This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer 6/7, Firefox 1.5/2, Safari, and Opera.

A mask is defined by a format made up of mask and placeholder characters. Any character not in the placeholder character list below is considered a mask character. Mask characters will be automatically entered for the user as they type and will not be able to be removed by the user.

Had it working in less than 5min and it works like a charm. jQuery just keeps getting better for me and has a promising future for Veign's Web Development.

Link:

jQuery API

A compact and well presented site of the jQuery API. Not only do they provide the function description, but offer more samples of usage over the jQuery website.

Don't forget to check out the jQuery plugins website for some very cool things:
http://plugins.jquery.com/

API:
http://remysharp.com/jquery-api/

Organized collection of Javascript Libraries

Very nicely organized collection of Javascript Libraries. Now if they would only provide a description under each title. Either way I like it and have bookmarked it.

Link:
http://javascriptlibraries.com/