Javascript
HTML5 Canvas - Part 5: Image Scaling and Cropping
by Rob Williams - 13-Nov-09
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
by Rob Williams - 03-Nov-09
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
by Rob Williams - 20-Oct-09
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
by Paul Davis - 09-Oct-09
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
by Rob Williams - 05-Oct-09
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
by Paul Davis - 02-Oct-09
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
by Rob Williams - 21-Sep-09
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
by Estelle Weyl - 18-Sep-09
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.
jQuery Plugins: Input Limiter
by Rob Williams - 08-Sep-09
Reader Level: 
While jQuery is a powerful JavaScript toolkit, there are still many things that it just doesn't accomplish right out of the box. Unlike most other solutions though, the jQuery framework is designed to be extensible through user definable plugins. Meaning that almost any time you run into a scenario where jQuery can't natively solve your problem, chances are you'll be able to find a plugin that somebody else has created to take care of things for you!
In this collection of articles, we're going to focus on some of these plugins to see just how easy they are to use and how powerful they can be.
Today's plugin, Input Limiter, is going to help us constrain the amount of information a user can enter into fields on a form while providing real-time feedback.
The jQuery Plugins Series:
jQuery Plugins: Uniform
jQuery Plugins: Image Cube
jQuery Plugins: Input Limiter
Firebug - Part 7a: The Script Tab (Basics)
by Estelle Weyl - 02-Sep-09
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)
JavaScript Slideshow
by Paul Davis - 02-Sep-09
Reader Level:
Creating a JavaScript slideshow is a pretty quick task. With a few lines of JavaScript and some thought on the images, you can have a slideshow ready to go in no time.
jQuery Plugins: Image Cube
by Rob Williams - 26-Aug-09
Reader Level:
While jQuery is a powerful JavaScript toolkit, there are still many things that it just doesn't accomplish right out of the box. Unlike most other solutions though, the jQuery framework is designed to be extensible through user definable plugins, meaning that almost any time you run into a scenario where jQuery can't natively solve your problem, chances are you'll be able to find a plugin that somebody else has created to take care of things for you!
In this collection of articles, we're going to focus on some of these plugins to see just how easy they are to use and how powerful they can be.
Today we're going to take a look at Image Cube, a quick and easy little plugin to allow you to add some visual flare to sets of images on a page.
The jQuery Plugins Series:
jQuery Plugins: Uniform
jQuery Plugins: Image Cube
jQuery Plugins: Input Limiter
jQuery Plugins: Uniform
by Rob Williams - 10-Aug-09
Reader Level:
While jQuery is a powerful JavaScript toolkit, there are still many things that it just doesn't accomplish right out of the box. Unlike most other solutions though, the jQuery framework is designed to be extensible through user definable plugins, meaning that almost any time you run into a scenario where jQuery can't natively solve your problem, chances are you'll be able to find a plugin that somebody else has created to take care of things for you!
In this collection of articles, we're going to focus on some of these plugins to see just how easy they are to use and how powerful they can be.
Today we're going to take a look at the Uniform plugin, which allows you to create customized form elements (select boxes, checkboxes and radios) that are not ordinarily customizable through CSS.
The jQuery Plugins Series:
jQuery Plugins: Uniform
jQuery Plugins: Image Cube
jQuery Plugins: Input Limiter
jQuery Quickshots - Summarizing Form Data: Part 3
by Rob Williams - 28-Jul-09
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
by Rob Williams - 17-Jul-09
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
by Arman Danesh - 16-Jul-09
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 - Summarizing Form Data: Part 1
by Rob Williams - 30-Jun-09
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 we're going to look at a neat approach to summarizing form data so the user can review it before actually submitting.
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
QuickShot: Making HTML Tables Sortable
by Ray West - 23-Jun-09
Reader Level:
Sometimes there is just nothing you can do except point in the direction of a great little piece of code.
We have all had it driven into our developer pea-brains that tables are for tabular data and not for layout. Well, if we are all using tables properly for tablular data, then more often than not somebody is going to ask “Can you click the table to sort all of that?” If it is tabular data, then it could probably benefit from some sorting, so your answer needs to be yes.
jQuery Quickshots - Dependent Selects
by Rob Williams - 16-Jun-09
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 today's article we'll look at how to conquer one of those "should be a lot easier than it really is" common tasks in web development: dependent select lists.
Appcelerator Entourage - Part 4: Expressions
by Arman Danesh - 12-Jun-09
Reader Level:
In the fourth article on our series about Appcelerator Entourage, we take a look at the basics of Entourage's expressions. Expressions can be used for event handling and applying sophisticated logic-based behaviour to your application and its user interface.
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
Best Practices for Creating Custom Web Site Search Functions - Part 2: Pre-Filled Text in Search Box
by Steven Seiller - 04-Jun-09
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
by Rob Williams - 01-Jun-09
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
by Rob Williams - 18-May-09
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 a quick little technique to take an existing web site and make pages appear to "transition" back and forth instead of simply reloading each time.
Appcelerator Entourage Part 3: The Message Queue
by Arman Danesh - 05-May-09
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
by Adrian Senior - 22-Apr-09
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
by Arman Danesh - 15-Apr-09
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
Appcelerator Entourage - Part 1: An Overview
by Arman Danesh - 06-Apr-09
Reader Level:
This is the first 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.
Entourage was previously known as the Appcelerator SDK, but with its upgrade to Version 3 in later March 2009 not only was the name changed to Entourage but some fundamental redesign of the framework took place as well.
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
by Rob Williams - 03-Apr-09
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
by Rob Williams - 23-Mar-09
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
by Tom Muck - 12-Mar-09
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
by Paul Davis - 26-Feb-09
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
by Rob Williams - 26-Feb-09
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
by Paul Davis - 13-Feb-09
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
by Rob Williams - 10-Feb-09
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
by Estelle Weyl - 05-Feb-09
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
by Rob Williams - 26-Jan-09
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
by Rob Williams - 16-Jan-09
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
by Rob Williams - 09-Jan-09
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
by Tom Muck - 06-Jan-09
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
by Tom Muck - 17-Dec-08
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
by Rob Williams - 16-Dec-08
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!
by Paul Davis - 04-Dec-08
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
by Rob Williams - 01-Dec-08
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
by Michael Evangelista - 20-Nov-08
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
by Paul Davis - 19-Nov-08
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
by Rob Williams - 18-Nov-08
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
by Rob Williams - 04-Nov-08
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
by Rob Williams - 22-Oct-08
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
jQuery's Spotlight - Microsoft and Nokia Get Onboard
by Rob Williams - 06-Oct-08
Reader Level:
If you've been sitting on the fence about which JavaScript library is going to be the most valuable to you in the long run, the scales have just tipped quite heavily. In this article we're going to look at why jQuery is proving itself to be one of the most widely adopted and influential JavaScript libraries and how even some of the big players like Microsoft and Nokia are accepting it as one of the key technologies of the next generation of the web.
Quickshot: PayPal Product with Three Options!
by Paul Davis - 26-Sep-08
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
by Rob Williams - 25-Sep-08
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
by Rob Williams - 09-Sep-08
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
by Keith Dodd - 28-Aug-08
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
by Rob Williams - 26-Aug-08
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
by Rob Williams - 12-Aug-08
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
by Rob Williams - 05-Aug-08
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
by Rob Williams - 01-Jul-08
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
Quickshot - jQuery and XML
by Rob Williams - 19-May-08
Reader Level:
One of the biggest challenges when developing AJAX applications is actually working with XML. While XML is a fanstastic technology for describing and structuring data, the JavaScript required to actually parse and use that information can be tedious and annoying at best. Fortunately, this is yet one more scenario where JQuery, the JavaScript optimization library, can save the day!
Using JQuery - Part 11: AJAX (Cont.)
by Rob Williams - 07-May-08
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
by Rob Williams - 22-Apr-08
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
by Rob Williams - 11-Apr-08
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.)
Handling Browsers Without JavaScript Enabled
by Rob Williams - 27-Mar-08
Reader Level:
While it's possible to construct sites based completely on JavaScript, often times the most common use for the language is to add or enhance the functionality of an existing site by making it more interactive. The prime example of this is the JavaScript based drop-down menu. Unfortunately one of the dangers of using JS-based drop downs is that if JavaScript is disabled (or the browser is not capable of it) then there is often no alternative way to navigate through your site! In this article we're going to look at this particular situation and examine one possible way to overcome it.
How To Break Your Code and Like It: Testing Procedures
by Steven Seiller - 19-Mar-08
Reader Level:
Whether you are creating new scripts or moving existing scripts to a new server, testing each one is an essential step to the success of your project. The following are practical tips for ensuring each of your scripts works properly. Although these steps are not complicated, it is their completion which shows the mark of a good professional.
The examples provided here are specifically PHP, but these procedures generically apply to any server-side scripting language including ASP, ColdFusion, Perl or Ruby.
Using JQuery - Part 8: Animation
by Rob Williams - 11-Mar-08
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
by Rob Williams - 27-Feb-08
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
by Ray West - 12-Feb-08
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
by Rob Williams - 11-Feb-08
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
by Rob Williams - 29-Jan-08
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
by Rob Williams - 14-Jan-08
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!
by Paul Davis - 14-Jan-08
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
by Rob Williams - 04-Jan-08
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
by Adrian Senior - 02-Jan-08
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
by Rob Williams - 18-Dec-07
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
by Paul Davis - 06-Dec-07
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
by Rob Williams - 04-Dec-07
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
by Paul Davis - 28-Nov-07
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
by Paul Davis - 23-Oct-07
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
by Paul Davis - 18-Oct-07
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
by Paul Davis - 21-Sep-07
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.
Javascript & AJAX - Zero to Hero at CMX
by Rob Williams - 25-Jul-07
Reader Level:
JavaScript and AJAX tend to be some of those "mystery technologies"; many developers talk about them as being important, most new developers are interested in learning them, but nobody really knows where to go to find out about them. Every now and again you'll run into a "JavaScript guru" who will let you know some important little tidbit, but if you want to learn, really learn, where do you go?
Fortunately here at CMX we've got you covered! Today I'm going to lay out a course outline, using articles and resources available here at CMX, that will allow anyone to go from zero experience to a full fledged JavaScript/AJAX hero in an ordered, concise and easy to follow process. If you've always wanted to learn these technologies but never quite known where to go or where to start, this is for you.
XML and AJAX: A New Paradigm - Part 9
by Rob Williams - 16-Jul-07
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.
Approximate download size: 1.8MB
In the ninth part of this series we're going to integrate the server-side components of application into our JavaScript code to complete our 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
XML and AJAX: A New Paradigm - Part 8
by Rob Williams - 18-Jun-07
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 eighth part of this series we're going to continue to add functionality to the AJAX photo gallery by developing the server-side components that we'll need.
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
Approximate download size: 910k
TODCon 9 Session - Better Scripting Through DOM JavaScript Coding
by Paul Davis - 15-Jun-07
Reader Level:
Here is my PowerPoint presentation from the TODCon session on Better Scripting through DOM JavaScript coding. It will cover the reasons why DOM coding is good, go over libraries and why to do them and introduce (although not provide) several scripts that have been written to take advantage of the DOM scripting.
TODCon 9 Session - Tabbed Content Switching Using JavaScript & AJAX Techniques
by Paul Davis - 15-Jun-07
Reader Level:
The download file for this article contains my PowerPoint presentation from the TODCon session on Tabbed content switching using JavaScript & AJAX techniques. The content includes a RSS feed, both local and remote, and AJAX content, both on demand and continually updated. Utilizes the Spry framework from Adobe Labs.
AJAX Dependent Selects!
by Paul Davis - 08-Jun-07
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
by Rob Williams - 04-Jun-07
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
by Paul Davis - 01-Jun-07
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!
by Paul Davis - 24-May-07
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
by Rob Williams - 22-May-07
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
by Rob Williams - 11-May-07
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
by Paul Davis - 09-May-07
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!
by Paul Davis - 04-May-07
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!
Cheating with AJAX
by Tom Muck - 24-Apr-07
Reader Level:
AJAX is a wonderful technology for making the user experience more gratifying. The usual use of AJAX is to pull some small piece of dynamic information from the server and populate a portion of your page with that information, rather than reload the entire page. Usually, the data you retrieve from the server is a small piece of text that you would insert into a form field or into an area of the page that requires a change.
I'm going to show a technique that speeds up a page load, but uses AJAX in a kind of "cheating" way—loading in entire HTML sections and simply writing them to the page. For the JavaScript/XHTML purist, this might be a cludge, but for the web developer who wants a simple way to speed up a page load in certain situations, it might be just the right technique.
XML and AJAX: A New Paradigm - Part 2
by Rob Williams - 26-Mar-07
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
by Rob Williams - 16-Mar-07
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
by Paul Davis - 16-Jan-07
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
by Paul Davis - 05-Dec-06
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
by Paul Davis - 27-Oct-06
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
Editable Select Lists Using CMX AutoComplete
by Rob Williams - 25-Oct-06
Reader Level:
One of the most surprising aspects of HTML forms is that there is no way to natively create an editable select list. Developers are forced to either present a fixed value list for the user to choose from, or provide an additional text box to allow the user to enter a new value. Fortunately with a bit of help from the latest version of the CMX Auto Complete Extension we can finally solve this problem quite easily!
Good Behavior
by Paul Davis - 23-Oct-06
Reader Level:
Learn to make a simple Dreamweaver Behavior.
JavaScript 202: Native Code
by Rob Williams - 09-Oct-06
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
by Paul Davis - 28-Sep-06
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.
Using Timeouts in JavaScript
by Rob Williams - 31-Jul-06
Reader Level:
Web sites, like many technological devices these days, can often be regarded as having a "hurry up and wait" type of experience. That is, the user clicks a link, waits for the page to load, finally gets all of the relavent information and then takes their time going through the entire page until they find another link to follow, repeating the process once more. Unfortunately, this type of approach can be quite limiting for web developers, especially when trying to create a site where time and updated information can be critical to the overall experience.
In this article we'll take a look at some simple JavaScript that can give you the ability to keep the events and "action" on your web page going, even when the user is not following a link or refreshing the page.
JavaScript Dissecting - Automatic Shipping Address Code
by Paul Davis - 18-Jul-06
Reader Level:
Dissecting a JavaScript function to find out how it does all the things it does! This article takes apart the JavaScript function from the Automatic Shipping Address article and details its inner most secrets.
Automatic Shipping Address Fill-in with Dreamweaver and JavaScript
by Paul Davis - 07-Jul-06
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!
Realtime Searching with CMX Table Sorter
by Rob Williams - 21-Jun-06
Reader Level:
The CMX Table Sorter extension allows you to give your users the ability to sort any HTML table in both ascending and descending order in realtime, without the need to reload the page (or even the table) from the remote server. The latest version of this extension goes one step further though and allows you to perform realtime searches on tabular data, giving users the ability to reorganize the entire table to more quickly and effectively find what they're looking for. In this article we'll take a look at how this new "tabular search" feature works, and just how easy it is to implement on your own web pages.
IE, Minimum Width, and Ems: Overcoming a CSS Disaster
by Rob Williams - 07-Jun-06
Reader Level:
Internet Explorer has a lot of CSS bugs and problems. Fortunately, with a bit of help from some friendly JavaScript coders there are ways to get around most of those limitations, sometimes without even having to invalidate your CSS! In this article we'll explore one of these scenarios: using a minimum-width on elements that are based on em's.
JavaScript 101 - Part 4: Loops
by Rob Williams - 24-May-06
Reader Level:
Description: One of the primary aspects of effective web experiences is interactivity. Although most Flash developers will try to state otherwise, the reality of the fact is that the majority of non-standard interactivity, that is interactivity beyond what the broswer provides automatically, is driven by JavaScript.
Over the last few years the acceptance of both standards and some new JavaScript technologies such as XMLHttpRequest, or AJAX to the masses, has opened up a whole new realm of possibilites that have helped to bring JavaScript back into the mainstream focus as an important and leading-edge technology.
The purpose of this series of articles is to introduce newcomers to the concepts and fundamentals of JavaScript, so that you can begin to leverage the power of this technology in your own web projects. In Part 4 we'll be taking a look at Loop structures and the benefits of using them.
The JavaScript 101 Series:
JavaScript 101 - Part 1: The Basics
JavaScript 101 - Part 2: Operators
JavaScript 101 - Part 3: Control Structures
JavaScript 101 - Part 4: Loops
JavaScript 101 - Part 3: Control Structures
by Rob Williams - 08-May-06
Reader Level:
One of the primary aspects of effective web experiences is interactivity. Although most Flash developers will try to state otherwise, the reality of the fact is that the majority of non-standard interactivity, that is interactivity beyond what the broswer provides automatically, is driven by JavaScript.
Over the last few years the acceptance of both standards and some new JavaScript technologies such as XMLHttpRequest, or AJAX to the masses, has opened up a whole new realm of possibilites that have helped to bring JavaScript back into the mainstream focus as an important and leading-edge technology.
The purpose of this series of articles is to introduce newcomers to the concepts and fundamentals of JavaScript, so that you can begin to leverage the power of this technology in your own web projects. In Part 3 we'll continue our exploration of the fundamentals by looking at programming logic and control structures.
The JavaScript 101 Series:
JavaScript 101 - Part 1: The Basics
JavaScript 101 - Part 2: Operators
JavaScript 101 - Part 3: Control Structures
JavaScript 101 - Part 4: Loops
JavaScript 101 - Part 2: Operators
by Rob Williams - 25-Apr-06
Reader Level:
One of the primary aspects of effective web experiences is interactivity. Although most Flash developers will try to state otherwise, the reality of the fact is that the majority of non-standard interactivity, that is interactivity beyond what the broswer provides automatically, is driven by JavaScript.
Over the last few years the acceptance of both standards and some new JavaScript technologies such as XMLHttpRequest, or AJAX to the masses, has opened up a whole new realm of possibilites that have helped to bring JavaScript back into the mainstream focus as an important and leading-edge technology.
The purpose of this series of articles is to introduce newcomers to the concepts and fundamentals of JavaScript, so that you can begin to leverage the power of this technology in your own web projects. In Part 2 we'll continue our exploration of the fundamentals by looking at operators.
The JavaScript 101 Series:
JavaScript 101 - Part 1: The Basics
JavaScript 101 - Part 2: Operators
JavaScript 101 - Part 3: Control Structures
JavaScript 101 - Part 4: Loops
Create a Cross-Platform Yahoo! Widget
by Thomas Pletcher - 14-Apr-06
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
JavaScript 101 - Part 1: The Basics
by Rob Williams - 12-Apr-06
Reader Level:
One of the primary aspects of effective web experiences is interactivity. Although most Flash developers will try to state otherwise, the reality of the fact is that the majority of non-standard interactivity, that is interactivity beyond what the broswer provides automatically, is driven by JavaScript.
Over the last few years the acceptance of both standards and some new JavaScript technologies such as XMLHttpRequest, or AJAX to the masses, has opened up a whole new realm of possibilites that have helped to bring JavaScript back into the mainstream focus as an important and leading-edge technology.
The purpose of this series of articles is to introduce newcomers to the concepts and fundamentals of JavaScript, so that you can begin to leverage the power of this technology in your own web projects.
The JavaScript 101 Series:
JavaScript 101 - Part 1: The Basics
JavaScript 101 - Part 2: Operators
JavaScript 101 - Part 3: Control Structures
JavaScript 101 - Part 4: Loops
Build a Dashboard Widget
by Thomas Pletcher - 04-Apr-06
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
Spell Checking HTML Forms with JavaScript and PHP
by Rob Williams - 27-Mar-06
Reader Level:
Have you ever had to write a large amount of text into a field on an HTML form and been uncertain of just how reliable your spelling skills are? Wouldn't it be nice if HTML forms, like most other applications, had one of those handy little "Spell Check" buttons? In this article we'll look at how easy it is to implement this functionality using a PHP/JavaScript solution called Speller Pages.
Speeding up AJAX with JSON
by Joel Martinez - 13-Mar-06
Reader Level:
XML is a brilliant tool for standardizing communication between two isolated systems. When you as a web developer have control over the way that both of those systems function though the benefits of XML quickly begin to fall short of the timing delays that it incurs. This is especially true of AJAX applications where you have control over both the client-side and server-side code, and thus usually don't need to waste the user's time by converting everything to XML and then back again for each transaction.
In this article we'll explore a more compact, and possibly more effective, approach to transferring complex data between two systems using JSON.
AJAX Applied: PHP Contact Forms - Part 2
by Rob Williams - 10-Mar-06
Reader Level:
In the first part of this article we explored how to take a standard PHP-driven contact form and convert it to an AJAX-driven one. Although the AJAX version was better than the original, the conversion over to client-side validation also opened the door for some new and unexpected possibilities.
In this article we're going to explore one of those new concepts and refine our form a bit further by adding form validation that occurs in real-time as the user completes each field.
The AJAX Applied Series:
AJAX Applied: PHP Contact Forms
AJAX Applied: PHP Contact Forms - Part 2
Batch Processing Images to a Custom File Size
by Jim Babbage - 07-Mar-06
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.
AJAX Applied: PHP Contact Forms
by Rob Williams - 01-Mar-06
Reader Level:
For most web developers AJAX is simply another one of those "buzz words" that represents a "revolutionary new technology" that will change the way web sites work forever. It all sounds fantastic and there are lots of great articles that explain what AJAX is and why you'd want to use it. The biggest problem for most developers is figuring out just how AJAX can be applied to real-world situations.
In this article we're going to try and tackle the implementation question. We'll take an existing PHP contact form and gradually convert it into an AJAX-driven solution. The goal is to demonstrate not only the technology and how it can be used, but also the process that you, as a developer, can take to begin the transition from traditional web development to AJAX-based pages and sites.
The AJAX Applied Series:
AJAX Applied: PHP Contact Forms
AJAX Applied: PHP Contact Forms - Part 2
Adding WYSIWYG to Textareas: Part 1
by Gordon Mackay - 17-Jan-06
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
by Danilo Celic - 04-Jan-06
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.
Zimbra: More Than Just Web Mail
by Arman Danesh - 09-Dec-05
Reader Level:
AJAX is growing in popularity as a powerful JavaScript-based mechanism for client-server communication and the creation of dynamic, interactive, browser-based Web applications. Zimbra is a new groupware platform that centers around a robust AJAX-based Web client that has features missing in some desktop groupware applications. This article provides a brief overview of Zimbra.
Structured Forms using CMX AJAX Form Submit
by Rob Williams - 04-Nov-05
Reader Level:
One of the biggest problems with conventional HTML forms is that they can only send "flat data" to the webserver; HTML provides several ways to add structure to your form, but once the form is submitted the structure of the information is lost. If you're using the CMX AJAX Form Submit extension to handle your forms though you can now overcome this limitation, and in doing so better prepare yourself for the next generation of web forms. In this article we'll explore what "flat data" is, why it's a problem, and some of the benefits of "structured forms" from both a user and developer point of view.
CMX AJAX Loader: Beyond the Basics
by Rob Williams - 24-Oct-05
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.
CMX AJAX Form Submit Extension
by Rob Williams - 11-Oct-05
Reader Level:
The CMX AJAX Form Submit Behavior for Dreamweaver and Dreamweaver MX 2004 allows you to use AJAX technology to submit form information to a server-side processing script and receive the results back without having to reload the page.
CMX AJAX Loader Extension
by Rob Williams - 27-Sep-05
Reader Level:
The CMX AJAX Loader behavior allows you to dynamically load new XHTML/XML from your web server and insert it into any element on the current page without requiring the user to perform a full refresh. By eliminating full page refreshes you can improve both the performance of your site and the end user's experience. Now you can start enjoying the benefits of AJAX technology without having to worry about the complicated scripting that makes it work!
Rotating Images with Dreamweaver and JavaScript
by Danilo Celic - 21-Sep-05
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
by Rob Williams - 14-Sep-05
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
by Joel Martinez,CMX - 13-Sep-05
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.
Investigating Drag-and-Drop For Use in Content Management Systems: Part 1 - Drag-and-Drop Lists
by Danilo Celic - 08-Sep-05
Reader Level:
Clients continually ask for more and more control over their sites, whether they need it, or whether they will actually ever exercise that control. This is one reason why Content Management Systems (CMS) can work so well for many customers. Mostly they want to edit the content of a particular page, or to add a new item to their shopping cart. But occasionally they also want to change the order of the menu items, or move the news section around, above the main content one week, and the next at the bottom of the menu column. Most CMS applications can handle the content portion of things very well, but few readily accommodate layout changes. In fact, quite a few CMS impose their own layout (albeit with several templates to choose from) on a site when they are implemented.
The first part in the series shows how to apply a drag and drop mechanism to a list of categories in Dreamweaver so that the order of the categories displayed can be modified by your end user. The pages created from the steps outlined in this part of the series can be performs for ColdFusion, PHP, and ASP-VBScript pages.
The Drag-and-Drop Series:
Investigating Drag-and-Drop For Use in Content Management Systems: Part 1 - Drag-and-Drop Lists
Investigating Drag-and-Drop For Use in Content Management Systems: Part 2
CMX Text Field Auto Complete Extension
by Rob Williams - 06-Sep-05
Reader Level:
The CMX Auto Complete Behavior for Dreamweaver and Dreamweaver MX 2004 allows you to quickly and easily add fully customizable "auto complete" functionality (think Google Suggest) to any text or textarea input field on a web page. The "auto complete suggestions" box can easily be customized using CSS to integrate seamlessly into your page design and automatically sizes and positions itself for each input/textarea; no knowledge of JavaScript of the complexities of AJAX required!
Uploading Files with ASP.NET
by Heidi Bautista - 24-Aug-05
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
by Rob Williams - 21-Jul-05
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
by Rob Williams - 01-Jul-05
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
by Jim Babbage - 28-Jun-05
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.
Dynamic CSAs - Part 2: Client/Server Communication
by Rob Williams - 21-Jun-05
Reader Level:
In the articles leading up to this point we've looked at and explored all of the various client-side technologies and methods that make Dynamic Client-Side Applications so appealing and revolutionary from a user's point of view. We've seen how JavaScript can be used to manipulate CSS and the DOM, and as a result, give the user the ability to change and interact with web sites in entirely new and different ways; all in real time without having to wait for page reloads and server responses. As important as all of that has been though, it's only the first aspect of an effective Dynamic CSA.
In this article we'll begin to explore how we can take all of that client-side interactivity and tie it back into server-side functionality; after all, there's no point in having a fantastic user interface that only presents a single piece of information and then has to be reloaded.
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
Using the Macromedia Flash / JavaScript Integration Kit
by Danny Patterson - 17-Jun-05
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
by Paul Newman - 16-Jun-05
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.
Dynamic CSAs - Part 1: Interactivity Events
by Rob Williams - 09-Jun-05
Reader Level:
Although many aspects of web development have changed over the years, one that seems to have remained "untouched" has been the way in which users interact with web sites. The introduction of Flash has caused many web developers to begin to think about new and different ways to allow the user to "experience" a web site, but having to abandon most of your current web skills in order to "start again in Flash" has deterred many developers from really exploring these new interactivity options in mainstream projects. Thanks to some recent browser and web technology developments though it's now possible to create rich interactive web sites by expanding upon, rather than replacing, your current web skills. This is the brave new world of Dynamic Client-side Applications. In the first part of this series we take a look at Interactivity Events.
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 CSS - CSS and the DOM
by Rob Williams - 23-May-05
Reader Level:
The ability to control, update, and change CSS in realtime opens a whole world of new possibilities to web developers and the experiences that they can offer users. In the last part of this series we took a look at how we could use the Document Object Model and JavaScript to access and change CSS properties in realtime. Although we utilized the DOM to access those style properties though we really didn't get into the importance of the relationship between it and CSS. This time around we'll explore that important connection and see how a combination of the two technologies can be used to create stunning new possibilities.
The Dynamic CSS Series:
Dynamic CSS - Challenging Traditions
Dynamic CSS - Basic Real-Time Style Manipulation
Dynamic CSS - Real-Time Rule Changes
Dynamic CSS - CSS and the DOM
Dynamic CSS: Real-time Rule Changes
by Rob Williams - 11-May-05
Reader Level:
The ability to give users the power to manipulate and control the styling of your site in real-time can change the way users experience and use your site forever. In this article we'll take a look at how to work with and change style sheet rules in real-time.
The Dynamic CSS Series:
Dynamic CSS - Challenging Traditions
Dynamic CSS - Basic Real-Time Style Manipulation
Dynamic CSS - Real-Time Rule Changes
Dynamic CSS - CSS and the DOM
Dynamic CSS - Basic Real-time Style Manipulation
by Rob Williams - 29-Apr-05
Reader Level:
The ability to give users the power to manipulate and control the layouts and styling of your site in real-time can change the way users experience and use your site forever. In this article we'll take a look at the concepts behind real-time style manipulation and work through a basic example.
The Dynamic CSS Series:
Dynamic CSS - Challenging Traditions
Dynamic CSS - Basic Real-Time Style Manipulation
Dynamic CSS - Real-Time Rule Changes
Dynamic CSS - CSS and the DOM
Use XML to Populate Dependent Select Lists
by Danny Patterson - 28-Apr-05
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.
Dynamic CSS - Challenging Traditions
by Rob Williams - 22-Apr-05
Reader Level:
CSS has revolutionized the way that we design and build web sites. By combining CSS with other web technologies though we now have the right set of tools to begin to make user experiences on our sites truely personalized and unique. In this article we'll start to explore those possibilities and see how dynamic CSS can be used to add a whole new dimension to site designs and experiences.
The Dynamic CSS Series:
Dynamic CSS - Challenging Traditions
Dynamic CSS - Basic Real-Time Style Manipulation
Dynamic CSS - Real-Time Rule Changes
Dynamic CSS - CSS and the DOM
Facilitating Multi-Site Development on Windows with IIS Admin
by Danilo Celic - 23-Mar-05
Reader Level:
The way that many folks develop sites with IIS on a non-server operating system, such as Windows XP Pro, is to create sub-folders off of the wwwroot folder where the default IIS web site points to, or to create virtual folders within IIS that point to a folder which contains all the files for your site. This is all fine and dandy when you're working with static sites, or if you use absolute or document relative URLs for yours links, images, scripts, and CSS. However, as you move toward larger, more complex sites with constant layouts throughout the site, you're probably using includes in some form to help decrease your maintenance time and effort. Whether it be to pull out your headers and footers, or to contain your user authentication code includes help you develop site quicker. When you're working with includes, many times you also have multiple levels of folders, and because of that, it is common to use root relative linking to images, CSS, Flash, and JavaScript files to make sure that paths are picked up correctly throughout the site, regardless of how deep the page is that calls in the include. This is where the sub-folder or virtual directory type of development can start to cause you problems.
Read on for an easy way to manage multiple sites with IIS Admin to avoid these problems.
CMX Table Sorter Extension for Dreamweaver
by Rob Williams - 14-Mar-05
Reader Level:
The ability for users to re-organize tabular data to better suit their individual requirements has become an almost expected attribute of digital data. Many web sites currently provide this ability by relying on server-side coding and database queries to constantly re-sort the data before it's transferred to the client. This causes both increased server load and inconvenient delays for users as they wait for the data to be reloaded.
The CMX Table Sorter behavior allows you to provide those same sorting abilities for your HTML table without having to waste time and resources on server-side sorting methods.
This extension has been updated 6/27/06. Please download the zipfile and replace the old extension with the newer one.
Communicating with the Server without Reloading the Page
by Danny Patterson - 10-Mar-05
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.
DOM: Scripting to the Standard - Part 3
by Rob Williams - 04-Mar-05
Reader Level:
The third part of this series focuses on how to change and manipulate a document using DOM methods and properties. We also explore how these techniques can be used by JavaScript's DOM implementation to add some real flexibility to your web pages without having to constantly force the user to wait for page reloads and server-side scripts.
The DOM: Scripting to the Standard Series:
DOM: Scripting to the Standards - Part 1
DOM: Scripting to the Standards - Part 2
DOM: Scripting to the Standards - Part 3
DOM: Scripting to the Standard - Part 2
by Rob Williams - 18-Feb-05
Reader Level:
In the first part of this series we took a look at what the DOM standard was and how important it is to modern web development. This time around we take those concepts and begin to apply them to a practical application: browser-based scripting.
The DOM: Scripting to the Standard Series:
DOM: Scripting to the Standards - Part 1
DOM: Scripting to the Standards - Part 2
DOM: Scripting to the Standards - Part 3
DOM: Scripting to the Standard - Part 1
by Rob Williams - 01-Feb-05
Reader Level:
Client-side website scripting lost many of its faithful supporters during the infamous "browser wars" when writing cross-browser compatible scripts became nearly impossible. Thanks to support for web standards though, those days are nearly gone. In this, the first part of this series, we'll take a look at the Document Object Model standard, how it affects web scripting, and how learning to work with it will benefit both you and your web-based projects.
The DOM: Scripting to the Standard Series:
DOM: Scripting to the Standards - Part 1
DOM: Scripting to the Standards - Part 2
DOM: Scripting to the Standards - Part 3
Adding a Sniplet Button to the JavaScript Eval Panel
by Tom Muck - 07-Dec-04
Reader Level:
This tutorial is based on the original JavaScript Evaluation panel featured in at Community MX. The article serves three purposes. First, for the DW developer who uses JavaScript in web pages, you'll have a useful extension at the end of the article that allows you to test out pieces of JavaScript in a live panel. For DW extension developers, the extension allows access to the DW extension API in the panel. Finally, also for DW extension developers, the tutorial will show how to use the undocumented PopupMenu feature of the DW API to add dynamic menus to buttons easily.
Let it Snow, Man! - Part 2
by Jim Babbage - 26-Nov-04
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
by Danny Patterson - 09-Nov-04
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
by Danilo Celic - 05-Nov-04
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.
Announcing CMX JumpStarts
by Sheri German - 28-Oct-04
Reader Level:
Community MX is pleased to announce the release of an exciting new line of products called CMX JumpStarts. Based on Web standards, these versatile layouts employ valid CSS2 and XHTML 1.0 Transitional markup and pass WAI and 508 accessibility checkpoints. This makes it easy for you to quickly create new sites that work on a variety of browsers and platforms. You are only a few simple edits away from your own look and feel.
Inspired by famous world cities, each JumpStart will have an individual ambience and offer different table-less layouts and features. We travel first to Paris, a city of romance and style, with a design that features the Iris, the national flower of France. This two-column, fixed-width layout, complete with banner and footer, will serve as an elegant underpinning for almost any design.
This article covers the following:
- A list of what is included with the CMX Paris JumpStart package and bundled tutorials
- An explanation of the benefits of Web standards
- A demonstration of the ease with which the layout is customized
- The presentation of a page that was created from the Paris JumpStart
- Information about how this exciting design can belong to you for use in as many projects as you please.
- Screen shots of the page in multiple browsers
Enabling the Back Button in Flash
by Danny Patterson - 20-Oct-04
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
by Danny Patterson - 08-Oct-04
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.
Watch Property Values To Determine Actions
by Danilo Celic - 30-Aug-04
Reader Level:
Nope, we're not talking real estate here, we're talking about using JavaScript to track and manage changes to the value of an object's property within a Dreamweaver extension.
Since Dreamweaver's extensibility engine uses JavaScript internally, you can bring in many of the concepts that are usable within "plain" JavaScript into the Dreamweaver extensibility layer. One concept that I haven't seen used a lot on web pages, but that I have found to be quite useful within Dreamweaver: watching property values.
Flash, DHTML Menus and Accessibility
by Stephanie Sullivan - 28-Jul-04
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.
Communicating Between PHP and JavaScript
by Rob Williams - 25-Jun-04
Reader Level:
One of the great mysteries of web coding seems to be trying to figure out how, if possible, you can pass information from a server-side scripting lanuage (PHP) to a client-side language (JavaScript); and even more elusively, how to pass information back again. In this article, we're going to solve the age old riddle and discover several possible solutions to the problem.
CMX Insert Shared JavaScript Extension
by Danilo Celic - 10-Jun-04
Reader Level:
When you're working within the Dreamweaver Configuration folder, there are quite a few JavaScript files that are useful for building extensions within the Shared folder. You may need to link to one or more of them in order to complete that fabulous extension that you're working on.
Good news is that Dreamweaver makes it relatively easy to link to JavaScript files that are within the same site that you're working on (you do have a site defined for each of your Configuration folders on your system, right?). Unfortunately, the Shared JavaScript files can be located within multiple folders in several areas of your system. If you wanted to link from your HTML file within the user's config folder, but needed to link to a JavaScript file that comes standard with Dreamweaver, such as the ListControl class file, you'd then have to go traipsing around your hard drive to locate, and link to that JavaScript file. No more...
The Long and Short of Dreamweaver Timelines - An Introduction
by Jim Babbage - 08-Jun-04
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
by Adrian Senior - 24-Dec-03
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.
The Benefits of Externalizing Fireworks Pop-up menu JavaScript
by Jim Babbage - 12-Dec-03
Reader Level:
Fireworks and Dreamweaver pop-up menus have their uses, in spite of all the critics. One nagging issue though, is that both DW and FW insist on dumping a hefty javascript function into EVERY page that makes use of the menu. This article shows you how to turn this internal js into an external file, and how to link it to the pages that need the pop up menu.
JavaScript Evaluation Extension for Dreamweaver
by Tom Muck - 11-Dec-03
Reader Level:
Frequently when you are building web pages, you need to test out little pieces of JavaScript. This extension installs in Dreamweaver and runs as a floating panel so that you can copy/paste code from Dreamweaver into the panel and execute it. It also works well for extension developers because you have access to the DW API and any shared script functions that are in memory.
Protecting your Email when using Paypal
by Joel Martinez - 22-Sep-03
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.
Exception Handling in JavaScript
by Joe Marini - 27-May-03
Reader Level:
Ever wish there was a better way to write error handling code in your JavaScript? There is, and it's called "Exception Handling". This article tells you how to use one of JavaScripts newest features.
Tips For More Effective JavaScript Programming
by Joe Marini - 05-May-03
Reader Level:
I'm a firm believer in the concept of continuing education. I honestly feel that there's always something more to learn about any given subject, even if you're an expert on that subject. That's why one of my favorite things to do is find ways of improving on something I'm already pretty good at. It's usually fun because I don't have to strain too hard to pick up new concepts (since I'm already familiar with the subject at hand), and it's always rewarding when you find yourself able to do something better than you could do it before.
That's why, even if you're an experienced JavaScript coder, I think you'll enjoy this article. Hopefully you'll learn something you didn't know before, or you'll better understand a concept or two that seemed difficult at first.
In this article, we're going to examine some ways that you can make your JavaScript code more effective.
Disjointed Rollovers
by Bill Horvath - 29-Apr-03
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 Open Browser Window Behavior
by Laurie Casolino - 25-Apr-03
Reader Level:
Using DWMX's built-in Open Browser Window behavior to create pop-up windows is a snap! In this tutorial we will go through the steps necessary to create a popup window using a thumbnail as the trigger.
The Newbie Series: Using DWMX's Set Navbar Image Behavior
by Laurie Casolino - 16-Apr-03
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
by Danilo Celic - 07-Apr-03
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.
Auto Validation of TextBoxes with the Text Format Suite
by Joel Martinez - 04-Apr-03
Reader Level:
The Text Format Suite allows you to create form elements that automatically mask the user's input to reduce user error. The suite is a set of four Dreamweaver Behaviors that can be applied to Textboxes.
The Newbie Series: Using DWMX's Swap Image behavior
by Laurie Casolino - 30-Mar-03
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.
