Remember blink, the dreaded tag that Netscape brought us? It's back! In IE5 using behaviors!

This is my first behavior script and I thought that it would be nice (and easy) to do a blink.

First I realized what needed to be done to mimic the blinking. All I had to do was to toggle the visibility property, between visible and hidden, at an interval. The code for this is really simple! Here it is:


window.setInterval("blink(idOfMyElement)", 500);

function blink(element) {
	element.style.visibility = (element.style.visibility == "visible") ? "hidden" : "visible";
}

This function could be loaded as the body loaded but since I was making a behavior I added the inline style="behavior: url('blink.htc')" and started writing my html component file (htc). The htc file is an XML file that includes a script (Javascript, VB script or any other script). The htc file look like this:

<public:component>

<public:property name="propertyName" value="defaultValue"/>
<public:method name="methodName"/>
<public:attach event="eventName" onevent="onEventHandler()"/>

<script language="JScript">
</script>

</public:component>

Remember that the tags that doesn't have a closing tag should end with /> as the XML standard.

I decided that I wanted one property called msec that is the time between each change and two methods; one called pause and one called blink that manually made the change. Now the XML scriptlet looks like this:

<public:component>

<public:property name="msec" value="500"/>
<public:method name="blink"/>
<public:method name="pause"/>
<public:attach event="oncontentready" onevent="initBlink()"/>
<public:attach event="onpropertychange" onevent="checkProperty()"/>

<script language="JScript">
</script>
</public:component>

Now is the time for the scripting! I first added an event handler to the oncontentready event. This event is fired as soon as it is safe to script the element. This is usually the best position to hook up any initialization routines. The initBlink checks the visibility value to make sure that it got a value (if null then set to visible). After that it starts an interval that calls blink every msec millisecnods. Then it sets a flag to indicate that the blink has started (not paused).

function initBlink() {
   if (element.style.visibilty == null)
      element.style.visibility = "visible";
   blinkInterval = window.setInterval(element.uniqueID + ".blink()", msec);
   paused = false;
}

The uniqueID is new for IE5 and it makes sure that the element gets an unique id (if there is none in the tag it adds one). The element object is the element the behavior is working with and it can be omitted! I also changed the blink function a little to check for the paused flag and fix the unique id issue.

function blink() {
	element.style.visibility = (element.style.visibility == "visible") ? "hidden" : "visible";
}

Now there is only the pause method left. It checks the paused flag and negates it and if it was paused it starts the blinking again. It also clears the timeout when pausing to prevent an extra change of state.

function pause() {
   if (paused)
      blinkTimeout = window.setTimeout(element.uniqueID + ".blink()", msec);
   else
      window.clearTimeout(blinkTimeout);
   paused = !paused;
}

All done! View the entire source of blink.htc.

Now I moved the inline style to the head and enclosed the container with my custom tag <BLINK>. In the style definition I wrote:

<style type="text/css">

blink	{behavior: url(blink.htc);}

</style>

...and I'm all done. Try the example below:

One more thing (added when cleaning this up for IE5 final (way too late). I added a listener for onpropertychange. This event is fired every time a property changes. The event object used in this event has a property called propertyName that returns the name of the property that changed. If the changed property was "msec" we pause and start the blink to update the new speed of the blinking.

function checkProperty() {
   if (event.propertyName == "msec") {
      element.pause();	// stops it or starts it
      element.pause();	// starts it or stops it
   }
}

This is som text. This is some blinking text. This is some more text.


Author: Erik Arvidsson