About This Product
Metachecker.net | TrafficChecker.net | RankChecker.net
| Over 5000 Free Fonts | Tutorials | Javascript Forum | Other Javascript Resources | Cheat Sheet

Advance Tutorials

Table Sorting
Compatibility:
Description:
Source: http://webfx.eae.net

Maybe you've seen sortable tables before but it has probably been done using databinding in IE4. Now it can be done using DOM level 1 (level 2 isn't finished yet) so it will work in both Internet Explorer 5 and Netscape Navigator 5 (NGLayout, Gecko). The actual sorting algorithm is the standard sort method of the javascript Array object so it is guarantied to be as fast as possible. Read how this was made below or just see the demo or find out how you can use it yourself

 

Dynamic Images
Compatibility:
Description:
Source: http://webfx.eae.net

NN3 introduced the onmouseover and onmouseout events for the A (anchor) tag. It also introduced the image collection allowing some manipulation of the IMG tag. The src attribute was now read and write able meaning you could change the image file through scripting.

 

Folder Navigation
Compatibility:
Description:
Source:  http://webfx.eae.net

This is a cross browser version of my old Folder Navigation scrip. Currently there's a few minor problems when used in netscape, but I'm working on it It supports unlimited number of folders, levels and documents.

 

Error Handling
Compatibility:
Description:
Source:  http://webfx.eae.net

There are basically two ways of catching errors in a web page. One has been available since Netscape Navigator 3 and the other one is available in IE5 and Mozilla 1.0 (or whatever it is going to be called). In Mozilla this is a part of Javascript 1.4 and in IE it is a part of the JScript engine version 5.

 

DHTML Menu 3
Compatibility:
Description:
Source:  http://webfx.eae.net

The most common question we get is about the old dhtml menu and how to use it with frames or how to modify it to work as a popup menu. Therefor I've created a new menu system from scratch that took these issues into account from the beginning.

 

Splash Windows
Compatibility:
Description:
Source:  http://webfx.eae.net

A few people have asked me how the about box for the webboard was made and some have asked me to write an article about how to make one. So here goes... The trick Normally IE doesn't allow the programmer to create a window without borders and title bars but when you create a window in full screen mode the window doesn't have any of these. To open up a window in full screen use window.open() with the fullscreen=1 in the features argument.

 

Cool Button Behavior
Compatibility:
Description:
Source:  http://webfx.eae.net

This behavior was based on the cool button script but it has been rewritten to use the power of DHTML behaviors. Since I haven't explained much about behaviors before I think it is about time to do so now. if you don't want to read about how this behavior was made jump straight down to the demo section. Behavior pros and cons The only real negative thing about behaviors is that it is an IE5 only technology but besides that it is all good. A very good thing about behaviors is that they are extremely easy to reuse and all you have to do is to add the behavior in the style declaration.

 

Key Handler
Compatibility:
Description:
Source:  http://webfx.eae.net

As you probably knows by IE4+ supports expando properties on HTML elements. This means that IE remembers all properties on an HTML element although it doesn't know what to do with them. For example one might add an attribute called overSrc to an image element that can then be used in a custom script. A much lesser known feature is the expando methods. With this you can add methods to any HTML element. I'll show you a small (stupid) example.

 

Connect Four
Compatibility:
Description:
Source:  http://webfx.eae.net

This is one of the more classic "board" games. The game is for two players and the goal of the game is to get four tokens of your own color in a row. Once one player gets four tokens in a row he wins. If the board is full the game ends in a draw. The real game board is standing up so all the tokens fall down as far as possible.

 

Dock Bars
Compatibility:
Description:
Source:  http://webfx.eae.net

The first thing to do when combining scripts is to find the conflicts. These are most often event handling conflicts but there could be name conflicts and other conflicts as well. IE5 has added a really nice solution that will remove the event handling conflict and this is done with a special method called attachEvent that takes two arguments. The first is the event name and the second is the function to call when the event occurs. In IE4 (and Navigator) you have to create a special function that replaces the event handlers and this function then calls the separate event handlers. This is the method I'll use (so this will work in IE4). But first you need to include the scripts and set the variables for the dockbar.

 

Generic Move
Compatibility:
Description:
Source:  http://webfx.eae.net

Drag and drop is one of the most common DHTML effects and now it is time for me to explain how this is done.

 

Swipe & Fade
Compatibility:
Description:
Source:  http://webfx.eae.net

The secret behind animations in DHTML are timers. By setting a timer I can update the object at a frequent interval and thus I have the basics of an animation. There are two methods to create these timers. The first is to use one single timeout and when this is done call a function that sets a new timeout. This is done with the following:

 

ScrollZoom
Compatibility:
Description:
Source:  http://webfx.eae.net

This is a sample of a new type of scroll bar that you can resize. If you ask yourself what resizing a scroll bar might mean you would probably agree that the logic meaning is that you are zooming. If the scroll bars fill up the entire width the display area should as well. By dragging the bottom of the scroll bar up the display area should be zoomed but it should still be placed at the top of the window. Below is an image that can be zoomed and scrolled using the scroll bars below and to the right of it.

 

Animator
Compatibility:
Description:
Source:  http://webfx.eae.net

This is a really powerful animator script that is based on paths.