Webmaster Tips: JavaScript articles

4 Performance Tips for Elements Matching in jQuery

Mon, 27 Jul 2009 06:42:46 -0500

Always use ID to select an element if you can. This is the fastest way to select elements. Avoid matching elements by class name. Selecting with class name only will make jQuery search every element in the entire page..

50 Excellent AJAX Tutorials

Wed, 22 Oct 2008 06:03:44 -0500

AJAX provides Web developers with plenty of opportunities to enhance the user experience and improve the performance of their websites. There are countless ways that AJAX can be used, and fortunately there are plenty of good and useful AJAX tutorials out there to help you with your own implementation. This post serves as a collection of useful tutorials on working with AJAX in a wide variety of ways. You’ll find tutorials on working with forms, building shopping carts, creating chat features, working with log-ins and usernames and much more..

75 Useful JavaScript Techniques

Mon, 29 Sep 2008 08:30:27 -0500

Thanks to the Web's widespread adoption of JavaScript, JavaScript libraries have sprung up to help make design and development easier. Here are a few of the major JavaScript libraries that developers use: jQuery, Prototype, Scriptaculous, mootools, Dojo. These frameworks have thriving communities whose members have developed countless plug-ins that can greatly add to the JavaScript framework. However, sometimes we need JavaScript solutions that are a little more involved or specific. Here are 75 more handy JavaScript techniques that have made websites much sleeker and more interesting..

Masked Input Element with jQuery

Fri, 22 Aug 2008 05:42:38 -0500

Here is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer 6/7, Firefox 1.5/2, Safari, and Opera.

How to change the look of Select element

Fri, 22 Aug 2008 05:39:24 -0500

So you’ve built a beautiful, standards-compliant site utilizing the latest and greatest CSS techniques. You’ve mastered control of styling every element, but in the back of your mind, a little voice is nagging you about how ugly your select's are. With a little DOM scripting and some creative CSS, you can make your select's beautiful.

Hyperlink Cues with Favicons

Wed, 02 Jul 2008 05:39:34 -0500

Do you want to show the site's favicon for all links that point to external sites? This small tutorial shows you how to accomplish it with CSS and Javascript.

Styling File Inputs With CSS and Javascript

Wed, 02 Jul 2008 05:36:41 -0500

File inputs are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation.

Creating a Floating HTML Menu Using jQuery and CSS

Wed, 02 Jul 2008 05:27:14 -0500

For all of us who deal with long web pages and need to scroll to the top for the menu, here's a nice alternative: floating menus that move as you scroll a page. This is done using HTML, CSS and jQuery, and it's fully W3C-compliant. This tutorial covers how to create a "floating menu" using HTML, CSS, and jQuery. To reiterate, a floating menu stays visible even if you scroll down a web page. They're animated, so they move up and down as you scroll the browser window up or down.

Fading Javascript Tooltips

Wed, 02 Jul 2008 05:24:55 -0500

This animated JavaScript tooltip script is very easy to use and lightweight at only 2kb. It is tested working in IE6+, Firefox, Opera and Safari. Jacob Gube of Six Revisions has posted the script and a walk-through of the code and the logic.

Autopopulating text input fields with JavaScript

Tue, 17 Jun 2008 04:23:55 -0500

For both accessibility and usability reasons, all input fields and other form controls except buttons should have an associated label that clearly states what the purpose of the control is, or what kind of input the user is expected to fill it with. Sometimes the visual design places restrictions on those labels, in some cases to the extent that there is no room for a label. One common workaround when no label can be displayed is to put some placeholder text in the text field and let that act as the label..