keith28 Posted February 9, 2006 Share Posted February 9, 2006 I'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.[code]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) // always check to make sure that you are 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, and 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. It performs the opposite transition// 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}// PREFERENCE BUTTON ANIMATION (- the pref flipper 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 eventsfunction enterflip(event){ document.getElementById('fliprollie').style.display = 'block';}function exitflip(event){ document.getElementById('fliprollie').style.display = 'none';}[/code] Quote Link to comment Share on other sites More sharing options...
keith28 Posted February 10, 2006 Author Share Posted February 10, 2006 Can anyone give me a hand with this? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.