lawrence wrote:[color=blue]
> Sorry for the dumb question but I'm new to Javascript. I
> wrote this script hoping to animate some div blocks on a
> page. You can see the page here:
http://www.keymedia.biz/demo.htm[/color]
If you are trying to write javascript you should look into error
reporting in your browser:-
<URL:
http://jibbering.com/faq/#FAQ4_43 >
[color=blue]
> Can anyone tell me why these DIVs don't drift to the left
> as they are supposed to?[/color]
Probably.
[color=blue]
> <script language="javascript">[/color]
In HTML 4.01 the language attribute is deprecated and the type attribute
is required (making any additional language attribute redundant
anyway):-
<script type="text/javascript">
[color=blue]
> var allDivs = new array();
> allDivs[] = "todd1";[/color]
That line represents a syntax error as the property accessor to which
the string value is being assigned does not feature an expression
between the square brackets. as you are constructing an array that
expression would normally be a number literal or a variable that has
been assigned a numeric value.
However, an array of string literals would usualy be more efficiently
constructed with an Array literal:-
var allDivs = [
"todd1";,"todd2","todd3",
"todd4","todd5","todd6",
"todd7",
// etc. ...
"todd40"
];
But, as has already been pointed out, when code become repetitive to
that extent (the only difference being a numeric suffix that is
sequential) there is potential for reducing the code to a loop with a
body acting on the loop counter, or calling a parameterised function.
<snip>[color=blue]
> allDivs[] = "todd40";
>
> var thisDiv = "";
> var howFarLeft = 0;[/color]
Do either - thisDiv - or - howFarLeft - need to be global variables. as
they are only used within one function body they probably should be
function local variables (declared with the - var - keyword inside the
function body; usually at the top of the body (by convention)). It is
usually best to never give any variable more scope than it absolutely
needs.
[color=blue]
>
> function moveDivs() {
> for (i=0; i < count(allDivs); i++) {[/color]
The function - count - is not defined within your code, and is not a
global function either in ECMAScript or browser object models. However,
array objects have a - length - property that represents the total
number of elements assigned to the array. You probably want:-
Though you could also:-
for (var c=0; c < allDivs.length; c++) {
...
}
- without any impact on the process except that the code would work
through the array in the reverse order.
for (var c=allDivs.length; c--;) {
...
}
Also, notice that I am using the - var - keyword again here. Your use
of - i - effectivly creates - i - as a global variable, which makes its
use marginally less efficient but also give it more scope than it needs.
It is exactly this type of action that justifies the proposal that
variables should never be given more scope than they need. Suppose you
use a similar - i - loop counter in a number of functions, and allow
that variable to escape into the global scope, and then consider what
happens when one of these loops calls a function that employs any loop
using the same - i - global variable. When the called function returns
the value of - i - is not what you expect it to be as its value will
have been re-set from within the called function. The types of bug that
follow form this can be difficult to identify, yet they can be avoided
entirely by the application of an appropriate discipline to the
authoring of code.
[color=blue]
> thisDiv = allDivs[i];
> document.getElementById(thisDiv).style.visibility= 'visible';
> howFarLeft = document.getElementById(thisDiv).style.left;[/color]
The - style - property of an Html element represent the values assigned
with that element's STYLE attribute. In the HTML you are assigning
values along the lines of - left:400px - within the STYLE attribute, and
when you read these values back you will get, for the value of -
style.left -, string values that correspond with the contents of the
style attribute (assuming the CSS is valid). Thus the preceding
operation is returning a string along the lines of "400px".
[color=blue]
> if (thisDiv == "todd1") howFarLeft = howFarLeft - 1;[/color]
The subtraction operator can only meaningfully act on numeric values and
loosely-typed javascript will accommodate this by type-converting the
value of - howFarLeft - into a number. It will use the type-converting
rules and because the string value has "px" on the end the result will
always be NaN (the special Not a Number numeric value). NaN - 1 is NaN.
assigning NaN to a style property will either produce an error or be
ineffective, depending on the browser.
The parseInt and parseFloat function both work by attempting to
interpret string values as numbers up until the point where the result
could no longer represent a number. As a result, if - parseInt("400px",
10); - was used the number returned would be the integer - 400 -. This
is often found useful in the interrogating of - style - properties,
assuming that the units are "px" and not something like "em".
Also, when a value is assigned to a property of the - style - object the
value assigned is expected to conform with the rules for valid CSS (at
least, some browsers will ignore the action if they do not). Valid
non-zero CSS length values are expected to include the type of units, so
you would normally append the string "px" to the value (e.g. -
x.style.length = (y -1) + "px";) to have any numeric value converted to
a string and "px" added to its end.
[color=blue]
> if (thisDiv == "todd2") howFarLeft = howFarLeft - 1;[/color]
<snip>
It is impossible for - thisDiv - to equal "todd2" at the same time as it
equals "todd1" (or any other value). This fact makes all of these - if -
statements mutually exclusive, and that makes it inefficient to evaluate
all of them. An - if( .... ){ ... }else if( ... ){ ... } - construct
would better represent the mutually exclusive nature of the sequence of
statements, and would be more efficient as it would stop testing as soon
as any - if - expression evaluated as true.
However, long blocks of - if/else -, where a single variable values is
tested against a sequence of constant values is exactly the
circumstances for which the - switch - statement exists. Though, if a
clear relationship existed between the numeric suffix on the ID string
and the value by which the DIV was to be moved, neither construct would
be needed as the code could be reduced to a parameterised function call
Richard.
