...

View Full Version : Move multiple mouse events to window.onload



!null
05-02-2007, 02:34 AM
Hi, I am pretty new to javascript and I can't figure out the window.onload thing when trying to add multiple onclick events to elements. I have a page that functions the way I want it to here (http://richut.freehostia.com/test/) but the code is really ugly and hacked together imo.

Here's the source (I plan to seperate the javascript and css from the html later):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Panorama Test</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style>
* {padding: 0;
margin: 0;
}
body {font-family: verdana, sans-serif;
background-color: rgb(206,206,206);
padding: 10px;
}
#console {margin: 0 auto;
}
.pic_name {text-align: center;
margin: 0 auto;
font-size: 14px;
font-weight: bold;
}
#scrollpic {height: 100px;
width: 200px;
background: transparent url(compass.gif) repeat-x;
margin: 0 auto;
}
#scrollcon {
text-align: center;
padding-top: 6px;
}
button {width: 84px;
height: 32px;
border: none;
}
#btnLeft {background: transparent url(left.jpg) no-repeat top left;
}
#btnRight {background: transparent url(right.jpg) no-repeat top left;
}
#btnStop {background: transparent url(stop.jpg) no-repeat top left;
}
</style>
<script type="text/javascript">
var BGpos = 0;
var BGoffset = 4;
var speed = 50;
var timer;
var scrollpic;
var btnLeft;
var btnRight;
function goLeft() {
clearTimeout(timer);
scrollpic = document.getElementById("scrollpic");
btnRight = document.getElementById("btnRight");
btnRight.style.backgroundPosition = "0 0";
btnLeft = document.getElementById("btnLeft");
btnLeft.style.backgroundPosition = "-84px 0";
BGpos += BGoffset;
if (BGpos == 1000) {
BGpos = 0;
}
scrollpic.style.backgroundPosition = BGpos + "px 0";
timer = setTimeout('goLeft();',speed);
}
function goRight() {
clearTimeout(timer);
scrollpic = document.getElementById("scrollpic");
btnRight = document.getElementById("btnRight");
btnRight.style.backgroundPosition = "-84px 0";
btnLeft = document.getElementById("btnLeft");
btnLeft.style.backgroundPosition = "0 0";
BGpos -= BGoffset;
if (BGpos == 1000) {
BGpos = 0;
}
scrollpic.style.backgroundPosition = BGpos + "px 0";
timer = setTimeout('goRight();',speed);
}
function stopBtn() {
clearTimeout(timer);
btnLeft = document.getElementById("btnLeft");
btnLeft.style.backgroundPosition = "0 0";
btnRight = document.getElementById("btnRight");
btnRight.style.backgroundPosition = "0 0";
}
</script>
</head>
<body>
<div id="wrap">
<p class="pic_name">Image Title Here</p>
<div id="console">
<div id="scrollpic">
</div>
<div id="scrollcon">
<button id="btnLeft" onclick="goLeft(); return false;"></button>
<button id="btnStop" onMouseUp="this.style.backgroundPosition='0 0';" onMouseDown="this.style.backgroundPosition='-84px 0'; "onclick="stopBtn(); return false;"></button>
<button id="btnRight" onclick="goRight(); return false;"></button>
</div>
</div>
</div>
</body>
</html>
So, what I have been trying to do is make a function that sets the variables scrollpic, btnLeft, and btnRight (and add one for the stop button) AND assign their respective mouse events so I can remove onclick etc. from the html buttons. And call this function from the window.onload event. Whenever I have got an onclick function working without the script in the button tag it starts as soon as the page loads and then never works again. Any help is greatly appreciated.

glenngv
05-02-2007, 05:37 AM
window.onload = function(){
scrollpic = document.getElementById("scrollpic");
btnRight = document.getElementById("btnRight");
btnLeft = document.getElementById("btnLeft");
btnStop = document.getElementById("btnStop");
btnRight.onclick = function(){goRight(); return false;};
btnLeft.onclick = function(){goLeft(); return false;};
btnStop.onclick = function(){stopBtn(); return false;};
}

!null
05-02-2007, 06:22 AM
Thanks Glenn! I guess the trick is to use anonymous functions inside an anonymous function. I would never have thought of that.

glenngv
05-02-2007, 04:18 PM
You can also use named functions but the code would be longer.

function init(){
scrollpic = document.getElementById("scrollpic");
btnRight = document.getElementById("btnRight");
btnLeft = document.getElementById("btnLeft");
btnStop = document.getElementById("btnStop");
btnRight.onclick = goRightFunc;
btnLeft.onclick = goLeftFunc;
btnStop.onclick = stopBtnFunc;
}

function goRightFunc(){
goRight();
return false;
}

function goLeftFunc(){
goLeft();
return false;
}

function stopBtnFunc(){
stopBtn();
return false;
}
window.onload = init;



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum