By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
458,124 Members | 1,569 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 458,124 IT Pros & Developers. It's quick & easy.

document.write - CSS problem??

P: n/a
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>
Jul 23 '05 #1
Share this Question
Share on Google+
15 Replies


P: n/a
On 31 Jul 2004 02:39:23 -0700, ma***@mptheunissen.nl (marco) wrote:
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 ?

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">

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

<script type="text/javascript">
<!--
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" ;
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);
math.random() is wrong should be
Math.random() - note the capital M.

document.write("<a href="test" class=" + cursorArray[R] + ">A</a>");
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:

<img border="0" width="10" height="20" src="mypic.gif">

x = x+1;

for adding 1 to variables in javascript use

x++

others you can use are

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

etc

} while (x<900)
spaces makes code easier to read

while (x < 900)
//-->
again, no real need to comment out
</SCRIPT>
again, lowercase </head>

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
Jul 23 '05 #2

P: n/a
Not to be outdone by Howard Dean, Harag bellowed
ep********************************@4ax.com:
x = x+1;
for adding 1 to variables in javascript use

x++


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


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>;

--

Jason, aka The Blue Raja
Jul 23 '05 #3

P: n/a
On 31 Jul 2004 02:39:23 -0700, marco <ma***@mptheunissen.nl> wrote:

[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 ?


[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

--
Michael Winter
Replace ".invalid" with ".uk" to reply
Jul 23 '05 #4

P: n/a
On Sat, 31 Jul 2004 21:25:22 +1000, Blue Raja
<th********************@iprimus.com.au> wrote:
Not to be outdone by Howard Dean, Harag bellowed
ep********************************@4ax.com:
[snip]
x++


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


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>;


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

--
Michael Winter
Replace ".invalid" with ".uk" to reply
Jul 23 '05 #5

P: n/a
>

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


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.
Jul 23 '05 #6

P: n/a
Harag wrote:
On 31 Jul 2004 02:39:23 -0700, ma***@mptheunissen.nl (marco) wrote:
<!--


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


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
Jul 23 '05 #7

P: n/a
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
Jul 23 '05 #8

P: n/a
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.


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
Jul 23 '05 #9

P: n/a
On 31 Jul 2004 12:31:08 -0700, marco <ma***@mptheunissen.nl> wrote:
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.


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


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


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.

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail
Jul 23 '05 #10

P: n/a
Not to be outdone by Howard Dean, Michael Winter bellowed
<opsbz2hre1x13kvk@atlantis>:
x++


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


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


Good to know, thanks :o)
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>;


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.


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";

--

Jason, aka The Blue Raja
Jul 23 '05 #11

P: n/a
On 31 Jul 2004 08:52:13 -0700, ma***@mptheunissen.nl (marco) wrote:


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


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.

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.
Jul 23 '05 #12

P: n/a
On 31 Jul 2004 10:24:49 -0700, ma***@mptheunissen.nl (marco) wrote:
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.


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.
Jul 23 '05 #13

P: n/a
"Blue Raja" <th********************@iprimus.com.au> writes:
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>;


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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 23 '05 #14

P: n/a
Not to be outdone by Howard Dean, Lasse Reichstein Nielsen bellowed
d6**********@hotpop.com:
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>;


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.

<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)

--

Jason, aka The Blue Raja
Jul 23 '05 #15

P: n/a
Harag <ha*************@softhome.com> wrote in message news:<rm********************************@4ax.com>. ..
On 31 Jul 2004 08:52:13 -0700, ma***@mptheunissen.nl (marco) wrote:


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


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.

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.


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
Jul 23 '05 #16

This discussion thread is closed

Replies have been disabled for this discussion.