|
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 |
|
|
|
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. |
|
|
|
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. |
|
|
|
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. |
|
|
|
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.
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
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:
|
|
|
|
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.
|
|
|
|
Compatibility:
|
Description: |
Source:
http://webfx.eae.net |
This is a really powerful animator script that
is based on paths.
|
|
|