Jump to content


Photo

moving blocks with javascript


  • Please log in to reply
6 replies to this topic

#1 WebMachine

WebMachine

    Forum Newcomer

  • Members
  • Pip
  • 75 posts
  • Gender:Female
  • Location:Ontario, Canada
  • Experience:Beginner
  • Area of Expertise:Designer/Coder

Posted 12 June 2010 - 02:16 PM

I am working through the book: "Sams Teach Yourself Javascript in 24 Hours" and can't get this one to work. I changed two parts from the book to add 'px' after the top: and left: values but that didn't help. Only the left, right, up and down buttons don't work.
What am I missing?

<!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">

	<head>
		<title>Positioning Elements with JavaScript</title>
					
		<!-- link to external sheets -->
		<script type = "text/javascript" src = "script1.js"></script>
		<link rel="stylesheet" type="text/css" href="style.css" />
		
			<!-- embedded styles -->
		<style type="text/css">
			#square	{
				position: absolute;
				top: 150px;
				left: 100px;
				width: 200px;
				height: 200px;
				border: 2px solid black;
				padding: 10px;
				background-color: #e0e0e0;
			}
		</style>
		
		<script type = "text/javascript" >
		
			var x = 100, y = 150;
			
			function pos(dx, dy)	
			{
				if (document.getElementById)
				{
					return;
				}
				x += 10*dx;
				y += 10*dy;
				obj = document.getElementById("square");
				obj.style.top = y + "px";
				obj.style.left = x + "px";
			}
			
			function hideSquare()
			{
				if (!document.getElementById) 
				{
					return;
				}
				obj = document.getElementById("square");
				obj.style.display = "none";
			}
			
			function showSquare()
			{
				if (!document.getElementById) 
				{
					return;
				}
				obj = document.getElementById("square");
				obj.style.display = "block";
			}
			
		</script>
		
		
		
	</head>
	
	<body>
		<div id = "wrapper">
		
			<h1>Positioning Elements</h1>
			<hr />
						
			<form name = "form1">
				<input type = "button" name = "left" value = "<- Left" onClick = "pos(-1,0);" />
				<input type = "button" name = "right" value = "Right ->" onClick = "pos(1,0);" />
				<input type = "button" name = "up" value = "Up" onClick = "pos(0,1);" />
				<input type = "button" name = "down" value = "Down" onClick = "pos(0,-1);" />
				<input type = "button" name = "hide" value = "Hide" onClick = "hideSquare();" />
				<input type = "button" name = "show" value = "Show" onClick = "showSquare();" />			
			</form>
			<hr />
			
			<div id = "square">
				<p>
					This square is an absolutely positioned layer that you can move using the buttons above.
				</p>
			</div>
			
		</div> <!-- end of wrapper div -->
	</body>
	
</html>


#2 andy9l

andy9l

    White space enthusiast

  • Moderators
  • PipPipPipPipPip
  • 2,603 posts
  • Gender:Male
  • Location:Surrey, UK
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 12 June 2010 - 02:21 PM

You should really move on from raw JavaScript for animation. jQuery is far more up-to-date, advanced and simpler to write.
For what you're trying to do, jQuery can do in 3 lines: .animate(), .show(), .hide(). If you don't like the effects of .show() and .hide(), you can use .css("display", "block"); and .css("display", "none"); respectively.


#3 cibgraphics

cibgraphics

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,021 posts
  • Gender:Male
  • Location:Utah, USA
  • Experience:Advanced
  • Area of Expertise:Designer/Coder

Posted 12 June 2010 - 02:26 PM

Yeah, jQuery is what you should be using here.


#4 WebMachine

WebMachine

    Forum Newcomer

  • Members
  • Pip
  • 75 posts
  • Gender:Female
  • Location:Ontario, Canada
  • Experience:Beginner
  • Area of Expertise:Designer/Coder

Posted 12 June 2010 - 02:31 PM

Thank you for your replies, but I am trying to learn how to code Javascript from scratch (hence the book I am working through). It's not the end result, but the process that I am interested in. Using Jquery would definitely be better if I wanted that functionality on one of my webpages, but right now I would really appreciate it if someone could help me figure out what is wrong with my code. Thanks. :wacko:


#5 andy9l

andy9l

    White space enthusiast

  • Moderators
  • PipPipPipPipPip
  • 2,603 posts
  • Gender:Male
  • Location:Surrey, UK
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 12 June 2010 - 02:37 PM

Simples, replace your pos() function with this:

function pos(dx, dy)    
                        {
                                if (!document.getElementById)
                                {
                                        return;
                                }
                                x += 10*dx;
                                y += 10*dy;
                                obj = document.getElementById("square");
                                obj.style.top = y + "px";
                                obj.style.left = x + "px";
                        }

You were just missing the ! in the conditional statement. I would really urge you to stop with the JavaScript and get with the jQuery times at this early stage. You're not wasting time, but there's really no need for this raw JavaScript anymore.

Edit: Your up and down are the wrong way too, switch the negative ;)


#6 WebMachine

WebMachine

    Forum Newcomer

  • Members
  • Pip
  • 75 posts
  • Gender:Female
  • Location:Ontario, Canada
  • Experience:Beginner
  • Area of Expertise:Designer/Coder

Posted 12 June 2010 - 02:43 PM

Thanks! I went over it several times and missed the missing ! each time. :blush1: Problem solved.

I know I should move on, and one of my projects this summer is to fully explore the capabilities of the javascript libraries, but I want to be an expert in coding for the web (clientside and serverside) and want to practice as much as I can.


#7 andy9l

andy9l

    White space enthusiast

  • Moderators
  • PipPipPipPipPip
  • 2,603 posts
  • Gender:Male
  • Location:Surrey, UK
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 12 June 2010 - 02:52 PM

Fair enough, as long as you know there's much more advanced technology to explore! :)





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users