Following on from my article on JavaScript popup messages, I am going to try and get through my entire JavaScript library, releasing it to the public. This is a good thing all round, as I get to improve my JavaScript to bring it up to release quality, and then it gets released. 
This script file is the GUI library. Although there are many functions for dealing with the interface in other script libraries, the functions in this file are the most so, and aren't relevant to anything else.
It doesn't require any other library files, although having it as the only library file won't get you anywhere quickly, so it would be best to include my general library first, by putting the following markup in your <head> tag:
<script type="text/javascript" src="http://tecnocode.co.uk/sources/client/general.js" />The next step is obviously to include the GUI JavaScript itself, which is best left untouched, but that's by no means absolute:
<script type="text/javascript" src="http://tecnocode.co.uk/sources/client/gui.js" />Currently (January 2006), there are only three functions in the file: a function to fade things in and out, and two functions for retrieving the position of an element. These two functions aren't actually mine; credit for them must go to quirksmode.org, although I'll probably customise them in the future.
To fade an element in, you must first set its opacity to 0:
element.style.opacity=0;Then, you can use the fade_element function to gradually fade the element in:
fade_object(element.getAttribute("id"),0.1,10,true);This function call increases the opacity of the specified element ID by 0.1 (10%) every 10 milliseconds. Note that after calling this function, execution continues in the current function (i.e. the fading starts in a new thread), so if you have code after the call to fade_object which depends on the fade, you'll have to delay it somehow.
It is just as easy to fade something out: you just need to set the fourth parameter in the call to fade_object to false; this decrements the element's opacity by the specified amount at the specified frequency, instead of incrementing it. Bear in mind that you'd have to set the element's opacity to 1 before fading it out, instead of setting it to 0.
Whilst calling the JavaScript in this manner is backwards-compatible, the title of the message is just "Message", and you cannot pass DOM snippets in — only plain text can be passed as the function parameter.
The two other functions are designed to retrieve the position (left and top, respectively) of a specified element on the page.
If I wanted to find the X-position (distance from the left-hand edge of the rendering area) of an element, I'd make the following function call:
var left_distance=findPosX(element);I could do a similar thing to find the distance from the top of the rendering area:
var top_distance=findPosY(element);Now for a more technical view of the functions:
| Function declaration | Description |
|---|---|
public void fade_object(string fade_element_id,float add_opacity,int frequency,bool increasing_opacity) |
Fade the specified element in or out. This function doesn't return anything, and spawns a new thread for its execution. |
public int findPosX(dom_element obj) |
Finds the distance from the left-hand edge of the rendering area of the specified element. |
public int findPosX(dom_element obj) |
Finds the distance from the top edge of the rendering area of the specified element. |
If you do use this script, please download it and host it with your website; do not leech my bandwidth! Additionally, please follow the terms of the license to the letter.