10 Small Things You May Not Know About Javascript

It doesn’t matter how many years I’ve been dealing with Javascript – it contains many little things that surprises me almost every week. For me, Javascript means a constant learning process. In this article, I’ll provide ten small Javascript tips, mainly aimed for beginner and intermediate Javascript developers. Hopefully there’s at least one useful tip for every reader :).

Link:
http://samuli.hakoniemi.net/...

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/

Create your next JavaScript application using punch cards

jCquard is a generally useless JavaScript library that you will probably (hopefully?) never need to use — unless you are the nostalgic type, you like to roll with the old-schoolers, or you are convinced that the end is near and soon all we’ll have left are stacks of punch cards with which to rebuild the entirety of our culture.

Link:
http://www.outstandingelephant.com/jcquard/

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.

Easily add ratings to your website

You can easily add a rating system to your website with JS-Kit. This is a great way to get immediate feedback on your website products, listings or posts from your visitors. Also, if you haven't heard Google will be displaying Rich Snippets which may include ratings. So, get your ratings now and possibly enhance your listings in a Google Search Result snippet.

From JS-Kit:

The best content on most web sites and blogs gets buried as new content is added. JS-Kit's Ratings service solves this problem by uncovering and displaying your top content. It lets your visitors rate your merchandise items, services, pictures, blog entries, or any other objects on your site.

The service can be used in two modes, either as a 5-star rating widget or a thumb-up/-down widget and is incredibly easy to install on any static or dynamic web page.

Link:
http://js-kit.com/ratings/

Count lines of code in a project with CLOC

cloc counts blank lines, comment lines, and physical lines of source code in many programming languages. It is written entirely in Perl with no dependencies outside the standard distribution of Perl v5.6 and higher (code from some external modules is embedded within cloc) and so is quite portable.

Works great for comparing two projects. Recently I went through a code refactor on a project and I needed to give some information back to the client. CLOC made it simple to give a report as to the before and after counts. The before was approx 240K lines of code and the after was about 81K with zero changes to functionality.

Link:
http://cloc.sourceforge.net/

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/

Prevent websites from blocking the right-click menu in Firefox 3

Tools -> Options -> Content -> Advanced (top area)

Now just uncheck the Disable or replace context menus (highlighted above). It should be noted that some online applications attempt to replace the right click menu with a menu that is useful within the context of what you are doing (like Google Spreadsheets).

JavaScript image gallery with ImageFlow

ImageFlow is an unobtrusive and userfriendly JavaScript image gallery which is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License. This means you need the author's permission to use ImageFlow on commercial websites.

Link:
http://imageflow.finnrudolph.de/

JavaScript error reporting service with DamnIt

DamnIT is a free service that emails you when a user encounters a JavaScript error in your webpages. DamnIT makes it simple for beta testers to provide useful feedback by prompting them after an error occurs and combining their response with error message, file, line number, and back-trace information. You'll receive detailed automated error information instead of vague bug descriptions.

Link:
https://damnit.jupiterit.com/

Rotating 3D Cube in JavaScript

Link:
http://maettig.com/code/javascript/3d_dots.html

Also, check out the ASCII fire in JavaScript:
http://maettig.com/code/javascript/asciifire.html

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/...

iMask

iMask is an open source (free) javascript tool for creating input and textarea masking.

Link:
http://zendold.lojcomm.com.br/imask/

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/

Mario Brothers in JavaScript

Mario Brothers, sorta, in a 14K JavaScript file:
http://blog.nihilogic.dk/.../super-mario-in-14kb-javascript.html

10 AJAX Effects to Boost Your Website’s Fanciness Factor

Here’s a collection of 10 powerful – yet easy-to-implement — AJAX effects to supplement your web page’s interface. These were picked using a “bang for your buck” methodology; meaning that these effects were chosen specifically because they provide high-impact effects with very little effort in installing and using them.

Link:
http://sixrevisions.com/rapid-development/...

Slimbox, the ultimate lightweight Lightbox clone

Slimbox is a 7kb visual clone of the popular Lightbox JS v2.0 by Lokesh Dhakar, written using the ultra compact mootools framework. It was designed to be small, efficient, more convenient and 100% compatible with the original Lightbox v2

Link:
http://www.digitalia.be/software/slimbox

Lightbox v2:
http://www.huddletogether.com/projects/lightbox2/

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/

IE7 JavaScript library

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.

Link:
http://code.google.com/p/ie7-js/

See it in action:
http://ie7-js.googlecode.com/svn/test/index.html

Automatically highlight image maps with mapper

mapper.js 1.0 allows you to add automatic area highlighting to image maps on your webpages. It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it can use "jsgraphics" from Walter Zorn (if installed), else it'll degrade and your visitors won't notice a thing.

The effect is very cool and can be useful in image maps with many hotspots, like country or state maps.

Link:
http://www.netzgesta.de/mapper/

Javascript based Percentage Bar / Progress Bar Creator

Sometimes, when we are building websites and web applications, we need a percentage bar / progress bar to show the progress of a specific task. However, it is very difficult to find a working and easy solution without using Flash. Therefore WebAppers have created a simple Javascript based Percentage Bar / Progress Bar which is inspired by Bare Naked App. Bare Naked App taught us how to display Percentage Bar with 2 images only by using CSS. And then I used a little bit of Javascript to make it more interactive. You can use it anywhere you can think of. Use your Imagination, I am sure you will find it useful somewhere.

Link:
http://www.webappers.com/progressBar/

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/

Tinglets opens the door for other JavaScript bookmarks

tingelets are a set of bookmarklets that you can place in your browsers bookmark bar. When clicked, they highlight a certain tag or set of tags in a specific color or background tile. They are very handy for quickly looking at web layouts in different browsers. You can either highlight tags directly or type in a tag, id or class name to highlight the matching element(s).

I can see many of these JavaScript bookmarklets to assist users. In fact I have a great idea of one that I will se if I can get developed.

Link:
http://www.tingelets.com/

Yet another Javascript thingy

This one produces Nice Titles on your hyperlinks. I think I could find a place for this in some up coming website designs and since overLib is no longer developed this one could work (even though its development is slow too).

While you're there check out his other browser experiments, as he calls it.

Link:
http://www.kryogenix.org/code/browser/nicetitle/

Four more AJAX / JavaScript frameworks and code

SimpleJS: A javascript library simple and light proposing functions ready with the use to facilitate the exploitation of ajax.

Script.aculo.us: provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly.

Prototype: Is a JavaScrip framwork that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.

ASP.NET AJAX: A free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.

Also, don't forget to check out what the big guys like Yahoo! and Google offer.