Adding Javascript

From WidgetAvenue Wiki

Jump to: navigation, search

Adding Javascript to a waHTML/waJS widget is easy. Here is a basic example with a timer


Creating the source waHTML file

Create a timer.html file on your server with the following content: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
		<title></title>
	</head>
	<body>
		<div class="ldWidgetJS_timer"></div>
	</body>
</html>

This code contains a div with a special ClassName starting with ldWidgetJS which is going to trigger the execution of the timer function.

Creating the waJS file

Now, you need to create a second file to include the JS function. Create a file called js.js in the same directory as timer.html, with the following content: 

ldWidgetUid_JS['timer'] = function(elt)
{
	var timer = new Date();
	ldWidgetUid_setInnerHtml('ldWidgetJS_timer',timer.getSeconds());
	setTimeout ("ldWidgetUid_JS['timer']()",1000);
}

Building the URL to display the standalone version of the widget

Once again, the most simple option is to display the standalone version of your widget. The URL is built as follows: 

http://www.widgetavenue.com/wdg/loaders/stn.php?root=html&url=[Encoded URL of your source file]&_js=[Your js filename]

For example, if your source HTML file is located at http://myserver.com/timer.html, you will be able to display your widget at 

http://www.widgetavenue.com/wdg/loaders/stn.php?root=html&url=http%3A%2F%2Fmyserver.com%2Ftimer.html&_js=js.js

If your URL is correct, you should get something similar to this.Then, clicking on install at the bottom of the widget allows you to install it on various host platforms.

Retrieved from "http://www.widgetavenue.com/wiki/Adding_Javascript"
Personal tools