Transparency reference manual

Description & features

This JavaScript mini library purpose is provide a simple interface for transparency supporting browsers. The provided functions allow gradual fade-in, fade-out and consistent setting of transparency of any visual object defined on a webpage. They can be easily used in any JavaScript code.

Simple interface for settings transparency of objects regardless of browser used to view the page
Possibility to gradually fade-in or fade-out of visual objects by a simple call of one function
The speed of fading can be set up
More objects can fade in or out at the same time, each at different speed

Public variables

transparencySupported

This boolean variable signals whether transparency is supported in the current browser or not. Checking this variable the script can adapt its run and behave better/differently in browsers not supporting transparency.

Other variables are defined in the library. Their usage outside the library is not advised tough as it my compromise the correct behavior of the functions.

Public procedures

function identifyTransparency

Paremeters:

none

This function must be called in the <BODY> section of the page before any of the other functions are used. Its purpose is to identify browser transparency support. It's recommended to call the function immediately after the <BODY> tag. The only legit way to omit this function and allow the library to work correctly is to call the identifyTransparencyOnObject function instead.

For identification purposes a hidden <SAN> object is created, that should not interfere anyhow with any other objects on the page.

function identifyTransparencyOnObject

Paremeters:

in_Obj – a visual object of the page on which the transparency will be identified

This function can be called instead of identifyTransparency function to detect transparency support of the user's browser. Similarly as the above mentioned function it must be called before any other transparency function (or the transparencySupported variable) is used but after the object it should be used on was defined.

It's advantage is no hidden <SPAN> object is created. On the other hand the object passed in has to have some special attributes. The object has to have the following inline style specification:

style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);opacity:1;-moz-opacity:1;-khtml-opacity:1;"

The style has to be defined in the style attribute of the object, not by standard style either internal in the html file nor external (for some strange reason some browsers then fail to return transparency style correctly).

function fadeIn

in_Obj – the object to fade-in
in_CrossfadeDuration – the duration length of fade-in effect (integer, milliseconds)
[in_FinishedProc] (optional) – a procedure that is called after the fade-in process is finished; to the function when called one parameter is passed - the object that was just fade-out; if omitted no function is called at the end
[in_StartOpacity] (optional) – opacity level of the object to start the fade-in at 0..transparent, 1..fuly opaque (doesn't make sense in this case); if omitted defaults to zero

This function makes the visual object on the web to fade-in during the time specified in the second parameter. The process start by setting the opacity of the object to the initial value and then gradually becoming more and more opaque. Finally the object is 100% opaque and the function passed as the third parameter is called (if this was specified). The function is provided with one parameter - the object, that was fading-in.

function fadeOut

in_Obj – the object to fade-out
in_CrossfadeDuration – the duration length of fade-in effect (integer, milliseconds)
[in_FinishedProc] (optional) – a procedure that is called after the fade-out process is finished; to the function when called one parameter is passed - the object that just fade-out; if omitted no function is called at the end
[in_StartOpacity] (optional) – opacity level of the object to start the fade-out at 0..transparent (doesn't make sense in this case); 1..fuly opaque if omitted defaults to 1

This function is almost identical to fadeIn only that the object instead of gradually appearing gradually disappears.

In this case a good example of the finishing function is to set the object style to 'none' avoiding the possibility to select it (strange to select an invisible object):

function fadeOutFinished(in_Obj) {

in_Obj.style.display = 'none';

}

</SCRIPT>

function setOpacity

Paremeters:

in_Obj – object to set the opacity of
in_Opacity – the opacity level to be set; areal number from interval <0..>, where 0..transparent, 1..fuly opaque

This function directly changes the opacity of a visual object on the page. In case transparency is not supported in the browser setting an object's opacity to 0 makes it invisible, while setting it to anything greater then 0 makes it fully visible. As both fadeIn and fadeOut functions use this function, hence the limited functionality in transparency not supporting browsers - instead of gradually appearing or disappearing the simply pop-in or out.

There are other functions in the library with names starting with “_”. They are not intended to be called from outside the library.

Usage

Call the identifyTransparency function immediately after the beginning of <BODY> part of the webpage.
Use the fadeIn, fadeOut, setOpacity function anywhere on the page further or in the events fired on the page.

Example:

...

fadeIn(in_Obj,5000);

}
//-->
</script>
</head>

<body onload="javascript:fadeOut(document.getElementById('MyDiv'),10000,objectFadedOut,0.9)">
<script language="JavaScript" type="text/javascript">

</script>
<div id="MyDiv">Hello world</div>
...

Alternatively

Define an object with inline style setting inlcuding the following values:
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);opacity:1;-moz-opacity:1;-khtml-opacity:1;
Call the identifyTransparencyOnObject function passing the above defined object as the only parameter (preferably right after the object definition).
Use the fadeIn, fadeOut, setOpacity function anywhere on the page further or in the events fired on the page.

Example:

</head>

...

Compatibility

Compatible

Internet Explorer 5 +

Firefox
Mozilla
Opera 9+
Netscape 6+
Safari
Konqueror

Limited compatibility

(no cross fade, no partial transparency only visible/invisible)

Internet Explorer 4
Opera prior to version 9

Tested on

Firefox 2.0
Internet Explorer 6.0
Internet Explorer 7.0
Mozilla 1.7
Opera 9.10
Opera 8.54

Incompatible

Internet Explorer prior to version 4
Netscape Navigator up to version 4 (4 included)

The compatibility with other browsers depend whether they support DOM and opacity.

Version history

1.0

12.II.2007

The first version released

Credits

The library was created by 8 Dimensions. Go to www.8dimensions.com to see more.