Delivering informative structure is the primary task an interactive user interface should be able to cope with. The more intuitive layout structure is designed, the better users can understand the content. Whatever content you have to present, you can present them in a more interactive & more responsive ways. In this article we’d like to present 10 smart javascript techniques for showing and hiding content using different JS libraries.

1. Simple Toggle with CSS & jQuery

A simple toggle tutorial with an explanation of how to switch the “open” and “close” graphic state. The markup is pretty straight forward, where the h2 tag is a link that “trigger” the toggle effect. Below the h2, we will have our container where we hold the content.

<h2 class="trigger"><a href="#">Toggle Header</a></h2> <div class="toggle_container"> <div class="block"> <h3>Content Header</h3> <!--Content--> </div> </div>

1. jquery-fade-infade-out

A nice fade in fade out effect you can add to your website. The effect fades an element to 30% on arrival of the website, then when you hover over it, it fades to 100%. The effect can be assigned to basically anything in a website wether it be an image, text, a link or even a div.

$(document).ready(function(){ $("ELEMENT HERE").fadeTo("slow", 0.3); $("ELEMENT HERE").hover(function(){ $(this).fadeTo("slow", 1.0); },function(){ $(this).fadeTo("slow", 0.3); }); });

1. How to Mimic the iGoogle Interface

In this tutorial you will learn how to create a customizable interface with widgets. Each widget can be collapsed, removed and edited. The widgets can be sorted into the three seperate columns by the user (using a drag and drop technique). The finished product will be a sleek and unobtrusively coded iGoogle-like interface which has a ton of potential applications using jQuery’s UI library and specifically the “sortable” and “draggable” modules.

1. Show/hide a nice Login Panel using Mootools 1.2

In this tutorial, we will see how to create a show/hide login/signup panel for your website using Mootools 1.2

1. jQuery pageSlide

jQuery pageSlide is a plugin for jQuery that slides the viewable webpage off-screen, revealing and populating a secondary interaction pane. It may be used in a similar manner to Lightbox, where screen real estate and centralization of the user experience are a concern.

The primary window is reserved for content; secondary interactions do not require additional space on the page — the area they need is created and removed on demand. Because the user can see the original window, they have a greater likelihood of retaining focus, and can easily return to the previous task.

1. Liquid expandable section with rounded corners using CSS

This tutorial explains how to design a nice liquid expandable section with rounded corners (top-left, top-right, bottom-left, bottom-right) using some lines of CSS, HTML and JavaScript code.

1. How to Make a Smooth Animated Menu with jQuery

This menu has a smooth animation using “easing” effect. There are two actions in the code used here. When the mouse moves over a menu item, that item starts an animation where it expands to 150px tall over 0.6 seconds. The easing applied through the plugin is ‘easeOutBounce’ which causes the box to “bounce” a little as it reaches the end of the animation (”out”). When the mouse is moved off the animation to the starting size is triggered.

1. Lazy Load

Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of view port (visible part of web page) wont be loaded before user scrolls to them. Using lazy load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.

1. MOOSLIDE - AJAX CONTENT SLIDE

MooSlide’s functional solution is to present any contentis. It is a small and slim ajax based extension or replacement of the common “lightbox” that can be found on nearly every page. It is based on the mootools framework.

1. The Sexy Curls jQuery Plugin

Sexy Curls jQuery plugin is an open source solution which lets you share in the beauty of the page fold feature with ease. It uses the jQuery UI & its resizable package.

DIRECT LINK »

Delivering informative structure is the primary task an interactive user interface should be able to cope with. The more intuitive layout structure is designed, the better users can understand the content. Whatever content you have to present, you can present them in a more interactive & more responsive ways. In this article we’d like to present 10 smart javascript techniques for showing and hiding content using different JS libraries.

1. Simple Toggle with CSS & jQuery

A simple toggle tutorial with an explanation of how to switch the “open” and “close” graphic state. The markup is pretty straight forward, where the h2 tag is a link that “trigger” the toggle effect. Below the h2, we will have our container where we hold the content.

<h2 class="trigger"><a href="#">Toggle Header</a></h2> <div class="toggle_container"> <div class="block"> <h3>Content Header</h3> <!--Content--> </div> </div>

1. jquery-fade-infade-out

A nice fade in fade out effect you can add to your website. The effect fades an element to 30% on arrival of the website, then when you hover over it, it fades to 100%. The effect can be assigned to basically anything in a website wether it be an image, text, a link or even a div.

$(document).ready(function(){ $("ELEMENT HERE").fadeTo("slow", 0.3); $("ELEMENT HERE").hover(function(){ $(this).fadeTo("slow", 1.0); },function(){ $(this).fadeTo("slow", 0.3); }); });

1. How to Mimic the iGoogle Interface

In this tutorial you will learn how to create a customizable interface with widgets. Each widget can be collapsed, removed and edited. The widgets can be sorted into the three seperate columns by the user (using a drag and drop technique). The finished product will be a sleek and unobtrusively coded iGoogle-like interface which has a ton of potential applications using jQuery’s UI library and specifically the “sortable” and “draggable” modules.

1. Show/hide a nice Login Panel using Mootools 1.2

In this tutorial, we will see how to create a show/hide login/signup panel for your website using Mootools 1.2

1. jQuery pageSlide

jQuery pageSlide is a plugin for jQuery that slides the viewable webpage off-screen, revealing and populating a secondary interaction pane. It may be used in a similar manner to Lightbox, where screen real estate and centralization of the user experience are a concern.

The primary window is reserved for content; secondary interactions do not require additional space on the page — the area they need is created and removed on demand. Because the user can see the original window, they have a greater likelihood of retaining focus, and can easily return to the previous task.

1. Liquid expandable section with rounded corners using CSS

This tutorial explains how to design a nice liquid expandable section with rounded corners (top-left, top-right, bottom-left, bottom-right) using some lines of CSS, HTML and JavaScript code.

1. How to Make a Smooth Animated Menu with jQuery

This menu has a smooth animation using “easing” effect. There are two actions in the code used here. When the mouse moves over a menu item, that item starts an animation where it expands to 150px tall over 0.6 seconds. The easing applied through the plugin is ‘easeOutBounce’ which causes the box to “bounce” a little as it reaches the end of the animation (”out”). When the mouse is moved off the animation to the starting size is triggered.

1. Lazy Load

Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of view port (visible part of web page) wont be loaded before user scrolls to them. Using lazy load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.

1. MOOSLIDE – AJAX CONTENT SLIDE

MooSlide’s functional solution is to present any contentis. It is a small and slim ajax based extension or replacement of the common “lightbox” that can be found on nearly every page. It is based on the mootools framework.

1. The Sexy Curls jQuery Plugin

Sexy Curls jQuery plugin is an open source solution which lets you share in the beauty of the page fold feature with ease. It uses the jQuery UI & its resizable package.

Whilst working on a project recently I came across a need for us to show a selection of images depending on their type and when a link to them is clicked. I decided to use jQuery as it saves a lot of time as most of the work is done for you. I will step through the code so you can see how I did it.

View Demo As with any jQuery, we are required to use the following line to tell our jQuery code to run as soon as DOM is ready rather than when the page has finished loading.

$(document).ready(function(){

The next line detects any click from a link inside the div with an id of “links” $('#links a').click(function(){ Once a link has been clicked any attribute from that link is accessible through $(this), so the next line sets up a new variable called “color” and takes the “rel” attribute from the tag and puts it into our new variable. var color = $(this).attr('rel'); Once we know which colour link has been clicked we can then fade out all images that have a different colour and fade in the colour that has been clicked.

$('#tiles div.tile:not(.' + color + ') img').fadeTo("slow", 0.3); $('#tiles div.' + color + ' img').fadeTo("slow", 1);

To finish off we need to close our function brackets. You will notice there is a “return false;”. This is to stop the link actually activating the href attribute and basically overriding it so we can do our magic. This becomes useful when users don’t have Javascript activated in there browser, you can make the link work as normal. Unfortunately, you would need to create separate pages with different colours highlighted instead. (sigh!) So, to sum up I have put all the code below and you will need to remember to include the latest jQuery Javascript file from http://www.jquery.com All the HTML you can grab from the source of the demo page. Final Code

$(document).ready(function(){ $('#links a').click(function(){ var color = $(this).attr('rel'); $('#tiles div.tile:not(.' + color + ') img').fadeTo("slow", 0.3); $('#tiles div.' + color + ' img').fadeTo("slow", 1); }); return false; });

Hopefully, this will be useful to someone. Have fun! View the Demo

On a project at work this week, I was creating a form that needed to have word limitations for each textarea. I found a ton of jQuery character counters, but not many word counters, so I decided to create my own.

Planning it all out I really love how when you type more than 140 characters in Twitter; it doesn’t prevent you from typing anymore, it just warns you that you have too many characters.

I definitely wanted to add in that kind of functionality, and here were a couple of things I needed to account for when creating this for the project:

Ability to add in maximum number of words Ability to add in minimum number of words Ability to add in minimum and maximum number of words

I wanted it to be easy to apply the word count to the textarea, so I just wanted to be able to add a class to each textarea and the functionality would be applied. Examples

Maximum of 50 words: class=”count[50]“ Between 50 & 100 words: class=”count[50,100]“ Minimum of 50 words (no maximum): class=”count[50,0]“

That seemed easy and flexible enough to get the job done, so let’s get started on the script. The jQuery First, once the document is loaded, we will use an attribute selector to target each textarea that has a class that starts with count[

$(document).ready(function() { $("[class^='count[']").each(function() {   }); });

Next, we are going to create some variables to use later on:

var elClass = $(this).attr('class'); var minWords = 0; var maxWords = 0; var countControl = elClass.substring((elClass.indexOf('['))+1, elClass.lastIndexOf(']')).split(',');

The first 3 lines should be pretty straightforward, just assigning the class value of the textarea to a variable, and defining our minimum and maximum variables. The fourth line may look a little crazy, so let’s walk through that. First, we want to take a substring of our class variable. The start of that substring will be the location of the open bracket, [ (+1 so we don’t actually include the bracket). The end of the substring will be the location of the closing bracket, ]. Then, we want to split the substring on the comma and assign it to an array named countControl. Next, we are going to assign values to our minWords and maxWords variables:

if(countControl.length > 1) { minWords = countControl[0]; maxWords = countControl[1]; } else { maxWords = countControl[0]; }

Then, we want to add in the information about the number of words after the textarea, and if there is a minimum number of words required, assign a class of error:

$(this).after('<div class="wordCount"><strong>0</strong> Words</div>'); if(minWords > 0) { $(this).siblings('.wordCount').addClass('error'); }

In the stylesheet, we also need to add a a style for the error class. Here is what I used:

.error { color: #f00; }

Here is where get into the meat of the script, where we actually do the counting of the words:

$(this).bind('keyup click blur focus change paste', function() { var numWords = jQuery.trim($(this).val()).split(' ').length; if($(this).val() === '') { numWords = 0; } $(this).siblings('.wordCount').children('strong').text(numWords);   if(numWords < minWords || (numWords > maxWords && maxWords != 0)) { $(this).siblings('.wordCount').addClass('error'); } else { $(this).siblings('.wordCount').removeClass('error'); } });

Ok, let’s go through this piece by piece:

$(this).bind('keyup click blur focus change paste', function() {

This is where we are binding functions to the textarea. I didn’t know you could bind multiple functions in one statement like that, but I just thought of as many actions that a user could take that could trigger a change of words. So basically what this says is that anytime any of those events are triggered, we fill execute the function that we defined. Next, let’s look at this section:

var numWords = jQuery.trim($(this).val()).split(' ').length; if($(this).val() === '') { numWords = 0; } $(this).siblings('.wordCount').children('strong').text(numWords);

Basically, we are just counting the number of spaces and updating our wordCount div that we appended as a sibling to the textarea. If there is nothing in the textarea, we assign a value of 0. This is necessary because if you type words and then go back and delete them all, it still thinks there is 1 word. I have no clue why. Finally, let’s look at this section:

if(numWords < minWords || (numWords > maxWords && maxWords != 0)) { $(this).siblings('.wordCount').addClass('error'); } else { $(this).siblings('.wordCount').removeClass('error'); }

If the number of words is less then the minimum number of words or greater then the maximum number of words (and the maximum number of words is not zero), then we add the class of error to our wordCount div. Otherwise, we remove the class of error. Take a look at the demo to see it in action. That’s it! Nothing too crazy going on and could be customized pretty easily. Anything you would want to add? Done differently? Let me know in the comments.

Today, we’ll review the answers to yesterday’s quiz. We’ll then move on to examining PHP and Javascript’s methods for comparing regular expressions against strings.

Day 2: Matching

Be sure to click on the “Full Screen Toggle”. Quiz 1: What’s the difference between PHP’s preg_match() and JavaScript’s “someVariable.match()”? What is returned from each method? 2: True or False: You should wrap quotations around your regular expressions when working with JavasScript. 3: Homework: What is the difference between “greedy” and “lazy” matching?

Subscribe to the ThemeForest RSS Feed for more daily web development screencasts and articles.

In the first entry of this new series, we'll review the abilities of each symbol.

Take a look at this post a nice auto scrolling effect using javascript and dynamic HTML. It's useful to display your website headlines and latest news . Just you have to do very few modifications. Watch this demo. Live Demo

Download Script     Live Demo

Add these three javascript files within the tag HEAD of the page.

Today, James Padolsey will demonstrate how to build an advanced jQuery plugin.

By Jacob Gube JavaScript is a powerful client-side scripting language used in many modern websites and Web applications. In the hands of a skilled Web developer, JavaScript can enhance the user’s experience of the website and provide rich interactive components and features. But even though syntactically simple in nature, JavaScript is often difficult to author because of the environment it runs in: the Web browser. JavaScript’s popularity is evident in emerging technologies, such as Adobe AIR, which use it as a supported language for creating desktop-based applications. Below, you’ll find 50 excellent tools to help you achieve various tasks involved in authoring JavaScript code. You’ll find useful tools to speed up your coding processes, including debugging tools to hunt down places where your scripts break, unit testing and validation tools to test your scripts in various situations, security vulnerability scanners and code optimization tools to make sure your scripts are light as a feather. You’ll also find a few new and alternative JavaScript and AJAX frameworks to help you explore options beyond the big names (i.e. MooTools, jQuery, YUI, Dojo, Prototype), in addition to useful scripts to help you accomplish a host of design and development tasks related to JavaScript. Also, be sure to check out the following related posts:

75 (Really) Useful JavaScript Techniques 60 AJAX- and Javascript Solutions For Professional Coding jQuery and JavaScript Coding: Examples and Best Practices 50 Extremely Useful And Powerful CSS Tools

JavaScript/AJAX Authoring Tools

jQuery UI The jQuery UI allows you to design custom user interfaces for Web applications using the jQuery library. With jQuery UI, you can reduce the amount of code you write for common rich interactive features and website widgets. Be sure to check out the jQuery UI Demo page, which showcases some of the things you can accomplish using jQuery UI.

Google Web Toolkit The Google Web Toolkit (commonly referred to as GWT) is a framework for developing complex and fully featured AJAX-based Web applications. You write front-end code in Java that is later compiled into optimized and cross-browser-friendly JavaScript. GWT puts the focus on Web application development by reducing the need for testing and debugging JavaScript for browser quirks. Jx Jx is a JavaScript library for creating graphical user interfaces written on top of the MooTools framework. Jx is distributed with an MIT license and is well documented. Numerous examples as well as thorough and well-organized API documentation is available on the website.

Freestyle Webtop Toolkit Freestyle aims to reduce the complexity and time involved in deploying Web-based user interfaces by eliminating the separation of client-side and server-side development. With Freestyle, you focus on programming logic and UI design, and it handles the rest (i.e. cross-browser compatibility and DHTML and AJAX development).

Script# Script# is an AJAX and JavaScript authoring tool that allows developers to write in C#. It also allows .NET developers to leverage their existing knowledge and provides powerful tools associated with the .NET framework.

Aptana Jaxer Aptana Jaxer is the first “AJAX server” that allows developers to use their AJAX, HTML, JavaScript and DOM knowledge to create fully featured server-side-powered Web applications. With Jaxer, you can even write database queries in JavaScript syntax. Jaxer integrates very well with popular JavaScript libraries such as jQuery, Dojo and Ext JS. JS Regex Generator JS Regex Generator helps JavaScript developers write Regular Expressions for matching strings of text. This is commonly done for text-format validation, such as when checking if inputted text has the correct date and email format.

WaveMaker WaveMaker is open-source software for complete Web application development and deployment. You can find a host of demo applications built and deployed using WaveMaker on the Demo Applications page.

Documentation Tools

JSDoc Toolkit JSDoc Toolkit makes code documentation a breeze. Written in JavaScript, it helps developers automatically generate templates for JavaScript comments. It’s a great tool for managing large-scale applications developed by teams of developers who have different coding styles. jGrouseDoc jGrouseDoc is an open-source project distributed through Google Code under a modified BSD license. It lets developers document and manage their code comments using a format similar to Javadoc’s.

JavaScript Debugging Tools

Firebug Firebug is an extremely popular and well-regarded front-end debugging tool. It has all the features you’d expect from a JavaScript debugging tool, such as the ability to set breakpoints in your code so that you can step through your script. For people developing outside of Mozilla-based browsers, check out Firebug Lite, which is a JavaScript library you can include in your Web pages to access some of the features of Firebug.

Venkman JavaScript Debugger Venkman is Mozilla’s JavaScript debugger and an add-on for Gecko-based browsers. Venkman is a robust and fully featured JavaScript debugging environment, with a host of useful features and options, such as code profiling to inspect your script’s performance.

Drosera Drosera is an excellent debugging tool for Safari and WebKit-based browsers.

Opera Dragonfly Opera Dragonfly is a robust debugging environment for the Opera browser. Dragonfly allows you to view and inspect errors, debug your scripts and inspect and edit the DOM and CSS on the fly. NitobiBug NitobiBug is a browser-based JavaScript object logger and inspector. It runs on numerous browsers, including IE, Safari, Opera and Firefox. It is a powerful tool in helping developers build rich interactive AJAX applications. DebugBar DebugBar is an in-browser front-end debugger for Internet Explorer. Much like its Firefox counterparts, it has a robust set of features, such as DOM, JavaScript and cookie inspection. Be sure to check out Companion JS, which is a JavaScript debugging library to be used alongside DebugBar.

Internet Explorer Developer Toolbar Similar to Firebug, IE Developer Toolbar is an in-browser tool to help you debug front-end code in Internet Explorer. It’s especially handy as a debugging and inspection alternative to Firefox when you’re developing and testing in IE.

JavaScript Testing and Validation Tools

Test - JavaScriptMVC Test is a JavaScriptMVC component for easily setting up automated unit testing for JavaScript code. It lets you effectively test for DOM events (such as a key press or form submission), thereby lessening development time, oversight and errors associated with manual testing.

JsUnit JsUnit is a popular unit testing framework for JavaScript code. It’s a JavaScript port from another unit testing framework for Java called JUnit. JsUnit allows you to write test cases and provides tools for automated code execution. JSLint JSLint is a Web-based tool for verifying your JavaScript code for errors. It has a ton of features and settings that you can use to customize verification algorithms to suit your needs.

Crosscheck Crosscheck is an open-source testing framework for JavaScript. Crosscheck is unique because it works independent of environment: you can run tests outside of a Web browser, which avoids discrepancies that occur when testing in various browsers. YUI Test YUI Test is a suite of testing utilities that’s part of the YUI library developed by Yahoo!. It has numerous features, such as easy creation of test cases through an intuitive syntax, advanced failure detection and the ability to organize test cases by grouping them into test suites.

J3Unit J3Unit is an excellent object-oriented unit-testing framework for JavaScript. It gives you a host of options for writing automated test cases and has three modes: Static Mode, Local Browser Mode and Remote Browser Mode. Regular Expression Tool The Regular Expression Tool is an online utility that allows you to test your RegEx code against a sample test. It’s a handy tool to have around when you want to quickly test the efficacy of your regular expressions in a variety of example texts.

JavaScript Regular Expression Tester This is another handy tool for testing regular expressions within the Web browser.

JSLitmus JSLitmus is a lightweight tool for creating JavaScript benchmarks and performance tests, using an intuitive API.

Security Tools

AttackAPI AttackAPI is a framework for writing test cases of potential JavaScript exploits and vulnerabilities. jsfuzzer jsfuzzer is a fuzzing tool to help you write (and test for) attack vectors in JavaScript.

New and Alternative JavaScript and Ajax Development Frameworks

Clean AJAX Clean AJAX is an open-source framework for creating AJAX-based applications. Check out the demo page to see it in action.

SAJAX SAJAX is an excellent toolkit for developing AJAX-based applications. It supports PHP, Perl and Python.

JavaScriptMVC JavaScriptMVC is a Web application framework based on the MVC software architectural pattern. It speeds up Web development processes and lays down best practices, maintainability and standards as principles in a project’s development. qooxdoo qooxdoo is a simple and intuitive AJAX application framework. Be sure to check out the Demo Browser, a Web-based application that allows you to view demos of qooxdoo at work.

SimpleJS SimpleJS is a small and lightweight JavaScript library that provides developers with useful JavaScript functions for working with AJAX.

Image Manipulation and Graphing

Reflection.js Reflection.js automatically adds reflections to your images unobtrusively. Also check out instant.js, a similar script that adds an image border and tilts images on a Web page.

typeface.js typeface.js allows you to embed custom fonts on Web pages, freeing you from having to create images for HTML text. CanvasGraph.js CanvasGraph.js is a simple JavaScript library that lets you construct bar, line and pie charts using HTML’s canvas element.

flot flot is a JavaScript library for plotting data and has been tested to work in most modern Web browsers.

JavaScript Diagram Builder The JavaScript Diagram Builder is a JavaScript library that consists of a variety of objects and functions for constructing diagrams.

The Dojo Charting Engine The Dojo Charting Engine is a robust utility for creating components for data visualization, written on top of the Dojo Toolkit.

Useful Utilities and JavaScript Scripts

Processing.js Processing.js is a JavaScript port of Processing, the open-source data-visualization programming language. Check out examples that use Processing.js. AJAX Libraries API Google’s AJAX Libraries API allows you to serve popular JavaScript libraries using its CDN, which reduces the server load on your website. DamnIT DamnIT is an error-reporting service that allows you to gather feedback from beta testers after they’ve encountered a JavaScript error. This is perfect for live production testing and as a monitoring tool that helps you track errors and weak spots in your Web applications. ie7-js ie7-js is a JavaScript library that forces Internet Explorer to behave like a standards-based browser (like Firefox or Opera). It automatically fixes IE browser quirks and deviations from Web standards, as in the case of its box model. Lazy loader Lazy loader is a jQuery plug-in that delays the loading of images so that text content can load first, thereby making image-heavy pages load faster.

JavaScript Code Optimization and Minification Tools

JS Minifier JS Minifier is a Web-based tool for shrinking your JavaScript code to make it as lightweight as possible.

JSMIN JSMIN is a popular JavaScript minifier that removes unneeded characters (like spaces and tabs) and comments, thus reducing your script’s file size. YUI Compressor The YUI Compressor is another well-regarded JavaScript code-optimization tool developed by Yahoo!. Scriptalizer Scriptalizer is a helpful online tool for combining JavaScript files to reduce HTTP requests.

ShrinkSafe ShrinkSafe is a compression tool that reduces JavaScript file sizes. SlickSpeed Selectors Test SlickSpeed is a Web page for comparing the performance of the DOM object selection of various popular frameworks like MooTools and jQuery.

About the Author Jacob Gube is a Web developer, designer, and founder of Six Revisions, a blog on Web development and design. If you want to connect with the author, you can follow him on Twitter. (al)

A frequent question I receive from my readers is about how to implement a simple script to drag elements in a web page. So in this post I want to illustrate the simplest method I know and use to drag everything in HTML pages, using just three rows of Javascript code.In this post I provided a very basic script quick to reuse and customize in your web projects (in the live preview I added some little additional features respect the content of this tutorial). This is the result: Download this tutorial Live previewHTML code: HTML code is very simple. You have to add a main layer with an ID (I used "draggables") and some DIV layers inside that layer. In this way all layers contained inside the layer "draggables" will be draggable when you select them. This is the structure:Copy and paste this code in your page:<div id="draggables"><div>Some content Here...</div><div>Some content Here...</div><div>Some content Here...</div></div>JavaScript code: Now take a look at this simple code which enable drag features. Before all add a link to MooTools farmework in the <head> tag of the page:<script type="text/javascript\" src="mootools.svn.js"></script>Now, copy and paste this simple unobtrusive code:<script type="text/javascript\">window.addEvent('domready', function(){ $('#draggables div').each(function(drag){ new Drag.Move(drag);}); });</script>Simple no? Just in three rows! In this way when you click on a div element contained inside the layer #draggables it will be draggable. In this tutorial I used DIV layers for my draggable elements but you can use every tag you want (p, h1, h2, ul, li....). The only thing you have to change is HTML code and DIV - with the tag you use (p, h1, h2, ul, li....) - in this line:$('#draggables div').each(function(drag)You can also add a custom style to your draggable elements using a simple CSS class I called "drag". For example, change the previous code HTML with the following:<div id="draggables"><div class="drag">Some content Here...</div><div class="drag">Some content Here...</div><div class="drag">Some content Here...</div></div>...and CSS code could be something like this:.drag{border:solid 6px #DEDEDE;background:#FFF;width:200px;height:150px;...}That's all! Try it and download the source code ready to use in your porject. Download this tutorial Live preview

Here’s a quick example of an ajax request with Mootools. the code below is from sandmoose.com. However I have modified it to get the data using the twitter search api. So the script contains 4 functions, the first function ‘initializeContainer’ makes a new ajax request to our file, in this case ‘twitter.php’. The next function initialises the fade out effect, and tells the function that onComplete to trigger the function ‘updateContainer’. This function puts the data from our file ‘twitter.php’ into the div with and id of contain, once this is done it triggers the function ‘fadeinContainer’ which fades the contents of the div back in. You need to include the mootools framework, here’s the Google hosted link:

<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools-yui-compressed.js" type="text/javascript"><!--mce:0--></script>

The Code:

function initializeContainer() { new Ajax('twitter.php', {update:'contain'}).request(); }

function ajaxRequest() { $('contain').effect('opacity',{duration:1000, fps:50, onComplete:updateContainer}).start(1,0); };

function updateContainer() { new Ajax('twitter.php', {update:'contain', onComplete:fadeInContainer}).request(); }

function fadeInContainer() { $('contain').effect('opacity',{duration:1000, fps:50}).start(0,1); }

We need to initialise the function onload.

<body onLoad="initializeContainer()">

This post about feedback mail with nice slide effect using php SMTP class and jQuery. It's very useful to add your php websites as like contact/feedback page.I have downloaded this SMTP class from phpclasses.org. Include with jQuery Slide effect just you have to upload these files into hosting server. Feedback page with slide effect.

Download Script     Live Demo

You have to add this jquery

Are you looking for a simple form validation javascript functions? just take a look at this article. This is very simple javascript functions that I have developed and used in some of my web projects useful to add client side information.

Form Validation innerHTML Simple and clean javascript validation innerHTML message like Facebook. You have to add a link to validatepost.js into your page:

Are you looking for a simple form validation javascript functions? just take a look at this article.This is very simple javascript functions that I have developed and used in some of my web projects useful to add client side information.Form Validation innerHTMLSimple and clean javascript validation innerHTML message like Facebook. You have to add a link to validatepost.js into your page:

A tag-cloud is a great way of showing visitors to your blog the main topics of interest that are available. There is also additional information contained in a tag-cloud. Aside from the actual links themselves, which give people an idea of the subjects that your site covers, they can also show how popular the different subjects are. Another great thing about tag-clouds is that they can be used to describe the frequency of anything; you can link to articles, blog posts, images, video, or anything else that you have in abundance on your site.

Tag-clouds are easy to do badly; whether from a design perspective or from a code perspective. Thanks to jQuery, it’s also easy to do well. We’ll be using the hot new 1.3 version of jQuery for this example and will be working with PHP and MySql to provide a JSON feed of our tags. Getting the tags into a database in the first place is beyond the scope of this tutorial, but it’s a simple enough matter to retrieve and pass them to a waiting page via AJAX. Getting Started

Let’s make a start on the page that the tag-cloud will be shown on; in a new file in your text editor create the following page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="tagcloud.css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery Tag Cloud</title> </head> <body> <div id="tagCloud"> <h2>Tag Cloud</h2> </div> <script type="text/javascript" src="jquery-1.3.min.js"></script> <script type="text/javascript"> $(function() { //get tag feed $.getJSON("http://localhost/jquery/tagcloud.php?callback=?", function(data) { //process JSON object }); }); </script> </body> </html>

Save this as tagcloud.html. At this stage we have almost nothing on the page, just a simple container for the tag-cloud and a 2nd-level heading within the container. Any other elements we need can be created as and when they’re required. We link to a stylesheet in the head for some styling which we’ll add later on, and at the end of the body we link to jQuery. We make the request for the JSON response in a custom script block after the reference to jQuery. getJSON

We use the $ alias to call the getJSON jQuery method, which is a higher-level abstraction of the ajax method; normally jQuery methods are called on objects that are references to elements, but because we’re not referencing any elements yet we can use the jQuery alias instead. This also means that the jQuery object will not be returned by the method. Instead the xmlHTTPRequest is passed back. The getJSON method accepts two arguments in this example (although more can be used if necessary); the first is the URL to which we are making the request. As we’ll be receiving a JSON object, it makes sense to use getJSON. We could use the ajax method, but would then need to configure more properties of the request (such as the dataType), so using this saves us a bit of time and coding. At the end of the URL we specify a JSONP callback - ?callback=? - which will enable the browser to directly manipulate the JSON object, even if it comes from another domain, without any additional server-side processing. The Callback Function

The second argument is the callback function that we want to execute once the object is returned to the page. We haven’t put any code in this function yet, because we don’t have the JSON object to work with. We can come back to this page in a little while once we’ve written the PHP. I said a moment ago that no server-side processing is needed when working with JSONP callbacks, and yet we’re now going to go off and write some PHP. This is only because no one is providing the data we want So we have to create it ourselves. If someone were providing a JSON feed of popular tags, we could still use the same jQuery code to request and process it. Some PHP

You’ll need to have access to a web server in order to run the file that we’re about to create, but this could be your own local web server that you use for development, or it could be the server your site or blog is hosted on. In a new page in your text editor add the following code:

<?php

//connection information $host = "localhost"; $user = "root"; $password = "your_password_here"; $database = "tagcloud";

//make connection $server = mysql_connect($host, $user, $password); $connection = mysql_select_db($database, $server);

//query the database $query = mysql_query("SELECT * FROM tags");

//start json object $json = "({ tags:[";

//loop through and return results for ($x = 0; $x < mysql_num_rows($query); $x++) { $row = mysql_fetch_assoc($query);

//continue json object
$json .= "{tag:'" . $row["tag"] . "',freq:'" . $row["frequency"] . "'}";

//add comma if not last row, closing brackets if is
if ($x < mysql_num_rows($query) -1)
  $json .= ",";
else
  $json .= "]})";

}

//return JSON with GET for JSONP callback $response = $_GET["callback"] . $json; echo $response;

//close connection mysql_close($server); ?>

Save this as tagcloud.php. For this example, I’m assuming you have MySql installed and configured, and have setup a database called tagcloud. Within this database I’m also assuming there is a table called tags. This table will have rows of the tags and the frequency of the occurrences of these tags. I want to stress that this isn’t production-level code because security has not been a factor in its design; we need somewhere to get our AJAX response from in this example and this code will give us that somewhere.

Let’s briefly look at what we’ve done.

//connection information $host = "localhost"; $user = "root"; $password = "your_password_here"; $database = "tagcloud";

First we setup the connection information that we’ll need in order to connect to the database. Make sure you replace your_password_here with the actual password you set to access MySql. We then connect to the database and set the query that we’ll use to access the data from the tags table.

//start json object $json = "({ tags:[";

//loop through and return results for ($x = 0; $x < mysql_num_rows($query); $x++) { $row = mysql_fetch_assoc($query);

//continue json object
$json .= "{tag:'" . $row["tag"] . "',freq:'" . $row["frequency"] . "'}";

Next we create the string that will start the JSON object, before looping through each row in the table and performing the query. We continue to build the JSON string within the for loop, adding the data from both fields of the current row as properties and values.

//add comma if not last row, closing brackets if is
if ($x < mysql_num_rows($query) -1)
  $json .= ",";
else
  $json .= "]})";

}

We perform a simple check on each iteration of the loop using the for conditional to see whether we’re reading the last row in the table; if we aren’t we use a comma to separate each object, if we are we close the object. The format of the JSON object will be individual record objects within a single container array, within an outer object.

//return JSON with GET for JSONP callback $response = $_GET["callback"] . $json; echo $response;

//close connection mysql_close($server);

We then echo the response back to the client using a GET request; this is needed in order to make use of the jsonp callback in our main page. We need to specify the name of the URL parameter that follows the URL of the in the JavaScript, which in this example is simply callback. We can’t tell it the name of the function that we want to pass it to however, because the function is anonymous. jQuery will handle this for us and ensure the data is passed to the correct function.

Once we’re done, we close the connection. At this stage, we still can’t see anything on the page, but if you run the run from a content-serving directory of your web-server and use the NET tab of Firebug, you can see that data that is being returned to the page:

Processing the json

Now that we have some JSON to work with, let’s go back to the HTML page and do something with it. Our fist task is to process it to extract the data; in tagcloud.html, remove the comment we left within the callback and add the following code:

//create list for tag links $("<ul>").attr("id", "tagList").appendTo("#tagCloud");

//create tags $.each(data.tags, function(i, val) {

//create item var li = $("<li>");

//create link $("<a>").text(val.tag).attr({title:"See all pages tagged with " + val.tag, href:"http://localhost/tags/" + val.tag + ".html"}).appendTo(li);

//add to list li.appendTo("#tagList"); });

First we create a new list element, set its id attribute, and append it to our container on the page. As the data in the JSON object isn’t in any particular order, an unordered list meets our requirements. Then we use the each() jQuery method to iterate over all of the items in the array nested within our JSON object. For each iteration, we create a new list item and a new link.

We set the text of each link to the value of the tag property of the current object from our JSON object, as well as sett the title and an href. The href used will depend largely on how the pages showing the tags are going to be generated, we could generate a search results style page listing all of the pages that matched whichever tag was clicked using PHP or .NET easily enough (the results page is also beyond the scope of this tutorial). The link is then appended to the list item, and both are appended to the <ul>.

At this stage, our page should appear something like the following:

It’s certainly a list of links, but a tag cloud it isn’t. We can easily fine tune the appearance of the widget with a little CSS. Let’s do this next. In a new file in your text editor, add the following code:

tagCloud {

width:290px; background-color:#575454; text-align:center; padding:5px; overflow:auto; font-size:70%; font-family:arial; }

tagCloud h2 {

color:#ffffff; font-size:2.5em; margin:0 0 10px 0; background:url(images/cloud.gif) no-repeat 0; padding:15px 0 15px 80px; }

tagList { margin:0; padding:0; }

tagList li {

list-style-type:none; float:left; margin:0 10px; height:35px; }

tagList li a { text-decoration:none; color:#ffffff; }

tagList li a:hover ( text-decoration:underline; }

Save this as tagcloud.css. The styles used are a mixture of functional and aesthetic rules, such as floating the list items, and setting their dimensions used to control how the widget functions. I’ve kept the styles as minimal as possible, as no doubt you’ll need to change most of the purely visual styles to fit in with the theme of your existing site.

One important point to note is the font-size we’ve used; a font-size of 70% is set on the outer container element; this represents the smallest text that will appear in the tag cloud. We’re going to be adjusting the font size of some tags using em units in the final part of the script. So setting a baseline font-size is important for consistency.

Now when you run the page, it should appear as follows:

Finishing the Script

One of the hallmark attributes of the tags in a tag cloud is that the individual tags are sized according to their frequency of occurrence; the more popular a tag is, the bigger it’s displayed. We can easily make use of the freq property within our JSON object to resize each link according to its popularity. In between creating the new link and appending it to the unordered list in our script, add the following code:

//set tag size li.children().css("fontSize", (val.freq / 10 < 1) ? val.freq / 10 + 1 + "em": (val.freq / 10 > 2) ? "2em" : val.freq / 10 + "em");

In truth, the css method could easily be chained to the jQuery object directly after we set the link’s title attribute, but they’re separated here for better readability. Within the css method, we specify the fontSize style attribute and use the standard JavaScript ternary conditional to check whether the current value of the freq property divided by 10 is less than 1. If it is, we add 1 to the figure and then concatenate the string em on the end. This will ensure that none of the tags have a font-size of less than 1em, which is equal to our 70% style rule set on the container element.

However if the value of the freq property divided by 10 is not less than 1, we then check (using another ternary, the equivalent of nesting for loops) whether it is greater than 2; if it is, we simply use 2em as the value of the font-size property. Any elements with a font-size of 2em will be twice the size of our original 70% baseline, which is probably as big as any tag in this type of widget should get. Any values greater than 1 but less than 2 are used in their fractional form to set a font-weight of between 1 and 2 ems. The final page should now appear something like the following screenshot when viewed in a browser:

Summary

In this tutorial we’ve seen how “easy” it is to build a basic tag cloud which retrieves the tags to display as part of an AJAX request directly after page load. It is easy to resize each tag depending on its frequency using a sensible range of text sizes. Although the overall appearance of the widget has been left rather minimally styled, it should be easy to build on this foundation to create something that is beautiful as well as functional.

Busting the Myth: Writing JavaScript Takes Forever! Coding in JavaScript (or any coding language, for that matter) can be tedious. If you’ve ever had to spend all day scrolling through a thousand lines of code looking for occurrences of a variable or function reference, you know what I mean. However, it’s not terribly difficult to streamline your coding habits to make both the writing AND maintenance of JavaScript much easier and faster! Below, I’ll go over four easy-to-adopt habits that will cut your coding time down significantly. These small tricks are very helpful to immediately improve your productivity and are great habits to pick up. 1. Use the document.getElementById Shortcut Photo by Unhindered by Talent If you write JavaScript, you’re probably pretty familiar with document.getElementById. It’s one of the most useful methods in JavaScript, but its name is awfully long, easy to typo, and painfully tedious to type and retype over and over again. However, taking a page from the Prototype library, we can write a very quick function to shortcut document.getElementById: $(id) { return document.getElementById(id); } Now a call to document.getElementById(”myElement”); becomes $(”myElement”); Nice and easy, and it’ll save a ton of time in longer scripts. NOTE: Using this function will incur a slight performance hit. However, unless you’re splitting milliseconds on your site, it won’t be noticeable. 2. Keep It Variable Photo by Unhindered by Marvin(PA)

Using functions is a really basic tip, and I hope that everyone reading this already understands the value of encapsulating chunks of relevant code into functions for easy reuse. If you haven’t started using functions yet, then, dude, you’re missing out! You can read a great tutorial on getting started with functions over at w3schools.com. I’d like to take those functions one step further and stress the importance of keeping your functions completely variable. That means writing a function that accomplishes the task it’s designed to perform with as few hard-coded elements as possible, and storing all site-specific information in variables that will be passed to the function. Take this example for instance: let’s say you’re writing a script that will validate the input of a comment form to make sure the user entered their name. It might look something like this (if you’re using that fancy-schmancy document.getElementById shortcut):

function validateForm() {

// Check that "name" isn't blank

if ( $("myForm").elements["name"].value == '' ) {

alert('Please fill out all required fields!');

return false;

} // Submit the form if the field has a value

else

return true;

}

That works just fine, but it’ll have to be edited for another site that needs the exact same feature. And what if you need to validate multiple elements? You’ll end up with a redundant call to validate the next field. That’s a lot of code that’ll have to be edited every time you make a change to the HTML or implement your script on a new site. To make your code portable, and therefore much faster and easier to reuse, you should make sure your functions rely completely on variables. Let’s see what we can do with the function we just wrote:

function validateForm(formId, fieldId) {

if ( $(formId).elements[fieldId].value == '' ) {

alert('Please fill out all required fields!');

return false;

}

else

return true;

}

At first glance, it might not seem like that makes a huge difference, but when you go to reuse your code, now all you have to add is this:

var formId = "myForm";

var fieldId = "name";

Having all your variables grouped like that, instead of tucked inside a function that might be hidden away in an include file somewhere, will save a lot of headaches, and will ultimately save you a ton of wasted time. 3. Get Comfortable with Arrays and Loops Photo by Unhindered by .bullish Continuing with our above example, validating multiple fields would require multiple function calls, which could be a cumbersome task, and, again, could become a huge maintenance nightmare down the road. To solve this issue, we can employ one of JavaScript’s handy loop constructs. A for loop is a really easy way to execute a command or a set of commands on multiple elements (stored in an array). One particular way of using the for loop is to declare a variable, “x”, without a value, then run the loop as follows:

var x;

for (x in myArray) {

// Do stuff...

}

What this accomplishes, in plain English, is essentially, “For however many elements are in this array, execute the following commands on each one.” Once you get the hang of how this construct works, it becomes an incredibly useful (and time-saving!) tool. Let’s look at how we could apply a for loop to make our validateForm() function handle multiple fields:

function validateForm(formId, fieldArray) {

var x;

for ( x in fieldArray ) {

if ( $(formId).elements[fieldArray[x]].value == '' ) {

alert('Please fill out all required fields!');

return false;

}

}

return true;

}

With barely any extra JavaScript, we’ve now created a very portable function that will check multiple fields inside a form to make sure they’re not empty. And all we need to do to customize the script for a new site is this:

var formId = "myForm";

var fieldArray = new Array("name","email","comment");

How easy is that?! You’ll never have to write a validation script again! And if you update it in the future? As long as you don’t change the information needed for the script to run, you can just copy and paste the new function (or drag the updated include file onto the site directory). Portable scripts to handle common site needs can save hours, and they don’t take too much longer to code than their messier, non-portable counterparts! 4. Abstraction! Photo by Unhindered by pupski

Another great way to cut down on tedious coding is the concept of separating your JavaScript from your HTML markup. The reason this saves time should be obvious, but just in case you’re not seeing my point: let’s say we add our new validation function to a newsletter signup form. That newsletter signup form is on all 28 pages of our client’s site, and you have to make a change. Every form submit button is coded like this:

<input type="submit" value="Sign Up!" onclick="function() { return validateForm(formId, fieldId); }" />

Finding that snippet of code to edit on 28 pages could prove to be a huge time-suck. Avoiding that, however, is pretty simple. We can simply add the following script in a file that can be included on all pages:

if ( $(formId) )

$(formId).onsubmit = function() { return validateForm(formId, fieldId); }

This allows us to keep our button nice and clean as well:

<input type="submit" id="submit" value="Sign Up!" />

By lifting the JavaScript out of our markup, we’ve eliminated some of the tediousness out of code maintenance, and with clever script placement, you can consolidate all of your maintenance into one central location. Conclusion

Photo by Unhindered by Leo Reynolds

Even if you only write JavaScript as a hobby, it’s worth it to spend an extra few seconds to optimize your code for easy maintenance and reuse. Many of the scripts I use most often were originally written with no intention of needing them again, and it’s been very convenient to just have them on hand, rather than having to rewrite the script and/or spend an hour or two editing it to suit my purposes. How do you streamline your coding practice? Share your favorite time-saving tips in the comments!

Google provides a great set of javascript api’s to interact with its service. The Google service allows you to integrate maps, local search, dynamic feed content, and graphs and charts, into your website or blog. To start using the service you need to sign-up for an api key here, after that the best place to head it the ‘code playground‘ where you can see all the API tools in action. You can easily get the source code and customise the code to fit with your application. Here are 10 quick links to useful Google tools.

Simple Line Chart Column Chart Local Map Search Show Driving Directions Image Search with colour restriction Language Detection Display RSS feeds Google Earth Api Show Data on Google Earth Get your Google calender events

You can read full documentation on the Ajax API’s here

Everyone knows Mootools as being a popular JavaScript framework and now there’s a different way to visualise data, in a unique and elegant way using the MooWheel class. The MooWheel class can also generate a graph based on a JSON request. The MooWheel is designed to display connections between many different objects, and their relationships with one another. Find out more about the MooWheel and Download the Class