Adobe CS tutorials - Dreamweaver, FIreworks, Photoshop, Flash and Coldfusion

Javascript

Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 8: Solving the Puzzle
Reader Level:

Every now and again a client will come to you asking for a seemingly simple thing that turns out to be far more difficult and complex than you'd ever imagined. Today we're going to start looking at one classic example: how to make an interactive jigsaw puzzle. While there are many examples on the web of puzzles based in Flash or on "straight sided pieces" (which really isn't a jigsaw puzzle is it?) there are few examples around of how to make a more realistic and lightweight puzzle from scratch.

Today we're going add the code that will detect when the puzzle is completed and reward the user by playing a sound. We'll also add in some timing so that we can let them know how long it took to finish.

The Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery Series:
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 1
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 2
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 3
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 4
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 5: Randomization and HTML5 Audio
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 6: Grouping Pieces I
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 7: Grouping Pieces II
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 8: Solving the Puzzle

Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 7: Grouping Pieces II
Reader Level:

Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 6: Grouping Pieces
Reader Level:

Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 5 - Randomization and HTML5 Audio
Reader Level:

Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 4
Reader Level:

Every now and again a client will come to you asking for a seemingly simple thing that turns out to be far more difficult and complex than you'd ever imagined. Today we're going to start looking at one classic example: how to make an interactive jigsaw puzzle. While there are many examples on the web of puzzles based in Flash or on "straight sided pieces" (which really isn't a jigsaw puzzle is it?) there are few examples around of how to make a more realistic and lightweight puzzle from scratch.

In today's article we're going to refine our puzzle by adding "snapping" to each piece so the user gets a visual clue each time they put a one the right place. Every now and again a client will come to you asking for a seemingly simple thing that turns out to be far more difficult and complex than you'd ever imagined. Today we're going to start looking at one classic example: how to make an interactive jigsaw puzzle. While there are many examples on the web of puzzles based in Flash or on "straight sided pieces" (which really isn't a jigsaw puzzle is it?) there are few examples around of how to make a more realistic and lightweight puzzle from scratch.

In today's article we're going to spend a bit of time on the subtle but important details: randomizing the order of the pieces on load, and adding some sound-effects.

The Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery Series:
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 1
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 2
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 3
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 4
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 5: Randomization and HTML5 Audio
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 6: Grouping Pieces I
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 7: Grouping Pieces II

Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 3
Reader Level:

Every now and again a client will come to you asking for a seemingly simple thing that turns out to be far more difficult and complex than you'd ever imagined. Today we're going to start looking at one classic example: how to make an interactive jigsaw puzzle. While there are many examples on the web of puzzles based in Flash or on "straight sided pieces" (which really isn't a jigsaw puzzle is it?) there are few examples around of how to make a more realistic and lightweight puzzle from scratch.

In today's article we're going to make our puzzle more challenging by changing the orientation of the pieces and letting a user rotate them manually to where they should be. Every now and again a client will come to you asking for a seemingly simple thing that turns out to be far more difficult and complex than you'd ever imagined. Today we're going to start looking at one classic example: how to make an interactive jigsaw puzzle. While there are many examples on the web of puzzles based in Flash or on "straight sided pieces" (which really isn't a jigsaw puzzle is it?) there are few examples around of how to make a more realistic and lightweight puzzle from scratch.

In today's article we're going to spend a bit of time on the subtle but important details: randomizing the order of the pieces on load, and adding some sound-effects.

The Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery Series:
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 1
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 2
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 3
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 4
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 5: Randomization and HTML5 Audio
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 6: Grouping Pieces I
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 7: Grouping Pieces II

Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 2
Reader Level:

Every now and again a client will come to you asking for a seemingly simple thing that turns out to be far more difficult and complex than you'd ever imagined. Today we're going to start looking at one classic example: how to make an interactive jigsaw puzzle. While there are many examples on the web of puzzles based in Flash or on "straight sided pieces" (which really isn't a jigsaw puzzle is it?) there are few examples around of how to make a more realistic and light-weight puzzle from scratch.

In today's article we'll take the pieces we created in Part 1 and through a bit of jQuery and CSS turn them into a basic interactive jigsaw puzzle. Every now and again a client will come to you asking for a seemingly simple thing that turns out to be far more difficult and complex than you'd ever imagined. Today we're going to start looking at one classic example: how to make an interactive jigsaw puzzle. While there are many examples on the web of puzzles based in Flash or on "straight sided pieces" (which really isn't a jigsaw puzzle is it?) there are few examples around of how to make a more realistic and lightweight puzzle from scratch.

In today's article we're going to spend a bit of time on the subtle but important details: randomizing the order of the pieces on load, and adding some sound-effects.

The Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery Series:
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 1
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 2
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 3
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 4
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 5: Randomization and HTML5 Audio
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 6: Grouping Pieces I
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 7: Grouping Pieces II

Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 1 Free!

Reader Level:

Every now and again a client will come to you asking for a seemingly simple thing that turns out to be far more difficult and complex than you'd ever imagined. Today we're going to start looking at one classic example: how to make an interactive jigsaw puzzle. While there are many examples on the web of puzzles based in Flash or on "straight sided pieces" (which really isn't a jigsaw puzzle is it?) there are few examples around of how to make a more realistic and light-weight puzzle from scratch.

In today's article we're going to start building our puzzle by taking an image and cutting it up into individual jigsaw pieces using some handy Fireworks features and extensions. Every now and again a client will come to you asking for a seemingly simple thing that turns out to be far more difficult and complex than you'd ever imagined. Today we're going to start looking at one classic example: how to make an interactive jigsaw puzzle. While there are many examples on the web of puzzles based in Flash or on "straight sided pieces" (which really isn't a jigsaw puzzle is it?) there are few examples around of how to make a more realistic and lightweight puzzle from scratch.

In today's article we're going to spend a bit of time on the subtle but important details: randomizing the order of the pieces on load, and adding some sound-effects.

The Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery Series:
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 1
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 2
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 3
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 4
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 5: Randomization and HTML5 Audio
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 6: Grouping Pieces I
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 7: Grouping Pieces II

Building Sortable Checkbox Lists - Part 2
Reader Level:

Building Sortable Checkbox Lists - Part 1
Reader Level:

As developers it's easy to get caught up in the "technical wizardry" of server-side scripts and databases, without really stopping to think about the front-end part of what you're doing. Often times developers who are very strong with server-side development steer away from client-side coding and page interaction/presentation simply because they're not as comfortable with some of the concepts or how to go about implementing certain features. In this series we're going to take a look at a perfect example of how modern JavaScript libraries like jQuery can help making the move from server-side guru to "Web 2.0 master" a fairly easy and painless transition.

We're going to start with Ordering Checkbox Lookups in PHP, a perfect example of some very powerful and handy server-side code that has great functionality but could benefit from some dynamic front-end coding to make it really shine. We'll explore some of the limitations of the current basic form implementation that he's got, and see how easy it is to make it more intuitive through the use of jQuery and the jQuery UI libraries. Then, in the second half of the series we'll build on what we've learned to actually alter the form/checkbox concept into something that is even easier and more intuitive to work with for this application.

Object Oriented Programming in JavaScript
Reader Level:

Many developers who are more familiar with mainstream programming languages, like C++, Java, or even PHP, look at JavaScript and consider it to be a basic, feature-crippled language. The common conception that JavaScript is not object-oriented and does not support any advanced OOP features is perhaps the most surprising of all. The base of this misunderstanding is that JavaScript implements these features in a much more modern and intuitive fashion that is quite different from that of traditional languages.

Today we're going to explore JavaScript's object-oriented functionality so that you'll have a better understanding both of how it works and why it is so different from other languages.

Introduction to jQuery Mobile
Reader Level:

The web is going mobile, need a quick framework to add mobile to your site or your client's site? Introducing jQuery mobile, a framework to take care of the structure of your site while you worry about the content.

Referencing Radio Button Values in jQuery Free!

Reader Level:

In our last installment, we looked at referencing the list of values that a user has selected from a collection of checkboxes. Unlike some simpler controls like text boxes, checkboxes are a little more complicated to grab values from. Closely related are radio buttons, which also allow selection from multiple options.

Unlike checkboxes, radio buttons only allow you to pick a single option. You might be asked to choose Yes or No or perhaps Male or Female. More involved options might provide many more selections; but you can only choose one of them.

jQuery Quickshots - Rotating Images in Realtime
Reader Level:

Referencing Checkboxes with jQuery
Reader Level:

You may already know that HTML forms can pass values as a part of a collection. For instance, if a user selects multiple checkboxes from a selection that is named the same, you can access a comma delimited list of the selections they made once the form is submitted.

When retrieving the list of checkboxes that a user has selected in jQuery, it might seem like you could do something similar and simply check checkboxname.val() to get a list of the selected values. You will find, however, that this will give you only the value of the first checkbox in the set and ignore the rest. Getting a list of the values in jQuery is not difficult, but it is a little more complicated.

Nice Popup Messages with jQuery
Reader Level:

Sometimes in your web application you need to pop up a message that isn't critical enough for a JavaScript popup and it doesn't require any action on the user's behalf, this is a little script that can get that done for you! Using jQuery and the "humanized messages" script this is a extremely quick task.

Finger-Friendly Mobile Web - Part 4G: Dynamic Layering 7
Reader Level:

The web is moving beyond the confines of computers, thanks to the advent of smart phones and high-speed cellular networks. This is changing not only the way we think about connectivity and the net, but also the ways in which we access and interact with information. The rise of the touch screen and smart phone are bringing a myriad of new challenges, and opportunities, our way.

In this series we're going to explore how we, as web developers, need to adapt in order to take full advantage of these changes and continue to provide new and exciting user experiences. We're going to learn to conquer the "finger-friendly mobile web"!

In the tenth part of this series we're going to address some Safari/WebKit specific problems with our system, and look at how we can use Mod-ReWrite to clean up the URLs.

The Finger Friendly Mobile Web Series
Finger-Friendly Mobile Web - Part 1: An Introduction
Finger-Friendly Mobile Web - Part 2: Screen Sizes vs Density
Finger-Friendly Mobile Web - Part 3: Physical Sizes
Finger-Friendly Mobile Web - Part 4a: Dynamic Layering 1
Finger-Friendly Mobile Web - Part 4b: Dynamic Layering 2
Finger-Friendly Mobile Web - Part 4c: Dynamic Layering 3
Finger-Friendly Mobile Web - Part 4d: Dynamic Layering 4
Finger-Friendly Mobile Web - Part 4e: Dynamic Layering 5
Finger-Friendly Mobile Web - Part 4f: Dynamic Layering 6
Finger-Friendly Mobile Web - Part 4g: Dynamic Layering 7

JavaScript Pop Up Windows - Part 6: Moving & Resizing Pop Up Windows
Reader Level:

In this multi-part JavaScript Pop Up Windows series we're learning all about pop up windows. We already know how to create windows -- we know how to place them where we want and the size we want when we create them. Today we learn how to move them and resize them after they've already been created!

The JavaScript Pop Up Windows Series:
JavaScript Pop Up Windows - Part 1: window.open Method Syntax
JavaScript Pop Up Windows - Part 2: Window Handlers, Focus, and Control
JavaScript Pop Up Windows - Part 3: Window Size & Location
JavaScript Pop Up Windows - Part 4: Centering a Pop Up Window
JavaScript Pop Up Windows - Part 5: open(), close(), focus() and blur()
JavaScript Pop Up Windows - Part 6: Moving & Resizing Pop Up Windows

Finger-Friendly Mobile Web - Part 4f: Dynamic Layering 6
Reader Level:

JavaScript Pop Up Windows - Part 5: open(), close(), focus() and blur()
Reader Level:

We've covered the syntax of the window.open() method, including all the values of the features parameter. We've also learned about several window properties relevant to pop up windows. In this section, we shift focus a bit and learn how to affect already opened pop up windows. We will learn how to close windows, blur windows and give windows focus.

The JavaScript Pop Up Windows Series:
JavaScript Pop Up Windows - Part 1: window.open Method Syntax
JavaScript Pop Up Windows - Part 2: Window Handlers, Focus, and Control
JavaScript Pop Up Windows - Part 3: Window Size & Location
JavaScript Pop Up Windows - Part 4: Centering a Pop Up Window
JavaScript Pop Up Windows - Part 5: open(), close(), focus() and blur()
JavaScript Pop Up Windows - Part 6: Moving & Resizing Pop Up Windows

Finger-Friendly Mobile Web - Part 4e: Dynamic Layering 5
Reader Level:

The web is moving beyond the confines of computers, thanks to the advent of smart phones and high-speed cellular networks. This is changing not only the way we think about connectivity and the net, but also the ways in which we access and interact with information. The rise of the touch screen and smart phone are bringing a myriad of new challenges, and opportunities, our way.

In this series we're going to explore how we, as web developers, need to adapt in order to take full advantage of these changes and continue to provide new and exciting user experiences. We're going to learn to conquer the "finger-friendly mobile web"!

In the eighth part of this series we're going to look at how to make our system more efficient through the use of a server-side proxy. The proxy will be responsible for loading content using SimpleHTMLDom, parsing HTML, and stripping or updating elements as it goes.

The Finger Friendly Mobile Web Series
Finger-Friendly Mobile Web - Part 1: An Introduction
Finger-Friendly Mobile Web - Part 2: Screen Sizes vs Density
Finger-Friendly Mobile Web - Part 3: Physical Sizes
Finger-Friendly Mobile Web - Part 4a: Dynamic Layering 1
Finger-Friendly Mobile Web - Part 4b: Dynamic Layering 2
Finger-Friendly Mobile Web - Part 4c: Dynamic Layering 3
Finger-Friendly Mobile Web - Part 4d: Dynamic Layering 4
Finger-Friendly Mobile Web - Part 4e: Dynamic Layering 5
Finger-Friendly Mobile Web - Part 4f: Dynamic Layering 6
Finger-Friendly Mobile Web - Part 4g: Dynamic Layering 7

JavaScript Pop Up Windows - Part 4: Centering a Pop Up Window
Reader Level:

We've covered the syntax of the window.open() method, including all the values of the features parameter. We've also learned about several of the window properties that are relavant to pop up windows. In this section we take what we've learned and user standard properties and well supported non-standard properties to put all that knowledge to work! We learn how to place a new popup relative to the screen and to its parent, including how to center a pop up in the middle of its opener.

The JavaScript Pop Up Windows Series:
JavaScript Pop Up Windows - Part 1: window.open Method Syntax
JavaScript Pop Up Windows - Part 2: Window Handlers, Focus, and Control
JavaScript Pop Up Windows - Part 3: Window Size & Location
JavaScript Pop Up Windows - Part 4: Centering a Pop Up Window
JavaScript Pop Up Windows - Part 5: open(), close(), focus() and blur()
JavaScript Pop Up Windows - Part 6: Moving & Resizing Pop Up Windows

JS Pop Ups - Part 3: Window Size & Location
Reader Level:

In this multi-part series we learn everything there is to know about creating pop up windows and controlling them. In this section we learn several of the properties of the window object, and how we can use those properties to determine the size and location of a browser window.

The JavaScript Pop Up Windows Series:
JavaScript Pop Up Windows - Part 1: window.open Method Syntax
JavaScript Pop Up Windows - Part 2: Window Handlers, Focus, and Control
JavaScript Pop Up Windows - Part 3: Window Size & Location
JavaScript Pop Up Windows - Part 4: Centering a Pop Up Window
JavaScript Pop Up Windows - Part 5: open(), close(), focus() and blur()
JavaScript Pop Up Windows - Part 6: Moving & Resizing Pop Up Windows

Finger-Friendly Mobile Web - Part 4d: Dynamic Layering 4
Reader Level:

The web is moving beyond the confines of computers, thanks to the advent of smart phones and high-speed cellular networks. This is changing not only the way we think about connectivity and the net, but also the ways in which we access and interact with information. The rise of the touch screen and smart phone are bringing a myriad of new challenges, and opportunities, our way.

In this series we're going to explore how we, as web developers, need to adapt in order to take full advantage of these changes and continue to provide new and exciting user experiences. We're going to learn to conquer the "finger-friendly mobile web"!

In the seventh part of this series we'll continue writing the client-side code to make our layering system actually functional. Along the way we'll look at how to use jQuery to get browser dimensions, as well as how to enable and disable both stylesheets and elements on a page.

The Finger Friendly Mobile Web Series
Finger-Friendly Mobile Web - Part 1: An Introduction
Finger-Friendly Mobile Web - Part 2: Screen Sizes vs Density
Finger-Friendly Mobile Web - Part 3: Physical Sizes
Finger-Friendly Mobile Web - Part 4a: Dynamic Layering 1
Finger-Friendly Mobile Web - Part 4b: Dynamic Layering 2
Finger-Friendly Mobile Web - Part 4c: Dynamic Layering 3
Finger-Friendly Mobile Web - Part 4d: Dynamic Layering 4
Finger-Friendly Mobile Web - Part 4e: Dynamic Layering 5
Finger-Friendly Mobile Web - Part 4f: Dynamic Layering 6
Finger-Friendly Mobile Web - Part 4g: Dynamic Layering 7

JavaScript Pop Up Windows - Part 2: Window Handlers, Focus, and Control
Reader Level:

In this multi-part series, we learn everything there is to know about creating pop up windows and controling them. In this section we learn how to target a pop up window by accessing it via its handler. You'll learn how to open a window, change its contents, give it focus and even close it. You'll also learn how a pop up window can identify the window that opened it.

The JavaScript Pop Up Windows Series:
JavaScript Pop Up Windows - Part 1: window.open Method Syntax
JavaScript Pop Up Windows - Part 2: Window Handlers, Focus, and Control
JavaScript Pop Up Windows - Part 3: Window Size & Location
JavaScript Pop Up Windows - Part 4: Centering a Pop Up Window
JavaScript Pop Up Windows - Part 5: open(), close(), focus() and blur()

Finger-Friendly Mobile Web - Part 4c: Dynamic Layering 3
Reader Level:

The web is moving beyond the confines of computers, thanks to the advent of smart phones and high-speed cellular networks. This is changing not only the way we think about connectivity and the net, but also the ways in which we access and interact with information. The rise of the touch screen and smart phone are bringing a myriad of new challenges, and opportunities, our way.

In this series we're going to explore how we, as web developers, need to adapt in order to take full advantage of these changes and continue to provide new and exciting user experiences. We're going to learn to conquer the "finger-friendly mobile web"!

In the sixth part of this series we'll begin to write the client-side coding that will power our dynamic layering system. We'll be using a combination of JavaScript and jQuery to read the rules out of our CSS stylesheets using the jQuery.Rule plugin. This will form the groundwork for determining which "layer" is most appropriate for the current browser window size.

The Finger Friendly Mobile Web Series
Finger-Friendly Mobile Web - Part 1: An Introduction
Finger-Friendly Mobile Web - Part 2: Screen Sizes vs Density
Finger-Friendly Mobile Web - Part 3: Physical Sizes
Finger-Friendly Mobile Web - Part 4a: Dynamic Layering 1
Finger-Friendly Mobile Web - Part 4b: Dynamic Layering 2
Finger-Friendly Mobile Web - Part 4c: Dynamic Layering 3
Finger-Friendly Mobile Web - Part 4d: Dynamic Layering 4
Finger-Friendly Mobile Web - Part 4e: Dynamic Layering 5
Finger-Friendly Mobile Web - Part 4f: Dynamic Layering 6
Finger-Friendly Mobile Web - Part 4g: Dynamic Layering 7

Finger-Friendly Mobile Web - Part 4: Dynamic Layering 2
Reader Level:

Finger-Friendly Mobile Web - Part 4: Dynamic Layering 2

JavaScript Pop Up Windows - Part 1: window.open() Method Syntax
Reader Level:

In this series we're going to cover everything you could possibly want to know about JavaScript pop up windows. In this section we cover the semantics and values of creating the pop up window. In the next section we cover controlling the pop up windows once opened.

The JavaScript Pop Up Windows Series:
JavaScript Pop Up Windows - Part 1: window.open Method Syntax
JavaScript Pop Up Windows - Part 2: Window Handlers, Focus, and Control
JavaScript Pop Up Windows - Part 3: Window Size & Location
JavaScript Pop Up Windows - Part 4: Centering a Pop Up Window
JavaScript Pop Up Windows - Part 5: open(), close(), focus() and blur()
JavaScript Pop Up Windows - Part 6: Moving & Resizing Pop Up Windows

Toggle Checkbox Selections
Reader Level:

You have a list of checkboxes on the page and you want to add a toggle to check all of them or uncheck all of them and you need it done in minutes? Well, with a little prep and a few lines of JavaScript, you can get this done in no time!

Party Favourites: The Group Slideshow - Part 2
Reader Level:

The advances in mobile technologies and the rapid growth of portable computing devices has brought the reach of the web into entirely new and unexpected places. In this article we're going to look at one particular example that I ran into recently: mobile slideshows, or live photocasting if you will. It helped to make a recent party of mine a roaring success, and it really wasn't that hard to do!

Here in Part 2 I'll show you how to build the "slave" script that will synchronize itself with the "controller" that we created last time. We'll also look add a thumbnail gallery to our controller page.

The Group Slideshow Series:
Party Favourites: The Group Slideshow - Part 1
Party Favourites: The Group Slideshow - Part 2

Party Favourites: The Group Slideshow - Part 1
Reader Level:

The advances in mobile technologies and the rapid growth of portable computing devices has brought the reach of the web into entirely new and unexpected places. In this article we're going to look at one particular example that I ran into recently: mobile slideshows, or live photocasting if you will. It helped to make a recent party of mine a roaring success, and it really wasn't that hard to do!

The Group Slideshow Series:
Party Favourites: The Group Slideshow - Part 1
Party Favourites: The Group Slideshow - Part 2

Basic Form Calculations
Reader Level:

Calculating totals for a form can seem rather complicated or daunting. In this tutorial, I'll break it down for you very easily and you will be able to create forms and calculate totals in the form in no time!

Firebug - Part 7c: Debugging JavaScript with the Firebug Console
Reader Level:

In this section of a multi-part series about Firebug, the premier (and free) web development tool for Firefox we learn about Firebug's console. We will learn to use console.log() instead of window.alert() and document.write() to inspect and debug JavaScript with Firebug's Console and Script tabs.

The Firebug Series:
Firebug - Part 1: The What and Why
Firebug - Part 2: Overview of Firebug Functionality
Firebug - Part 3: Editing with Firebug
Firebug - Part 4A: Inspecting and Troubleshooting CSS
Firebug - Part 4B: Inspecting and Troubleshooting CSS
Firebug - Part 5: Inspecting the Box Model
Firebug - Part 6: HTTP Requests and Download Speeds
Firebug - Part 7a: The Script Tab (Basics)
Firebug - Part 7b: Debuggger, Breakpoint & Expression Watching
Firebug - Part 7c: Debugging JavaScript with the Firebug Console

Finger-Friendly Mobile Web - Part 3: Physical Sizes
Reader Level:

Firebug - Part 7b: Debugger, Breakpoint & Expression Watching
Reader Level:

In this section of a multi-part series about Firebug, the premier (and free) web development tool for Firefox, we learn about setting breakpoints in our JavaScript to enable debugging via Firebug's Script tab.

The Firebug Series:
Firebug - Part 1: The What and Why
Firebug - Part 2: Overview of Firebug Functionality
Firebug - Part 3: Editing with Firebug
Firebug - Part 4A: Inspecting and Troubleshooting CSS
Firebug - Part 4B: Inspecting and Troubleshooting CSS
Firebug - Part 5: Inspecting the Box Model
Firebug - Part 6: HTTP Requests and Download Speeds
Firebug - Part 7a: The Script Tab (Basics)
Firebug - Part 7b: Debuggger, Breakpoint & Expression Watching
Firebug - Part 7c: Debugging JavaScript with the Firebug Console

Graphs in Your Web Pages!
Reader Level:

You have a client who wants to put a graph in their web site - and - wants to update the graph regularly. You could make a new image each time, plot out everything - or you could create it in Flash, but neither of those are skills you have and the budget is small. Flot to the rescue!

CKEditor 3 - WYSIWYG Text and HTML Editor for the Web Free!

Reader Level:

CKEditor is a WYSIWYG textarea editor for websites. Installation and configuration is simple, but its uses are powerful. CKEditor is useful in any web situation where you want a user to submit pre-formatted text. It is created via JavaScript and replaces any textarea field within any modern browser. The text field then adopts a set of toolbars which work and function like those you see any word processor like Microsoft Word or OpenOffice. You can customize the textarea in terms of the toolbars, the available functions and even the style.

WYSIWYG editors are commonly used in web applications such as blogs, content management systems, forums and e-mail generators. Specific projects in which I have implemented a WYSIWYG editor include a company jobs posting database and a company intranet group e-mail interface.

CKEditor 3 was released on October 17, 2009 and features new performance, browser compatibility, accessibility and customization enhancements. Implementing CKEditor within your webpages simple and fast. Customization is relatively easy and the documentation does a decent job of explaining the API. CKEditor is available under several licenses including free open source licenses and commercial development licenses.

This tutorial will demonstrate the installation of CKEditor as well as the configuration of common elements.

Finger-Friendly Mobile Web - Part 1: Introduction Free!

Reader Level:

The web is moving beyond the confines of computers, thanks to the advent of smart phones and high-speed cellular networks. This is changing not only the way we think about connectivity and the net, but also the ways in which we access and interact with information. The rise of the touch screen and smart phone are bringing a myriad of new challenges, and opportunities, our way.

In this series we're going to explore how we, as web developers, need to adapt in order to take full advantage of these changes and continue to provide new and exciting user experiences. We're going to learn to conquer the "finger-friendly mobile web"!

In the first part of this series we'll begin our journey by examining some of the major changes that this "finger friendly mobile world" brings, the challenges that we'll face, and the technologies and techniques that we'll be relying on as we move forward.

The Finger Friendly Mobile Web Series
Finger-Friendly Mobile Web - Part 1: An Introduction
Finger-Friendly Mobile Web - Part 2: Screen Sizes vs Density
FInger-Friendly Mobile Web - Part 3: Physical Sizes

HTML5 Canvas - Part 5: Image Scaling and Cropping
Reader Level:

Description: The upcoming HTML 5 specification promises to add support for a wide range of new and exciting web technologies. In this series we're going to focus on one of the major new players, the Canvas element, which allows for direct rendering and manipulation of vectors and images from within JavaScript.

Today we're going to continue our exploration of images by looking at how we can scale and crop them on canvas elements.

The HTML5 Canvas Series
HTML5 Canvas - Part 1: Introduction
HTML5 Canvas - Part 2: Basic
HTML5 Canvas - Part 3: Advanced Drawing Techniques
HTML5 Canvas - Part 4: Images
HTML5 Canvas - Part 5: Image Scaling and Croping

HTML5 Canvas - Part 4: Images
Reader Level:

The upcoming HTML 5 specification promises to add support for a wide range of new and exciting web technologies. In this series we're going to focus on one of the major new players, the Canvas element, which allows for direct rendering and manipulation of vectors and images from within JavaScript.

Today we're going to begin exploring the use of images within Canvas elements.

The HTML5 Canvas Series
HTML5 Canvas - Part 1: Introduction
HTML5 Canvas - Part 2: Basic
HTML5 Canvas - Part 3: Advanced Drawing Techniques
HTML5 Canvas - Part 4: Images
HTML5 Canvas - Part 5: Image Scaling and Croping Coming Soon

HTML5 Canvas - Part 3: Advanced Drawing Techniques
Reader Level:

The upcoming HTML 5 specification promises to add support for a wide range of new and exciting web technologies. In this series we're going to focus on one of the major new players, the Canvas element, which allows for direct rendering and manipulation of vectors and images from within JavaScript.

Today we're going to delve deeper into Canvas drawing by exploring custom paths and the methods that can be used to create them.

The HTML5 Canvas Series
HTML5 Canvas - Part 1: Introduction
HTML5 Canvas - Part 2: Basic
HTML5 Canvas - Part 3: Advanced Drawing Techniques
HTML5 Canvas - Part 4: Images
HTML5 Canvas - Part 5: Image Scaling and Croping Coming Soon

Show-Hide Passwords
Reader Level:

Entering passwords sometimes can be frustrating since you can't see what you're typing. This quick JavaScript will make it possible for visitors to toggle between text and the password protected field for their password entry.

HTML5 Canvas - Part 2: Basic
Reader Level:

The upcoming HTML 5 specification promises to add support for a wide range of new and exciting web technologies. In this series we're going to focus on one of the major new players, the Canvas element, which allows for direct rendering and manipulation of vectors and images from within JavaScript.

Today we're going to continue our exploration of the Canvas element by looking at the fundamental concepts of the drawing plane, along with some basic drawing tools.

The HTML5 Canvas Series
HTML5 Canvas - Part 1: Introduction
HTML5 Canvas - Part 2: Basic
HTML5 Canvas - Part 3: Advanced Drawing Techniques
HTML5 Canvas - Part 4: Images
HTML5 Canvas - Part 5: Image Scaling and Croping Coming Soon

Fading Text with JavaScript
Reader Level:

This quick fading technique will provide some visual feedback to your visitors when they have moused over a text link. All it takes is a few lines of JavaScript, a little bit of math and some time to get it working just right!

HTML5 Canvas - Part 1: Introduction Free!

Reader Level:

The upcoming HTML 5 specification promises to add support for a wide range of new and exciting web technologies. In this series we're going to focus on one of the major new players, the Canvas element, which allows for direct rendering and manipulation of vectors and images from within JavaScript.

In this first article, we'll explore what Canvas is, why it's important to us, and get a first quick look at how it can be used.

The HTML5 Canvas Series
HTML5 Canvas - Part 1: Introduction
HTML5 Canvas - Part 2: Basic
HTML5 Canvas - Part 3: Advanced Drawing Techniques
HTML5 Canvas - Part 4: Images
HTML5 Canvas - Part 5: Image Scaling and Croping Coming Soon

Creating Rounded Borders in Browsers with CSS3 with an IE twist Free!

Reader Level:

In the past we've generally had to add a bunch of useless HTML as hooks to add corners when making rounded corners. Now, most modern browsers understand their own versions of the CSS border-radius property, which creates rounded corners on elements. In this tutorial we learn a new method of creating rounded corners in all browsers. We'll also target Internet Explorer using a little JavaScript and CSS magic.

Firebug - Part 7a: The Script Tab (Basics)
Reader Level:

In this section of a multi-part series about Firebug, the premier (and free) web development tool for Firefox we learn about Firebug's Script tab. We take a look at the basic functionalities of the Script tab, including inspecting your JavaScript.

The Firebug Series:
Firebug - Part 1: The What and Why
Firebug - Part 2: Overview of Firebug Functionality
Firebug - Part 3: Editing with Firebug
Firebug - Part 4A: Inspecting and Troubleshooting CSS
Firebug - Part 4B: Inspecting and Troubleshooting CSS
Firebug - Part 5: Inspecting the Box Model
Firebug - Part 6: HTTP Requests and Download Speeds
Firebug - Part 7a: The Script Tab (Basics)
Firebug - Part 7b: Debuggger, Breakpoint & Expression Watching
Firebug - Part 7c: Debugging JavaScript with the Firebug Console

jQuery Quickshots - Summarizing Form Data: Part 3
Reader Level:

jQuery is a great tool for helping to make your JavaScript and AJAX applications easier to develop and maintain. One of the hardest things about it though, is that it introduces so many new and amazing possibilities that aren't always clearly obvious on the surface.

These "quickshot" articles are intended to act as hints, or inspirations, to some of the more creative or unknown problems that jQuery can help you tackle.

In this article, the third part of the previous "jQuery Quickshots - Summarizing Form Data" series, we're going to take our form summary to the next level by providing the user with inline editing capabilities.

The jQuery Summarazing Form Data Series:
jQuery Quickshots - Summarizing Form Data: Part 1
jQuery Quickshots - Summarizing Form Data: Part 2
jQuery Quickshots - Summarizing Form Data: Part 3

jQuery Quickshots - Summarizing Form Data: Part 2
Reader Level:

jQuery is a great tool for helping to make your JavaScript and AJAX applications easier to develop and maintain. One of the hardest things about it though, is that it introduces so many new and amazing possibilities that aren't always clearly obvious on the surface.

These "quickshot" articles are intended to act as hints, or inspirations, to some of the more creative or unknown problems that jQuery can help you tackle.

In this article, a follow-up to the previous "jQuery Quickshots - Summarizing Form Data: Part 1", we're going to expand on the idea of form summarization to point out errors to users in the summary and clean up some of the problems from last time.

The jQuery Summarazing Form Data Series:
jQuery Quickshots - Summarizing Form Data: Part 1
jQuery Quickshots - Summarizing Form Data: Part 2
jQuery Quickshots - Summarizing Form Data: Part 3

Appcelerator Entourage - Part 5: Expression Conditions
Reader Level:

This is the fifth article in an on-going series about building rich internet applications with Appcelerator Entourage. Appcelerator Entourage is a framework combining client-side JavaScript libraries with server-side service brokers to create fully integrated applications on a variety of server technologies, ranging from PHP to Rails to .Net.

In the last article we learned about the basics of Entourage's expressions. This article continues with the subject by taking a look at the range of conditions which can be used in Entourage expressions.

This series is intended for developers comfortable with HTML, JavaScript and the concepts of AJAX. The series doesn't require previous experience with JavaScript libraries, such as jQuery or Prototype, but this certainly helps as the concepts used in these libraries are important to mastering Entourage.

The Appcelerator Entourage Series:
Appcelerator Entourage - Part 1: An Overview
Appcelerator Entourage - Part 2: Getting Started
Appcelerator Entourage - Part 3: The Message Queue
Appcelerator Entourage - Part 4: Expressions
Appcelerator Entourage - Part 5: Expression Conditions

jQuery Quickshots - Dependent Selects
Reader Level:

Best Practices for Creating Custom Web Site Search Functions - Part 2: Pre-Filled Text in Search Box
Reader Level:

The fourth of 11 Things I Hate About Web Site Search Functions is when pre-filled text is not automatically cleared when the visitor clicks in the search field. Having some text showing in the search box to prompt a visitor is only helpful with the rudimentary onFocus JavaScript snippet which clears the field when a visitor clicks on it. To not have a search text box clear itself of its pre-filled text is just lazy programming.

While the onFocus snippet is easy to implement, it is not the full solution. On one of my web sites, I noticed in the search statistics that the pre-filled text is by far the most common search query. What this means is that, for some reason, visitors are clicking the submit button before entering a search term. Recently, while building a new client site I decided to prevent this problem with a more deluxe version of search box management.

The Best Practices for Creating Custom Web Site Search Functions Series:
Best Practices for Creating Custom Web Site Search Functions - Part 1
Best Practices for Creating Custom Web Site Search Functions - Part 2: Pre-Filled Text in Search Box

jQuery Quickshots - Creating Your Own Selectors
Reader Level:

jQuery is a great tool for helping to make your JavaScript and AJAX applications easier to develop and maintain. One of the hardest things about it though is that it introduces so many new and amazing possibilities that aren't always clearly obvious on the surface.

These "Quickshot" articles are intended to act as hints, or inspirations, to some of the more creative or unknown problems that jQuery can help you tackle. Today's article will show you just how easy it is to extend jQuery by creating your own custom selectors.

jQuery Quickshots - Page Transitions
Reader Level:

Appcelerator Entourage Part 3: The Message Queue
Reader Level:

This is the third article in an on-going series about building rich internet applications with Appcelerator Entourage. Appcelerator Entourage is a framework combining client-side JavaScript libraries with server-side service brokers to create fully integrated applications on a variety of server technologies ranging from PHP to Rails to .Net.

In the last article we learned about how to download and install Entourage, as well as building a simple application. In this article we will move deeper into application development with Entourage, focusing on the Message Queue—a simplified, and more powerful version of the traditional DOM event model used by most JavaScript developers in their applications.

The Appcelerator Entourage Series:
Appcelerator Entourage - Part 1: An Overview
Appcelerator Entourage - Part 2: Getting Started
Appcelerator Entourage - Part 3: The Message Queue
Appcelerator Entourage - Part 4: Expressions
Appcelerator Entourage - Part 5: Expression Conditions

A Beginner's Guide to Spry - Part 1: The Spry Tooltip Widget Free!

Reader Level:

Spry widgets are a collection of JavaScript driven behaviours that are native to Dreamweaver. The functionality they provide is varied and customisable. From form checking to sliding panels and data sets, Spry widgets provide a quick and customisable solution to everyday requirements in the web site designer's world.

We'll begin this series by investigating the Spry Tooltip widget, the Spry Tooltip widget is — for want of a better description — a fancy tooltip generator that allows you to customise how your tooltip will appear with good use of CSS. The Spry Tooltip is similar in functionality to the title attribute, but provides greater flexibility and styling options. With a little care you can make Spry Tooltips a desirable feature within your website.

The Beginner's Guide to Spry Series:
A Beginner's Guide to Spry - Part 1: The Spry Tooltip Widget
A Beginner's Guide to Spry - Part 2: The Spry Collapsible Panel
A Beginner's Guide to Spry - Part 3: The Spry Accordion
A Beginner's Guide to Spry - Part 4: Spry Tabbed Panels
A Beginner's Guide to Spry - Part 5: Spry Menu Bar

Appcelerator Entourage - Part 2: Getting Started
Reader Level:

This is the second article in an on-going series about building rich internet applications with Appcelerator Entourage. Appcelerator Entourage is a framework combining client-side JavaScript libraries with server-side service brokers to create fully integrated applications on a variety of server technologies ranging from PHP to Rails to .Net.

In the first article we learned about the background of Entourage, its key components and features. In this article, we move on to more practical subject matter. We'll look at where to get Entourage, how to install it, walk through its file structure/components and then build a small test application to be sure everything is working as expected.

The Appcelerator Entourage Series:
Appcelerator Entourage - Part 1: An Overview
Appcelerator Entourage - Part 2: Getting Started
Appcelerator Entourage - Part 3: The Message Queue
Appcelerator Entourage - Part 4: Expressions
Appcelerator Entourage - Part 5: Expression Conditions

jQuery Quickshots - Submitting Forms with AJAX
Reader Level:

jQuery is a great tool for helping to make your JavaScript and AJAX applications easier to develop and maintain. One of the hardest things about it though is that it introduces so many new and amazing possibilities that aren't always clearly obvious on the surface.

These "quickshot" articles are intended to act as hints, or inspirations, to some of the more creative or unknown problems that jQuery can help you tackle. Today's article focuses on how to quickly and easily submit form data using jQuery's AJAX methods.

jQuery Quickshots - AJAX with JSON
Reader Level:

jQuery is a great tool in helping to make your JavaScript and AJAX applications easier to develop and maintain. One of the hardest things about it though is that it introduces so many new and amazing possibilities that aren't always clearly obvious on the surface.

These "quickshot" articles are intended to act as hints, or inspirations, to some of the more creative or unknown problems that jQuery can help you tackle. Today's article focuses on JSON, the compact alternative to XML for data exchanges between the client and server in AJAX scenarios.

Throbbing Web Pages
Reader Level:

This article is about a rather useless JavaScript function that I wrote that might be just the thing you need for a specific application -- I call it the Throb. You can set it on a CSS class name of a table cell or other element, and the background color of that element will "throb" from the color to a lighter color, causing the illusion of a throbbing element on the page. Despite its limited use, the code in the function should give you some ideas of what else can be done with JavaScript and CSS.

Making Your Own FAQ - Part 1 Free!

Reader Level:

Need to create a quick FAQ (frequently asked question) for a web site? With Dreamweaver, a little JavaScript and SQL, we can have a nice display in place in less than an hour!

The Make Your Own FAQ Series:
Making Your Own FAQ - Part 1
Making Your Own FAQ - Part 2: Adding Categories and Search
Making Your Own FAQ - Part 3 Coming Soon
Making Your Own FAQ - Part 4 Coming Soon

AJAX Concept Quickshot - Password Protected Apps
Reader Level:

Making the change from traditional web development to AJAX requires more than just learning different sets of technologies: you also have to learn new ways of dealing with old problems. Today we're going to look at one of the classic examples of this: password protected web sites.

Creating a Nice Help Feature for Your Forms
Reader Level:

Some forms just need extra help. Maybe it is a complex form or the typical visitors to the form aren't familiar with entering information in a form and it just needs a little more context help when the visitor is at the field. You could put the help text on the page, but that could clutter up the page and make it unfriendly. This method will put the help on the page when it is needed and take it away as soon as it isn't. Just a few lines of JavaScript to get it all working...

The jQuery UI Components - Part 15: UI Effects II
Reader Level:

The jQuery library goes a long way to help make AJAX-oriented applications easier to develop and deploy. One of the things that makes jQuery stand out from the other libraries available though is its expandability. The jQuery UI plugins, built on top of the original jQuery library, take that original ease of development and expand it to apply to interactive interface components, rather than just the underlying code that drives them.

In this series, we're going to look at the various modules and components that make up the jQuery UI system to see how they can help to make building rich interfaces on top of our existing jQuery systems a piece of cake.

In the fifteenth part of this series we'll wrap up our look at the visual effects module provided by the jQuery UI.

The jQuery UI Components Series:
The jQuery UI Components - Part 1: Introduction
The jQuery UI Components - Part 2: Draggables
The jQuery UI Components - Part 3: Droppables
The jQuery UI Components - Part 4: Sortables
The jQuery UI Components - Part 5: Resizables
The jQuery UI Components - Part 6: Accordion Widget
The jQuery UI Components - Part 7: Datepicker Widget
The jQuery UI Components - Part 8: Colorpicker Widget
The jQuery UI Components - Part 9: Magnifier Widget
The jQuery UI Components - Part 10: Progress Bar Widget
The jQuery UI Components - Part 11: Slider Widget
The jQuery UI Components - Part 12: Tabs Widget
The jQuery UI Components - Part 13: UI Themes
The jQuery UI Components - Part 14: UI Core Effects
The jQuery UI Components - Part 15: UI Effects II

JavaScript Variable Scope: Local and Global Variables Free!

Reader Level:

In writing JavaScript functions, variable functions can trip you up. A common error is overwriting a global variable because the variable in a function didn't have local scope.

If that last sentence didn't make any sense, then this article is for you.

This article covers tips and tricks for understanding variable scope in JavaScript.

The jQuery UI Components - Part 14: UI Core Effects
Reader Level:

The jQuery library goes a long way to help make AJAX-oriented applications easier to develop and deploy. One of the things that makes jQuery stand out from the other libraries available though is its expandibility. The jQuery UI plugins, built on top of the original jQuery library, take that original ease of development and expand it to apply to interactive interface components, rather than just the underlying code that drives them.

In this series, we're going to look at the various modules and components that make up the jQuery UI system to see how they can help to make building rich interfaces on top of our existing jQuery systems a piece of cake.

In the fourteenth part of this series we'll spend some time looking at the last part of the jQuery UI system: the visual effects module.

The jQuery UI Components Series:
The jQuery UI Components - Part 1: Introduction
The jQuery UI Components - Part 2: Draggables
The jQuery UI Components - Part 3: Droppables
The jQuery UI Components - Part 4: Sortables
The jQuery UI Components - Part 5: Resizables
The jQuery UI Components - Part 6: Accordion Widget
The jQuery UI Components - Part 7: Datepicker Widget
The jQuery UI Components - Part 8: Colorpicker Widget
The jQuery UI Components - Part 9: Magnifier Widget
The jQuery UI Components - Part 10: Progress Bar Widget
The jQuery UI Components - Part 11: Slider Widget
The jQuery UI Components - Part 12: Tabs Widget
The jQuery UI Components - Part 13: UI Themes
The jQuery UI Components - Part 14: UI Core Effects
The jQuery UI Components - Part 15: UI Effects II

The jQuery UI Components - Part 13: UI Themes
Reader Level:

The jQuery library goes a long way to help make AJAX-oriented applications easier to develop and deploy. One of the things that makes jQuery stand out from the other libraries available though is its expandibility. The jQuery UI plugins, built on top of the original jQuery library, take that original ease of development and expand it to apply to interactive interface components, rather than just the underlying code that drives them.

In this series, we're going to look at the various modules and components that make up the jQuery UI system to see how they can help to make building rich interfaces on top of our existing jQuery systems a piece of cake.

In the thirteenth part of this series we'll finish up our look at the UI library system by exploring the concept of UI themes along with the JQuery UI Themebuilder application.

The jQuery UI Components Series:
The jQuery UI Components - Part 1: Introduction
The jQuery UI Components - Part 2: Draggables
The jQuery UI Components - Part 3: Droppables
The jQuery UI Components - Part 4: Sortables
The jQuery UI Components - Part 5: Resizables
The jQuery UI Components - Part 6: Accordion Widget
The jQuery UI Components - Part 7: Datepicker Widget
The jQuery UI Components - Part 8: Colorpicker Widget
The jQuery UI Components - Part 9: Magnifier Widget
The jQuery UI Components - Part 10: Progress Bar Widget
The jQuery UI Components - Part 11: Slider Widget
The jQuery UI Components - Part 12: Tabs Widget
The jQuery UI Components - Part 13: UI Themes
The jQuery UI Components - Part 14: UI Core Effects
The jQuery UI Components - Part 15: UI Effects II

The jQuery UI Components - Part 12: Tabs Widget
Reader Level:

The jQuery library goes a long way to help make AJAX-oriented applications easier to develop and deploy. One of the things that makes jQuery stand out from the other libraries available though is its expandibility. The jQuery UI plugins, built on top of the original jQuery library, take that original ease of development and expand it to apply to interactive interface components, rather than just the underlying code that drives them.

In this series, we're going to look at the various modules and components that make up the jQuery UI system to see how they can help to make building rich interfaces on top of our existing jQuery systems a piece of cake.

In the twelth part of this series we'll continue looking at the various jQuery UI Widgets that are available by examining the Tabs module.

The jQuery UI Components Series:
The jQuery UI Components - Part 1: Introduction
The jQuery UI Components - Part 2: Draggables
The jQuery UI Components - Part 3: Droppables
The jQuery UI Components - Part 4: Sortables
The jQuery UI Components - Part 5: Resizables
The jQuery UI Components - Part 6: Accordion Widget
The jQuery UI Components - Part 7: Datepicker Widget
The jQuery UI Components - Part 8: Colorpicker Widget
The jQuery UI Components - Part 9: Magnifier Widget
The jQuery UI Components - Part 10: Progress Bar Widget
The jQuery UI Components - Part 11: Slider Widget
The jQuery UI Components - Part 12: Tabs Widget
The jQuery UI Components - Part 13: UI Themes
The jQuery UI Components - Part 14: UI Core Effects
The jQuery UI Components - Part 15: UI Effects II

Adding an Auto-Logout Feature - Part 2
Reader Level:

If you have a site that is built using one of the server technologies, like ASP, PHP, or ColdFusion, that has a login feature, chances are you also have a logout function. What happens when the user keeps the browser open and doesn't log out? Many times he will go back to the page and attempt to click on something, only to find out that he has to login again. For example, the user might fill in a complex form and walk away, only to come back to try to submit the form and be kicked out of the site.

Part one of this series showed a function to log the user out after a specified period of time. This part will show a second function which will warn the user that the session is about to be closed. Also, the original function will be expanded to allow the use of a custom logout page.

Because this is a client-side JavaScript function, it will work with any server-side language.

The Adding an Auto-Logout Feature Series:
Adding an Auto-Logout Feature - Part 1
Adding an Auto-Logout Feature - Part 2

Adding an Auto-Logout Feature - Part 1
Reader Level:

If you have a web application that has a login feature, chances are you also have a logout function. What happens when the user keeps the browser open and doesn't log out? Many times he will go back to the page and attempt to click on something, only to find out that he has to login again.

This article will show a JavaScript function that you can put on the page that will automatically log out the user after a specific length of time, so that when he returns to the browser he will already be logged out. Because this is a JavaScript function, it will work with any server-side language.

The Adding an Auto-Logout Feature Series:
Adding an Auto-Logout Feature - Part 1
Adding an Auto-Logout Feature - Part 2

The jQuery UI Components - Part 11: Slider Widget
Reader Level:

The jQuery library goes a long way to help make AJAX-oriented applications easier to develop and deploy. One of the things that makes jQuery stand out from the other libraries available though is its expandibility. The jQuery UI plugins, built on top of the original jQuery library, take that original ease of development and expand it to apply to interactive interface components, rather than just the underlying code that drives them.

In this series, we're going to look at the various modules and components that make up the jQuery UI system to see how they can help to make building rich interfaces on top of our existing jQuery systems a piece of cake.

In the eleventh part of this series we'll continue looking at the various jQuery UI Widgets that are available by examining the Slider module.

The jQuery UI Components Series:
The jQuery UI Components - Part 1: Introduction
The jQuery UI Components - Part 2: Draggables
The jQuery UI Components - Part 3: Droppables
The jQuery UI Components - Part 4: Sortables
The jQuery UI Components - Part 5: Resizables
The jQuery UI Components - Part 6: Accordion Widget
The jQuery UI Components - Part 7: Datepicker Widget
The jQuery UI Components - Part 8: Colorpicker Widget
The jQuery UI Components - Part 9: Magnifier Widget
The jQuery UI Components - Part 10: Progress Bar Widget
The jQuery UI Components - Part 11: Slider Widget
The jQuery UI Components - Part 12: Tabs Widget
The jQuery UI Components - Part 13: UI Themes
The jQuery UI Components - Part 14: UI Core Effects
The jQuery UI Components - Part 15: UI Effects II

Hide Your Body!
Reader Level:

Sometimes, when you have a lot of tables with data on the screen, the information can be overwhelming. If we could create a way to hide table content that didn't completely hide the table and was easily accessed, that could make the page better for the visitor. Well - with a little JavaScript code and a properly setup table - this is a quick fix!

The jQuery UI Components - Part 10: Progress Bar Widget
Reader Level:

The jQuery library goes a long way to help make AJAX-oriented applications easier to develop and deploy. One of the things that makes jQuery stand out from the other libraries available though is its expandibility. The jQuery UI plugins, built on top of the original jQuery library, take that original ease of development and expand it to apply to interactive interface components, rather than just the underlying code that drives them.

In this series, we're going to look at the various modules and components that make up the jQuery UI system to see how they can help to make building rich interfaces on top of our existing jQuery systems a piece of cake.

In the tenth part of this series we'll continue looking at the various jQuery UI Widgets that are available by examining the Progress Bar module.

The jQuery UI Components Series:
The jQuery UI Components - Part 1: Introduction
The jQuery UI Components - Part 2: Draggables
The jQuery UI Components - Part 3: Droppables
The jQuery UI Components - Part 4: Sortables
The jQuery UI Components - Part 5: Resizables
The jQuery UI Components - Part 6: Accordion Widget
The jQuery UI Components - Part 7: Datepicker Widget
The jQuery UI Components - Part 8: Colorpicker Widget
The jQuery UI Components - Part 9: Magnifier Widget
The jQuery UI Components - Part 10: Progress Bar Widget
The jQuery UI Components - Part 11: Slider Widget
The jQuery UI Components - Part 12: Tabs Widget
The jQuery UI Components - Part 13: UI Themes
The jQuery UI Components - Part 14: UI Core Effects
The jQuery UI Components - Part 15: UI Effects II

ColdFusion Contact Form in One Easy File - Part 3
Reader Level:

Michael Evangelista is a freelance web developer, ColdFusion programmer, and owner of a successful web and print design company based in southern Utah. Michael's company, Evangelista Design, has grown from a locally-oriented small business web design company to an international team of designers and ColdFusion developers offering a wide range of online business solutions, including full-service web hosting, custom content management applications, corporate data systems, and more.

In Part 2 of this tutorial, we added several effective spam-prevention methods to our simple contact form, including a simple hidden honeypot field, comparison of submitted values against an easy-to-manage list of banned words and phrases, and a quick check to prevent submission of any html content (containing < and >).

Wired into a single ColdFusion file, we left off with a nifty little spam-blocking, self-submitting, auto-responding, error-handling dynamic gizmo, ready to be battle-tested in the war against spam. You should be able to drop the sample file from Part 2 into any .cfm page, adjust the cfmail settings and other options in the code, and go... it's really that easy!

So... if it works, what's left?

As with any creative or code-related project, there are always aspects that can be cleaned up, simplified and polished. In Part 3, the final part of this series, we'll do some of each:

Streamline our error handling and error message display
Simplify installation and customization options with easy-to-configure scoped variables
Add custom client-side validation using the jQuery JavaScript library

...all in one simple bundle of files that you can insert into any page!

The ColdFusion Contact Forms in One Easy File Series:
ColdFusion Contact Forms in One Easy File - Part 1
ColdFusion Contact Forms in One Easy File - Part 2
ColdFusion Contact Forms in One Easy File - Part 3

Quick Shot: Alternate Table Row Coloring
Reader Level:

Do you have tables of data everywhere and you want to automatically setup the rows to alternate color?

This quick shot will use JavaScript and CSS to automatically alternate the background color of the table rows.

The jQuery UI Components - Part 9: Magnifier Widget
Reader Level:

The jQuery library goes a long way to help make AJAX-oriented applications easier to develop and deploy. One of the things that makes jQuery stand out from the other libraries available though is its expandibility. The jQuery UI plugins, built on top of the original jQuery library, take that original ease of development and expand it to apply to interactive interface components, rather than just the underlying code that drives them.

In this series we're going to look at the various modules and components that make up the jQuery UI system to see how they can help to make building rich interfaces on top of our existing jQuery systems a piece of cake.

In the ninth part of this series we'll continue looking at the various JQuery UI Widgets that are available by playing with the Magnifier module.

The jQuery UI Components Series:
The jQuery UI Components - Part 1: Introduction
The jQuery UI Components - Part 2: Draggables
The jQuery UI Components - Part 3: Droppables
The jQuery UI Components - Part 4: Sortables
The jQuery UI Components - Part 5: Resizables
The jQuery UI Components - Part 6: Accordion Widget
The jQuery UI Components - Part 7: Datepicker Widget
The jQuery UI Components - Part 8: Colorpicker Widget
The jQuery UI Components - Part 9: Magnifier Widget
The jQuery UI Components - Part 10: Progress Bar Widget
The jQuery UI Components - Part 11: Slider Widget
The jQuery UI Components - Part 12: Tabs Widget
The jQuery UI Components - Part 13: UI Themes
The jQuery UI Components - Part 14: UI Core Effects
The jQuery UI Components - Part 15: UI Effects II

The jQuery UI Components - Part 8: Colorpicker Widget
Reader Level:

The jQuery library goes a long way to help make AJAX-oriented applications easier to develop and deploy. One of the things that makes jQuery stand out from the other libraries available though is its expandibility. The jQuery UI plugins, built on top of the original jQuery library, take that original ease of development and expand it to apply to interactive interface components, rather than just the underlying code that drives them.

In this series we're going to look at the various modules and components that make up the jQuery UI system to see how they can help to make building rich interfaces on top of our existing jQuery systems a piece of cake.

In the eighth part of this series we'll continue looking at the various JQuery UI Widgets that are available by examining the Colorpicker module.

The jQuery UI Components Series:
The jQuery UI Components - Part 1: Introduction
The jQuery UI Components - Part 2: Draggables
The jQuery UI Components - Part 3: Droppables
The jQuery UI Components - Part 4: Sortables
The jQuery UI Components - Part 5: Resizables
The jQuery UI Components - Part 6: Accordion Widget
The jQuery UI Components - Part 7: Datepicker Widget
The jQuery UI Components - Part 8: Colorpicker Widget
The jQuery UI Components - Part 9: Magnifier Widget
The jQuery UI Components - Part 10: Progress Bar Widget
The jQuery UI Components - Part 11: Slider Widget
The jQuery UI Components - Part 12: Tabs Widget
The jQuery UI Components - Part 13: UI Themes
The jQuery UI Components - Part 14: UI Core Effects
The jQuery UI Components - Part 15: UI Effects II

The jQuery UI Components - Part 7: Datepicker Widget
Reader Level:

The jQuery library goes a long way to help make AJAX-oriented applications easier to develop and deploy. One of the things that makes jQuery stand out from the other libraries available though is its expandibility. The jQuery UI plugins, built on top of the original jQuery library, take that original ease of development and expand it to apply to interactive interface components, rather than just the underlying code that drives them.

In this series we're going to look at the various modules and components that make up the jQuery UI system to see how they can help to make building rich interfaces on top of our existing jQuery systems a piece of cake.

In the seventh part of this series we'll continue looking at the various JQuery UI Widgets that are available by spending some time with the Datepicker module.

The jQuery UI Components Series:
The jQuery UI Components - Part 1: Introduction
The jQuery UI Components - Part 2: Draggables
The jQuery UI Components - Part 3: Droppables
The jQuery UI Components - Part 4: Sortables
The jQuery UI Components - Part 5: Resizables
The jQuery UI Components - Part 6: Accordion Widget
The jQuery UI Components - Part 7: Datepicker Widget
The jQuery UI Components - Part 8: Colorpicker Widget
The jQuery UI Components - Part 9: Magnifier Widget
The jQuery UI Components - Part 10: Progress Bar Widget
The jQuery UI Components - Part 11: Slider Widget
The jQuery UI Components - Part 12: Tabs Widget
The jQuery UI Components - Part 13: UI Themes
The jQuery UI Components - Part 14: UI Core Effects
The jQuery UI Components - Part 15: UI Effects II

Quickshot: PayPal Product with Three Options! Free!

Reader Level:

PayPal only allows two options for products and you need three. This quickshot will make quick work of getting this done for you.

The jQuery UI Components - Part 6: Accordion Widget
Reader Level:

The jQuery library goes a long way to help make AJAX-oriented applications easier to develop and deploy. One of the things that makes jQuery stand out from the other libraries available though is its expandibility. The jQuery UI plugins, built on top of the original jQuery library, take that original ease of development and expand it to apply to interactive interface components, rather than just the underlying code that drives them.

In this series we're going to look at the various modules and components that make up the jQuery UI system to see how they can help to make building rich interfaces on top of our existing jQuery systems a piece of cake.

In the sixth installment of this series we'll begin to look at the various JQuery UI Widgets that are available by examining the Accordion module.

The jQuery UI Components Series:
The jQuery UI Components - Part 1: Introduction
The jQuery UI Components - Part 2: Draggables
The jQuery UI Components - Part 3: Droppables
The jQuery UI Components - Part 4: Sortables
The jQuery UI Components - Part 5: Resizables
The jQuery UI Components - Part 6: Accordion Widget
The jQuery UI Components - Part 7: Datepicker Widget
The jQuery UI Components - Part 8: Colorpicker Widget
The jQuery UI Components - Part 9: Magnifier Widget
The jQuery UI Components - Part 10: Progress Bar Widget
The jQuery UI Components - Part 11: Slider Widget
The jQuery UI Components - Part 12: Tabs Widget
The jQuery UI Components - Part 13: UI Themes
The jQuery UI Components - Part 14: UI Core Effects
The jQuery UI Components - Part 15: UI Effects II

The jQuery UI Components - Part 5: Resizables
Reader Level:

The jQuery library goes a long way to help make AJAX-oriented applications easier to develop and deploy. One of the things that makes jQuery stand out from the other libraries available though is its expandibility. The jQuery UI plugins, built on top of the original jQuery library, take that original ease of development and expand it to apply to interactive interface components, rather than just the underlying code that drives them.

In this series we're going to look at the various modules and components that make up the jQuery UI system to see how they can help to make building rich interfaces on top of our existing jQuery systems a piece of cake.

Today, in the fifth part of the series, we'll wrap up our explorations of the Core Interaction components by looking at the Resizables extension.

The jQuery UI Components Series:
The jQuery UI Components - Part 1: Introduction
The jQuery UI Components - Part 2: Draggables
The jQuery UI Components - Part 3: Droppables
The jQuery UI Components - Part 4: Sortables
The jQuery UI Components - Part 5: Resizables
The jQuery UI Components - Part 6: Accordion Widget
The jQuery UI Components - Part 7: Datepicker Widget
The jQuery UI Components - Part 8: Colorpicker Widget
The jQuery UI Components - Part 9: Magnifier Widget
The jQuery UI Components - Part 10: Progress Bar Widget
The jQuery UI Components - Part 11: Slider Widget
The jQuery UI Components - Part 12: Tabs Widget
The jQuery UI Components - Part 13: UI Themes
The jQuery UI Components - Part 14: UI Core Effects
The jQuery UI Components - Part 15: UI Effects II

ColdFusion and Spry: Part 1 Free!

Reader Level:

Spry is a JavaScript-based framework that provides AJAX-powered dynamic web content. There are other JavaScript libraries available to accomplish similar results. such a JSON, jQuery, etc. (On this CMX site, Rob Williams has a couple of series on jQuery and jQuery UI Components.)The Spry library is produced by Adobe Labs, and, as of this writing, is in 1.6.1 release. (SPRY at Adobe Labs.) Although SPRY can be used with other server technologies, such as PHP, ASP.net, etc., Spry seems to employ techniques that are especially intuitive to the ColdFusion developer.

Keith Dodd got into web development as a second career following 30 years in public education, with 19 as a middle school principal. With help from friends and a lot of reading, he got into ColdFusion (version 3) and in 2003 was certificated as an Advanced ColdFusion MX Developer. In recent years, he has worked with Flash and the integration of Flash with ColdFusion (with a lot of help from CMX resources). He is just starting to delve into Flex.

The ColdFusion and Spry Series:
ColdFusion and Spry: Part 1
ColdFusion and Spry: Part 2
ColdFusion and Spry: Part 3
ColdFusion and Spry: Part 4

The jQuery UI Components - Part 4: Sortables
Reader Level:

The jQuery library goes a long way to help make AJAX-oriented applications easier to develop and deploy. One of the things that makes jQuery stand out from the other libraries available though is its expandibility. The jQuery UI plugins, built on top of the original jQuery library, take that original ease of development and expand it to apply to interactive interface components, rather than just the underlying code that drives them.

In this series we're going to look at the various modules and components that make up the jQuery UI system to see how they can help to make building rich interfaces on top of our existing jQuery systems a piece of cake.

Today, in the fourth installment of the series, we'll continue our explorations of the Core Interaction components by looking at the Sortables extension.

The jQuery UI Components Series:
The jQuery UI Components - Part 1: Introduction
The jQuery UI Components - Part 2: Draggables
The jQuery UI Components - Part 3: Droppables
The jQuery UI Components - Part 4: Sortables
The jQuery UI Components - Part 5: Resizables
The jQuery UI Components - Part 6: Accordion Widget
The jQuery UI Components - Part 7: Datepicker Widget
The jQuery UI Components - Part 8: Colorpicker Widget
The jQuery UI Components - Part 9: Magnifier Widget
The jQuery UI Components - Part 10: Progress Bar Widget
The jQuery UI Components - Part 11: Slider Widget
The jQuery UI Components - Part 12: Tabs Widget
The jQuery UI Components - Part 13: UI Themes
The jQuery UI Components - Part 14: UI Core Effects
The jQuery UI Components - Part 15: UI Effects II

The jQuery UI Components - Part 3: Droppables
Reader Level:

The jQuery library goes a long way to help make AJAX-oriented applications easier to develop and deploy. One of the things that makes jQuery stand out from the other libraries available though is its expandibility. The jQuery UI plugins, built on top of the original jQuery library, take that original ease of development and expand it to apply to interactive interface components, rather than just the underlying code that drives them.

In this series we're going to look at the various modules and components that make up the jQuery UI system to see how they can help to make building rich interfaces on top of our existing jQuery systems a piece of cake. Today, in the third part of the series, we'll continue our explorations of the Core Interaction components by looking at the counterpart to last time's Draggable extension: the Droppable extension.

The jQuery UI Components Series:
The jQuery UI Components - Part 1: Introduction
The jQuery UI Components - Part 2: Draggables
The jQuery UI Components - Part 3: Droppables
The jQuery UI Components - Part 4: Sortables
The jQuery UI Components - Part 5: Resizables
The jQuery UI Components - Part 6: Accordion Widget
The jQuery UI Components - Part 7: Datepicker Widget
The jQuery UI Components - Part 8: Colorpicker Widget
The jQuery UI Components - Part 9: Magnifier Widget
The jQuery UI Components - Part 10: Progress Bar Widget
The jQuery UI Components - Part 11: Slider Widget
The jQuery UI Components - Part 12: Tabs Widget
The jQuery UI Components - Part 13: UI Themes
The jQuery UI Components - Part 14: UI Core Effects
The jQuery UI Components - Part 15: UI Effects II

The jQuery UI Components - Part 2: Draggables
Reader Level:

The jQuery library goes a long way to help make AJAX-oriented applications easier to develop and deploy. One of the things that makes jQuery stand out from the other libraries available though is its expandibility. The jQuery UI plugins, built on top of the original jQuery library, take that original ease of development and expand it to apply to interactive interface components, rather than just the underlying code that drives them.

In this series we're going to look at the various modules and components that make up the jQuery UI system to see how they can help to make building rich interfaces on top of our existing jQuery systems a piece of cake. Today, in the second part of the series we'll begin our explorations of the Core Interaction components by looking at the Draggable extension.

The jQuery UI Components Series:
The jQuery UI Components - Part 1: Introduction
The jQuery UI Components - Part 2: Draggables
The jQuery UI Components - Part 3: Droppables
The jQuery UI Components - Part 4: Sortables
The jQuery UI Components - Part 5: Resizables
The jQuery UI Components - Part 6: Accordion Widget
The jQuery UI Components - Part 7: Datepicker Widget
The jQuery UI Components - Part 8: Colorpicker Widget
The jQuery UI Components - Part 9: Magnifier Widget
The jQuery UI Components - Part 10: Progress Bar Widget
The jQuery UI Components - Part 11: Slider Widget
The jQuery UI Components - Part 12: Tabs Widget
The jQuery UI Components - Part 13: UI Themes
The jQuery UI Components - Part 14: UI Core Effects
The jQuery UI Components - Part 15: UI Effects II

The jQuery UI Components - Part 1: Introduction Free!

Reader Level:

The jQuery library goes a long way to help make AJAX-oriented applications easier to develop and deploy. One of the things that makes jQuery stand out from the other libraries available though is it's expandibility. The jQuery UI plugins, built on top of the original jQuery library, take that original ease of development and expand it to apply to interactive interface components, rather than just the underlying code that drives them.

In this series we're going to look at the various modules and components that make up the jQuery UI system to see how they can help to make building rich interfaces on top of our existing jQuery systems a piece of cake. Today, in the first part of the series we'll do a quick review of jQuery's organizational structure, talk about what plugins and UI modules are, and explore just how easy they are to implement.

The jQuery UI Components Series:
The jQuery UI Components - Part 1: Introduction
The jQuery UI Components - Part 2: Draggables
The jQuery UI Components - Part 3: Droppables
The jQuery UI Components - Part 4: Sortables
The jQuery UI Components - Part 5: Resizables
The jQuery UI Components - Part 6: Accordion Widget
The jQuery UI Components - Part 7: Datepicker Widget
The jQuery UI Components - Part 8: Colorpicker Widget
The jQuery UI Components - Part 9: Magnifier Widget
The jQuery UI Components - Part 10: Progress Bar Widget
The jQuery UI Components - Part 11: Slider Widget
The jQuery UI Components - Part 12: Tabs Widget
The jQuery UI Components - Part 13: UI Themes
The jQuery UI Components - Part 14: UI Core Effects
The jQuery UI Components - Part 15: UI Effects II

Using JQuery - Part 11: AJAX (Cont.)
Reader Level:

Developing AJAX applications can often be more complicated than you initially expect. Although working through tutorials and learning about the code involved to do various tasks is beneficial in helping you develop new possibilities, the stark reality these days is that as you begin to develop more and more AJAX-based sites you'll end up becoming less and less enthusiastic about having to hand-write all of the basic AJAX functionality over and over again. This is where JavaScript Libraries come into play.

In this series we're going to take a look at one of the more interesting and widely used JavaScript AJAX library: jQuery.

In the eleventh part of this series we'll continue our look at JQuery's AJAX support by examining some of the more advanced AJAX methods.

The Using JQuery Series:
Using JQuery - Part 1: Introduction
Using JQuery - Part 2: The Basics
Using JQuery - Part 3: Selectors
Using JQuery - Part 4: DOM Manipulation
Using JQuery - Part 5: Advanced DOM Manipulation
Using JQuery - Part 6: Finishing up DOM Manipulation
Using JQuery - Part 7: Effects
Using JQuery - Part 8: Animation
Using JQuery - Part 9: Animation Queues
Using JQuery - Part 10: AJAX
Using JQuery - Part 11: AJAX (Cont.)

Using JQuery - Part 10: AJAX
Reader Level:

Developing AJAX applications can often be more complicated than you initially expect. Although working through tutorials and learning about the code involved to do various tasks is beneficial in helping you develop new possibilities, the stark reality these days is that as you begin to develop more and more AJAX-based sites you'll end up becoming less and less enthusiastic about having to hand-write all of the basic AJAX functionality over and over again. This is where JavaScript Libraries come into play.

In this series we're going to take a look at one of the more interesting and widely used JavaScript AJAX library: jQuery.

In the tenth part of this series we're going to explore JQuery's AJAX support.

The Using JQuery Series:
Using JQuery - Part 1: Introduction
Using JQuery - Part 2: The Basics
Using JQuery - Part 3: Selectors
Using JQuery - Part 4: DOM Manipulation
Using JQuery - Part 5: Advanced DOM Manipulation
Using JQuery - Part 6: Finishing up DOM Manipulation
Using JQuery - Part 7: Effects
Using JQuery - Part 8: Animation
Using JQuery - Part 9: Animation Queues
Using JQuery - Part 10: AJAX
Using JQuery - Part 11: AJAX (Cont.)

Using JQuery - Part 9: Animation Queues
Reader Level:

Developing AJAX applications can often be more complicated than you initially expect. Although working through tutorials and learning about the code involved to do various tasks is beneficial in helping you develop new possibilities, the stark reality these days is that as you begin to develop more and more AJAX-based sites you'll end up becoming less and less enthusiastic about having to hand-write all of the basic AJAX functionality over and over again. This is where JavaScript Libraries come into play.

In this series we're going to take a look at one of the more interesting and widely used JavaScript AJAX library: jQuery.

In the ninth part of this series we'll continue looking at animations by exploring JQuery's queuing system.

The Using JQuery Series:
Using JQuery - Part 1: Introduction
Using JQuery - Part 2: The Basics
Using JQuery - Part 3: Selectors
Using JQuery - Part 4: DOM Manipulation
Using JQuery - Part 5: Advanced DOM Manipulation
Using JQuery - Part 6: Finishing up DOM Manipulation
Using JQuery - Part 7: Effects
Using JQuery - Part 8: Animation
Using JQuery - Part 9: Animation Queues
Using JQuery - Part 10: AJAX
Using JQuery - Part 11: AJAX (Cont.)

Using JQuery - Part 8: Animation
Reader Level:

Developing AJAX applications can often be more complicated than you initially expect. Although working through tutorials and learning about the code involved to do various tasks is beneficial in helping you develop new possibilities, the stark reality these days is that as you begin to develop more and more AJAX-based sites you'll end up becoming less and less enthusiastic about having to hand-write all of the basic AJAX functionality over and over again. This is where JavaScript Libraries come into play.

In this series we're going to take a look at one of the more interesting and widely used JavaScript AJAX library: jQuery.

In the eighth part of this series we're going to look at how we can use JQuery to create animations and sequenced effects.

The Using JQuery Series:
Using JQuery - Part 1: Introduction
Using JQuery - Part 2: The Basics
Using JQuery - Part 3: Selectors
Using JQuery - Part 4: DOM Manipulation
Using JQuery - Part 5: Advanced DOM Manipulation
Using JQuery - Part 6: Finishing up DOM Manipulation
Using JQuery - Part 7: Effects
Using JQuery - Part 8: Animation
Using JQuery - Part 9: Animation Queues
Using JQuery - Part 10: AJAX
Using JQuery - Part 11: AJAX (Cont.)

Using JQuery - Part 7: Effects
Reader Level:

Developing AJAX applications can often be more complicated than you initially expect. Although working through tutorials and learning about the code involved to do various tasks is beneficial in helping you develop new possibilites, the stark reality these days is that as you begin to develop more and more AJAX-based sites you'll end up becoming less and less enthusiastic about having to hand-write all of the basic AJAX functionality over and over again. This is where JavaScript Libraries come into play.

In this series we're going to take a look at one of the more interesting and widely used JavaScript AJAX library: jQuery.

In the seventh part of this series we're going to look at some of the neat visual effects jQuery provides for us.

The Using JQuery Series:
Using JQuery - Part 1: Introduction
Using JQuery - Part 2: The Basics
Using JQuery - Part 3: Selectors
Using JQuery - Part 4: DOM Manipulation
Using JQuery - Part 5: Advanced DOM Manipulation
Using JQuery - Part 6: Finishing up DOM Manipulation
Using JQuery - Part 7: Effects
Using JQuery - Part 8: Animation
Using JQuery - Part 9: Animation Queues
Using JQuery - Part 10: AJAX
Using JQuery - Part 11: AJAX (Cont.)

Use Same Address for Billing
Reader Level:

You have probably ordered enough stuff online that you have filled your address in plenty of times. And whenever you order something, the site typically needs to know the billing address associated with your form of payment as well as the address you want your stuff shipped to. These may be the same, or they may be different.

If they are different, there is not much that can be done to help. You are going to have to fill out your addresses and, the best you can hope, is that the form fields are named the same as some other site that you have filled out so that your browser remembers your addresses. But if the addresses are the same, it is helpful when the site allows you to click a box that says "Use the same address for billing" Even better is when clicking that box automatically fills in the billing address fields so that you know your instructions were received.

A little bit of JavaScript lets you provide that same convenience to your users.

Using JQuery - Part 6: Finishing up DOM Manipulation
Reader Level:

Developing AJAX applications can often be more complicated than you initially expect. Although working through tutorials and learning about the code involved to do various tasks is beneficial in helping you develop new possibilites, the stark reality these days is that as you begin to develop more and more AJAX-based sites you'll end up becoming less and less enthusiastic about having to hand-write all of the basic AJAX functionality over and over again. This is where JavaScript Libraries come into play.

In this series we're going to take a look at one of the more interesting and widely used JavaScript AJAX library: jQuery.

In the sixth part of this series we're going to finish looking at how to manipulate elements with jQuery and DOM manipulation.

The Using JQuery Series:
Using JQuery - Part 1: Introduction
Using JQuery - Part 2: The Basics
Using JQuery - Part 3: Selectors
Using JQuery - Part 4: DOM Manipulation
Using JQuery - Part 5: Advanced DOM Manipulation
Using JQuery - Part 6: Finishing up DOM Manipulation
Using JQuery - Part 7: Effects
Using JQuery - Part 8: Animation
Using JQuery - Part 9: Animation Queues
Using JQuery - Part 10: AJAX
Using JQuery - Part 11: AJAX (Cont.)

Using JQuery - Part 5: Advanced DOM Manipulation
Reader Level:

Developing AJAX applications can often be more complicated than you initially expect. Although working through tutorials and learning about the code involved to do various tasks is beneficial in helping you develop new possibilites, the stark reality these days is that as you begin to develop more and more AJAX-based sites you'll end up becoming less and less enthusiastic about having to hand-write all of the basic AJAX functionality over and over again. This is where JavaScript Libraries come into play.

In this series we're going to take a look at one of the more interesting and widely used JavaScript AJAX library: jQuery.

In the fifth part of this series we're going to continue exploring how to manipulate elements with jQuery; this time around we'll be focusing on DOM manipulation.

The Using JQuery Series:
Using JQuery - Part 1: Introduction
Using JQuery - Part 2: The Basics
Using JQuery - Part 3: Selectors
Using JQuery - Part 4: DOM Manipulation
Using JQuery - Part 5: Advanced DOM Manipulation
Using JQuery - Part 6: Finishing up DOM Manipulation
Using JQuery - Part 7: Effects
Using JQuery - Part 8: Animation
Using JQuery - Part 9: Animation Queues
Using JQuery - Part 10: AJAX
Using JQuery - Part 11: AJAX (Cont.)

Using JQuery - Part 4: DOM Manipulation
Reader Level:

Developing AJAX applications can often be more complicated than you initially expect. Although working through tutorials and learning about the code involved to do various tasks is beneficial in helping you develop new possibilites, the stark reality these days is that as you begin to develop more and more AJAX-based sites you'll end up becoming less and less enthusiastic about having to hand-write all of the basic AJAX functionality over and over again. This is where JavaScript Libraries come into play. In this series we're going to take a look at one of the more interesting and widely used JavaScript AJAX library: jQuery.

In the fourth part of this series we're going to start to take a look at some of the ways that we can manipulate elements with jQuery.

The Using JQuery Series:
Using JQuery - Part 1: Introduction
Using JQuery - Part 2: The Basics
Using JQuery - Part 3: Selectors
Using JQuery - Part 4: DOM Manipulation
Using JQuery - Part 5: Advanced DOM Manipulation
Using JQuery - Part 6: Finishing up DOM Manipulation
Using JQuery - Part 7: Effects
Using JQuery - Part 8: Animation
Using JQuery - Part 9: Animation Queues
Using JQuery - Part 10: AJAX
Using JQuery - Part 11: AJAX (Cont.)

Highlight a Table Row on Mouseover!
Reader Level:

Highlighting a row in a table is a commonly seen web feature and is pretty handy for figuring out where you are in a larger table. Highlighting the row also allows the visitor to quickly see what data is connected to the row the mouse cursor happens to be over. While the effect is simple, the JavaScript is a little tricky. This tutorial will go over exactly how to implement this functionality on your tables!

Using JQuery - Part 3: Selectors
Reader Level:

Developing AJAX applications can often be more complicated than you initially expect. Although working through tutorials and learning about the code involved to do various tasks is beneficial in helping you develop new possibilites, the stark reality these days is that as you begin to develop more and more AJAX-based sites you'll end up becoming less and less enthusiastic about having to hand-write all of the basic AJAX functionality over and over again. This is where JavaScript Libraries come into play. In this series we're going to take a look at one of the more interesting and widely used JavaScript AJAX library: jQuery .

In the third part of this series we're going to continue exploring the many selectors that jQuery makes available to us.

The Using JQuery Series:
Using JQuery - Part 1: Introduction
Using JQuery - Part 2: The Basics
Using JQuery - Part 3: Selectors
Using JQuery - Part 4: DOM Manipulation
Using JQuery - Part 5: Advanced DOM Manipulation
Using JQuery - Part 6: Finishing up DOM Manipulation
Using JQuery - Part 7: Effects
Using JQuery - Part 8: Animation
Using JQuery - Part 9: Animation Queues
Using JQuery - Part 10: AJAX
Using JQuery - Part 11: AJAX (Cont.)

Simple Server-Side Form Validation
Reader Level:

Setting up a simple custom server-side form validation is a straightforward process and has the advantage over JavaScript in that it cannot be turned off by the user in order to override your validation.

In this tutorial, we will look at how we can use a combination of ColdFusion, JavaScript and CSS to provide an interactive form validating process. Although we do use a little JavaScript in this process it does not have a bearing on the validation process and is used only to enhance the messaging that is passed to the user.

Using JQuery - Part 2: The Basics
Reader Level:

Developing AJAX applications can often be more complicated than you initially expect. Although working through tutorials and learning about the code involved to do various tasks is beneficial in helping you develop new possibilites, the stark reality these days is that as you begin to develop more and more AJAX-based sites you'll end up becoming less and less enthusiastic about having to hand-write all of the basic AJAX functionality over and over again. This is where JavaScript Libraries come into play. In this series we're going to take a look at one of the more interesting and widely used JavaScript AJAX library: jQuery.

In the second part of this series we're going to talk about the modular setup of jQuery and what's required to begin to work with the core functionality of the library. We'll also write our first jQuery code and compare it to traditional DOM JavaScript to demonstrate how much more efficient jQuery can help you become.

The Using JQuery Series:
Using JQuery - Part 1: Introduction
Using JQuery - Part 2: The Basics
Using JQuery - Part 3: Selectors
Using JQuery - Part 4: DOM Manipulation
Using JQuery - Part 5: Advanced DOM Manipulation
Using JQuery - Part 6: Finishing up DOM Manipulation
Using JQuery - Part 7: Effects
Using JQuery - Part 8: Animation
Using JQuery - Part 9: Animation Queues
Using JQuery - Part 10: AJAX
Using JQuery - Part 11: AJAX (Cont.)

How to Make a Popup with a Translucent Background
Reader Level:

Displaying a larger image to a thumbnail can be accomplished many ways, in this article we will go over how to do it with apDIVs and a translucent background.

Using JQuery - Part 1: Introduction Free!

Reader Level:

Developing AJAX applications can often be more complicated than you initially expect. Although working through tutorials and learning about the code involved to do various tasks is beneficial in helping you develop new possibilites, the stark reality these days is that as you begin to develop more and more AJAX-based sites you'll end up becoming less and less enthusiastic about having to hand-write all of the basic AJAX functionality over and over again. This is where JavaScript Libraries come into play. In this series we're going to take a look at one of the more interesting and widely used JavaScript AJAX library: jQuery.

In the first part of this series we're going to take a look at what libraries are, how they can help, and how to implement them. From there we'll also take a first glance at jQuery and examine some of the reasons that you may choose to use it as your library of choice.

The Using JQuery Series:
Using JQuery - Part 1: Introduction
Using JQuery - Part 2: The Basics
Using JQuery - Part 3: Selectors
Using JQuery - Part 4: DOM Manipulation
Using JQuery - Part 5: Advanced DOM Manipulation
Using JQuery - Part 6: Finishing up DOM Manipulation
Using JQuery - Part 7: Effects
Using JQuery - Part 8: Animation
Using JQuery - Part 9: Animation Queues
Using JQuery - Part 10: AJAX
Using JQuery - Part 11: AJAX (Cont.)

Quick Shot - Form Styling Free!

Reader Level:

Need to create a visual clue on all of your form elements when the form element has focus? Don't want to apply two behaviors per form element? Check out this solution, apply once, works everywhere!

Quick Shot - Adding Accessibility To A Form With Validation Free!

Reader Level:

So you've got a fancy JavaScript validated form, but it won't work when someone has JavaScript turned off. Want to get the form working? Read on...

Quick Shot - Stop a Form Submission Free!

Reader Level:

Need to know how to stop a form from submitting so you can run your own validation on the form and then have the JavaScript submit the form when the validation is done? Seek no more...

Limiting Textarea Characters
Reader Level:

Limiting the characters for a textarea is a pretty common thing around the web. We are going to create our own script to accomplish this functionality, but with a little twist - using DOM compliant scripting and without putting a single line of JavaScript in the body of the document, not even on the textareas themselves.

AJAX Dependent Selects!
Reader Level:

Ever wanted to have a select's content change on the fly? A little JavaScript, some AJAX, a pinch of server-side code and you can make a slick presentation for dependent selects.

XML and AJAX: A New Paradigm - Part 7
Reader Level:

When it comes to web development there are often a lot of technologies that people are aware of but never really understand or come to use in their daily tasks. XML tends to be one such technology. Most developers have heard of it, and usually have a general idea of what it is, but on the same level most have also almost never used it or understood the purpose of it for their usual projects.

In this series we're going to explore how we can use XML in a practical way to help us develop rather interesting and uniquely controlled/flexible web applications by combining it with AJAX.

In the seventh part of this series we're going to take our "window" system and see how we can combine it with all that we've learned in this series to create a dynamic AJAX photo gallery.

The XML and AJAX Series:
XML and AJAX: A New Paradigm - Part 1
XML and AJAX: A New Paradigm - Part 2
XML and AJAX: A New Paradigm - Part 3
XML and AJAX: A New Paradigm - Part 4
XML and AJAX: A New Paradigm - Part 5
XML and AJAX: A New Paradigm - Part 6
XML and AJAX: A New Paradigm - Part 7
XML and AJAX: A New Paradigm - Part 8
XML and AJAX: A New Paradigm - Part 9

Simple AJAX
Reader Level:

Ajax can be very simple, this article will walk through a very basic AJAX server connection using nothing more then plain JavaScript and a text file.

On Page WYSIWYG Editing!
Reader Level:

Add this WYSIWYG editor and some JavaScript to your page and create a unique content management system that switches to edit content on your live web pages!

Only supports Internet Explorer for Windows and Firefox for Windows and Macintosh.

XML and AJAX: A New Paradigm - Part 6
Reader Level:

When it comes to web development there are often a lot of technologies that people are aware of but never really understand or come to use in their daily tasks. XML tends to be one such technology. Most developers have heard of it, and usually have a general idea of what it is, but on the same level most have also almost never used it or understood the purpose of it for their usual projects.

In this series we're going to explore how we can use XML in a practical way to help us develop rather interesting and uniquely controlled/flexible web applications by combining it with AJAX.

In the sixth part of this series we're going to put some last finishing touches on our basic window system and look at how to tie it into the XML documents and methods that we explored earlier.

The XML and AJAX Series:
XML and AJAX: A New Paradigm - Part 1
XML and AJAX: A New Paradigm - Part 2
XML and AJAX: A New Paradigm - Part 3
XML and AJAX: A New Paradigm - Part 4
XML and AJAX: A New Paradigm - Part 5
XML and AJAX: A New Paradigm - Part 6
XML and AJAX: A New Paradigm - Part 7
XML and AJAX: A New Paradigm - Part 8
XML and AJAX: A New Paradigm - Part 9

XML and AJAX: A New Paradigm - Part 5
Reader Level:

When it comes to web development there are often a lot of technologies that people are aware of but never really understand or come to use in their daily tasks. XML tends to be one such technology; most developers have heard of it, and usually have a general idea of what it is, but on the same level most have also almost never used it or understood the purpose of it for their usual projects.

In this series we're going to explore how we can use XML in a practical way to help us develop rather interesting and uniquely controlled/flexible web applications by combining it with AJAX.

In the fifth part of this series we're going to continue developing our client-side coding (JavaScript) and exploring the advantages that a client-side approach offers compared to server-generated pages.

The XML and AJAX Series:
XML and AJAX: A New Paradigm - Part 1
XML and AJAX: A New Paradigm - Part 2
XML and AJAX: A New Paradigm - Part 3
XML and AJAX: A New Paradigm - Part 4
XML and AJAX: A New Paradigm - Part 5
XML and AJAX: A New Paradigm - Part 6
XML and AJAX: A New Paradigm - Part 7
XML and AJAX: A New Paradigm - Part 8
XML and AJAX: A New Paradigm - Part 9
>

Random Backgrounds
Reader Level:

Ever need to create a random background for your web site? Perhaps a slideshow for your background? Well, this script will do just that for you and it is super easy to install!

Swap Image DOM Replacement!
Reader Level:

Swap image behavior is a standard effect seen on web sites worldwide. Each script that controls the image swap, image restore and the events on the link or image are repeated on every page and the events on every image. When a new page is made, all of this has to be put on the page again. How about a script that is external to the page, which, of course, is included via the script tag link, but, has no other code in the page at all and automatically does the swap image effect for your menu? Want to see it? Read on!

XML and AJAX: A New Paradigm - Part 2
Reader Level:

When it comes to web development there are often a lot of technologies that people are aware of but never really understand or come to use in their daily tasks. XML tends to be one such technology; most developers have heard of it, and usually have a general idea of what it is, but on the same level most have also almost never used it or understood the purpose of it for their usual projects. In this series we're going to explore how we can use XML in a practical way to help us develop rather interesting and uniquely controlled/flexible web applications by combining it with AJAX.

In the second part of the series we'll look at how to use actually load XML data into JavaScript, how that data is interpreted by the JS engine, and some basic examples of how we can use it from within the scripting environment.

The XML and AJAX Series:
XML and AJAX: A New Paradigm - Part 1
XML and AJAX: A New Paradigm - Part 2
XML and AJAX: A New Paradigm - Part 3
XML and AJAX: A New Paradigm - Part 4
XML and AJAX: A New Paradigm - Part 5
XML and AJAX: A New Paradigm - Part 6
XML and AJAX: A New Paradigm - Part 7
XML and AJAX: A New Paradigm - Part 8
XML and AJAX: A New Paradigm - Part 9

XML and AJAX: A New Paradigm - Part 1
Reader Level:

When it comes to web development there are often a lot of technologies that people are aware of but never really understand or come to use in their daily tasks. XML tends to be one such technology; most developers have heard of it, and usually have a general idea of what it is, but on the same level most have also almost never used it or understood the purpose of it for their usual projects. In this series we're going to explore how we can use XML in a practical way to help us develop rather interesting and uniquely controlled/flexible web applications by combining it with AJAX.

In the first part of the series we'll run through some of the concepts and background technologies that we'll be utilizing, and see how and why they fit together so well.

The XML and AJAX Series:
XML and AJAX: A New Paradigm - Part 1
XML and AJAX: A New Paradigm - Part 2
XML and AJAX: A New Paradigm - Part 3
XML and AJAX: A New Paradigm - Part 4
XML and AJAX: A New Paradigm - Part 5
XML and AJAX: A New Paradigm - Part 6
XML and AJAX: A New Paradigm - Part 7
XML and AJAX: A New Paradigm - Part 8
XML and AJAX: A New Paradigm - Part 9

JavaScript Random Image Done with DOM
Reader Level:

Create a JavaScript random image using the DOM model that is accessible and even shows an image when JavaScript is turned off

JavaScript Validation Product Packages
Reader Level:

You have a client who wants to offer a special deal which requires the customer to select a certain number of products in order to get a packaged deal. We need to be able to check to see if they have selected the total number needed between all of the products, no more and no less. Sounds simple? With a little JavaScript and a some conformity on the form values, it can be!

Put a Calendar on your Web Page
Reader Level:

Get the code to put a calendar on your page, all JavaScript, explained and styled via CSS. Can put multiple calendars on one page with this code too!

The Put a Calendar on Your Web Page Series:
Put a Calendar on Your Web Page - Part 1
Put a Calendar on Your Web Page - Part 2

Good Behavior
Reader Level:

Learn to make a simple Dreamweaver Behavior.

JavaScript 202: Native Code
Reader Level:

In JavaScript 201 Paul Davis introduced the concept of a function and demonstrated how it could be used to make your code more managable and efficient. More importantly he also demonstrated how you could use a function to actually make JavaScript do something practical. This time around we're going to continue to build on that idea, but rather than creating our own functions all the time we're going to start exploring some of the functions that are included as part of the JavaScript language itself.

JavaScript 201: Functions
Reader Level:

Graduated from the JavaScript 101 articles and looking for more JavaScript to sink your teeth into? This article delves into the JavaScript functions. Learn about putting them together and making them do something.

Automatic Shipping Address Fill-in with Dreamweaver and JavaScript
Reader Level:

How many times have you been to a website which wants you to fill out the billing and shipping addresses and they are the same and you just want to copy the information over from one set of fields to another? Or you have a client who wants these fields always filled out and you want to ensure the visitor can do this efficiently and easily?

In this tutorial, we will show you how with a little JavaScript and a checkbox in the form, you can make this happen easily!

Create a Cross-Platform Yahoo! Widget
Reader Level:

This tutorial will show you how to build a cross-platform Yahoo! Widget that you can use to promote your site, using JavaScript and XML. Included in the tutorial is a fully functioning CMX RSS feed reader widget, which you'll use as the starting point for creating a widget of your own.

Approximate download size: 376k

Build a Dashboard Widget
Reader Level:

Widgets and the new Dashboard feature introduced some serious eye candy with the debut of Mac OS X 10.4 "Tiger" last year. But widgets can be seriously useful, too — not to mention great fun. This tutorial walks you through a fully functional CMX RSS feed reader widget created for Tiger. You'll see how it works...and how you can modify it to create your own Dashboard widget.

Approximate download size: 552k

Batch Processing Images to a Custom File Size Free!

Reader Level:

Fireworks Batch processing features can really save you time when you have to do the same thing to a bunch of images. A recent question in the Macromedia Fireworks forum made me stop to think of another batch processing routine that may come in handy for people; batch processing images to a specific file size.

Let's say you have a large number of photos that are different file sizes. Perhaps due to disc space restrictions or file size limitations for a web gallery or e-commerce site, you have to ensure that ALL the images not exceed a specific file size.

This tutorial will show you how to create a batch process for exporting a folder full of files to a specific file size, how to create your own custom Optimization Presets, and how to to save multiple Batch Options as a single script file that can be accessed in the Batch Process window.

Adding WYSIWYG to Textareas: Part 1
Reader Level:

One of the problems web developers encounter when allowing clients or users to insert content dynamically is ensuring that the outputted content still conforms to the standard of code required from a modern web site. The average site user knows little or nothing of HTML syntax, and certainly not enough to ensure that your precious pages still meet HTML syntax validation.

Many solutions have been created in order to solve this problem, BB style syntax is one of those; but the majority of users would probably prefer to be able to format their text as they would in a product like Microsoft Word. The generic word processor environment is something that's familiar to almost everyone who uses a personal computer. So, let's say we could actually allow people to insert data as clean HTML using a simple word processing interface, wouldn't that be cool? :) We can, and as a bonus we can easily implement it into a generic Dreamweaver "Insert Record" page.

Unobtrusive JavaScript: Dynamically Adding a Flash Music Player to MP3 Links
Reader Level:

This tutorial discusses using JavaScript to dynamically add a small Flash music player control to a page that contains links to MP3 files. With this technique, you'll merely need to link in the appropriate JavaScript to your page, and all MP3 links on a page, such as your latest Podcast, will automatically have player controls added next to them, with no further digging into the code on your part.

CMX AJAX Loader: Beyond the Basics
Reader Level:

The CMX AJAX Loader Extension, out of the box, provides a quick and easy means of loading document fragments into the current page without requiring a refresh. It's important to be aware however that this is not a limit of the behavior's functionality. In this article we'll explore the how the CMX AJAX Loader can act as a tool that can be integrated into other scripts to provide additional functionality and open up new possibilities.

Rotating Images with Dreamweaver and JavaScript Free!

Reader Level:

Slideshow, rotating images, image-a-go-go, whatever you want to call it, a client will ask for an image or banner to swap out with another image (or more than one), and continue swapping every so often. With Dreamweaver it's pretty easy to throw together some scripting that will accomplish just that for your client. Dreamweaver does most of the heavy lifting, and all you need to do is to paste in a little bit of code, set the images you want to display, how long you want the interval between image swaps to be and your all ready to send the invoice. Right, yes you did read that you'd be doing a bit of work up there, but don't worry, once you have this technique down it can take you as little as 20 seconds to get this going.

Using Related Fields with the CMX Auto Complete Extension
Reader Level:

The CMX Auto Complete Behavior makes adding basic "auto complete" functionality to your HTML forms fast and easy; when you begin to develop larger forms though you may be ready to start utilizing some of the more advanced features of the extension.

Note: This tutorial requires that you have the CMX Auto Complete Behavior installed on your system and are familiar with its use.

Visualizing Data with Google Maps
Reader Level:

"Where in the World is Carmen Sandiego", "Where's Waldo" ... What do these childhood books/games/shows have in common? The desire to geographically locate someone (or something). Whether it's a customer trying to find a specific store location, or a business attempting to understand the demographics of its customer base,this is a problem domain that has long intrigued the human race.

Google Maps has succeeded in creating a fantastic mapping product that arguably trumps the others in the field. The best thing about Google Maps is that they have opened up their API for people to innovate with. Several examples include Chicago Crime and MyWikiMap (formerly Cheap Gas). These are sites that have some set of data that lends itself well to geographic visualization.

This article will walk you through the process I took to write a Google Maps application that displays all of the members in my .NET usergroup for the purpose of demographic analysis. You will be able to download an easily customizable console application written in C# and instructions on how to integrate the result into a fully functional Google map that you can deploy to your website.

Now, you might ask yourself, "Why a console application, why not a .NET page that could be run to generate the actual JavaScript Google needs?" ... a fine question to be sure, unfortunately, the data retrieval process I describe in the tutorial involves contacting a third party website who's performance does not lend itself to being used in a production environment ... especially if the amount of data you have to display is significant. With a console application, you can run your data retrieval process manually and it doesn't matter how long it takes to grab all of the data.

Uploading Files with ASP.NET
Reader Level:

In this article you'll learn how to upload files to your web server using ASP.NET. Back in the old classic ASP days, this was a fairly difficult job. Not anymore!

Read on to learn how to upload one or multiple files, all files types or just certain kinds (based on the MIME type), and how to save the file using the original name or a user-specified name.

The code is presented in C# and VB.

The File Uploading with .NET Series:
File Uploading with ASP.NET
File Uploading in ASP.NET - Part 2
File Uploading with ASP.NET - Part 3

Dynamic CSAs - Part 4: Completing the Notepad
Reader Level:

Dynamic Client-Side Applications are an exciting and new way of developing for the web. In the previous part of this series we began to build our first complete Dynamic CSA in the form of a small Notepad application. When last we left off we'd just completed adding the client-side interactivity to our notepad, allowing the user to drag it around on screen and clear the contents. This time we'll use the server communications skills we covered in Part 2 to tie our notepad into some server-side scripting and give it some "page-resilience".

The Dynamic CSAs Series:
Dynamic CSAs - Part 1: Interactivity Events
Dynamic CSAs - Part 2: Client/Server Communication
Dynamic CSAs - Part 3: Bringing it All Together
Dynamic CSAs - Part 4: Completing the Notepad

Dynamic CSAs - Part 3: Bringing It All Together
Reader Level:

Dynamic Client-Side Applications are an exciting and new way of developing for the web. In the previous articles of this series we've looked at the concepts behind Dynamic CSAs, explored the various technologies involved, and built a few isolated examples; the time has finally come though to bring all of those new skills together to create our first true Dynamic CSA!

The Dynamic CSAs Series:
Dynamic CSAs - Part 1: Interactivity Events
Dynamic CSAs - Part 2: Client/Server Communication
Dynamic CSAs - Part 3: Bringing it All Together
Dynamic CSAs - Part 4: Completing the Notepad

Exporting an Embedded Stylesheet to an External Stylesheet Using Dreamweaver MX 2004
Reader Level:

CSS is all the rage these days, and for many good reasons. However, if you are new to the whole CSS method of controlling web pages, it can be intimidating when you begin. The goal of this video tutorial is to show you how to create a very basic embedded (internal) stylesheet using the Property inspector, and then export that embedded set of rules to an external file.

Using the Macromedia Flash / JavaScript Integration Kit Free!

Reader Level:

The Flash/JavaScript Integration Kit was developed by Christian Cantrell and Mike Chambers at Macromedia. It was developed to make the communication between Flash and JavaScript easier to implement. This isn't a new technology, but it's a straightforward way to implement this type of communication between these different pieces of your application. This article discusses the benefits of the Integration Kit and gives a simple demonstration of how it can be used.

Talking to Flash with JavaScript
Reader Level:

At the time of this writing — Flash Player 7 — there is no consistently reliable method for talking to Flash with JavaScript. But there is a workaround. In this article, you'll learn how to use FlashVars and the LocalConnection class to send messages to a Flash movie embedded in an HTML document. This technique should work in virtually every browser and platform, provided the user hasn't disabled JavaScript.

Use XML to Populate Dependent Select Lists
Reader Level:

Nearly everyone has seen the classic Dependent Select Lists. It's a great user interface technique where you have two or more select form elements and the selection of one list changes the contents of the next list. This is commonly done with City and State selection interfaces. This tutorial will demonstrate how to build Dependent Select Lists and populate the lists using an XML data file.

Communicating with the Server without Reloading the Page
Reader Level:

Ever wonder how Gmail and Google Suggest are able to request data from the server without reloading the page? Well it's no secret; it's done through a fairly new browser feature called XMLHttpRequest. One of the downsides to traditional HTML development is the limitation that you must reload the entire page to get new data from the server.

In this article we will use JavaScript to request new data from the server using the XMLHttpRequest object, without leaving the page. This article is intended to be a basic introduction to the XmlHttpRequest object.

Let it Snow, Man! - Part 2
Reader Level:

Well there's a chill in the air. The leaves have fallen, the wind is brisker and sometimes, even in early November, there's that "scent of snow" in the air. In the lead-up to the holiday season, I have created a two-part series that uses both Fireworks and Dreamweaver. The end result will be a fun little "build your own snowman" web page.

In Part 1, we used Fireworks to create all the essential ingredients for our frozen friend. We then exported the pieces using Export as CSS Layers. This gave us a starting html page (generated by Fireworks) and all our graphics, in absolutely positioned DW layers (divs).

In our second and final chapter we will work in Dreamweaver, using the Drag Layer behavior to create a web page where you can move all the snowman pieces together and build your own snowman online. The Drag Layer behavior makes use of Dynamic HTML (DHTML), to make your page interactive. In our case, we're letting the user move all the snowman pieces around to build their very own snowman, using a Drag-n-Drop method.

This concept could have many different uses: visual quizzing, jigsaw puzzles, or other holidays, just to name a few.

Note: The Safari browser does not support the Dreamweaver Drag Layer Behavior at this time.

Using Flash as a Dynamic Agent
Reader Level:

This tutorial will show you how to use a hidden flash movie on your page to dynamically get data from a server without reloading the page.

Delaying Swap Image Restore to Avoid the 'Swap Back Flash' Problem
Reader Level:

The built in Swap Image behavior is one of the most used pieces of Dreamweaver. In fact, we have a couple of articles that cover it already, Laurie's Using DWMX's Swap Image behavior and Bill's Disjointed Rollovers, both freebies. So why take the effort for another bob at the apple in the barrel? Well, despite its usefulness, the combination of just a couple Swap Images with the associated Swap Image Restore on your page may introduce an undesirable visual effect, that some have called "flash swap back". In this article we'll show you an example of the problem, a page that solves the problem, and then we'll show you how to solve the problem for your pages. Along the way we'll discuss how to introduce a delay in a Behavior, as well as how to cancel out a delay.

Enabling the Back Button in Flash
Reader Level:

One of the big issues that Flash development brings to the table is with browser history. Since a Flash web site only really needs one page, browser history becomes irrelevant. The problem is that many web site users don't know this and will often hit the back button and get unexpected results. This tutorial will show one scalable technique for integrating browser history with your Flash movie navigation.

Creating a Filter For the List Component
Reader Level:

In this tutorial, we create a filter for the Flash List component. As the user enters text into the TextInput component, the List component is filtered to display only those items that match the filter criteria.

This tutorial also explains how to port this functionality to JavaScript/HTML.

Flash, DHTML Menus and Accessibility Free!

Reader Level:

It's not uncommon to hear developers complaining that their DHTML menus, when triggered, have dropped behind the Flash movie below them. It's also not uncommon to hear, "that's just how they work." Before Flash Player 6, that was true in many browsers. But nowadays, it's become urban legend. With Flash Player 6, Macromedia introduced windowless mode for Netscape and Mac OS X (previously it was supported only for Windows). In the process, this also gave developers a way to completely hide Flash from older screen readers and the focus issues they can have with it. In fact, when Flash is purely used as eye candy, it's wise to remove it from the flow of the screen reader's page so that they don't have to listen to Flash without a purpose.

The Long and Short of Dreamweaver Timelines - An Introduction
Reader Level:

Built right into DW 4, MX and MX 04 (7.01), is the capability to do interactive animation, and more. This article will examine the Timeline feature, pros and cons, and how it works, by doing a few simple exercises. It will act as a launching point for future, more project-based tutorials.

Copying Form Data With JavaScript
Reader Level:

In this tutorial we will look at how we can copy the information our user has entered into a form to another section of the same form. This saves our users time by negating the need to re-enter data that has already been entered.

Protecting your Email when using Paypal Free!

Reader Level:

Paypal is quite possibly one of the easiest ways of implementing an e-commerce solution. You don't even need any dynamic server side skills so the barrier to entry is very light. However, there is one fundamental issue that most Paypal implementations have ... in order for you to link the transaction to your Paypal account, you must include your email address (the one in your Paypal account) in the code.

This tutorial shows you how to effectively hide your email address using some simple Javascript.

Disjointed Rollovers Free!

Reader Level:

It happens to all of us at some point; You've gotten bored with plain old rollovers on your nifty menu... You want to add a little something, like maybe rolling over one of your buttons and having it trigger another image swap elsewhere on your page. In this tutorial, we'll go over how to do that, and even how make a picture appear where there wasn't one before. All using the Swap Image behavior.

The Newbie Series: Using DWMX's Set Navbar Image Behavior
Reader Level:

In an earlier tutorial "Using DWMX's Swap Image Behavior" we looked at how to create simple 2 state rollovers. With this tutorial, we are going to kick it up a notch and create more complex 3 and 4 state rollovers using the Set Navbar Image behavior. DWMX makes creating these navbars a piece of cake. :-D

JavaScript Code Hints in Dreamweaver
Reader Level:

The MX release added Code Hints to Dreamweaver. This tutorial reveals the Code Hints available in JavaScript files, and then delves into modifying existing hints for ease of use, and then onto adding new Code Hints for JavaScript objects that you use everyday to help speed your development.

The Newbie Series: Using DWMX's Swap Image behavior Free!

Reader Level:

Making 2-state rollover navigation buttons using DWMX's Swap Image behavior is a piece of cake! In this tutorial we will walk you through placing your navigational buttons on your page and applying the Swap Image behavior to them to create a rollover.

Searching CMX

Get familiar with the CMX search facility & learn how to find the tutorials you need easily & quickly.

Latest Free Content

View All Free Content

Community MX

You're curious and eager to learn. You are also busy and struggle to keep up with today's rush of new technology. That's why you need Community MX. More...

Get Paid, Create a Tutorial!

Turn your knowledge into extra cash! We'll pay you for writing Tutorials, screencasts, tips and articles.

Find Out More

Searching CMX

Latest Free Content

View All Free Content

Advertise with CommunityMX

Community MX

Related Links

Community MX - Your technology lifeline!

Get Paid, Create a Tutorial!

Member's Sign In

Searching CMX

Latest Free Content

View All Free Content

Advertise with CommunityMX

Subscribe

Community MX

Related Links

Community MX - Your technology lifeline!

Get Paid, Create a Tutorial!