help me with the codes

**merhaba** · Sep 24th, 2002, 09:43 AM

Hello there,
I wanted to move an image or an object accross the page(screen)...but I think I have some problem in getting it work..If anyone can help me with the following codes..iwill be happy...Whats wrong with the codes below...please tell me where to put codes...image..object..because I am new to Javascript language..give me an example that works.......yours

If have to be a specific key to activate the motion, modify this:
PHP:

function MovingObject(ObjectToMove) {

if(document.event.KeyCode == 13) { //This makes the ENTER key activate the motion

ObjectToMove.scrLeft=left;

ObjectToMove.scrTop=top;

setTimeOut(delay,"Moving(ObjectToMove)");

}

}

For other keys you have to figure out the KeyCode.
I can do this way:
PHP:

<HTML><HEAD><SCRIPT language="JavaScript"></SCRIPT></HEAD>

<BODY>

<P> Press the key you want to know the KeyCode

</BODY></HTML>

**Mushroom Realm** · Sep 25th, 2002, 05:54 PM

u never coded it to make them move. u have to increment the .left property:

ObjectToMove.scrLeft = objecttomeve.scrleft + 1

y not just use .left instead of .scrleft?

**trojjer** · Sep 27th, 2002, 08:42 PM

Yeah, "obj.left" works....

What is with the "Vendetta" against IE in this forum...? It isn't that bad, especially now with IE6...

P.S: For IE, use obj.style.left - not like you'd want to know or anything lol...

P.P.S: To make animation happen, you need a For loop or whatever you want, to continously increment the left and/or top positions.

**Sharp** · Sep 28th, 2002, 03:14 AM

TELL ME ABOUT DHTML AND HIS FEATERS.......

**trojjer** · Sep 28th, 2002, 10:50 PM

LOL - righty-ho!

Did you check out my site link there? Anyway, I can give you a good tutorial, here: http://hotwired.lycos.com/webmonkey/.../dynamic_html/

The site has lots of other good language tutorials too, for advanced/intermediate/beginner level.

**Mushroom Realm** · Sep 30th, 2002, 05:35 PM

i use ie6 and i just use .left , and it works ( i dont use obj.style.left)

**trojjer** · Oct 1st, 2002, 02:47 AM

Wow - IE6 must've changed for the better...?

That sounds good to me - are you sure?

**Mushroom Realm** · Oct 1st, 2002, 05:41 PM

im sure, its in my wwebsite code, which i see (that it works) eveerday

**trojjer** · Oct 2nd, 2002, 02:47 AM

No, tried it, didn't work for me... You must have an object reference variable set beforehand? (eg: var obj=objID.style;)

**Mushroom Realm** · Oct 2nd, 2002, 05:44 PM

i use it in a style sheet, would this make any diferance

**trojjer** · Oct 3rd, 2002, 02:54 AM

Assuming the document.event.keycode works correctly (it should - I think - a bit rusty on those...), the only potential problem is how IE works its "charm", by not automatically assigning <style> rules from the HTML <head>, so that they can be accessed via the ID.

There are two ways to rectify this:

1) Do it the "easy", less hassle way. All you gotta do is inline those rules, by usin' style="" inline in the corresponding tag. EG: <div id="egAnimation" style="left:25px;">

2) Use this code:

Code:

<script language="javascript"><!--
function assignRules(objID) {
for (ss=0; ss<document.styleSheets.length; ss++) { //loops through stylesheets
for (r=0; r<document.styleSheets[ss].rules.length; r++) { //loops through current SS rules
var currentRule=document.styleSheets[ss].rules[r]; var currentID=currentRule.selectorText;
currentID=currentID.substr(1,currentID.length-1); //gets rid of "#" or "."
if(currentID==objID) {return currentRule.style;}}}}

This cycles through the stylesheets and their rules.

EG: To access the stylesheet assigned rules for the HTML element with the ID of test, use var objTest=assignRules("test"); in the code. You can then treat the reference var as if the styles were inlined on the page, and the presentation remains seperate from the content.

P.S: You should also be able to refer variables to class stylesheet rules - just make sure that you have unique IDs and class names.

**trojjer** · Oct 4th, 2002, 03:28 PM

Right, once you've done all that (I recommend just saving the javascript as an include file, then using the <script> tag's src property, or SSI), simple animation using looping etc is quite easy to achieve... For example:

Code:

<html><head><title>DHTML Test</title>
<style><!--
#car {position:absolute; left:50px; top:50px}
--></style>

<script language="javascript"><!--
function assignRules(objID) {
for (ss=0; ss<document.styleSheets.length; ss++) { //loops through StyleSheets
for (r=0; r<document.styleSheets[ss].rules.length; r++) { //loops through current SS rules
var currentRule=document.styleSheets[ss].rules[r]; var currentID=currentRule.selectorText;
currentID=currentID.substr(1,currentID.length-1); //gets rid of "#" or "."
if(currentID==objID) return currentRule.style;}}}

function correctRefVar(objID) {var objRef;
if(document.all) {objRef=assignRules(objID);} //(IE) - use the function above
else if(document.layers) {objRef=document.layers[objID];} //(NN) - document.layers element
return objRef;} //return the style object matching the element ID

//the move function
var animation;
function slide(objID,destX,destY,incX,incY) {
var objRule=correctRefVar(objID); //get rule object for ID
var leftX=(document.all) ? parseInt(objRule.left) : objRule.left; //browser conditions for X pos
if(leftX<destX) objRule.left=leftX+incX; //move incX from left
var topY=(document.all) ? parseInt(objRule.top) : objRule.top; //browser conditions for Y pos
if(topY<destY) objRule.top=topY+incY; //move incY from top

if(leftX<destX || topY<destY) {
animation=setTimeout("slide('"+objID+"',"+destX+","+destY+","+incX+","+incY+");",10);}
else {clearTimeout(animation);}} //stop the animation

//detects whether the Enter key is pressed, if so then call slide()
function getKey() {var key=(this.event.keyCode) ? this.event.keyCode : this.event.which;
if(key==13) slide("car",400,300,5,5);} 

//"pops" event bubbles in IE (only necessary when there are more than one element in the page body
that use the onKeyDown event handler - otherwise,
the "bubbling" would cause every press of the [Enter] key, in a textarea for example, to set off the animation...
Simply call this function from the handler, just before you close it off):
function popBubble() {this.event.cancelBubble=true;} //--></script></head>
<body onkeypress="getKey();">
<img src="theURL/images/car.gif" id="car" width="50" height="50">
</body></html>

Right - it definitely works properly on IE... someone check how this script does on NN please - I wonder if all those conditionals I used paid off...

Walkthrough of script

[list=1][*]When [Enter] is pressed, the Body's onKeyPress handler calls the getKey() function, which then executes slide().[*]The slide() function is the meat of the (relatively simple) script. When called, it's parameters are:
* objID - The element ID, of the object to be animated. (This was the only way I could use the setTimeout/Interval functions, to contionuously execute the function with the variables passed on - you can't, for whatever reason, use the object itself.)
* destX - the destination X co-ordinate
* destY - the destination Y co-ord
* incX - amount (usually pixels) that the image moves along the X axis, each "frame"
* incY - same as above, but with Y axis[*] The rest is pretty much simplistic to understand; just follow the comments...[/list=1]

Thread: help me with the codes

Thread Tools

Display

help me with the codes

LOL

OK... slow down a little

You sure?

Nah

Try this...

Simple animation

Posting Permissions