Aqua-Soft ForumsI'm working on a widget.
I need to add a function to this javascript(myscript.js)
When a user clicks any where on front on it, it loads "sound.mp3"
How is the best way to handle this and where to place it in the script.
I would appreciate the help.
var sprite;
var num = 3;
var pulserate = getSpeedDelay();
var ud = "u";
var TrnImages;
var BkImages;
var dir;
list = new Array('1.png','2.png','3.png','4.png','5.png');
widget.onshow = onshow;
widget.onremove = onremove;
function setup()
{
if(window.widget) // check to make sure running in Dashboard
{
// The preferences are retrieved:
var bf = widget.preferenceForKey(createkey("TrnImages"));
var bk = widget.preferenceForKey(createkey("BkImages"));
if (bf) {
TrnImages = bf;
} else {
TrnImages = "Cartoon01";
}
if (bk) {
BkImages = bk;
} else {
BkImages = "bg/Clouds.png";
}
}
loadup();
document.getElementById("widget").style.backgroundImage = BkImages;
setSelectors();
}
function onshow () {
if(window.widget) {
if (TrnImages == "Random") {
loadup();
}
}
}
function doAnimate(sprite) {
if(num == 4 || ud == "d") {
ud = "d";
num--;
}
if(num < 0 || ud == "u") {
ud="u";
num++;
}
// change frames
document.getElementById(sprite).src = dir + list[num];
// do it again
timerID = setTimeout("doAnimate('" + sprite + "')", pulserate);
}
function cease(sprite) {
clearTimeout(timerID);
document.getElementById(sprite).src = dir + '4.png';
num = 4;
}
function getSpeedDelay() {
obj = 40;
return obj;
}
function pickRandom(range) {
return Math.round(Math.random() * (range-1));
}
function setPref(thePref) {
if(window.widget)
{
TrnImages = thePref;
widget.setPreferenceForKey(thePref, createkey("TrnImages"));
loadup();
}
}
function createkey(key)
{
return widget.identifier + "-" + key;
}
function setSelectors() {
var theMenuItem;
if (TrnImages == "Cartoon01") theMenuItem = 0;
if (TrnImages == "Cartoon02") theMenuItem = 1;
if (TrnImages == "Cartoon03") theMenuItem = 2;
if (TrnImages == "Cartoon04") theMenuItem = 3;
if (TrnImages == "Cartoon05") theMenuItem = 4;
if (TrnImages == "Cartoon06") theMenuItem = 5;
if (TrnImages == "Cartoon07") theMenuItem = 6;
if (TrnImages == "Random") theMenuItem = 7;
document.getElementById('CartoonType').options[theMenuItem].selected = true;
if (BkImages == "url('bg/01.png')") theMenuItem = 0;
if (BkImages == "url('bg/02.png')") theMenuItem = 1;
if (BkImages == "url('bg/03.png')") theMenuItem = 2;
if (BkImages == "url('bg/04.png')") theMenuItem = 3;
if (BkImages == "none") theMenuItem = 4;
document.getElementById('bgtype').options[theMenuItem].selected = true;
}
function loadup(x) {
if(x) {
dir = x;
} else {
dir = TrnImages;
}
if(dir == "Random") {
var ic = 7;
var MnRls = new Array(ic);
MnRls[0] = "Cartoon01";
MnRls[1] = "Cartoon02";
MnRls[2] = "Cartoon03";
MnRls[3] = "Cartoon04";
MnRls[4] = "Cartoon05";
MnRls[5] = "Cartoon06";
MnRls[6] = "Cartoon07";
var choice = pickRandom(ic);
dir = MnRls[choice];
}
dir += "/";
var theSprite = document.getElementById("theSprite");
theSprite.src = dir + "4.png";
}
function bg(b) {
if(b) {
if(b!="none") b = "url('" + b + "')";
document.getElementById("widget").style.backgroundImage = b;
if(window.widget) {
widget.setPreferenceForKey(b, createkey("BkImages"));
}
}
}
function goHome() {
if (window.widget)
{
widget.openURL('http://www.mysite.com/index.php');
}
}
function onremove ()
{
if (window.widget)
{
widget.setPreferenceForKey (null, createkey("TrnImages"));
widget.setPreferenceForKey (null, createkey("BkImages"));
}
}
// HIDING AND SHOWING PREFERENCES
// showPrefs() is called when the preferences flipper is clicked upon. It freezes the front of the widget
// hides the front div, unhides the back div, then flips the widget over.
function showPrefs()
{
var front = document.getElementById("widget");
var back = document.getElementById("back");
if (window.widget)
widget.prepareForTransition("ToBack"); // freezes the widget so that you can change it without the user noticing
front.style.display="none"; // hide the front
back.style.display="block"; // show the back
if (window.widget)
setTimeout ('widget.performTransition();', 0); // and flip the widget over
document.getElementById('fliprollie').style.display = 'none'; // clean up the front side - hide the circle behind the info button
}
// hidePrefs() is called by the done button on the back side of the widget. Performs the opposite as showPrefs() does.
function hidePrefs()
{
var front = document.getElementById("widget");
var back = document.getElementById("back");
if (window.widget)
widget.prepareForTransition("ToFront"); // freezes the widget and prepares it for the flip back to the front
back.style.display="none"; // hide the back
front.style.display="block"; // show the front
if (window.widget)
setTimeout ('widget.performTransition();', 0); // and flip the widget back to the front
}
// PREFE BUTTON ANIM (fade in/out)
var flipShown = false; // a flag used to signify if the flipper is currently shown or not.
// A structure that holds information that is needed for the animation to run.
var animation = {duration:0, starttime:0, to:1.0, now:0.0, from:0.0, firstElement:null, timer:null}
// mousemove() is the event handle assigned to the onmousemove property on the front div of the widget.
// It is triggered whenever a mouse is moved within the bounds of your widget. It prepares the
// preference flipper fade and then calls animate() to performs the animation.
function mousemove (event)
{
if (!flipShown) // if the preferences flipper is not already showing...
{
if (animation.timer != null) // reset the animation timer value, in case a value was left behind
{
clearInterval (animation.timer);
animation.timer = null;
}
var starttime = (new Date).getTime() - 13; // set it back one frame
animation.duration = 500; // animation time, in ms
animation.starttime = starttime; // specify the start time
animation.firstElement = document.getElementById ('flip'); // specify the element to fade
animation.timer = setInterval ("animate();", 13); // set the animation function
animation.from = animation.now; // beginning opacity (not ness. 0)
animation.to = 1.0; // final opacity
animate(); // begin animation
flipShown = true; // mark the flipper as animated
}
}
// mouseexit() is the opposite of mousemove() in that it preps the preferences flipper
// to disappear. It adds the appropriate values to the animation data structure and sets the animation in motion.
function mouseexit (event)
{
if (flipShown)
{
// fade in the flip widget
if (animation.timer != null)
{
clearInterval (animation.timer);
animation.timer = null;
}
var starttime = (new Date).getTime() - 13;
animation.duration = 500;
animation.starttime = starttime;
animation.firstElement = document.getElementById ('flip');
animation.timer = setInterval ("animate();", 13);
animation.from = animation.now;
animation.to = 0.0;
animate();
flipShown = false;
}
}
// animate() performs the fade animation for the preferences flipper. It uses the opacity CSS property to simulate a fade.
function animate()
{
var T;
var ease;
var time = (new Date).getTime();
T = limit_3(time-animation.starttime, 0, animation.duration);
if (T >= animation.duration)
{
clearInterval (animation.timer);
animation.timer = null;
animation.now = animation.to;
}
else
{
ease = 0.5 - (0.5 * Math.cos(Math.PI * T / animation.duration));
animation.now = computeNextFloat (animation.from, animation.to, ease);
}
animation.firstElement.style.opacity = animation.now;
}
// these functions are utilities used by animate()
function limit_3 (a, b, c)
{
return a < b ? b : (a > c ? c : a);
}
function computeNextFloat (from, to, ease)
{
return from + (to - from) * ease;
}
// these functions are called when the info button itself receives onmouseover and onmouseout events
function enterflip(event)
{
document.getElementById('fliprollie').style.display = 'block';
}
function exitflip(event)
{
document.getElementById('fliprollie').style.display = 'none';
}