How do I solve this problem

J

jnm

I have an old java script which places an arrow.gif in the lower right hand
corner of the screen at all times regardless of scrolling and / or resizing
the screen. The arrow is a hot spot, which scrolls to the top of the page.
It works fine, but won't validate because it is based on non-standard code.

It looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" >
<meta http-equiv="Content-Language" content="en-us" >
<meta name="GENERATOR" content="Microsoft FrontPage 4.0" >
<meta name="ProgId" content="FrontPage.Editor.Document" >
<meta http-equiv="imagetoolbar" content="false" >
<title>Opening page</title>
<link href="body.css" rel="stylesheet" type="text/css" >

<script type="text/javascript">
function SetCorners() {
LR.style.left = document.body.scrollLeft + document.body.clientWidth -
LR.width;
LR.style.top = document.body.scrollTop + document.body.clientHeight -
LR.height;
}
</script>

</head>
<body onLoad="SetCorners()" onResize="SetCorners()" onScroll="SetCorners()">

<a href="javascript:scroll(0,0)"><img id="LR"
src="images/system/Piloprod-tr.gif" border="0"
style="position: absolute; left.2; top:4" width="23" height="36" alt="To
top of page" /></a>

<h6>Business Processes</h6>

</body>
</html>


When I try to validate at http://validator.w3.org/check I get the following
2 errors

Error Line 21 column 37: there is no attribute "ONRESIZE".
<body onLoad="SetCorners()" onResize="SetCorners()" onScroll="SetCorners()">

Error Line 21 column 61: there is no attribute "ONSCROLL".
.... onLoad="SetCorners()" onResize="SetCorners()" onScroll="SetCorners()">


I believe this may be done in another way, but I can't find it.

Any help in this news group??

Regards

Jorgen
 
M

Martin Honnen

jnm wrote:

When I try to validate at http://validator.w3.org/check I get the following
2 errors

Error Line 21 column 37: there is no attribute "ONRESIZE".
<body onLoad="SetCorners()" onResize="SetCorners()" onScroll="SetCorners()">

You can set up
window.onresize = function (evt) {
SetCorners();
};
and
Error Line 21 column 61: there is no attribute "ONSCROLL".
... onLoad="SetCorners()" onResize="SetCorners()" onScroll="SetCorners()">

window.onscroll = function (evt) {
SetCorners();
}

but generally you should look into CSS 2.1 and fixed positioning as
modern browsers like Mozilla, Firefox, Opera 8 (probably earlier Opera
versions too) support that without the need for scripting. IE/Win needs
script currently but that might change with IE 7.
 
J

jnm

Martin wrote
You can set up
window.onresize = function (evt) {
SetCorners();
};
and
onScroll="SetCorners()">

window.onscroll = function (evt) {
SetCorners();
}
Hi Martin

Now I have tried your suggestion and my code looks like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" >
<meta http-equiv="Content-Language" content="en-us" >
<meta name="GENERATOR" content="Microsoft FrontPage 4.0" >
<meta name="ProgId" content="FrontPage.Editor.Document" >
<meta http-equiv="imagetoolbar" content="false" >
<title>Opening page</title>
<link href="body.css" rel="stylesheet" type="text/css" >

<script type="text/javascript">
function SetCorners() {
LR.style.left = document.body.scrollLeft + document.body.clientWidth -
LR.width;
LR.style.top = document.body.scrollTop + document.body.clientHeight -
LR.height;
}
</script>

</head>

<body onLoad="SetCorners()"
window.onresize=function (evt) {
SetCorners();
};
window.onscroll=function (evt) {
SetCorners();
} >

<a href="javascript:scroll(0,0)"><img id="LR"
src="images/system/Piloprod-tr.gif" border="0"
style="position: absolute; left.2; top:4" width="23" height="36" alt="To
top of page" /></a>

<h6>Business Processes</h6>

</body>
</html>


BUT!!
Running the validation gives the following failures:
Error Line 25 column 16: there is no attribute "WINDOW.ONRESIZE".
window.onresize=function (evt) {

Error Line 25 column 25: character "(" not allowed in attribute
specification list.
window.onresize=function (evt) {

Testing the page gives this result:
The arrow.gif is located in the lower right hand side of the screen. But it
does not move when scrolling the page.

What did I do wrong??
Regards
Jorgen
 

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

Members online

Forum statistics

Threads
473,781
Messages
2,569,615
Members
45,294
Latest member
LandonPigo

Latest Threads

Top