Embedded Windows in your Homepage
A documentation of two important Turboid GUI functions
In the following we want to shed further light on two important functions of the Window object (first letter upper case!) which is provided by the free Turboid framework and enables you with these two functions to make the browser show operating-system-like embedded windows in JavaScript. The functions we are talking about are Window.write() and Window.load().
Please keep in mind that the Window object has more functions than these two (namely Window.outside.load() and Window.outside.inject()).
In order to use the following extra functions, simply download the free Turboid framework and put it into the directory of your HTML file, then write this line into the head section of your HTML file, and that's it:
Window.write(title, htmContent [, x, y, w, h])
Writes an arbitrary HTML code (htmContent) into a message box, which is a customizable window being an ewinedded part of the document (not a separate browser window). Passing coordinates and width and height values is optional.
The function returns an object which contains the components of the window. You can also manipulate the title area, the content area and the close button via non-javascript CSS. You only have to set style definitions for the following CSS classes: ".winCaption", ".winCloseButton" and ".winContentArea".
Please pay attention to the fact that the first letter in Window must be upper case and is not identical to the standard JavaScript window object.
Usage example:
var win = Window.write('A nice output...', 'This is a big smiley: 
. Nice, isn\'t it?');
Window.write() returns an object which provides the following functions and properties:
[return object].resizeTo(w, h)
Changes the window dimensions. Usage example:
var win = Window.write("Greeting", "Hello!", 20, 20, 500, 500);
alert("Change dimensions?");
win.resizeTo(300, 200);
[return object].moveTo(w, h)
Changes the window position. Usage example:
var win = Window.write("Greeting", "Hello!", 20, 20, 500, 500);
alert("Change position?");
win.moveTo(700, 200);
[return object].close()
Closes the embedded window. Usage example:
var win = Window.write("Greeting", "Hello!", 20, 20, 500, 500);
alert("Close?");
win.close();
[return object].onclose
This is an event handler which fires once the user has clicked on the close button of the window. Does not fire if the window has been closed by the script instead of the user. Usage example:
var win = Window.write("Greeting", "Hello!", 20, 20, 500, 500);
win.onclose = function(){
alert("Bye!"),
};
[return object].caption
Contains the window caption as a HTML element.[return object].closeButton
Contains the window close button as a HTML element.[return object].contentArea
Contains the window content area as a HTML element.Window.load(url, title [, x, y, w, h])
Generates a window movable by mouse, containing an IFrame and showing the website specified in url.
Similar to Window.write(), the function returns an object which contains the components of the window. You can also manipulate the title area, the content area and the close button via non-javascript CSS. You only have to set style definitions for the following CSS classes: ".winCaption", ".winCloseButton" and ".winContentArea".
The embedded website can take control over this window, as long as it is located at the same domain. The other website can do this by using one of the following functions: window.close(), window.resizeTo() and window.moveTo(). Attention: The first letter is lower case in window! But this rule applies only to the loaded website!
Usage example:
var win = Window.load("http://www.turboid.net", "Turboid website", 20, 20, 500, 500);
Window.load() returns an object which provides the following functions and properties:
[return object].resizeTo(w, h)
Changes the window dimensions. Usage example:
var win = Window.load("http://www.turboid.net", "Turboid website", 20, 20, 500, 500);
alert("Change dimensions?");
win.resizeTo(300, 200);
[return object].moveTo(w, h)
Changes the window position. Usage example:
var win = Window.load("http://www.turboid.net", "Turboid website", 20, 20, 500, 500);
alert("Change position?");
win.moveTo(700, 200);
[return object].close()
Closes the embedded window. Usage example:
var win = Window.load("http://www.turboid.net", "Turboid website", 20, 20, 500, 500);
alert("Close?");
win.close();
[return object].onclose
This is an event handler which fires once the user has clicked on the close button of the window. Does not fire if the window has been closed by the script instead of the user. Usage example:
var win = Window.load("http://www.turboid.net", "Turboid website", 20, 20, 500, 500);
win.onclose = function(){
alert("Bye!");
};
Comments
Add comment: