| From: janedenone | Date Sent: 2010-01-13 04:24:48 |
| Subject: Document Type and JavaScript | To: Web Authoring |
| Navigation: First Message | Previous Message | Next Message | Last Message | |
Hi,
I recently experienced an odd issue: A JavaScript function refers to
an input field by ID (the ID is used as a function parameter). When no
document type is specified at the top of the HTML page, this works
fine, but adding a document type declaraction (<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">)
breaks the script. It claims that the object specfified by the ID
cannot be found.
Is there any interaction between the document type and this seemingly
basic DOM reference?
Thanks in advance,
Jan
| From: Ronald J Kimball | Date Sent: 2010-01-13 07:57:17 |
| Subject: Re: Document Type and JavaScript | To: Web Authoring |
| Navigation: First Message | Previous Message | Next Message | Last Message | |
On Wed, Jan 13, 2010 at 04:24:48AM -0800, janedenone wrote:
> Hi,
>
> I recently experienced an odd issue: A JavaScript function refers to
> an input field by ID (the ID is used as a function parameter). When no
> document type is specified at the top of the HTML page, this works
> fine, but adding a document type declaraction (<!DOCTYPE HTML PUBLIC
> "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">)
>
> breaks the script. It claims that the object specfified by the ID
> cannot be found.
>
> Is there any interaction between the document type and this seemingly
> basic DOM reference?
I think it would be helpful to see the JavaScript function and the HTML for
the input field.
Ronald
| From: Charlie Garrison | Date Sent: 2010-01-13 19:33:00 |
| Subject: Re: Document Type and JavaScript | To: Web Authoring |
| Navigation: First Message | Previous Message | Next Message | Last Message | |
Good afternoon,
On 13/01/10 at 4:24 AM -0800, janedenone
<janedenone@[Protected]> wrote:
>Is there any interaction between the document type and this seemingly
>basic DOM reference?
I have seen a few cases where invalid syntax can cause that. Do
a document syntax check and look for errors. An improperly
closed tag could cause that.
Charlie
--
Charlie Garrison <garrison@[Protected]>
PO Box 141, Windsor, NSW 2756, Australia
O< ascii ribbon campaign - stop html mail - www.asciiribbon.org
http://www.ietf.org/rfc/rfc1855.txt
| From: Jonathan Lundell | Date Sent: 2010-01-13 19:39:00 |
| Subject: Re: Document Type and JavaScript | To: Web Authoring |
| Navigation: First Message | Previous Message | Next Message | Last Message | |
On Jan 13, 2010, at 4:24 AM, janedenone wrote:
> I recently experienced an odd issue: A JavaScript function refers to
> an input field by ID (the ID is used as a function parameter). When no
> document type is specified at the top of the HTML page, this works
> fine, but adding a document type declaraction (<!DOCTYPE HTML PUBLIC
> "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">)
>
> breaks the script. It claims that the object specfified by the ID
> cannot be found.
>
> Is there any interaction between the document type and this seemingly
> basic DOM reference?
If you're going to declare a doctype, it'd be best to validate that your page conforms to the type.
http://validator.w3.org/ is your friend in this regard.
| From: Jonathan Lundell | Date Sent: 2010-01-13 19:39:00 |
| Subject: Re: Document Type and JavaScript | To: Web Authoring |
| Navigation: First Message | Previous Message | Next Message | Last Message | |
On Jan 13, 2010, at 4:24 AM, janedenone wrote:
> I recently experienced an odd issue: A JavaScript function refers to
> an input field by ID (the ID is used as a function parameter). When no
> document type is specified at the top of the HTML page, this works
> fine, but adding a document type declaraction (<!DOCTYPE HTML PUBLIC
> "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">)
>
> breaks the script. It claims that the object specfified by the ID
> cannot be found.
>
> Is there any interaction between the document type and this seemingly
> basic DOM reference?
If you're going to declare a doctype, it'd be best to validate that your page conforms to the type.
http://validator.w3.org/ is your friend in this regard.
| From: janedenone | Date Sent: 2010-01-18 04:20:35 |
| Subject: Re: Document Type and JavaScript | To: Web Authoring |
| Navigation: First Message | Previous Message | Next Message | Last Message | |
This is the HTML (abbreviated):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
input {
font-size:11px;
}
</style>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<script language='JavaScript' src='timepicker.js' type="application/
javascript"></script>
</head>
<body>
<div>
<form method='post' action=".">
<table>
<tr valign="middle">
<td>
<input id='timepicker1' type='text' value='11:15' size='8'
maxlength='8' onblur='validateDatePicker(this)'>
</td>
<td>
<img src='http://dekaserver-test.dekanat-phil.uni-koeln.de/pics/
timepicker/timepicker.gif' border='0' alt='Pick a Time!'
onclick='selectTime(this,"timepicker1")' style='cursor:hand'
width='30' height='20'>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
and this is the JavaScript code (also abbreviated):
function selectTime(ctl,ctl2) {
var id2=ctl2;
ctl2 = document.getElementById(id2);
textCtl = ctl2;
if ((currentCtl != ctl) && (currentCtl !== null)) { // not the
same
currentCtl.src = imagePath + "timepicker.gif"; // prev button
in released state
}
currentCtl = ctl;
currentCtl.src = imagePath + "timepicker2.gif"; // curr button
pressed state
ctl2.value === "" ? '12:00' : ctl2.value;
var res=validateDatePicker2(ctl2);
if (res){ refreshTimePicker(ctl2.value); }
else{ refreshTimePicker(0); }
aPos = getAbsPos(ctl);
crossobj.left = ctl.offsetLeft + aPos.left;
crossobj.top = ctl.offsetTop + aPos.top + ctl.offsetHeight + 2;
crossobj.visibility = (docGeid || ie) ? "visible" : "show";
hideElement( 'SELECT', document.getElementById("timepicker") );
hideElement( 'APPLET', document.getElementById("timepicker") );
// make the time picker modal.
curtain.show();
bShow = true;
}
Many thanks,
Jan
On 13 Jan., 16:57, Ronald J Kimball <r...@tamias.net> wrote:
> On Wed, Jan 13, 2010 at 04:24:48AM -0800, janedenone wrote:
> > Hi,
>
> > I recently experienced an odd issue: A JavaScript function refers to
> > an input field by ID (the ID is used as a function parameter). When no
> > document type is specified at the top of the HTML page, this works
> > fine, but adding a document type declaraction (<!DOCTYPE HTML PUBLIC
> > "-//W3C//DTD HTML 4.01 Transitional//EN"
> > "http://www.w3.org/TR/html4/loose.dtd">)
>
> > breaks the script. It claims that the object specfified by the ID
> > cannot be found.
>
> > Is there any interaction between the document type and this seemingly
> > basic DOM reference?
>
> I think it would be helpful to see the JavaScript function and the HTML for
> the input field.
>
> Ronald
| From: Ronald J Kimball | Date Sent: 2010-01-18 06:34:15 |
| Subject: Re: Document Type and JavaScript | To: Web Authoring |
| Navigation: First Message | Previous Message | Next Message | Last Message | |
Testing your sample page in Firefox 3.5.7, with and without the doctype,
the JS function was able to find the 'timepicker1' element.
Which line of the JS is the error reported on?
I notice that these two lines:
hideElement( 'SELECT', document.getElementById("timepicker") );
hideElement( 'APPLET', document.getElementById("timepicker") );
look for the id "timepicker", rather than "timepicker1". Is there an
element with id "timepicker" in the full HTML?
Ronald
On Mon, Jan 18, 2010 at 04:20:35AM -0800, janedenone wrote:
> This is the HTML (abbreviated):
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">
>
> <html>
> <head>
> <style type="text/css">
> input {
> font-size:11px;
> }
> </style>
> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
> <script language='JavaScript' src='timepicker.js' type="application/
> javascript"></script>
> </head>
> <body>
> <div>
> <form method='post' action=".">
> <table>
> <tr valign="middle">
> <td>
> <input id='timepicker1' type='text' value='11:15' size='8'
> maxlength='8' onblur='validateDatePicker(this)'>
> </td>
> <td>
> <img src='http://dekaserver-test.dekanat-phil.uni-koeln.de/pics/
> timepicker/timepicker.gif' border='0' alt='Pick a Time!'
> onclick='selectTime(this,"timepicker1")' style='cursor:hand'
> width='30' height='20'>
> </td>
> </tr>
> </table>
> </form>
> </div>
> </body>
> </html>
>
> and this is the JavaScript code (also abbreviated):
>
> function selectTime(ctl,ctl2) {
> var id2=ctl2;
> ctl2 = document.getElementById(id2);
> textCtl = ctl2;
>
> if ((currentCtl != ctl) && (currentCtl !== null)) { // not the
> same
> currentCtl.src = imagePath + "timepicker.gif"; // prev button
> in released state
> }
> currentCtl = ctl;
> currentCtl.src = imagePath + "timepicker2.gif"; // curr button
> pressed state
>
> ctl2.value === "" ? '12:00' : ctl2.value;
> var res=validateDatePicker2(ctl2);
> if (res){ refreshTimePicker(ctl2.value); }
> else{ refreshTimePicker(0); }
>
> aPos = getAbsPos(ctl);
>
> crossobj.left = ctl.offsetLeft + aPos.left;
> crossobj.top = ctl.offsetTop + aPos.top + ctl.offsetHeight + 2;
> crossobj.visibility = (docGeid || ie) ? "visible" : "show";
> hideElement( 'SELECT', document.getElementById("timepicker") );
> hideElement( 'APPLET', document.getElementById("timepicker") );
>
> // make the time picker modal.
> curtain.show();
>
> bShow = true;
> }
| From: janedenone | Date Sent: 2010-01-22 03:07:37 |
| Subject: Re: Document Type and JavaScript | To: Web Authoring |
| Navigation: First Message | Previous Message | Next Message | Last Message | |
I managed to solve the initial issue after changing the element
reference syntax, but there's one more problem. The overlay created by
the JS function is placed at the upper left of the window, instead of
the icon which is clicked to display the overlay. This is the function
to calculate the overlay position (used for crossobj element quoted
above):
// get absolute position of a control. use with overlays, dropdowns,
etc.
function getAbsPos(ctl) {
var leftpos = 0;
var toppos = 0;
var aTag = ctl;
do {
aTag = aTag.offsetParent;
leftpos += aTag.offsetLeft;
toppos += aTag.offsetTop;
} while(aTag.tagName != "BODY");
var o = new Object();
o.left = leftpos;
o.top = toppos;
return o;
}
What could I change about this function to ensure the overlay is
placed correctly?
Thanks,
Jan
On Jan 18, 3:34 pm, Ronald J Kimball <r...@tamias.net> wrote:
> Testing your sample page in Firefox 3.5.7, with and without the doctype,
> the JS function was able to find the 'timepicker1' element.
>
> Which line of the JS is the error reported on?
>
> I notice that these two lines:
>
> hideElement( 'SELECT', document.getElementById("timepicker") );
> hideElement( 'APPLET', document.getElementById("timepicker") );
>
> look for the id "timepicker", rather than "timepicker1". Is there an
> element with id "timepicker" in the full HTML?
>
> Ronald
>
>
>
> On Mon, Jan 18, 2010 at 04:20:35AM -0800, janedenone wrote:
> > This is the HTML (abbreviated):
>
> > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> > "http://www.w3.org/TR/html4/loose.dtd">
>
> > <html>
> > <head>
> > <style type="text/css">
> > input {
> > font-size:11px;
> > }
> > </style>
> > <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
> > <script language='JavaScript' src='timepicker.js' type="application/
> > javascript"></script>
> > </head>
> > <body>
> > <div>
> > <form method='post' action=".">
> > <table>
> > <tr valign="middle">
> > <td>
> > <input id='timepicker1' type='text' value='11:15' size='8'
> > maxlength='8' onblur='validateDatePicker(this)'>
> > </td>
> > <td>
> > <img src='http://dekaserver-test.dekanat-phil.uni-koeln.de/pics/
> > timepicker/timepicker.gif' border='0' alt='Pick a Time!'
> > onclick='selectTime(this,"timepicker1")' style='cursor:hand'
> > width='30' height='20'>
> > </td>
> > </tr>
> > </table>
> > </form>
> > </div>
> > </body>
> > </html>
>
> > and this is the JavaScript code (also abbreviated):
>
> > function selectTime(ctl,ctl2) {
> > var id2=ctl2;
> > ctl2 = document.getElementById(id2);
> > textCtl = ctl2;
>
> > if ((currentCtl != ctl) && (currentCtl !== null)) { // not the
> > same
> > currentCtl.src = imagePath + "timepicker.gif"; // prev button
> > in released state
> > }
> > currentCtl = ctl;
> > currentCtl.src = imagePath + "timepicker2.gif"; // curr button
> > pressed state
>
> > ctl2.value === "" ? '12:00' : ctl2.value;
> > var res=validateDatePicker2(ctl2);
> > if (res){ refreshTimePicker(ctl2.value); }
> > else{ refreshTimePicker(0); }
>
> > aPos = getAbsPos(ctl);
>
> > crossobj.left = ctl.offsetLeft + aPos.left;
> > crossobj.top = ctl.offsetTop + aPos.top + ctl.offsetHeight + 2;
> > crossobj.visibility = (docGeid || ie) ? "visible" : "show";
> > hideElement( 'SELECT', document.getElementById("timepicker") );
> > hideElement( 'APPLET', document.getElementById("timepicker") );
>
> > // make the time picker modal.
> > curtain.show();
>
> > bShow = true;
> > }
--
You received this message because you are subscribed to the Google Groups "Web Authoring" group.
To post to this group, send email to web-authoring@[Protected]
To unsubscribe from this group, send email to web-authoring+unsubscribe@[Protected]
For more options, visit this group at http://groups.google.com/group/web-authoring?hl=en.
