Help with JavaScript

Page 1 of 1

3 Replies - 406 Views - Last Post: 24 February 2010 - 10:37 PM

#1 jallenscott  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 06-May 09

Help with JavaScript

Posted 22 February 2010 - 03:02 PM

Hi, I have an assignment doing something simple with javascript, but I'm lost because I can't figure out what I am doing wrong. This is the assignment. I'm using the code provided and modifying it as stated, but I cannot get the image to move. My textbook doesn't provide answers (it honestly has just 2 chapters devoted to javascript) that I can find. Here is my code, any help would be appreciated.
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- Name: John Scott-->
<!-- Description: In Class assignment for chapter 6-->
<!-- URL: http://triton.towson.edu/~jscott3/chap6.html -->
<head>
<meta http-equiv="Content-type" content='text/html; charset="iso-8859-1"'/>
<meta name="author" content="John Scott" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title> Exercise 6.2 </title>
<style type = "text/css">
/* A style for the paragraph of text */
 
   .regtext {position: absolute; top: 150px; left: 0px;
             font-family: Times; font-size: 14pt; width: 330px}
 
/* A style for the radio buttons */
 
   .buttonpos {position: absolute; top: 150px; left: 400px;
             font-family: Times; font-size: 14pt;}
 
/* A style for the image */
 
   .img {background-image: url(me.jpg); position: absolute;
         left: 0px; top: 150px; width: 100px}
</style>
 
<script language = "Javascript">
 
/* A function to move an element */
 
   function moveIt(movee, newTop, newLeft) {
 
     dom = document.getElementById(movee).style;
 
/* Change the top and left properties to perform the move */
     dom.top = newTop;
 
     dom.left = newLeft;
   }
</script>
</head>
<body>
<h2> Background Image Position Control Buttons </h2>
  
  <div class = "img"  id = "picture">
      <br/><br/><br/><br/><br/>
   </div>
 
   <div class = "regtext">
      I was born in Hagerstown,
	  Maryland on February 18, 
	  1984. I was raised by my 
	  grandparents, who still 
	  live in Hagerstown today. 
	  I met my wife when I was 19, 
	  she was 18. We dated for six
	  years before we married on May 
	  17, 2009. She currently is a 3rd 
	  year medical student at The
	  University of Maryland.
	  
 
   </div>
 
<div class = "buttonpos">
   <form name = "moveControl">
      <input type = "radio"  name = "choser"  checked = "checked"
           onclick = "moveIt('picture', 50, 0)" />
       Northwest
    <br />
 
      <input type = "radio"  name = "choser"
           onclick = "moveIt('picture', 50, 230)" />
       Northeast
    <br />
    <input type = "radio"  name = "choser"
           onclick = "moveIt('picture', 100,230)" />     
       Southeast
    <br />
    <input type = "radio"  name = "choser"
           onclick = "moveIt('picture',100, 0)" />
       Southwest
   </form>
</div>
 
</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: Help with JavaScript

#2 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 751
  • Joined: 25-October 08

Re: Help with JavaScript

Posted 22 February 2010 - 07:30 PM

Only changes I made were in following area.
/* A style for the image */
 
   .img {background-image: url(me.jpg); position: absolute;
         left: 0px; top: 150px; width: 100px;
         border:1px solid red;
         }
</style>
 
<script type="text/javascript"> <!-- archaic: language = "Javascript" -->
// From: http://www.dreamincode.net/forums/showtopic157638.htm
 
/* A function to move an element */
 
   function moveIt(movee, newTop, newLeft) {
 
     dom = document.getElementById(movee).style;
 
/* Change the top and left properties to perform the move */
     dom.top = newTop+'px';
 
     dom.left = newLeft+'px';
   }

I also put in a border and some words into the image area to see the movement.
  <div class = "img"  id = "picture">
      <br/><br/>Image<br/>To<br/>Move<br/>
   </div>

Good Luck!
:)
Was This Post Helpful? 0
  • +
  • -

#3 jallenscott  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 06-May 09

Re: Help with JavaScript

Posted 24 February 2010 - 10:33 PM

It was weird, I tried my code on chrome, firefox, and IE and on chrome and firefox it didn't work, but it worked perfect in IE. I dunno. Thanks for your help.
Was This Post Helpful? 0
  • +
  • -

#4 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 751
  • Joined: 25-October 08

Re: Help with JavaScript

Posted 24 February 2010 - 10:37 PM

View Postjallenscott, on 24 February 2010 - 09:33 PM, said:

It was weird, I tried my code on chrome, firefox, and IE and on chrome and firefox it didn't work, but it worked perfect in IE. I dunno. Thanks for your help.

Does that mean the problem is resolved or that you are still having a problem with some browsers?
Is it working to your satisfaction?
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1