473,769 Members | 6,034 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

document.write - CSS problem??

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.northeastresi ze {cursor: ne-resize;}
a.northwestresi ze {cursor: nw-resize;}
a.pointer {cursor: pointer;}
a.southresize {cursor: s-resize;}
a.southeastresi ze {cursor: se-resize;}
a.southwestresi ze {cursor: sw-resize;}
a.text {cursor: text;}
a.westresize {cursor: w-resize;}
a.wait {cursor: wait;}
</style>
<SCRIPT LANGUAGE="JAVAS CRIPT">
<!--
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
15 2830
On 31 Jul 2004 02:39:23 -0700, ma***@mptheunis sen.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.wri te 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.northeastresi ze {cursor: ne-resize;}
a.northwestresi ze {cursor: nw-resize;}
a.pointer {cursor: pointer;}
a.southresize {cursor: s-resize;}
a.southeastresi ze {cursor: se-resize;}
a.southwestresi ze {cursor: sw-resize;}
a.text {cursor: text;}
a.westresize {cursor: w-resize;}
a.wait {cursor: wait;}
</style>
<SCRIPT LANGUAGE="JAVAS CRIPT">

don't use LANGUAGE="JAVAS CRIPT" 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.southeastresi ze
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
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
On 31 Jul 2004 02:39:23 -0700, marco <ma***@mptheuni ssen.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
On Sat, 31 Jul 2004 21:25:22 +1000, Blue Raja
<th************ ********@iprimu s.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
>

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
Harag wrote:
On 31 Jul 2004 02:39:23 -0700, ma***@mptheunis sen.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
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
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
On 31 Jul 2004 12:31:08 -0700, marco <ma***@mptheuni ssen.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

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

9
6359
by: James Marshall | last post by:
I'm writing a library where I want to override document.write(), but for all document objects; thus, I want to put it in the prototype. I tried Document.prototype.write= my_doc_write ; but it didn't work. I discovered that this seemed to work: HTMLDocument.prototype.write= my_doc_write ; Why does HTMLDocument work here but not Document? Will this second
2
2386
by: Brett Baisley | last post by:
Hello I have a block of html code that I want to run by calling a javascript function to print it. Its basically a table with menu items in it that is the same for many pages, and instead of copying/pasting everytime I change it, I figure this will be better, as I only change it once. The problem is, document.write doesn't handle multiple lines very well, so I was wondering what is the best way to do this? Maybe there is even a better...
12
1158
by: *.* | last post by:
Hey- I seem to be having a problem with the document.lastModified property. The way it is suppose to work is that it returns the date and time at which the document was last modified. IN my case it is returning the current date and time. It only does this when it is on the webserver. the code is: <script type="text/javascript"><!-- function footer(){
13
9649
by: Stumped and Confused | last post by:
Hello, I really, really, need some help here - I've spent hours trying to find a solution. In a nutshell, I'm trying to have a user input a value in form's textfield. The value should then be assigned to a variable and output using document.write. (Note, there is no submit button or other form elements. Basically
4
2952
by: Prowler | last post by:
In the application we are currently building, we need to write positioning code on-the-fly, based upon the screen offset of the element in the AS/400 application which drives the Web app. The 400, like DOS, uses memory-mapped display, two bytes per character (one char byte and one attribute byte). We can get the screen offset allright, and I've written a javascript which does the math to convert the offset into row/col (i.e. left, top)...
12
2866
by: Sean | last post by:
Hi, I have the following script: ----------------------------------------------------------------------------------- <script type="text/javaScript"> <!-- document.write('<div id=hello1>Hello1</div>'); document.write('<div id=hello2 style="display:none;"><script src="test.js"><\/script></div>');
136
9447
by: Matt Kruse | last post by:
http://www.JavascriptToolbox.com/bestpractices/ I started writing this up as a guide for some people who were looking for general tips on how to do things the 'right way' with Javascript. Their code was littered with document.all and eval, for example, and I wanted to create a practical list of best practices that they could easily put to use. The above URL is version 1.0 (draft) that resulted. IMO, it is not a replacement for the FAQ,...
11
3113
by: Michael Powe | last post by:
How can I make an XHTML-compliant form of an expression in this format: document.write("<scr"+"ipt type='text/javascript' src='path/to/file.js'>"+"</scr"+"ipt>"); this turns out to be a non-trivial exercise. inserting '&lt;' and '&gt;' causes the browser to write the text to the page as literal text rather than as the intended script element. Using escape codes seemed to work (makes it standard compliant) but the text is not written to...
2
2626
by: ethandbrown | last post by:
Hi All-- I'm a bit stymied here. I need to display arbitrary HTML obtained through AJAX. The problem is when a <script> block is encountered one can't use innerHTML to set the content, because the <script> block won't be evaluated. Googling around, a found the createContextualFragment() solution which does execute script code. The following, for example, works:
0
9589
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9423
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
1
9997
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9865
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8873
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
6675
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5309
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3965
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3565
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.