Referencing Radio Button Values in jQuery
Reader Level:

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

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

Formatting Currency Values in JavaScript
Reader Level:

As more and more data retrieval moves to AJAX to provide a more dynamic user experience, we start to lose much of the server side data formatting that is so convenient in most languages. When sending raw data back over XML or JSON, there is no opportunity for the server to reformat to display dates, times, and currency values as you would want them shown. This is especially tricky for currency formats, since JavaScript does not have a simple currency format function.

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

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

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

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

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

CKEditor 3 - WYSIWYG Text and HTML Editor for the Web
Reader Level:

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

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

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

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

Finger-Friendly Mobile Web - Part 1: Introduction
Reader Level:

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

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

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

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

jQuery Plugins: Input Limiter
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

jQuery Plugins: Image Cube
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

QuickShot: Making HTML Tables Sortable
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
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.

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

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

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

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

jQuery Quickshots - Page Transitions
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.

jQuery's Spotlight - Microsoft and Nokia Get Onboard
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!
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.

Use Same Address for Billing
Reader Level:

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

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

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

Quick Shot - Adding Accessibility To A Form With Validation
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
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...

Javascript & AJAX - Zero to Hero at CMX
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.

Create a Cross-Platform Yahoo! Widget
Reader Level:

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

Approximate download size: 376k

Build a Dashboard Widget
Reader Level:

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

Approximate download size: 552k

Zimbra: More Than Just Web Mail
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.

Talking to Flash with JavaScript
Reader Level:

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

Dynamic CSS - Challenging Traditions
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

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

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

Announcing CMX JumpStarts
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

Flash, DHTML Menus and Accessibility
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.

JavaScript Evaluation Extension for Dreamweaver
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
Reader Level:

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

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

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

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

Auto Validation of TextBoxes with the Text Format Suite
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.