Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Move multiple mouse events to window.onload

    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 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):
    Code:
    <!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.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Code:
    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;};
    }
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Glenn! I guess the trick is to use anonymous functions inside an anonymous function. I would never have thought of that.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    You can also use named functions but the code would be longer.
    Code:
    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;
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •