document.write - CSS problem??

M

marco

Hi,

I'm a Javascript Newby. But that doesn't discourage me at all.
At this time I'm working on a little javascript-gimmick.

A white browser page filled with white (invissible for the viewer)
text. Every white text character has in case of a MouseOver an other
(randomly given) change cursor of one of the 15 different browser
cursors).


I found some example scripts to change the cursor and tried to
incoporate them with a text character generating loop and the
document.write function. But somehow it doesn't work like it should
be. I think that problem is that I can't get the the Java Script and
the CSS working properly together.

Anyone have some ideas or comments ?

Thanks!

here is the code where I'm working on

<head>
<title>Cursor Test Page</title>
<style type="text/css">
a.crosshair {cursor: crosshair;}
a.default {cursor: default;}
a.eastresize {cursor: e-resize;}
a.help {cursor: help;}
a.move {cursor: move;}
a.northresize {cursor: n-resize;}
a.northeastresize {cursor: ne-resize;}
a.northwestresize {cursor: nw-resize;}
a.pointer {cursor: pointer;}
a.southresize {cursor: s-resize;}
a.southeastresize {cursor: se-resize;}
a.southwestresize {cursor: sw-resize;}
a.text {cursor: text;}
a.westresize {cursor: w-resize;}
a.wait {cursor: wait;}
</style>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
var x = 0;
var cursorArray = new Array ();
cursorArray[0]= "crosshair" ;
cursorArray[1]= "default" ;
cursorArray[2]= "e-resize" ;
cursorArray[3]= "help" ;
cursorArray[4]= "move" ;
cursorArray[5]= "n-resize" ;
cursorArray[6]= "ne-resize" ;
cursorArray[7]= "nw-resize" ;
cursorArray[8]= "pointer" ;
cursorArray[9]= "s-resize" ;
cursorArray[10]= "se-resize" ;
cursorArray[11]= "sw-resize" ;
cursorArray[12]= "text" ;
cursorArray[13]= "w-resize" ;
cursorArray[14]= "wait" ;

do {
var R = Math.floor(math.random() *15);
document.write("<a href="test" class=" + cursorArray[R] + ">A</a>");
x = x+1;
} while (x<900)
//-->
</SCRIPT>
</head>
 
H

Harag

Hi,

I'm a Javascript Newby. But that doesn't discourage me at all.
At this time I'm working on a little javascript-gimmick.

A white browser page filled with white (invissible for the viewer)
text. Every white text character has in case of a MouseOver an other
(randomly given) change cursor of one of the 15 different browser
cursors).


I found some example scripts to change the cursor and tried to
incoporate them with a text character generating loop and the
document.write function. But somehow it doesn't work like it should
be. I think that problem is that I can't get the the Java Script and
the CSS working properly together.

Anyone have some ideas or comments ?
Click to expand...

ok, heres my comments....

Thanks!

here is the code where I'm working on

<head>
<title>Cursor Test Page</title>
<style type="text/css">
a.crosshair {cursor: crosshair;}
a.default {cursor: default;}
a.eastresize {cursor: e-resize;}
a.help {cursor: help;}
a.move {cursor: move;}
a.northresize {cursor: n-resize;}
a.northeastresize {cursor: ne-resize;}
a.northwestresize {cursor: nw-resize;}
a.pointer {cursor: pointer;}
a.southresize {cursor: s-resize;}
a.southeastresize {cursor: se-resize;}
a.southwestresize {cursor: sw-resize;}
a.text {cursor: text;}
a.westresize {cursor: w-resize;}
a.wait {cursor: wait;}
</style>
<SCRIPT LANGUAGE="JAVASCRIPT">
Click to expand...


don't use LANGUAGE="JAVASCRIPT" use type="text/javascript" and best
to do the tag in lowercase

<script type="text/javascript">


<!--
Click to expand...

commenting out your script isn't really needed these days, most people
(if not all) ain't using old browsers.
var x = 0;
var cursorArray = new Array ();
cursorArray[0]= "crosshair" ;
cursorArray[1]= "default" ;
cursorArray[2]= "e-resize" ;
cursorArray[3]= "help" ;
cursorArray[4]= "move" ;
cursorArray[5]= "n-resize" ;
cursorArray[6]= "ne-resize" ;
cursorArray[7]= "nw-resize" ;
cursorArray[8]= "pointer" ;
cursorArray[9]= "s-resize" ;
cursorArray[10]= "se-resize" ;
cursorArray[11]= "sw-resize" ;
cursorArray[12]= "text" ;
cursorArray[13]= "w-resize" ;
cursorArray[14]= "wait" ;
Click to expand...

Make sure your stings above match the CSS classnames... (which they
dont in alot of the cases

eg
CSS = a.southeastresize
JS = cursorArray[10]= "se-resize" ;

Not the same names...

do {
var R = Math.floor(math.random() *15);
Click to expand...

math.random() is wrong should be
Math.random() - note the capital M.

document.write("<a href="test" class=" + cursorArray[R] + ">A</a>");
Click to expand...

I have always found it best to use single quotes for strings in
javascript and double quotes for HTML eg

document.write('<a href="test" class="' + cursorArray[R] + '">A</a>');

note that after class= that is a double quote followed by a single
quote, always put double quotes around HTML values. eg:

x = x+1;
Click to expand...


for adding 1 to variables in javascript use

x++

others you can use are

x += 1
x -= 1
x *= 3

etc



} while (x<900)
Click to expand...

spaces makes code easier to read

while (x < 900)
//-->
Click to expand...

again, no real need to comment out
</SCRIPT>
Click to expand...

again, lowercase
</head>
Click to expand...


If your learning by a good book, I recommend the following:

Javascript: The Definitive guide
by David Flanagan
publisher: O'Reilly
ISBN: 0-596-00048-0


HTH

Al
 
B

Blue Raja

Not to be outdone by Howard Dean, Harag bellowed
(e-mail address removed):
for adding 1 to variables in javascript use

x++
Click to expand...

The unary increment is quite handy. IMO it looks neater too.
Does Javascript support pre-use unary increment/decrement, eg ++i?
others you can use are

x += 1
x -= 1
x *= 3
Click to expand...

Which are equivalant to
x = x + 1
x = x - 1
x = x * 3
respectively, in case the OP isn't familiar with the notation.

I also like the alternate condition statement
<boolean_exp> ? <true_action> : <false_action>;
which is equivalent to
if (<boolean_exp>) <true_action>; else <false_action>;
 
M

Michael Winter

[snip]
I think that problem is that I can't get the the Java Script and
the CSS working properly together.

Anyone have some ideas or comments ?
Click to expand...

[snipped code]

In addition to Harag's comments, it should also be noted that your script
will produce invalid HTML. Once the script has executed, the HEAD block of
the document will contain 900 A elements. I shouldn't need to tell you
that A elements cannot occur within HEAD. The simplest solution is to move
the SCRIPT block into a block-level element (DIV, P, etc) inside the
document BODY. The alternative is to wrap the script in a function and
call that function from within a SCRIPT placed inside a block-level
element. That is:

<!-- HTML and DOCTYPE -->
<head>
<script type="text/javascript">
function myFunction() {
// ... Your script ...
}
</script>
</head>

<body>
<div>
<script type="text/javascript">
myFunction();
</script>
</div>
<!-- Remaining document -->

Mike
 
M

Michael Winter

Not to be outdone by Howard Dean, Harag bellowed
(e-mail address removed):
[snip]
x++
Click to expand...

The unary increment is quite handy. IMO it looks neater too.
Does Javascript support pre-use unary increment/decrement, eg ++i?
Click to expand...

Yes, JavaScript supports both pre- and post-increment/decrement.

[snip]
I also like the alternate condition statement
<boolean_exp> ? <true_action> : <false_action>;
which is equivalent to
if (<boolean_exp>) <true_action>; else <false_action>;
Click to expand...

I would argue that it should be used sparingly, though. I've seen examples
where several conditional operators are used nested, and with no
parentheses. It quickly becomes unreadable without careful formatting.
That said, it certainly can be very useful.

Mike
 
M

marco

If your learning by a good book, I recommend the following:

Javascript: The Definitive guide
by David Flanagan
publisher: O'Reilly
ISBN: 0-596-00048-0


HTH

Al
Click to expand...

Hahahahaha.
Guess what I just bought in the bookstore some 10 minutes ago!
Thanks, I'll take a look at your comments and see if I (with the new
O'Reilly in my possession) can work it out.
 
T

Thomas 'PointedEars' Lahn

Harag said:
commenting out your script isn't really needed these days, most people
(if not all) ain't using old browsers.
Click to expand...

s/old/this broken/

The "script" element was introduced in HTML 3.2 and its predecessor,
HTML 2.0, has been marked obsolete. So only borken UAs will display
the content of this element.


PointedEars
 
M

marco

OK. It works!! :)

The main problem was the quote issue.
I needed an extra set of quotes in the -- class=" + cursorArray[R] +
"-- part.
Now it is like this: -- class="' + cursorArray[R] + '" And it works
fine.
Indeed it is a good advice to use the double quotes for distincting
the HTML and the single quotes for the JavaScript strings. It's saves
a lot of problems.

Thanks a lot

Marco
 
M

marco

Yes you're right. I wasn't at that point yet. The idea was to put the
text characters in a layer (<div>) so I can also can choose the
dimensions and coordinates. Now the script is actually doing something
I'm going to clean it up.
I shouldn't need to tell you that A elements cannot occur within HEAD.
Click to expand...

Well, I have to say it does work. Even with 2400 characters. Only it
takes some time to load (±8 sec with 1024 ADSL).

Marco
 
M

Michael Winter

Yes you're right. I wasn't at that point yet. The idea was to put the
text characters in a layer (<div>) so I can also can choose the
dimensions and coordinates. Now the script is actually doing something
I'm going to clean it up.
Click to expand...

Just pointing it out.
I shouldn't need to tell you that A elements cannot occur within HEAD.
Click to expand...

Well, I have to say it does work. [...]
Click to expand...

There are plenty of things that "work"[1] in HTML, but that doesn't mean
you should do them. :p

Good luck,
Mike


[1] I say "work" because invalid HTML can have some quite unexpected
consequences.
 
B

Blue Raja

Not to be outdone by Howard Dean, Michael Winter bellowed
Yes, JavaScript supports both pre- and post-increment/decrement.
Click to expand...

Good to know, thanks :eek:)
I would argue that it should be used sparingly, though. I've seen
examples where several conditional operators are used nested, and
with no parentheses. It quickly becomes unreadable without careful
formatting. That said, it certainly can be very useful.
Click to expand...

I agree. I usually only use it for simple things.
I find it particularly useful when I'm toggling a CSS value, say text color,
eg
mytext.style.color = mytext.style.color=="#ff0000" ? "#0000ff" :
"#ff0000";
 
H

Harag

Hahahahaha.
Guess what I just bought in the bookstore some 10 minutes ago!
Thanks, I'll take a look at your comments and see if I (with the new
O'Reilly in my possession) can work it out.
Click to expand...


When I first picked the book up a couple of weeks (recommend to be by
others) I wasn't sure at first if its the one I really wanted.... but
after a couple of weeks reading, I understand things a LOT better now,
things like "prototype", and how functions can be assigned to
variables etc (and why) and it looks an excellent reference source
and easy to find things that you might want. eg how do you get the
text that a user has typed in a text box... is it "element.text" or
"element.value", with a quick look you have the answer.

Al.
 
H

Harag

OK. It works!! :)

The main problem was the quote issue.
I needed an extra set of quotes in the -- class=" + cursorArray[R] +
"-- part.
Now it is like this: -- class="' + cursorArray[R] + '" And it works
fine.
Indeed it is a good advice to use the double quotes for distincting
the HTML and the single quotes for the JavaScript strings. It's saves
a lot of problems.
Click to expand...

Yes, this was the Main problem with your code, also some of the
classnames in "cursorArray[R]" didn't match the names in the <style>

Glad you have it working now :)

Al.
 
L

Lasse Reichstein Nielsen

Blue Raja said:
I also like the alternate condition statement
<boolean_exp> ? <true_action> : <false_action>;
which is equivalent to
if (<boolean_exp>) <true_action>; else <false_action>;
Click to expand...

It's not really equivalent, more like parallel.

In Javascript, as in most langauges, there are (at least) two
different syntactic categories: statements and expressions.

Expressions are evaluated and their result is a value. Examples
are "2+2" or "Math.sin(Math.asin(Math.PI))". You can combine
expressions into other expressions using operators or functions.

Statements are executed and their result is a change of state. They
do not have a value. Examples are "for(...){...}" and
"if(...){...}". You can put several statements together by
juxtaposition, and you can group them with "{" and "}".

The "if" statement is a conditional statement. It is a choice between
one of two statments, based on the value of an expression. Since doing
nothing is a (trivial) change of state, you can even omit one of the
statements (the "else" branch).

The "?:" operator defines a conditional expression. It is a choice
between one of two expressions, based on the value of a third. Since
an expression must have a value, you can not omit one of the expressions.


A "conditional whatever" is a general concept in programming. For most
syntactic categories, it makes sense to have an either/or choice
between two different possibilities. Javascript, as most C-based
languages only have conditional statements and expressions (the only
other syntactic category in C was the declaration, which is harder
to make conditional).

In general, a "conditional whatever" is itself a "whatever", and it
contains two "whatever"'s and a condition expression that chooses
between them. The "if" statement and the "?:" expression are examples
of this general concept.

The switch/case statement is a generalization, where there are more
than two different statements to choose between.

/L
 
B

Blue Raja

Not to be outdone by Howard Dean, Lasse Reichstein Nielsen bellowed
(e-mail address removed):
It's not really equivalent, more like parallel.

In Javascript, as in most langauges, there are (at least) two
different syntactic categories: statements and expressions.
Click to expand...
<snip>

All quite right, and an oversight on my part for implying the two were
equal.
Really the first should be more like
<boolean_exp> ? <true_value> : <false_value>;

This is why I don't do as well as I could at exam time -- too much coding,
not enough theory ;o)
 
M

marco

Harag said:
When I first picked the book up a couple of weeks (recommend to be by
others) I wasn't sure at first if its the one I really wanted.... but
after a couple of weeks reading, I understand things a LOT better now,
things like "prototype", and how functions can be assigned to
variables etc (and why) and it looks an excellent reference source
and easy to find things that you might want. eg how do you get the
text that a user has typed in a text box... is it "element.text" or
"element.value", with a quick look you have the answer.

Al.
Click to expand...

Well I know now one thing for sure the O'Reilly's books are the BEST!
Stricktly speaking I bought the ‘Dynamic HTML' The Definitive
Reference By Danny Goodman. It contains HTML 4.01, XHTML, CSS Level 2,
DOM Level 2, and Javascript 1.5.
It's one of those +2 inches thick books and really expensive (61
euro's). I had some second thoughts about it when I saw that price but
I think/hope it's going to be a good investment.
I just noticed that the other book which I first used and borrowed
from the library is also from the same author(Danny Goodman) but an
other publisher. But that one is really bad in my opinion. No good
content structure and from that book I got all those obsolete kapital
and comments tags. I stick with O'Reilly.

Marco
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Please Help? 0
I Need Help with making a function that draws in a canvas using location data. 1
Help with my responsive home page 2
Need help with code on website (noob) 2
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Uncaught TypeError using hammer.js 0
document.write 1

Members online

No members online now.
Total: 27 (members: 0, guests: 27)
Robots: 462

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,055
Latest member
SlimSparkKetoACVReview

Latest Threads

Top