PDA

View Full Version : Help with JavaScript

Muffin_LA
14-07-2005, 02:17/02:17AM
Hi Everyone:

Any help would be greatly appreciated.

I have to make an image move across the page when clicked. I am able to get it to move once but I just cant figure out how to get it to move 2 more times by clicking on it.

This is my code so far:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>LWilliamson Assignment 7b</title>
<script language="JavaScript" type="text/javascript"><!--
function moveObjectTo(objectID,x,y) {
var object = document.getElementById(objectID);
object.style.left = x +'px';
object.style.top = y + 'px';
}
// -->
</script>
<style type="text/css" media="screen"><!--
#otter1 {
position: absolute;
top: 40px;
left: 30px
}

--></style>

</head>
<body>

<img id="otter1" onclick="moveObjectTo('otter1',200,200)";"moveObjectTo('otter1',30,40)"
src="otter1.jpg" height="207" width="230" border="0" alt="Otter" />
</body>
</html>

Thank you for your help.

Linda
Connie
14-07-2005, 02:31/02:31AM
Linda I don't know anything about javascript, but I'm sure you will get some help.

I'm curious why you want to do that. You may think it is cool but I doubt your visitors will. Of course that could depend on the site. You also need to consider that a percentage of surfers do not have javascript enabled on their browser.
Muffin_LA
14-07-2005, 02:36/02:36AM
Hi Connie:

I am taking a course in CSS and DHTML.. and this is one of the exercises. I have been trying to figure this out for the past week and no luck so I thought I would post a question here because I have had great answers to my questions in the past.

Thanks
Linda
Connie
14-07-2005, 02:57/02:57AM
Good for you. I'm going to move your thread to a better forum. I'm sure you will get some help.
Muffin_LA
14-07-2005, 03:00/03:00AM
Thank you very much Connie. I really wasnt sure where to post my question.

Thanks again
Linda
chrishirst
14-07-2005, 03:56/03:56AM
Not sure what you mean by "move 2 more times by clicking on it."

It can only move once because you have set the position for it, clicking again will move it again of course, but to the same position hence no visible movement (he says stating the obvious)

do you want to move it to a random position or a few pixels in one direction or another or ???
Muffin_LA
14-07-2005, 04:05/04:05AM
Hi there

What I would like to do is by clicking on the image again it will move a few pixels over and my clicking the image a fourth time it will move to fourth direction position on the screen.

I am sorry I am not very good at explaining things. This is the assignment I have to complete:


2. Make a page that has a clickable object that moves away from the mouse cursor every time the user clicks on it. Make sure the user has instructions to click on the object.

Thank you for your help.
Linda
chrishirst
14-07-2005, 05:25/05:25AM
how about a quick something that moves it randomly around the screen [limited to half the height and width].


<script type="text/javascript">
<!--
function moveObject(objectID) {
var object = document.getElementById(objectID);
var w = screen.availWidth
var h = screen.availHeight
var x = Math.random() * w/2
var y = Math.random() * h/2
object.style.left = x +'px';
object.style.top = y + 'px';
}
// -->
</script>


useage
<img id="otter1" onclick="moveObject('otter1'") ...
Muffin_LA
14-07-2005, 07:12/07:12AM
Thank you Chrishirst for taking the time to help me. I am just worried about using this because we have not learned the

var w = screen.availWidth
var h = screen.availHeight
var x = Math.random() * w/2
var y = Math.random() * h/2

Do you know of any way I can still move the picture around the page without it?

Althought I know I can find help online, I dont know how to explain this if I am asked. If you dont, thats fine I will use it and try to explain it as best as I can.

Thank you again chrishirst.

Sincerely,
Linda
Muffin_LA
15-07-2005, 02:28/02:28AM
Originally posted by chrishirst
Not sure what you mean by "move 2 more times by clicking on it."

It can only move once because you have set the position for it, clicking again will move it again of course, but to the same position hence no visible movement (he says stating the obvious)

do you want to move it to a random position or a few pixels in one direction or another or ???

In your answer you said that clicking on the image will move it again but to the same position.. I want to know how to add another position after that. This is what is stumping me.

Thanks again
Linda
rishi321us
15-07-2005, 03:13/03:13AM
Hi Muffin,

am also a learner-- just learning the basics of javascript-- -- i'll try to explain the code the way I have understood it -- may be some one more experienced will correct me if I am wrong:

code
===============
<script type="text/javascript">
<!--
function moveObject(objectID) {
var object = document.getElementById(objectID);
var w = screen.availWidth
var h = screen.availHeight
var x = Math.random() * w/2
var y = Math.random() * h/2
object.style.left = x +'px';
object.style.top = y + 'px';
}
// -->
</script>
===================

here
var W = total screen width--say 600px
var h = total screen height--say 800px

var x = Math.random() * w/2 -- now Math.random generates a random figure which is multiplied by half the width of te screen to get the value of variable x.

similarly,

var y = Math.random() * h/2
generates a random figure which is multiplied by half the height of the screen to get the value of variable x.

then, the image position is determined by taking the value of x and y in the lines
======
object.style.left = x +'px';
object.style.top = y + 'px';
=====================

now every time you call the function 'moveObject" on click-- it will generate a new random figure through MAth.random() and that will eventually create new value for x and y therefore the image will get be in a new position.


so your question ,
"I want to know how to add another position after that. This is what is stumping me. " -- is solved-- everytime you click everytime you geta new poition for the image--

unless the math.random() generates the same figure twice due to its random nature
:p -- not sure if that is possible at all.

Hope this helps you.
Muffin_LA
15-07-2005, 03:20/03:20AM
Thank you very much for your help

Yes I do understand it better now.

I am just wondering tho is there a way to make the image mulitiple times without using the :

var w = screen.availWidth
var h = screen.availHeight
var x = Math.random() * w/2
var y = Math.random() * h/2

I have been trying to add different positions to the onclick="moveObjectTo
but I cant figure out how to add the different positions so it will work.

Thanks agian rishi321us

Linda
chrishirst
15-07-2005, 06:12/06:12AM
If you have covered arrays you could use


<script type="text/javascript">
<!--
var posn = new Array(200,300,40,0);
var Curr = 0;

function moveObject(objectID) {
var object = document.getElementById(objectID);
Curr = Curr + 1;

if (Curr > posn.length - 1) {
Curr = 0}
object.style.left = posn[Curr] +'px';
object.style.top = posn[Curr] + 'px';
}
//-->
</script>
Muffin_LA
17-07-2005, 02:59/02:59AM
Thanks again for your help. I received my assignment back and got perfect (go figure.. lol).
I used the random code and the teacher commented on how good it was even tho I told him I got help with it.

Thanks and I know I will be back again for more help.:D
chrishirst
17-07-2005, 08:07/08:07AM
Congrats Linda.


It's not always about learning how to do something, It's more about learning how to find how something is done.
g1smd
17-07-2005, 13:41/01:41PM
LOL. Easiest of all.... get someone else to write it for you.


However, as long as you understand how it works, then you achieved something.
rishi321us
18-07-2005, 10:26/10:26AM
Hearty Congrats ! keep bringing your home work questions here -- would give us a good practice and here you cant go wrong with such experienced teachers like chrishirst :)