Struggle with DOCTYPE

Forum Moderators: open

Message Too Old, No Replies

Struggle with DOCTYPE

What CSS likes javascript doesn't

Storyman

11:13 pm on Feb 21, 2005 (gmt 0)

The good news is that this only needs to work with IE. The bad news is that what works for CSS doesn't work for javascript.

Here is the DOCTYPE that works with CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Here is what works with javascript:

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

The CSS draws a border around a box that floats right, which disappears with the above javascript header.

The javascript creates a floating menu, which will not work with the above CSS header.

How do I retain the borders that CSS creates and still have a floating menu?

orion_rus

2:01 pm on Feb 22, 2005 (gmt 0)

hmm) i think first works with javascript rather good)
In a script tag u must have this for working
<script type="text/javascript">

</script>
if it's not working please type a javascript and css here. And we can try to get a reason of it.
Good luck to you

Storyman

8:24 pm on Feb 22, 2005 (gmt 0)

orion_rus,

I worked on this all of yesterday and am completely stuck.

This is the header and the javascript that works.

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>TITLE</title>
<script language="javascript" type="text/javascript">
window.onscroll = moveMenuBar;
document.onscroll = moveMenuBar;
function findScrollTop() {
if (document.body.scrollTop!= null) return document.body.scrollTop;
if (window.pageYOffset!= null) return window.pageYOffset;
return (null);
}
function moveMenuBar() {
var object=document.getElementById('menuBar');
var y = findScrollTop();
if (y < 75) y = 75;
object.style.display = 'none';
object.style.top = y + 'px';
object.style.display = 'block';
}
</script>

This is the DOCTYPE that makes the javascript stop working, but does make CSS work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Bernard Marx

9:44 pm on Feb 22, 2005 (gmt 0)

Which browser?

Try alerting different values in the script. You may find something out.
For instance, put alert(document.body.scrollTop). Does it change?

Have a look at the tip here:
[brainjar.com...] [2nd "Browser Compatibilty" box]

Storyman

10:56 pm on Feb 22, 2005 (gmt 0)

Bernard,

Fortunately, cross-browser compatibility is not an issue and needs to only work with IE.

Thanks for the link. The answer might be there, but since I'm a newbie with javascript it might take a while before the solution emerges.

I'm beginning to think that the issue revolves around this code:

window.onscroll = moveMenuBar;
document.onscroll = moveMenuBar;

My thinking is that the function "moveMenuBar" is not being called with the scroll bar is moved.

How would I test this theory?

Bernard Marx

11:26 pm on Feb 22, 2005 (gmt 0)

My two great mates, Mr. Trial and Mr. Error

function moveMenuBar(){ alert('scroll!') }window.onload = function()
{
    window.onscroll = moveMenuBar; 
    //or// document.onscroll = moveMenuBar;
    //or// document.body.onscroll = moveMenuBar; 
    //or// document.documentElement.onscroll = moveMenuBar;
}

All placed in onload method to allow document.body to be present when needed.
Try each one in turn.

Storyman

12:59 am on Feb 23, 2005 (gmt 0)

Bernard,

Thanks for the tip on debugging.

After more searching it appears that the problem is that javascript does needs to be in an external file because of XHTML.

I've changed the header to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>

(Both Strict and Transitional have been used without any change.)

The javascript was placed in external.js:

window.onscroll = moveMenuBar;
document.onscroll = moveMenuBar;
function findScrollTop() {
if (document.body.scrollTop!= null) return document.body.scrollTop;
if (window.pageYOffset!= null) return window.pageYOffset;
return (null);
}
function moveMenuBar() {
var object=document.getElementById('menuBar');
var y = findScrollTop();
if (y < 75) y = 75;
object.style.display = 'none';
object.style.top = y + 'px';
object.style.display = 'block';}

Inside the XHTML file the javascript is called with:

<script src="external.js" type="text/javascript">
<script type="text/javascript"></script>

Being a newbie I'm not sure if everything is done correctly. The page does come up, but there is still the problem with the floating menu bar disappearing off the page when the page is scrolled.

Bernard Marx

1:26 am on Feb 23, 2005 (gmt 0)

Hmm. Probably can't sort you out with the overflow right now,
but.. this is [b]2[/] scripts

Storyman

1:30 am on Feb 23, 2005 (gmt 0)

Found that javascript needs UTF-8 or UTF-16 to work with XHTML. Modified the header and it still doesn't work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

Bernard Marx

8:36 am on Feb 23, 2005 (gmt 0)

Did any of the tests work?

Storyman

9:14 am on Feb 23, 2005 (gmt 0)

In short...sort of, but not really knowing that much about javascript I'm not sure what to do with the information.

To review what I've done so far.

1. placed both javascript functions in a .js file.

2. changed the header:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

3. called the .js file with:

<script src="external.js" type="text/javascript"></script>

4. called the events within the head tags with:

<script type="text/javascript">
window.onscroll = moveMenuBar;
document.onscroll = moveMenuBar;
</script>

That last step I'm not sure if the onscroll events need to be where they are or in the javascript's external file. What I'm unsure of is if src call to the external .js file is treated like an include like with SSI or if the events must be placed within the head tags to call the functions.

After the changes it still didn't work. I changed the function "moveMenuBar" so when it was called it would open the alert box. Removing the "document.onscroll = moveMenuBar" resulted in the alert box whenever the scrollbar was moved.

However, when "window.onscroll = moveMenuBar" was removed the alert box didn't work. (I didn't write the code so why document and window onscroll events are both used isn't clear to me.) All of the alternative forms (document.onscroll, document.body.onscroll, document.documentElement) were tried and none of them triggered the alert box.

The good news is that I've learned quite a few things. The bad news is that the results are still negative.

I'm not sure where to go from here.

Storyman

7:10 pm on Feb 23, 2005 (gmt 0)

Has anyone else found particular javascript code that will not work within XHTML complient pages?

I just can't seem to get this script to function inside XHTML pages.

Storyman

7:28 pm on Feb 23, 2005 (gmt 0)

Using alert boxes to step through the code this appears to be the bit of code that is not working:

var y = findScrollTop();

Is there another way to find Y?

Storyman

8:06 pm on Feb 23, 2005 (gmt 0)

BREAKTHROUGH

For those facing the same problem here is the answer:

var y = document.documentElement.scrollTop;

Bernard Marx

8:22 pm on Feb 23, 2005 (gmt 0)

Excellent. That falls neatly into line with Brainjar's suggestions.

Storyman

8:35 pm on Feb 23, 2005 (gmt 0)

For a newbie your alert box suggestion was very helpful. Thanks for your help.