Ajax Updates

Posted by education training on Monday, September 21, 2009

Ajax Updates

Animated Ajax Delete : jQuery

Posted: 20 Sep 2009 09:50 PM PDT

I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with jQuery javascript.
 Javascript |  copy code |? 
1
if(isset($_GET['delete']))
2
{
3
	$query = 'DELETE FROM my_table WHERE item_id = '.(int)$_GET['delete'];
4
	$result = mysql_query($query,$link);
5
}
The following is used to display the records:
 Javascript |  copy code |? 
1
$query = 'SELECT * FROM my_table ORDER BY title ASC';
2
$result = mysql_query($query,$link);
3
while($row = mysql_fetch_assoc($result))
4
{
5
	echo '<div class="record" id="record-',$row['item_id'],'">
6
				<a href="?delete=%27,$row[%27item_id%27],%27" class="delete">Delete</a>
7
				<strong>',$row['title'],'</strong>
8
			</div>';
9
}
The jQuery Javascript
 Javascript |  copy code |? 
01
$(document).ready(function() {
02
	$('a.delete').click(function(e) {
03
		e.preventDefault();
04
		var parent = $(this).parent();
05
		$.ajax({
06
			type: 'get',
07
			url: 'jquery-record-delete.php',
08
			data: 'ajax=1&amp;delete=' + parent.attr('id').replace('record-',''),
09
			beforeSend: function() {
10
				parent.animate({'backgroundColor':'#fb6c6c'},300);
11
			},
12
			success: function() {
13
				parent.slideUp(300,function() {
14
					parent.remove();
15
				});
16
			}
17
		});
18
	});
19
});
For every link, we add a click event that triggers the Ajax request. During the request, we transition the containing element to a red background. When the Ajax request returns a "success" response, we slide the element off of the screen.






Demo: http://davidwalsh.name/dw-content/jquery-record-delete.php
Source: http://davidwalsh.name/animated-ajax-jquery

Related Listings:

  1. Jquery Animated Hover Animated Hover is a plugin for jQuery to create animated...
  2. Animated Navigation with CSS & jQuery The simple and elegant roll over effects that I liked....
  3. Ajax Manager : jQuery Plugin Ajax Manager helps you to manage AJAX requests and responses...

DatePicker v4 Ajax Script

Posted: 20 Sep 2009 01:12 PM PDT

My 3rd and final attempt writing a datePicker (calendar) that is accessible using the keyboard, requires no embedded JavaScript blocks, uses no pop-up windows and is suitable for use within documents served as application/xhtml+xml.
asked for features into the mix
To all & sundry: I've finally managed to devote some time to a complete rewrite of the datePicker/calendar script – again. Full details on the latest version can be found on the Unobtrusive Date-Picker Widget V5 article page.
The LowDown

My 3rd and final attempt writing a datePicker (calendar) that is accessible using the keyboard, requires no embedded JavaScript blocks, uses no pop-up windows and is suitable for use within documents served as application/xhtml+xml.

The more impatient amongst you may want to see the various demos before reading any further.
At a glance…

* Fully keyboard accessible
* Multiple date formats and date dividers supported
* Unobtrusive and nameSpace friendly
* Fully skinnable with CSS
* Both upper and lower date limits can be set
* Certain days of the week can be disabled
* Certain dates can be disabled/enabled (and wildcards used to stipulate the dates in question)
* Includes "smart" localisation
* Bespoke days of the week can be highlighted
* Works with single text inputs, split text inputs or select lists
* It's free to use, even commercially (Released under a CC share-alike license)

New features include…

* Numerous accessibility enhancements including support for ARIA Roles and States
* All keyboard shortcuts now adhere to The DHTML Style Guide Working Group (DSGWG) recommendations
* DOM friendly – the calendar is only added to the DOM when actually required
* DatePickers can now display an optional status bar and week numbers
* DatePickers can now be dragged around the screen (activated by clicking on either the datePicker's header or footer)
* Lower and upper date limits can now be set using either a YYYYMMDD date String or a relative "days", "weeks", "months" or "years" notation
* The script can parse and format dates using a subset of the PHP strftime conversion specifiers
* Global configuration parameters can now be specified using JSON within the script tag itself
* The "button" used for popup datePickers can now be styled for default, hover, active and disabled states, be arbitrarily positioned within the DOM and removed from the document tabindex if so desired
* Inline datePickers are now available (i.e. no button activation is required), are automatically added to the document's tabIndex and can be arbirarily positioned within the DOM
* A bespoke final opacity can be defined for pop-up datePickers and the fade in/out animation effect disabled
* The entire grid can now be filled with dates
* Bespoke "append id's" can now be set for datePickers split over 3 form elements
* The "Today" button can be removed from the U.I.
* Three bespoke events, "dateselect", "redraw", and "create" are now available.



Demo: http://www.frequency-decoder.com/demo/date-picker-v4/
Download: http://www.frequency-decoder.com/demo/date-picker-v4/date-picker-v4.zip
Source: http://www.frequency-decoder.com/2009/02/03/unobtrusive-date-picker-widget-v4

Related Listings:

  1. TimePicker Script with jQuery Plugin A time picker for jQuery. list version | table version....
  2. JQuery Calendar Hot Script The jQuery Datepicker project has been donated to the jQuery...
  3. Sliding Date-Picker – AJAX Script Sliding Date-Picker enables you to pick dates with a simple...

JSBIN : Test your Code

Posted: 20 Sep 2009 12:04 PM PDT

JS Bin is a webapp specifically designed to help JavaScript and CSS folk test snippets of code, within some context, and debug the code collaboratively.

JS Bin allows you to edit and test JavaScript and HTML (reloading the URL also maintains the state of your code – new tabs doesn’t). Once you’re happy you can save, and send the URL to a peer for review or help. They can then make further changes saving anew if required.

The original idea spawned from a conversation with another developer in trying to help him debug an Ajax issue. The original aim was to build it using Google’s app engine, but in the end, it was John Resig’s Learning app that inspired me to build the whole solution in JavaScript with liberal dashes of jQuery and a tiny bit of LAMP for the saving process.

Javascript:
 Javascript |  copy code |? 
1
if (document.getElementById('hello')) { 
2
  document.getElementById('hello').innerHTML = 'Hello World - this was inserted using JavaScript'; 
3
}
HTML:
 HTML |  copy code |? 
01
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
02
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
03
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
04
<head> 
05
<title>Sandbox</title> 
06
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
07
<style type="text/css" media="screen"> 
08
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; } 
09
</style> 
10
</head> 
11
<body> 
12
  <p>Hello from JS Bin</p> 
13
  <p id="hello"></p> 
14
</body> 
15
</html>



Demo: http://jsbin.com/
Source: http://jsbin.com/

Related Listings:

  1. JSBIN : Test Your Code A Webapp specifically designed to help js and CSS folk...
  2. JavaScript Time Picker The first ever Time Picker that utilize a very easy...
  3. Code Color Blindness Library The Code Color Blindness Library function allow to simulate common...

Dynamic Text Effects – MooTools

Posted: 19 Sep 2009 10:32 AM PDT

Dynamic text effects (fade ins, moving text, etc.) can enhance the viewer experience by directing attention to specific (and presumably important) areas of the page. All well and good. But how do you do this?

Some of the things I like about Mootools are its class-oriented approach, its outstanding plugins and the ease with which you can put together complex effects. But we won't be creating a class here. We're going to keep this real simple…

I recently needed to animate some text on a page: specifically, I had to fade in several (distinct) elements in the page header, and produce a fade-in/fly-in effect for some text in the main content area. By itself, this wasn't hard to do but the kicker was that the effect for each element had to fire off in sequence, one after the other. It had to go Snap, Crackle, Pop! What I didn't want was for the effects to fire together because then I'd end up with a snapplepopackle mess.

So I turned to the Mootools Chain class for assistance. Let's look at the code behind the demo page; it's short and to the point. Relatively speaking, that is.

 Javascript |  copy code |? 
01
	window.addEvent('domready', function(){
02
 
03
		var fnChain = new Chain();
04
		var hdrItems = $$('.sub-header-item');
05
		var sayings = $$('.saying');
06
 
07
		hdrItems.each(function(item) {
08
			item.setStyle('opacity', 0);
09
			item.set('morph', {
10
				duration: 1200,
11
				onComplete: function(){fnChain.callChain()}
12
			});
13
			fnChain.chain(
14
				function(){item.morph({
15
					opacity: 1,
16
					backgroundColor: '#fff',
17
					borderColor: '#fff',
18
					color: '#002a46'});
19
				}
20
			);
21
		});
22
 
23
		sayings.each(function(saying) {
24
			saying.setStyle('opacity', 0);
25
			saying.set('morph', {
26
				duration: 800,
27
				transition: Fx.Transitions.Bounce.easeOut,
28
				onComplete: function(){fnChain.callChain()}
29
			});
30
		});
31
 
32
		fnChain.chain(
33
			function(){$('where').morph({opacity: 1, left: 180});},
34
			function(){$('when').morph({opacity: 1, right: 185});},
35
			function(){$('final').morph({opacity: 1});}
36
		);
37
 
38
		(function(){fnChain.callChain();}).delay(1000);
39
 
40
	});
Let's start at the top and work our way down. Within the 'domready' event handler code, we first create an instance of the Mootools Chain class and stick a reference to it in fnChain. Then we create a couple of local variables to hold references to the elements we want to apply the effects to.

Next we iterate over the elements containing the header text in the hdrItems array and do several things: first we set the opacity to 0 so that they're invisible when the page loads; second, we create default instances of Fx.Morph for each element in the array (we'll come back to this in a second); third, we take our default Fx.Morph instances, apply the morph method to generate a transition and load this onto the fnChain call stack.

Here's the important thing about getting the Mootools Chain class to do what you want: using the chain and callChain methods is analogous to loading and firing a gun. The analogy works like this: calling the chain method simply loads the gun with bullets, whereas invoking callChain fires a single bullet. Okay, that isn't too hard to grasp … wait, there's something missing. Ah, the finger that pulls the trigger! We kind of need that, don't we?

That's where the onComplete event of our Fx.Morph instances comes in: it's the finger that pulls the trigger. And it only pulls the trigger when the last effect has finished. Setting it up this way ensures that all functions loaded onto the fnChain call stack get used. Using the chain and callChain methods by themselves will not get us where we want to be.

The last sections of code (with the exception of the last line) basically repeat the process for the text in the content area. The final line:
 Javascript |  copy code |? 
1
		(function(){fnChain.callChain();}).delay(1000);
is needed to get that first function from the call stack and kick the process off.
If you're into Mootools I hope you'll add the Chain class to your toolkit. With it, you can kick up the complexity of your effects by a notch or two. Thanks for reading.




Demo: http://richardimanning.com/demos/chaining_demo/chainingDemo.htm
Source: http://richardimanning.com/wpblog/2009/02/chaining-functions-in-mootools-for-dynamic-text-effects/

Related Listings:

  1. Panorama Type Effects Script Panorama.js is a JavaScript class built on the mootools framework....
  2. Dynamic Menu using MooTools This menu build did for Mootools way back even before...
  3. Product highlight : Mootools Believe it or not, there’s a lot of powerful interactivity...

Tabbed Content Area : jQuery Plugin

Posted: 19 Sep 2009 10:24 AM PDT

One of the biggest challenge to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently. Today we’re going to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we’ll achieve the same thing using the jQuery library.

Step 1

First things first, we need something that looks awesome. So a quick trip to Photoshop and voila we have a nice mockup of what our tabbed component should look like. It’s pretty straight forward with a few extra gradients to make it nettuts awesome. You can grab the Photoshop PSD file for this image if you want to take a closer look, but it’s pretty simple and we can build it off the flat JPG really.

Step 2

The first thing to do when building of course is to get a rough idea how you are going to do it. This gets easier the more things you’ve developed. Looking at this image I would say the best thing to do is:

  1. Have a container
    which we’ll place everything inside of. That way if we needed to position our box or drop it into a sidebar, we can just grab everything wrapped in the
    and copy+paste it somewhere.
  2. Then we’ll have the heading area, probably with a tag
  3. Then below that we’ll have a second
    tag which will hold the tabs and content. This is the dark grey box in the image.
  4. Then inside there we’ll use an unordered list
      where each element is a link for the tabs. This will let us use the
    • bits of the list to position the tabs and the bits to style them and give them rollovers and on/off states.
    • Then below that we’ll create a final
      area which has the content for each tab. We’ll need one of these for each tab, and we’ll show or hide them depending on which tab has been clicked.
SO to summarize, it’ll be something like this:
 HTML |  copy code |? 
01
<div>
02
	<h4>Heading</h4>
03
    <div>
04
 
05
        <ul>
06
            <li><a>Tab</a></li>
07
            <li><a>Tab</a></li>
08
            <li><a>Tab</a></li>
09
        </ul>
10
 
11
        <div>Content for Tab 1</div>
12
        <div>Content for Tab 2</div>
13
        <div>Content for Tab 3</div>
14
 
15
    </div>
16
 
17
</div>
18
 
Don't worry if looking at that image doesn't immediately make you think of that structure. Sometimes you just need to do things by trial and error. In my case I've made these little tabbed things a few times and I know that this is a nice simple way of making them.

Also it's nice to think about the structure like this before you have lots of class names and ids and content because it can get hard to see the forest from the trees later on. Especially when you add the content for all the different tabs.

So now that we have a picture in mind of how to build our structure, let's get to it!
Step 3

Now if you've followed my tutorials on PSDTUTS you'll know that I love a good gradient background. So before we even start with the tabbed structure, let's get ourselves a nice background!

Open up Photoshop, create a 1000px x 1000px document and draw a nice (subtle) radial gradient like the one shown below. Note that I've drawn out from the centre/top and made sure that the gradient is finished by the time I get to the edge of the document. That means I can set the background color in HTML to be the darker colour and if someone stretches their browser window it'll be seamless.

Step 4

So create a new directory for the project, then create a second directory inside there called images and save that image inside as background.jpg. When saving use File > Save for Web and Devices and select JPG with a quality setting of about 70. That comes out to a file size of 16kb which is not too bad. There used to be a time where you really had to scrimp and save, but now you just want to make sure you're not being stupidly wasteful with your file sizes.

Now we create a HTML document and write in some code:
 HTML |  copy code |? 
01
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
02
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
03
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
04
<head>
05
	<title>Tabbed Structure - Regular</title>
06
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
07
</head>
08
 
09
<body>
10
</body>
11
</html>
12
 So that will be the base of our HTML. Now we'll create the style.css document and write in the following:
 CSS |  copy code |? 
1
body {
2
	background-image:url(images/background.jpg);
3
	background-repeat:no-repeat;
4
	background-position:top center;
5
	background-color:#657077;
6
	margin:40px;
7
}
8
 A couple of things to note here:

   1. It's possible to write this same CSS using shorthand and reduce the number of lines used, but it's much clearer this way and better for tutorial writing!
   2. We have a background image (the gradient) and we've set it to no-repeat, because we only want it to appear once, it's centered and finally the background color (#657077) is the darker colour.
   3. I've added a margin of 40px. This is just for positioning my stuff later on so that it looks nice.

You can see the resulting HTML document here. Note that if you resize your window it's a nice seamless graduated background. Wunderbar!

Step 5
Next we add our structure to the page so that we can begin styling it. 

 HTML |  copy code |? 
01
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
02
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
03
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
04
<head>
05
	<title>Tabbed Structure - Regular</title>
06
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
07
</head>
08
 
09
<body>
10
 
11
<div id="tabbed_box_1" class="tabbed_box">
12
	<h4>Browse Site <small>Select a Tab</small></h4>
13
    <div class="tabbed_area">
14
 
15
        <ul class="tabs">
16
            <li><a href="" id="tab_1" class="active">Archives</a></li>
17
            <li><a href="" id="tab_2">Topics</a></li>
18
            <li><a href="" id="tab_3">Pages</a></li>
19
        </ul>
20
 
21
        <div id="content_1" class="content">Content for Tab 1</div>
22
        <div id="content_2" class="content">Content for Tab 2</div>
23
        <div id="content_3" class="content">Content for Tab 3</div>
24
 
25
    </div>
26
 
27
</div>
28
 
29
 
30
</body>
31
</html>
32
 So as you can see I've basically used the same structure I mentioned in Step 2. I've added some ids and classes and some actual content. Here's the reasoning behind what I've done:

   1. For the heading, I've placed the subtext "Select a Tab" in a < small > element. This lets me use the < h4 > element for overall positioning and the < small > element to restyle and position the subtext.
   2. The container < div > has an id="tabbed_box_1" and a class="tabbed_box". I've done this because we might reuse this code multiple times on the same page. If we did that we could use the id's to position each one in different places. But we'd still have the class to do the styling. Whereas if we'd use the id for styling, we'd end up having to define the same styles again and again for different id's.
   3. I've given the links and content areas id's because we need to use Javascript to manipulate them later.
   4. Finally I've given the < ul > element a class name. Actually we could style it without a class just by styling .tabbed_area ul { } but this could get confused with future < ul >'s we put inside the content area. So it's better for it to have a class name for us to refer to.

OK so without styles it doesn't really look like much.... yet!


Step 6

Now with styling up elements, I think it's best to work from the outside element in. So we'll start with this element -
 - which we'll use to position the box nicely in the center of our document using this code: 
 CSS |  copy code |? 
1
#tabbed_box {
2
	margin: 0px auto 0px auto;
3
	width:300px;
4
}
5
 
6
 

Demo: http://nettuts.s3.amazonaws.com/001_Tabbed/site/jQuery.html
Source: http://net.tutsplus.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/
 
    
  
Related Listings:
  1. jQuery Tabbed Interface Script Nowadays, a lot of websites are using tab based content...
  2. Tabbed Searchbar Some lines of JavaScript code can help you to add...
  3. Leopard Desktop jQuery Plugin A neat looking Dashboard/Desktop. You guys are gonna totally FLIP...
 		 
 
  
 Pixel Bender Explorer 
 
 Posted: 19 Sep 2009 09:31 AM PDT
 
Pixel Bender is an exciting new technology by Adobe which brings video and image processing capabilities to the flash runtime. It allows you to create and apply filters to 'bend' pixels and create compelling animations which have never been possible in an HTML environment. Because Adobe AIR uses flash to load any HTML content, we can leverage these powerful filters on a standard Ext Application in the AIR environment. Ext is releasing a Pixel Bender Explorer demo which allows you to explore many of the new filters which have been created by the Adobe Community and demonstrates how to integrate them into an Ext Application.

Pixel Bender Explorer

Download and install the Pixel Bender Explorer application. Apply different filters or effects by clicking on the Filter Grid. By selecting a filter on the left hand side and adjusting the sliders you can apply live effects to the current target video, browser or image. For some of the filters we have already built some animations such as bend/flatten, waveIn/waveOut, dissolve/combine and tileIn. You can test these animations by choosing the appropriate filter and clicking the animation button above the sliders. These animations can be called within code with a single method call on any Ext.air.NativeWindow or Ext.air.VideoPanel.

Here is an example of bending an Ext.air.NativeWindow:
 Javascript |  copy code |? 
1
var win = new Ext.air.NativeWindow({
2
        file: '../html/browser.html',
3
        transparent: true,
4
        chrome: 'none',
5
        width: 640,
6
        height: 480
7
});
8
win.bend();
9
 

Construction of Pixel Bender Kernels

Constructing your own Pixel Bender Effects and Animations is a multi-step process. First, you need to construct a kernel or filter for Pixel Bender. These kernels describe how each pixel should change for a single frame based on a mathematical algorithm which you implement. Kernels are written in the Pixel Bender Kernel Language and compiled with the Pixel Bender Toolkit. The language is very similar to GLSL (OpenGL Shading Language). The benefits of writing effects in this language is that are generalized to all common video hardware platforms and can be used in other Adobe Applications such as After Effects and Photoshop. There is a great article, Pixel Bender basics for Flex and AIR, created by Charles Ward of Adobe that explains the Pixel Bender language in more detail.
Using Pixel Bender Kernels

After compiling the source code of a Pixel Bender Kernel the extension will change from .pbk (source form) to .pbj (binary/compiled form). The compiled version of the kernel is the only file that we need in order to use the new kernel. After compiling a new kernel, you can place the .pbj file in the kernels/ directory of your installed Pixel Bender Explorer application and you will be able to test it after restarting the application.
Pixel Bender Exchange

There is a lively community around the creation of Pixel Bender Kernels on the Pixel Bender Exchange, most of which are under an open source license. Download a few kernels and take them for a test run in the Pixel Bender Explorer. The Explorer provides you all of the tools necessary to create your own custom animations for a NativeWindow or VideoPanel. For example, if you wanted to use the smudge filter created by Frank Reitberger as an animation you would determine the paramName that you want to change and where it should start and end along with a few other configurations.

Using the same NativeWindow as shown in the example above:
 Javascript |  copy code |? 
1
win.animFn({
2
    paramName: 'amount',
3
    reset: true,			
4
    startValue: 5,
5
    endValue: 0,
6
    duration: 1,
7
    mode: 'easeOutStrong',
8
    url: 'app:/kernels/smudger.pbj'
9
});
 
Code Explanation

This will tween the value of the parameter amount from 5 to 0 over a duration of 1 second. This will have an effect which I would name smudgeIn because it starts smudged and will eventually look normal. We are using one of Robert Penner's Easing equations easeOutStrong. Support has been added for 15 different easing modes, which explain how fast/slow we adjust the value over time. The filter also needs to be reset at the end of animation because there is no parameter which will not affect the image. (When we set amount to 0 it will still have a slight change on the target.) Anyone who is developing Pixel Bender Kernels, I encourage you to have a parameter which reflects the unapplied state vs the fully applied state. A good example of this are the Adobe filters which use the parameter of transition (0 does nothing, 1 is fully applied).
Wrapping up

Pixel Bender can spruce up an Ext.air application by adding custom animations to wow your users. However, you should be cautious about the over-use of these filters throughout your application. For a good example of how effective these filters and animations can be to provide proper user feedback you should check Adobe's signature sample BlackBookSafe. Each time an animation occurs it is clear why it happened, not a surprise to the user and adds character to the application. When using these animations you should strive for the same goal, not to surprise your user, but to impress them.
    
   
  
Demo: http://www.smart-page.net/smartnormal/fl10.htm
Download: http://download.macromedia.com/pub/labs/pixelbender/pixelbender_p7_win_081809.zip
Source: http://www.extjs.com/blog/2009/02/19/pixel-bender-explorer/
 
    
  
Related Listings:
  1. Multiple Filters Search using Adobe Spry The Spry framework for Ajax is a JavaScript library that...
  2. Ajax Push Engine – Real time data streaming APE is an open source technology allowing to exchange data...
  3. SmartClient Online Explorer SmartClient is globally deployed in thousands of enterprises, and has...
 		 
 
  
 How to Mimic the iGoogle Interface 
 
 Posted: 18 Sep 2009 08:37 AM PDT
 
In this tutorial I’ll be showing you how to create a customizable interface with widgets. The finished product will be a sleek and unobtrusively coded iGoogle-like interface which has a ton of potential applications!

The plan

First, let’s list exactly what we’ll be creating here and what features it’ll have:

    * This interface will contain several 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 user will be able to edit the color and title of each widget.
    * Each widget can contain any amount of regular HTML content, text, images, flash etc.

Please note that we will only be covering the front-end aspect of the project in this tutorial. Obviously you could integrate this UI with a solid server-side system which could take care of saving preferences and customised widgets.

Since it’s all about the user and because the idea was influenced by iGoogle we’re going to be calling this project ‘iNettuts’.
The layout of iNettuts

The layout is a simple three column one; each column contains widgets:



Each widget has a “handle” which the user can use to move the widget around.
jQuery UI

As well as the jQuery core library we’re also going to make use of the jQuery’s UI library and specifically the “sortable” and “draggable” modules. This will make it quite simple to add the drag-and-drop functionality that we want. You should get a personalized download of the UI library which has what we need in it. (Tick the ’sortable’ box)

Step 1: XHTML markup

Each column will be an unordered list (UL) and each widget within the columns will be a list item (LI):

First column:
 HTML |  copy code |? 
01
<ul id="column1" class="column">
02
 
03
    <li class="widget red">  
04
        <div class="widget-head">
05
            <h3>Widget title</h3>
06
        </div>
07
        <div class="widget-content">
08
 
09
            <p>The content...</p>
10
        </div>
11
    </li>
12
    <li class="widget blue">  
13
        <div class="widget-head">
14
 
15
            <h3>Widget title</h3>
16
        </div>
17
        <div class="widget-content">
18
            <p>The content...</p>
19
 
20
        </div>
21
    </li>
22
</ul>
23
 The above code represents the first column, on the left and two widgets each within a list item. As shown in the plan, there will be three columns - three unordered lists.
Step 2: CSS

We'll be using two CSS StyleSheets, one of them will contain all the main styles and the second StyleSheet will only contain styles required by the JavaScript enhancements. The reason we seperate them like this is so that people without JavaScript enabled do not waste their bandwidth downloading styles which they're not going to use.
 CSS |  copy code |? 
01
/* Reset */
02
body,img,p,h1,h2,h3,h4,h5,h6,ul,ol {margin:0; padding:0; list-style:none; border:none;}
03
/* End Reset */
04
 
05
body {font-size:0.8em; font-family:Arial,Verdana,Sans-Serif; background: #000;}
06
a {color:white;}
07
 
08
/* Colours */
09
.color-yellow {background:#f2bc00;}
10
.color-red    {background:#dd0000;}
11
.color-blue   {background:#148ea4;}
12
.color-white  {background:#dfdfdf;}
13
.color-orange {background:#f66e00;}
14
.color-green  {background:#8dc100;}
15
.color-yellow h3,.color-white h3,.color-green h3
16
	{color:#000;}
17
.color-red h3,.color-blue h3,.color-orange h3
18
	{color:#FFF;}
19
/* End Colours */
20
 
21
/* Head section */
22
#head {
23
    background: #000 url(img/head-bg.png) repeat-x;
24
    height: 100px;
25
}
26
#head h1 {
27
    line-height: 100px;
28
    color: #FFF;
29
    text-align: center;
30
    background: url(img/inettuts.png) no-repeat center;
31
    text-indent: -9999em
32
}
33
/* End Head Section */
34
 
35
/* Columns section */
36
#columns .column {
37
    float: left;
38
    width: 33.3%;
39
		/* Min-height: */
40
		min-height: 400px;
41
		height: auto !important; 
42
		height: 400px;
43
}
44
 
45
/* Column dividers (background-images) : */
46
	#columns #column1 { background: url(img/column-bg-left.png) no-repeat right top; }
47
	#columns #column3 { background: url(img/column-bg-right.png) no-repeat left top; }
48
 
49
#columns #column1 .widget { margin: 30px 35px 30px 25px; }
50
#columns #column3 .widget { margin: 30px 25px 30px 35px; }
51
#columns .widget {
52
    margin: 30px 20px 0 20px;
53
    padding: 2px;
54
    -moz-border-radius: 4px;
55
    -webkit-border-radius: 4px;
56
}
57
#columns .widget .widget-head {
58
    color: #000;
59
    overflow: hidden;
60
    width: 100%;
61
    height: 30px;
62
    line-height: 30px;
63
}
64
#columns .widget .widget-head h3 {
65
    padding: 0 5px;
66
    float: left;
67
}
68
#columns .widget .widget-content {
69
    background: #333 url(img/widget-content-bg.png) repeat-x;
70
    padding: 5px;
71
    color: #DDD;
72
    -moz-border-radius-bottomleft: 2px;
73
    -moz-border-radius-bottomright: 2px;
74
    -webkit-border-bottom-left-radius: 2px;
75
    -webkit-border-bottom-right-radius: 2px;
76
    line-height: 1.2em;
77
    overflow: hidden;
78
}
79
/* End Columns section */
80
 
There's nothing too complicated in the above StyleSheet. Normally it would be better to use images instead of the CSS3 border-radius property to create rounded corners (for cross-browser benefits) but they're not really an integral part of the layout - adding a border-radius is quick and painless.

Just a note about the colour classes: Ideally, elements should be named according to their semantic meaning or content, not their appearance. The problem is that the widgets can mean/contain many different things so having classes like this really is the best alternative, unless you're willing to add the colour styles inline. Each colour class is prefixed with 'color-'; it'll become clear why I've done this later in the tutorial.

In the above CSS we're also using a min-height hack for each column so that the background images (the dividers) remain intact and so that an empty column can still have widgets dragged back into it:

 CSS |  copy code |? 
01
#columns .column {
02
    float: left;
03
    width: 33.3%;
04
 
05
	/* Min-height: */
06
		min-height: 400px;
07
		height: auto !important; 
08
		height: 400px;
09
}
10
 We'll focus on the second stylesheet later when we've added the JavaScript.

Step 3: JavaScript
Introduction

As I've said, we'll be using jQuery. It's the library of choice not only because of the UI modules it offers but also because it will help in speeding up the development process while keeping everything cross-browser operable.

The final product will have endless possibilities, some of which have already been explored by the likes of NetVibes and iGoogle. So, we want to make sure our code is easily maintainable, allows for expandability and is reusable; we want it to be future-proof!

We'll begin with a global object called "iNettuts" - this will act as the sole occupied namespace of the project (plus dependencies such as jQuery). Under it we will code up the main functionality of the site which utilises jQuery and its UI library. 
 Javascript |  copy code |? 
1
var iNettuts = {
2
	settings : {
3
	   // Some simple settings will go here.
4
	},
5
	init : function(){
6
		// The method which starts it all...
7
	}
8
};
9
 The init method will be called when the document is ready for manipulation (i.e. when the DOM is loaded and ready). While there are various methods available it has been proven that the quickest way to initialise your code upon this event is to call it from the bottom of your document. It also makes sense to link to all the scripts at the bottom so as not to slow down the loading of the rest of the page:
 HTML |  copy code |? 
01
<body>
02
 
03
    <!-- page content -->
04
 
05
 
06
 
07
    <!-- Bottom of document -->
08
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
09
    <script type="text/javascript" src="inettuts.js"></script>
10
 
11
    <script type="text/javascript" src="jquery-ui-personalized-1.6rc2.min.js"></script>
12
 
13
</body>
14
 
Settings

As I've said, there will be a settings object which will contain all of the global settings required to make this functional. We'll also have individual widget settings objects, this means it will be possible to create per-widget settings.

settings object (under iNettuts):
 Javascript |  copy code |? 
01
settings : {
02
	/* Specify selectors */
03
	columns : '.column',
04
	widgetSelector: '.widget',
05
	handleSelector: '.widget-head',
06
	contentSelector: '.widget-content',
07
	/* Settings for the Widgets: */
08
	widgetDefault : {
09
		movable: true,
10
		removable: true,
11
		collapsible: true,
12
		editable: true,
13
		colorClasses : ['yellow','red','blue','white','orange','green']
14
	},
15
	/* Individual Widget settings: */
16
	widgetIndividual : {
17
		intro : {
18
			movable: false,
19
			removable: false,
20
			collapsible: false
21
		},
22
		gallery : {
23
			colorClasses : ['yellow','red','white']
24
		}
25
	}
26
}
27
 Yes, there are quite a lot of settings, but if we want maximum code reusability this is a necessity. Most of the above is self explanatory. As you can see we've setup a widgetDefault object which contains the default settings for each widget; if you want to override these settings then the script will require you to give the widget an id (in the HTML) and then create a new ruleset. We've got two rule-sets (objects) which override their defaults, 'intro' and 'gallery'. So, those rules specified in the "gallery" object will only apply to this widget:
 HTML |  copy code |? 
01
<li class="widget blue" id="gallery">  
02
    <div class="widget-head">
03
        <h3>Instructions</h3>
04
    </div>
05
 
06
    <div class="widget-content">
07
        <ul>
08
            <li>To move a widget...</li>
09
        </ul>
10
    </div>
11
 
12
</li>
13
 Retrieving the settings

getWidgetSettings object (under iNettuts):

 Javascript |  copy code |? 
1
getWidgetSettings : function(id) {
2
	var settings = this.settings;
3
	return (id&&settings.widgetIndividual[id]) ? 
4
		$.extend({},settings.widgetDefault,settings.widgetIndividual[id])
5
		: settings.widgetDefault;
6
}
7
 
This method will return an object with the settings of any particular widget. If a widget has no id (HTML attribute) then it will just return the default settings, otherwise it will look to see if that widget has settings of its own, if it does then it will return the default settings and that widget's settings merged into a single object (the widget's individual settings have precedence).
Attaching a CSS file using JavaScript

I mentioned earlier that we have an additional stylesheet which the JavaScript enhancements will require. 
 CSS |  copy code |? 
01
/* JS-Enabled CSS */
02
 
03
.widget-head a.remove  {
04
    float: right;
05
    display: inline;
06
    background: url(img/buttons.gif) no-repeat -24px 0;
07
    width: 14px;
08
    height: 14px;
09
    margin: 8px 4px 8px 0;
10
    text-indent: -9999em;
11
    outline: none;
12
}
13
 
14
.widget-head a.edit  {
15
    float: right;
16
    display: inline;
17
    background: url(img/buttons.gif) no-repeat;
18
    width: 24px;
19
    height: 14px;
20
    text-indent: -9999em;
21
    margin: 8px 4px 8px 4px;
22
    outline: none;
23
}
24
 
25
.widget-head a.collapse  {
26
    float: left;
27
    display: inline;
28
    background: url(img/buttons.gif) no-repeat -52px 0;
29
    width: 14px;
30
    height: 14px;
31
    text-indent: -9999em;
32
    margin: 8px 0 8px 4px;
33
    outline: none;
34
}
35
 
36
.widget-placeholder { border: 2px dashed #999;}
37
#column1 .widget-placeholder { margin: 30px 35px 0 25px; }
38
#column2 .widget-placeholder { margin: 30px 20px 0 20px; }
39
#column3 .widget-placeholder { margin: 30px 25px 0 35px; }
40
 
41
.edit-box {
42
    overflow: hidden;
43
    background: #333 url(img/widget-content-bg.png) repeat-x;
44
    margin-bottom: 2px;
45
    padding: 10px 0;
46
}
47
 
48
.edit-box li.item {
49
    padding: 10px 0;
50
    overflow: hidden;
51
    float: left;
52
    width: 100%;
53
    clear: both;
54
}
55
 
56
.edit-box label {
57
    float: left;
58
    width: 30%;
59
    color: #FFF;
60
    padding: 0 0 0 10px;
61
}
62
 
63
.edit-box ul.colors li {
64
    width: 20px;
65
    height: 20px;
66
    border: 1px solid #EEE;
67
    float: left;
68
    display: inline;
69
    margin: 0 5px 0 0;
70
    cursor: pointer;
71
}
72
 The elements targetted in the above StyleSheet have yet to be coded, but eventually we will write the JavaScript which dynamically adds these elements to the page, thus making use of the StyleSheet.

The method which attaches this StyleSheet is called 'attachStylesheet':
 Javascript |  copy code |? 
1
attachStylesheet : function (href) {
2
    return $('<link href="' + href + '" rel="stylesheet" type="text/css" />').appendTo('head');
3
}
4
 The above method appends a link to the head of the document. When a new link element is added to the document through the DOM the browser will load it and apply its CSS rules as it would for any regular hard-coded linked StyleSheet. When doing this, remember that the rules of CSS inheritance and specificity still apply.

The next part of the tutorial is probably the hardest, so take it slowly.

We want to add another method to our global iNettuts object, we'll call it makeSortable:

 Javascript |  copy code |? 
1
makeSortable : function () {
2
    // This function will make the widgets 'sortable'!
3
}
4
 By the way, 'method' is just a fancy name given to 'functions' which have been assigned to object properties. In this case our object is called 'iNettuts' so 'makeSortable' is a method of 'iNettuts'...

This new method will take the settings we specified in the 'settings' object and make the required element sortable.

First, we want to make sure everything we need is easily accessible within this new method:
 Javascript |  copy code |? 
1
makeSortable : function () {
2
    var iNettuts = this, // *1
3
        $ = this.jQuery, // *2
4
        settings = this.settings; // *3
5
}
6
 *1: There will only be one instance of our global object, but just encase multiple instances need to be made or if we want to rename the global object it's a good idea to set a new variable (in this case 'iNettuts') to the 'this' keyword which references the object that this method is within. Be careful, the 'this' keyword is a bit of a beast and doesn't always reference what you think it does!

*2: At the very top of the iNettuts object we've placed a new property: 'jQuery : $'. In the pursuit of maximum code reusability we don't want our script to conflict with any other libraries that also make use of the dollar-sign symbol (e.g. The Prototype library). So, for example, if you renamed jQuery to JQLIB then you could change the 'jQuery' property to JQLIB and the script would continue to function properly. The 2nd line in the above code isn't necessary at all, - if we didn't want it we could just use this.jQuery().ajQueryFunction() instead of $() within this method.

*3: Again, this isn't really necessary, we're just creating a bit of a shortcut, so instead of having to type out 'this.settings' within this method we only need to type out 'settings'.

The next step is to define a set of sortable items (i.e. the widgets that will be movable). Remember, back in the settings we made it possible to set a property called 'movable' to true or false. If 'movable' is set to false, either by default or on individual widgets we have to cater for that:
 Javascript |  copy code |? 
01
/*
02
 * (using the dollar prefix on $sortableItems is a convention when a variable references a jQuery object)
03
 */
04
 
05
$sortableItems = (function () {
06
 
07
    // Define an empty string which can add to within the loop:
08
    var notSortable = '';
09
 
10
    // Loop through each widget within the columns:
11
    $(settings.widgetSelector,$(settings.columns)).each(function (i) {
12
 
13
        // If the 'movable' property is set to false:
14
        if (!iNettuts.getWidgetSettings(this.id).movable) {
15
 
16
            // If this widget has NO ID: 
17
            if(!this.id) {
18
 
19
                // Give it an automatically generated ID:
20
                this.id = 'widget-no-id-' + i;
21
 
22
            }
23
 
24
            // Add the ID to the 'notSortable' string:
25
            notSortable += '#' + this.id + ',';
26
        }
27
 
28
    });
29
 
30
    /*
31
    * This function will return a jQuery object containing
32
    * those widgets which are movable.
33
    */
34
    return $('> li:not(' + notSortable + ')', settings.columns);
35
})();
36
 Now we've got a set of DOM elements referenced in the jQuery object which is returned from the above functions. We can make immediate use of this:
 Javascript |  copy code |? 
01
$sortableItems.find(settings.handleSelector).css({
02
	cursor: 'move'
03
}).mousedown(function (e) {
04
	$(this).parent().css({
05
		width: $(this).parent().width() + 'px'
06
	});
07
}).mouseup(function () {
08
	if(!$(this).parent().hasClass('dragging')) {
09
		$(this).parent().css({width:''});
10
	}
11
});
12
 So, we're looking for what has been defined as the 'handle' within the movable widgets (within sortableItems) and then we're applying a new CSS cursor property of 'move' to each one; this is to make it obvious that each widget is movable.

The mousedown and mouseup functions are needed to work around some issues with dragging and dropping... Since we want this page and all the elements inside it to expand when the browser is resized we haven't set any explicit widths on the widgets (list items). When one of these list items is being sorted it becomes absolutely positioned (while being dragged) which means that it will stretch to its content's composite width. Here's an example:
    
   
  
Demo: http://nettuts.s3.amazonaws.com/127_iNETTUTS/demo/index.html
Download: http://nettuts.s3.amazonaws.com/127_iNETTUTS/source.zip
Source: http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
 
    
  
Related Listings:
  1. iGoogle Interface Ajax Script In this tutorial I’ll be showing you how to create...
  2. Leopard Desktop jQuery Plugin A neat looking Dashboard/Desktop. You guys are gonna totally FLIP...
  3. jQuery Tabbed Interface Script Nowadays, a lot of websites are using tab based content...
 		 
 
  
 Auto Playing Jquery Content Slider 
 
 Posted: 18 Sep 2009 08:26 AM PDT
 
I love the Coda Slider plugin for jQuery. I've used it recently to build a couple of tabbed "widgets". One here on CSS-Tricks in the sidebar to show Script & Style links, Featured Posts, and Popular Posts. Just kind of a fun way to show lots of content in a small area. I also used it on an article for NETTUTS for a similar purpose.

Both of these examples use the Coda Slider pretty much "out of the box". Sure the design was heavily altered to fit the job, but the actual functionality wasn't altered in any way. I recently had the calling to build a "featured content area". The Coda Slider fit the bill almost perfectly, but it needed a little functionality surgery to do what I wanted it to do. Special thanks to Benjamin Sterling for helping me out and figuring out some quirks for me.

Like I said, the Coda Slider was 90% there already. There is a main content area (panels, if you will), which slide from left to right each with different unique content. There is generally a set number of panels, but the code is written in such a way that adding or removing panels isn't a huge pain. There are links which act as navigation to quickly jump to any particular panel. These links can be anything (text hyperlink, thumbnail, etc) and link to a unique hash value URL (each panel has a unique URL if need be). Coda Slider provides all of this out of the box.

Here is what we need in addition:

    * Different types of custom content in the panels. We can already put whatever we want in the panels, but to make it easier on ourselves, there will be a couple of different formats ready to go. The main one being an image the size of the entire panel, but featuring a text-overlay.
    * Auto-play. You can still click the thumbnails to jump to any panel, but left onto itself, the slider will slowly cycle through the panels.
    * Arrow indicator. To serve as a visual indication of which panel you are currently viewing, a small arrow will display above the thumbnail pointing into the panel.

Let's go through the HTML, CSS, and JavaScript.

The HTML

Here is the framework HTML for just the slider itself:
 HTML |  copy code |? 
01
<div class="slider-wrap">
02
	<div id="main-photo-slider" class="csw">
03
		<div class="panelContainer">
04
 
05
			<div class="panel" title="Panel 1">
06
				<div class="wrapper">
07
					<!-- REGULAR IMAGE PANEL -->
08
					<img src="images/tempphoto-1.jpg" alt="temp" />
09
					<div class="photo-meta-data">
10
						Photo Credit: <a href="http://flickr.com/photos/astrolondon/2396265240/">Kaustav Bhattacharya</a><br />
11
						<span>"Free Tibet" Protest at the Olympic Torch Rally</span>
12
					</div>
13
				</div>
14
			</div>
15
			<div class="panel" title="Panel 2">
16
				<div class="wrapper">
17
					<!-- PANEL CONTENT -->
18
				</div>
19
			</div>
20
			<div class="panel" title="Panel 3">
21
				<div class="wrapper">
22
					<!-- EXAMPLE OF OTHER PANEL POSSIBILITIES -->
23
					<img src="images/scotch-egg.jpg" alt="scotch egg" class="floatLeft"/>
24
 
25
					<h1>How to Cook a Scotch Egg</h1>
26
 
27
					<ul>
28
						<li>6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage, then stick them in the coldest part of the fridge to firm up)</li>
29
						<li>1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, white pepper, salt and a tiny bit of maple syrup)</li>
30
						<li>1/2 cup AP flour</li>
31
						<li>1-2 eggs, beaten</li>
32
						<li>3/4 cup panko-style bread crumbs</li>
33
						<li>Vegetable oil for frying</li>
34
					</ul>
35
				</div>
36
			</div>
37
			<div class="panel" title="Panel 4">
38
				<div class="wrapper">
39
					<!-- PANEL CONTENT -->
40
				</div>
41
			</div>
42
			<div class="panel" title="Panel 5">
43
				<div class="wrapper">
44
					<!-- PANEL CONTENT -->
45
				</div>
46
			</div>
47
			<div class="panel" title="Panel 6">
48
				<div class="wrapper">
49
					<!-- PANEL CONTENT -->
50
				</div>
51
			</div>
52
 
53
		</div>
54
	</div>
55
 
56
	<!-- TO MAKE THESE THUMBNAILS ACTUALLY WORK, BOTH THE HASH VALUE (#1, ETC.)
57
          AND THE CLASS="CROSS-LINK" ARE REQUIRED -->
58
 
59
	<a href="#1" class="cross-link active-thumb"><img src="images/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a>
60
	<div id="movers-row">
61
		<div><a href="#2" class="cross-link"><img src="images/tempphoto-2thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
62
		<div><a href="#3" class="cross-link"><img src="images/tempphoto-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
63
		<div><a href="#4" class="cross-link"><img src="images/tempphoto-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
64
		<div><a href="#5" class="cross-link"><img src="images/tempphoto-5thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
65
		<div><a href="#6" class="cross-link"><img src="images/tempphoto-6thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
66
	</div>
67
 
68
</div>
 
The CSS

The full CSS for this example has a basic reset, some utility styles and basic structure. Below, I'll just show you the CSS relevant to the slider itself, but you can view the full CSS here.
 CSS |  copy code |? 
01
.slider-wrap						{ width: 419px; position: absolute; top: 87px; left: 40px; }
02
.stripViewer .panelContainer
03
.panel ul						{ text-align: left; margin: 0 15px 0 30px; }
04
.stripViewer						{ position: relative; overflow: hidden; width: 419px; height: 285px; }
05
.stripViewer .panelContainer				{ position: relative; left: 0; top: 0; }
06
.stripViewer .panelContainer .panel			{ float: left; height: 100%; position: relative; width: 419px; }
07
.stripNavL, .stripNavR, .stripNav			{ display: none; }
08
.nav-thumb 						{ border: 1px solid black; margin-right: 5px; }
09
#movers-row						{ margin: -43px 0 0 62px; }
10
#movers-row div					{ width: 20%; float: left; }
11
#movers-row div a.cross-link 				{ float: right; }
12
.photo-meta-data					{ background: url(images/transpBlack.png); padding: 10px; height: 30px;
13
											  margin-top: -50px; position: relative; z-index: 9999; color: white; }
14
.photo-meta-data span 					{ font-size: 13px; }
15
.cross-link						{ display: block; width: 62px; margin-top: -14px;
16
											  position: relative; padding-top: 15px; z-index: 9999; }
17
.active-thumb 						{ background: transparent url(images/icon-uparrowsmallwhite.png) top center no-repeat; }
 
Anything in there that starts with ".strip" is core to the slider itself, getting those panels set up and the wrapper around them, all the CSS magic needed to make a slider do its thing. From ".nav-thumb" on down is stuff specific to this example. The thumbnails have thin black borders. The meta-data section is pushed off the panel by the image, but then is forced back up with a negative top margin and a transparent black background applied.

The ".active-thumb" class is very important too, if a thumbnail has this class, it gets the special background applied, which is the white arrow we wanted to indicate the current panel. This class will get applied and removed in the JavaScript.
The JavaScript

In the header section of your HTML, you'll need to include jQuery and all the plugin files. The bare minimum basics look like this:

 Javascript |  copy code |? 
01
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
02
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
03
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
04
<script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>
05
 
06
<script type="text/javascript">
07
	$(function(){
08
 
09
		$("#main-photo-slider").codaSlider();
10
 
11
	});
12
</script>
 That will activate the slider, but remember we have some extra functionality to get cooking here. Instead of altering the plugin itself, we can add the extras by writing our own little function on top of it. In essence, to achieve the "auto-play" effect, we are going to trigger a click event on the next thumbnail in line every 3 seconds. We'll call the function "theInterval", and we'll need a couple of variables, so we'll set those up first.
 Javascript |  copy code |? 
01
var theInt = null;
02
var $crosslink, $navthumb;
03
var curclicked = 0;
04
 
05
theInterval = function(cur){
06
	clearInterval(theInt);
07
 
08
	if( typeof cur != 'undefined' )
09
		curclicked = cur;
10
 
11
	$crosslink.removeClass("active-thumb");
12
	$navthumb.eq(curclicked).parent().addClass("active-thumb");
13
		$(".stripNav ul li a").eq(curclicked).trigger('click');
14
 
15
	theInt = setInterval(function(){
16
		$crosslink.removeClass("active-thumb");
17
		$navthumb.eq(curclicked).parent().addClass("active-thumb");
18
		$(".stripNav ul li a").eq(curclicked).trigger('click');
19
		curclicked++;
20
		if( 6 == curclicked )
21
			curclicked = 0;
22
 
23
	}, 3000);
24
};
 Couple more things to note. Notice the number "6″ is hardcoded in our function. If you change the number of thumbs, you'll have to change it here as well. Also, you may have noticed the seemingly strange element that click event is being triggered on (".stripNav ul li a"… where is that?!). You'll notice that isn't anywhere in our HTML. Actually, the Coda Slider plugin automatically generates this unordered list from the number of panels when it runs. Very handy sometimes we we have hidden it in the CSS in our example. We are using them in our function though, as they will be the most reliable elements for the click event. They will exist no matter what, and this example will continue to work and be auto-play regardless if we use the thumbnail navigation or not.
    
   
  
Demo: http://css-tricks.com/examples/FeaturedContentSlider/
Download: http://css-tricks.com/examples/FeaturedContentSlider.zip
Source: http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/
 
    
  
Related Listings:
  1. Yahoo Slider Widget This example demonstrates a simple vertical implementation of the YUI...
  2. Mootools Slider With Two Knobs A double pinned slider with two knobs, minimum and maximum...
  3. jQuery Slider Gallery Michiel Kenis requested a tutorial explaining how to create a...
 		 
 
  
 jQuery Slider to control Text Size 
 
 Posted: 18 Sep 2009 07:57 AM PDT
 
JQuery’s UI can add so much to a web page. There are many different widgets that the UI provides. One up and coming star, is the slider. In this tutorial, I will show you how to use a slider to control the text size of an article on a page. This lets the user control exactly the size that suits them, and is also a pretty impressive feature to have on a site!

Behavior:

    * When the slider is dragged, a bubble will fade in, telling the current size.
    * The text “current text size” will also appear with the current text size next to it.
    * We will also attempt to make the text increase one px or decrease one px on the click of the plus or minus sign.

Step 1: Getting the Necessary Javascript Files

Obviously we need JQuery, but we’re also going to need some UI files to extend JQuery. We can get a UI file that is custom to our needs at the JQuery UI Build Your Download page.


 As you can see, there are some really great sounding effects there! As tempting as it may be though, we don’t need all of these effects to achieve the desired product. All we need is:

    * UI Core
    * Slider
    * Klaus Hartl’s Cookie plugin

Step 2: The HTML

For this tutorial, I’m not going to waste time explaining the basics of HTML, and creating a layout using it and CSS. If you’d like to learn more about that, there are other tutorials here like my Top Panel tutorial or Collis’ Tabbed Content tutorial. 
 HTML |  copy code |? 
01
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
02
   "http://www.w3.org/TR/html4/strict.dtd">
03
<html lang="en">
04
<head>
05
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
06
<title>Nettuts Slider</title>
07
<!--[if lt IE 7]>
08
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
09
< ![endif]-->
10
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
11
<script type="text/javascript" src="scripts/jquery.ui.js"></script>
12
<script type="text/javascript" src="scripts/cookie.js"></script>
13
</meta></head>
14
<body>
15
<div id="header">
16
  <div class="slider_container">
17
    <div class="minus"></div>
18
    <div class="slider_bar">
19
      <div id="slider_caption"></div>
20
      <div id="slider1_handle" class="slider_handle"></div>
21
    </div>
22
    <div class="add"></div>
23
  </div>
24
</div>
25
<div id="text">
26
  <h1>Text Size Slider</h1>
27
  <div id="font_indicator">Current Font Size: <b></b> </div>
28
  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
29
</div>
30
</body>
31
</html>
32
 So you'll notice several things:

   1. The PNG fix for IE 5.5 and 6. I've linked directly to the google code page. This means I will have to end every transparent PNG with a -trans.png .
   2. I have also linked directly to JQuery and our custom made UI file.
   3. I have put the necessary tags for the slider in the #header

NOTE: For the slider to work, we need to have a bar and a handle.

Step 3: The CSS

Here is the CSS to make that page look a little bit better. This page is pretty simple, and therefore the CSS is pretty simple as well:

 Javascript |  copy code |? 
01
body {
02
	background: #373737;
03
	text-align: center;
04
	margin: 0px;
05
}
06
#header {
07
	width: 700px;
08
	height: 200px;
09
	background: #48887d url(images/header.jpg);
10
	margin-left: auto;
11
	margin-right: auto;
12
	position: relative;
13
}
14
.slider_container {
15
	position: absolute;
16
	height: 25px;
17
	top: 170px;
18
	left: 165px;
19
}
20
.minus {
21
	background: url(images/minus-trans.png) no-repeat;
22
	height: 9px;
23
	width: 25px;
24
	overflow: hidden;
25
	float: left;
26
	cursor: pointer;
27
}
28
.slider_bar {
29
	background: url(images/bar-trans.png) no-repeat;
30
	height: 9px;
31
	width: 316px;
32
	float: left;
33
	margin: 0px 5px;
34
	position: relative;
35
}
36
.add {
37
	background: url(images/add-trans.png) no-repeat;
38
	height: 25px;
39
	width: 23px;
40
	float: left;
41
	position: relative;
42
	top: -5px;
43
	cursor: pointer;
44
}
45
.slider_handle {
46
	background: url(images/selector-trans.png) no-repeat;
47
	height: 25px;
48
	width: 12px;
49
	position: absolute;
50
	top: -8px;
51
}
52
#slider_caption {
53
	background: url(images/caption-trans.png) no-repeat;
54
	height: 45px;
55
	width: 38px;
56
	overflow: hidden;
57
	position: absolute;
58
	top: -50px;
59
	margin-left:-10px;
60
	padding: 5px 0px 0px 0px;
61
	font-family: "Myriad Pro";
62
	color: #36665d;
63
	font-weight: bold;
64
	text-align: center;
65
}
66
#text {
67
	font-family: Helvetica, Arial, sans-serif;
68
	width: 655px;
69
	background: #f9f9f9;
70
	margin-left: auto;
71
	margin-right: auto;
72
	padding: 20px 20px 20px 25px;
73
	position: relative;
74
}
75
#text p {
76
	font-size: 12px;
77
	text-align: left;
78
	color: black;
79
}
80
#text h1 {
81
	text-align: left;
82
	margin-left: 20px;
83
}
84
 
85
p{
86
font-family: Arial, Helvetica, sans-serif;
87
color: #CCCCCC;
88
}
89
 
90
#font_indicator{
91
position: absolute;
92
right: 100px;
93
top: 50px;
94
font-size: 10px;
95
display: none;
96
}
97
 Again, I'm not going to go into great detail with the CSS either. If you still need more help with that, be sure to check out those two tutorials I mentioned above. If you do have any questions, be sure to let me know in the comments.

Notice that all of the png images that have alpha transparency have a -trans.png ending.
Step 4: Basic Slider Effects

When I was first learning about the slider effect, I Googled it to research a little bit more about it and how it works. Well I was lucky to find this amazing screencast. It had a really neat effect too; a caption that appeared to display the position of the slider, on top of the slider. Unfortunately, they stopped there. We're going to use a variation of their JQuery code as a jumping off point:

 Javascript |  copy code |? 
01
$(function() {
02
 
03
 
04
	$('#slider_caption').hide();
05
	var captionVisible = false;
06
	$('.slider_bar').slider({
07
		handle: '.slider_handle',
08
		startValue: 26,
09
		minValue: 0,
10
		maxValue: 100,
11
		start: function(e, ui) {
12
			$('#slider_caption').fadeIn('fast', function() { captionVisible = true;});
13
		},
14
		stop: function(e, ui) { 
15
			if (captionVisible == false) {
16
				$('#slider_caption').fadeIn('fast', function() { captionVisible = true;});
17
 
18
				$('#slider_caption').css('left', ui.handle.css('left')).text(Math.round(ui.value * 15/100 + 8 ));
19
 
20
				$("div#text p").animate({fontSize: ui.value * 15/100 + 8 }).fadeIn("slow");
21
			}
22
			$('#slider_caption').fadeOut('fast', function() { captionVisible = false; });
23
 
24
		},
25
 
26
		slide: function(e, ui) {
27
			$('#slider_caption').css('left', ui.handle.css('left')).text(Math.round(ui.value * 15/100 + 8 ));
28
 
29
			$("div#text p").css({fontSize: ui.value * 15/100 + 8 }).fadeIn("slow");
30
		}
31
	});
32
 
33
 
Some Key Ideas:

    * First, we hide the caption with Javascript. This makes the caption visible if Javascript is disabled for just a little bit more accessibility.
    * As you can see, we now have a .slider modifier and several sub items as well:
          o startValue : This specifies the position that the handle starts at
          o minValue : This specifies the minimum value that the handle will go to
          o maxValue: This specifies the maximum value that the handle will go to
          o start: This allows us to tell JQuery what to do when the user starts sliding the bar
          o stop: This specifies what happens when the slider is let go of
          o slide: This specifies what happens when the slider is being slid
          o handle: This allows us to specify what will be the handle
    * We also assign a variable that will help us know, when stop: occurs, whether the caption is visible or not, and then perform an action based on that conclusion.
    * We also had to put a limit on the font sizes possible, so we limited the slider value possibilities to between 8 and 23. We did this by performing basic math on the value of the slider. (multiplied it by 15/100 and added 8 )
    * This equation resulted in decimal place sizes, so we had to round it the Math.round
    * Notice also, the method by which we made the caption stay on top of the handle. We made the css left value of the caption equal to the handle.
    * Notice that on the stop: I have the text size animated, while on the slide, I have the css size constantly changing. This might seem counter-intuitive, that on slide: I wouldn't animate it, but by the essence of gradually sliding and enlarging the size it does the same thing. If I were to animate instead of just changing the css, it would be choppy and unresponsive.
Step 5: Adding the Text Caption

 Javascript |  copy code |? 
01
$(function() {
02
 
03
 
04
	$('#slider_caption').hide();
05
	var calloutVisible = false;
06
	$('.slider_bar').slider({
07
		handle: '.slider_handle',
08
		startValue: 26,
09
		minValue: 0,
10
		maxValue: 100,
11
		start: function(e, ui) {
12
			$('#slider_caption').fadeIn('fast', function() { calloutVisible = true;});
13
			$('#font_indicator').fadeIn('slow');
14
		},
15
		stop: function(e, ui) { 
16
			if (calloutVisible == false) {
17
				$('#slider_caption').fadeIn('fast', function() { calloutVisible = true;});
18
				$('#font_indicator').fadeIn('slow');
19
				$('#slider_caption').css('left', ui.handle.css('left')).text(Math.round(ui.value * 15/100 + 8 ));
20
				$('#font_indicator b').text(Math.round(ui.value * 15/100 + 8 ));
21
				$("div#text p").animate({fontSize: ui.value * 15/100 + 8 }).fadeIn("slow");
22
			}
23
			$('#slider_caption').fadeOut('fast', function() { calloutVisible = false; });
24
			$('#font_indicator').fadeOut('slow');
25
 
26
 
27
		},
28
 
29
		slide: function(e, ui) {
30
			$('#slider_caption').css('left', ui.handle.css('left')).text(Math.round(ui.value * 15/100 + 8 ));
31
			$('#font_indicator b').text(Math.round(ui.value * 15/100 + 8 ));
32
			$("div#text p").css({fontSize: ui.value * 15/100 + 8 }).fadeIn("slow");
33
		}
34
	});
35
 
36
 
Key Ideas about #font_indicator

    * We added the same fade in and fade out effects in the same spots as the caption
    * We left out the css left position though
    * Notice that we have a  tag within the div#font-indicator. This not only makes the number stand out more, but allows us to just put the current slider handle value as text into it. If we just appended to the end of the div, every font size value would just pile up at the end.

Step 6: Giving the Plus and Minus Actions

This just wouldn't be a functional design, if we didn't give the plus and minus signs actions on click. This code might be a little bit sloppy and not perfectly efficient, but it gets the job done. This project required a surprising amount of math, which explains some of the wacky numbers that end up being used.

Without further ado, here is the rest of the javascript, I'll explain it afterward:

 Javascript |  copy code |? 
01
	  $(".add").click(function(){
02
    var currentFontSize = $('#text p').css('font-size');
03
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
04
    var newFontSize = currentFontSizeNum+1;
05
	if (newFontSize < 24) {
06
    $('#text p').css('font-size', newFontSize);
07
	$('#slider_caption').css('left', newFontSize*19.75 - 158).fadeIn('fast').text(Math.round(newFontSize )).fadeOut();
08
	$('.slider_handle').css('left', newFontSize*19.75 - 158);
09
	$('#font_indicator').fadeIn('slow');
10
	$('#font_indicator b').text(Math.round(newFontSize ));
11
	$('#font_indicator').fadeOut('slow');
12
	}
13
	else{
14
	$('#font_indicator').fadeIn('slow');
15
	$('#font_indicator b').text("Isn't 23 big enough?");
16
	$('#font_indicator').fadeOut('slow');
17
	}
18
    return false;
19
  });
20
  	  $(".minus").click(function(){
21
    var currentFontSize = $('#text p').css('font-size');
22
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
23
    var newFontSize = currentFontSizeNum-1;
24
	if (newFontSize > 8) {
25
    $('#text p').css('font-size', newFontSize);
26
	$('#slider_caption').css('left', newFontSize*19.75 - 158).fadeIn('fast').text(Math.round(newFontSize )).fadeOut();
27
	$('.slider_handle').css('left', newFontSize*19.75 - 158);
28
	$('#font_indicator').fadeIn('slow');
29
	$('#font_indicator b').text(Math.round(newFontSize ));
30
	$('#font_indicator').fadeOut('slow');
31
	}
32
	else{
33
	$('#font_indicator').fadeIn('slow');
34
	$('#font_indicator b').text("Isn't 8 small enough?");
35
	$('#font_indicator').fadeOut('slow');
36
	}
37
	return false;
38
  });
39
  
 Some Key Notes:

    * If you know basic Javascript syntax, this should be pretty self evident.
    * I assign an initial variable to get the current font size.
    * I then convert it to an integer
    * I then create another variable that is one value higher.
    * I place a limit between under 24 and above 8, by using an if else statement.

Math Time

Adjusting the handle and caption to react to the plus and minus click was a real challenge. What I ended up doing, was figuring out the width of the bar (316px), and dividing that between the 16 possible font sizes (8-23) to figured out how much space each increment took.



To be safe, I then needed to figure out the starting spot for the font size. I knew this wasn't exactly 12, because I modified it slightly with the 15/100 + 8. So I took the starting value of the handle (26) and multiplied it by that:

26*15/100 + 8=

I figured that, since it was rounded it would be twelve anyway.

So I figured that the handle would be the [font size*19.75 - 158 (The first 8 sizes)]px.

Just thought that I'd give you a glimpse into my weird and over complicated math ;)  .There's probably much easier ways to do it, but I guess this is my logic.

Step 7: Cookie Time, reading the cookie

For dealing with cookies I used Klaus Hartl's excellent cookie plugin. You can view the basic syntax of the plugin in the link I provided. The challenge, was to find a spot that would reliably set the cookie. I ended up setting it when the browser refreshes or changes the page. This way, it only does it when necessary and realiably too. First we add the code to the top of the javascript file to read the cookie:

 Javascript |  copy code |? 
1
var startSize = $.cookie('fontSize');
2
var startSize = parseFloat(startSize, 12);
3
 
4
$('#text p').css('font-size', startSize);
5
 What I Did:

    * I first read the cookie and sent it to the variable startSize
    * I then changed that variable into an integer
    * I then added that number to the default css of the text

Step 8: Setting The Cookie

As I mentioned above, we need to set the cookie when the page is exited. We do this by using the following code: 
 Javascript |  copy code |? 
1
  window.onbeforeunload = leaveCookie;
2
 
3
function leaveCookie()
4
{
5
			var FontSize = $('#text p').css('font-size');
6
   			var IntFontSize = parseFloat(FontSize, 10);
7
			$.cookie('fontSize', IntFontSize);
8
}
 What I Did:

    * NOTE: This JS is outside of the JQuery $(function() {});
    * First, I activated a function when the browser left the page
    * Then I converted the text size into an integer
    * Then I put this into the cookie
    
   
  
Demo: http://nettuts.s3.amazonaws.com/065_jQueryTextSlider/Text%20Slider%20Demo/index.html
Download: http://nettuts.s3.amazonaws.com/065_jQueryTextSlider/Text%20Slider%20Demo.zip
Source: http://net.tutsplus.com/tutorials/javascript-ajax/use-the-jquery-ui-to-control-the-size-of-your-text/
 
    
  
Related Listings:
  1. jQuery Slider Gallery Michiel Kenis requested a tutorial explaining how to create a...
  2. Yahoo Slider Widget This example demonstrates a simple vertical implementation of the YUI...
  3. Auto Playing Jquery Content Slider I love the Coda Slider plugin for jQuery. I've used...
 		 
 
  
 






































0
comments:
        












Post a Comment






Note: Only a member of this blog may post a comment.