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.

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. (more…)

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.

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. (more…)

This is the final installment of my four-part tutorial on manipulating the DOM with javascript. So far, we have explored the createElement, appendChild, insertBefore, replaceChild and removeChild functions. In this final post, we will explore the createTextNode function, and will then put it all together into a real world example.

(more…)

In my last post, we explored the appendChild and insertBefore functions. As I explained, those are two of the three main functions you can use to add a new element into your HTML page. In this post, we will explore the replaceChild and removeChild functions.
(more…)

In my last post, I explored the createElement function to begin showing you how to add, remove and replace elements in your HTML pages with javascript. In this post, I will explore the appendChild and insertBefore functions. These are two of the three functions you will use to actually insert the new element you created in the last post.
(more…)

In one of my recent posts, I attempted to explain and explore the document object model (DOM) a little bit, in order to help you understand how it can be manipulated. In this series of posts, I will explain how to use javascript to work with the DOM. However, it is important to note that the functions we’ll be using inside of this tutorial are defined by the DOM, and can actually be used in some form or another in any programming language that supports XML. I know for a fact that these same functions are also available in PHP, VBScript and Java. I’m certain that they are available in a host of other languages, as well.

(more…)

In the near future, I plan to write a rather in-depth tutorial explaining how to manipulate the DOM using javascript. Essentially, that tutorial will teach how to properly add and remove elements from your Web pages using javascript. If all goes well, that tutorial will be simple enough for beginners to understand, and will help add a lot of power to your javascript arsenal.

However, before I can get into that, we need to explore and understand the DOM. (more…)

As many of you are aware, it is rather difficult to create an accessible “quick link” menu (sometimes also called “jump menus”) because most of them require javascript.

For those of you that don’t know what a quick link menu is, it’s generally a dropdown menu, made from a typical form “select” element. Then, when a user chooses one of the options within that select element, the page automatically redirects to the location associated with that option.

For instance, in the top corner of all HTMLCenter pages, there is a quick link menu called “Top Links”.

For a lot of users, these types of menus are extremely useful. Designers generally use quick link menus for one of two purposes: a) to provide a quick, easily locatable list of the top content on their Web site or b) to provide a list of the headers on a long page, allowing the users to quickly “jump” to the appropriate section of the page.

The problem, though, as I mentioned at the beginning of this post, is that they all require javascript in order to work properly. That’s great for the users that have javascript enabled, but it really can cause problems for those that don’t have javascript.

I have come up with a solution to that problem, though. With the solution described below, the “quick link” menu is initially written as an unordered list. Then, I use javascript to convert it to a standard “jump menu”. That way, if the user doesn’t have javascript within his/her browser, they get a nicely formatted unordered list of the links instead.

(more…)