-
help me with the codes
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"><!--
function GetKeyCode() {
alert("KeyCode is " + document.event.KeyCode);
}
document.keydown=GetKeyCode();
}
--></SCRIPT></HEAD>
<BODY>
<P> Press the key you want to know the KeyCode
</BODY></HTML>
-
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?
-
LOL
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.
-
TELL ME ABOUT DHTML AND HIS FEATERS.......
-
OK... slow down a little
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.
-
i use ie6 and i just use .left , and it works ( i dont use obj.style.left)
-
You sure?
Wow - IE6 must've changed for the better...?
That sounds good to me - are you sure?
-
im sure, its in my wwebsite code, which i see (that it works) eveerday
-
Nah
No, tried it, didn't work for me... You must have an object reference variable set beforehand? (eg: var obj=objID.style;)
-
i use it in a style sheet, would this make any diferance
-
Try this...
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.
-
Simple animation
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]
