Add a Date Picker to Your Forms

The other day, I found myself in need of a nice, simple date picker for a form I’m developing. Being a fan of the MooTools javascript framework, I headed off to Google to look for a date picker that utilizes MooTools. I found a real winner.

The MooTools DatePicker from MonkeyPhysics is extremely simple to implement, works beautifully and is extremely customizable. On the site, you can also download four different “skins” for the date picker. For my purposes, I went ahead and stuck with the default skin (which only requires the download of a CSS file), but I can certainly see the value in some of the other themes. The page includes a lot of nice examples and some great documentation. In addition to what’s provided on that site, I’ve added a handful of tips after the jump.

Using Javascript To Switch Images

This post isn’t really going to be about javascript rollovers, as they have been covered in the past and really are at the point where CSS has basically replaced them. This post is actually going to briefly explain how to preload an image with javascript, then add it to the page (either as a new image or replacing an existing image).

Let’s say you have a page with multiple thumbnails that can be clicked to load the full-sized image in a specific area of the page. In the old days, we would have done this in one of two ways: 1) Make the link actually lead to a different page with that new image shown or 2) Load all of the images at once, hiding them with CSS, slowing down the initial load time of the page.

With the Javascript image() object, however, you can actually preload the images when the appropriate thumbnail is clicked or even after the page finishes loading. You can even display a “loading” indicator until the new image is fully loaded.

Javascript and Screen Sizes

With mobile browsers becoming more and more prevalent, it becomes more and more necessary to develop a version of your Web site for those browsers. There are a lot of scripts out there that are designed to detect mobile browsers, but many of them need to be updated every time a new mobile browser is developed.

A quick and easy way to detect mobile browsers is to detect the users’ display resolutions. Certainly, this is far from flawless, but it’s not a bad method. Assuming that the browser supports javascript, you can easily figure out the users’ resolutions by using the screen.width and screen.height properties. You can fairly safely assume that most users with a screen width of less than 600 pixels is viewing your site with a handheld of some sort. Therefore, you should use the following javascript to perform any special actions that need to be taken when being viewed with a handheld.

<script type="text/javascript">
if(screen.width <= 600) {
mobileSite();
}
</script>

In my case, I’m using a similar script to determine whether or not TinyMCE should be initiated or not. My TinyMCE init script looks like:

<script type="text/javascript">
if(screen.width>600) {
tinyMCE.init();
}
</script>

I hope that helps some people.

Insert Text Into Textareas Using Javascript

The other day, I was working on a script to allow administrators to edit templates within the admin center of the content management system I’m developing. Rather than just using a plain textarea with the contents of the template files, I wanted to add some simple functions with javascript. First, I wanted to set it up so that the tab button would insert a tab rather than skipping to the next form field. Second, I wanted to add a list of the various template tags that can be used in the CMS, and allow the admins to click on one of those to insert it in the textarea.

SlideItMoo – A Nice Javascript Image Slider

The other day, I was in need of a simple script that would allow me to set up an image slider on one of my home pages. I basically needed to set up a carousel of promotional items and allow the users to scroll through thumbnails of the various items that are available.

After some searching and testing of various scripts, I came across SlideItMoo, an image slider that uses the Mootools javascript framework and makes it very simple to set up a slider. This is my first foray into using a javascript framework (other than those that are built into other packages like WordPress).

If you’re looking for an image or banner slider/carousel script, I highly recommend checking out SlideItMoo.

Creating Usable Javascript Links

As I surf the Web, I come across countless Web sites that use one of the following methods to invoke a javascript function when someone clicks a link:

<a href="javascript:somefunction()">Click to invoke somefunction</a>

or

<a href="#" onclick="somefunction()">Click to invoke somefunction</a>

Unfortunately, these types of links are completely unusable for anyone with javascript disabled (and, for that matter, the second example is completely useless to people that can’t “click” the links, such as people using older handheld devices). Even worse, the second example can be extremely annoying, as it focuses the screen back to the top of the Web page when you click it.

Pages: