Closed Thread Icon

Topic awaiting preservation: making dhtml more compatible (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=8408" title="Pages that link to Topic awaiting preservation: making dhtml more compatible (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: making dhtml more compatible <span class="small">(Page 1 of 1)</span>\
 
mas
Paranoid (IV) Inmate

From: the space between us
Insane since: Sep 2002

 posted posted 11-24-2002 21:02

i don't know how often a question like this has been asked before.so, sorry if ask something soopid.

here is my problem:
i'm using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

here is the source code

<html>
<head>
<style>

table.navigation
{
background:black;
position:relative;
font:bold 80%;
top:0;
left:-135;
}

</style>
<script type="text/javascript">
var i=-135
var c=0
var intHide
var speed=3

function show_hide_menu()
{
if (c==0)
{
c=1
clearInterval(intHide)
intShow=setInterval("show()",10)
}
else
{
c=0
clearInterval(intShow)
intHide=setInterval("hide()",10)
}
}

function show()
{
if (i<-12)
{
i=i+speed
navbar.style.left=i
}
}

function hide()
{
if (i>-135)
{
i=i-speed
navbar.style.left=i
}
}
</script>
</head>
<body>

<table id="navbar" class="navigation" width="150" onclick="show_hide_menu()">
<tr><td><font color="#ffffff">shabadabadaaa</font></td></tr>
</table>

clickie

</body>
</html>

in IE i get this result: http://www.thespacebetweenus.com/dhtml.htm
in mozilla for example, i just doesn't work...when i click on it, nothing happens

how do i code this more browser friendly???
please help me
BIG THX

-THE SPACE-
Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

 posted posted 11-24-2002 23:24

One thing that jumps out at me is that you're using CSS properties as though they were numbers. For instance, you have

top:0;

in your style sheet. This isn't valid CSS, it should be

top:0px;

More on this later. The next thing that I notice is you're using

navbar.style

to get to the style object of the element with id="navbar". this is *not* the right way to do this, and is only supported by IE. To be honest, it's very wrong of IE to even let this work, because it screws up other things sometimes. (Plus, it confuses developers, such as yourself.) The way to get to navbar is not

navbar

but it's

document.getElementById('navbar')

so what you really want is

document.getElementById('navbar').style.left

Finally, you shouldn't just set that value to i. You need to keep it valid css, so make it

document.getElementById('navbar').style.left = i + "px";

And that should work, unless I overlooked something.

(Note that if you read a style property, you're going to get a value like "123px". If you want just the 123, use the parseInt() function, which takes just the numbers at the beginning of a string and returns them as a number.)
kuckus
Bipolar (III) Inmate

From: Berlin (almost)
Insane since: Dec 2001

 posted posted 11-24-2002 23:31

It's behaving that way because you're using IE's "document.all" method of accessing the table you want to move around, while newer versions of IE, Mozilla and other standards compliant browsers let you access it via the DOM with "document.getElementById".

So instead of "navbar.style.left" (which IE thinks of as "document.all.navbar.style.left" amd other browsers ignore) you'd use "document.getElementById("navbar").style.left" to make it work in Mozilla & co. You should also add "px" to the changed value for Mozilla to do the right things, like

document.getElementById("navbar").style.left = i + "px";

And BTW... did I really see <font> tags up there? Eek!

kuckus
Bipolar (III) Inmate

From: Berlin (almost)
Insane since: Dec 2001

 posted posted 11-24-2002 23:34

Ermmm... seems as if I've been a bit late again.

Just take my previous post as a proof that everything Slime posted is nothing but the truth

Rooster
Bipolar (III) Inmate

From: the uterus
Insane since: Nov 2002

 posted posted 11-25-2002 01:35

kuckus:

Hey, don't dis the <font> tag but skip out on telling us how it's faulty. Now I'm all curious, like George. What would be better to use? Why?

*jumps around impatiently like a small monkey*


..
~Existence is a mere pattern.~

[This message has been edited by Rooster (edited 11-25-2002).]
Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

 posted posted 11-25-2002 01:41

CSS! Font tags have been deprecated since - get this - 1996, in favor of CSS. Even ol' NN4 supports basic font size and color CSS attributes.

There should be some good info on CSS at http://faq.ozoneasylum.com/FaqWiki/shownode.php?id=90&sortby=rating .
Rooster
Bipolar (III) Inmate

From: the uterus
Insane since: Nov 2002

 posted posted 11-25-2002 01:58

I actually use as much CSS as I possibly can except I sometimes put it in a <font> tag...

<font class=?submenu?>blah</font>

Would <span> be a better choice?
Is <font> it self a bad choice for applying CSS?


..
~Existence is a mere pattern.~
Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

 posted posted 11-25-2002 02:44

Yes. If you need to apply style and there doesn't exist a tag that holds the meaning you need, use <span> or <div> instead of <font>. (Never use <font>, ever.)

However, keep in mind that things like

<span class="header">...</span>

should really be

<h1>...</h1>

with CSS properties applied to H1. (The point is to keep the power of HTML. H1 is more descriptive than SPAN.)
mas
Paranoid (IV) Inmate

From: the space between us
Insane since: Sep 2002

 posted posted 11-25-2002 08:55

thx for all your great help so far. i'll have a look at it when i get out of this **** school.
edit: (slime=online manual )


-THE SPACE-
mas
Paranoid (IV) Inmate

From: the space between us
Insane since: Sep 2002

 posted posted 11-25-2002 14:54

oh and because of this font tag...nevermind
this is just a test, guyz...cool down
Rooster
Bipolar (III) Inmate

From: the uterus
Insane since: Nov 2002

 posted posted 11-28-2002 00:12

Okay, I?ve been messing around with this one.

I changed a few things here and there.

It now works in all the major browser versions I currently have installed. Which would be, IE6.0, NS7.0, Mozilla1.1 and Opera 6.05. I wish there was some way to check pages on older browser versions but I don?t even know were someone would get the outdated versions. I even got it to validate as a XHTML Strict document, served as an XML document.

But as always I had a few problems....

After I uploaded the page then tried to view it in IE, it sort of fell apart. For some reason IE won?t read it from the server correctly yet all the other browsers I have had no problem. But, when I view the page in IE when it's servered from the local drive it's work's correctly.

Also, I wanted to try to make it a PHP file, but I get a parser error because I think the PHP parser tries to parse the XML instructions. I?m not sure if it?s even possible to write a XML document when using PHP. Hell, up until yesterday I didn?t even know what XML was. Hopefully someone else can verify that I actually wrote all this correctly.

Here?s the code for it.....

code:
<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet href="http://www.w3.org/StyleSheets/TR/W3C-REC.css" type="text/css"?>

<?xml-stylesheet href="#internalCSS" type="text/css"?>

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

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

		<style type="text/css" id="internalCSS">

		body {

			margin: 20px 0px 0px 0px;

			padding: 0px 0px 0px 0px;

			}

		table.navigation {

			background: black;

			position: relative;

			font: bold 80%;

			color: #FFFFFF;

			width: 162px;

			top: 0px;

			left: -135px;

			}

		img {

			border: none;

			}

		</style>

		<script type="text/javascript"> 

		<!--

		///////////////////////////////////////////////////////////////////////////////////

		//window.onerror = function () { return true; }

		window.defaultStatus="Rock'n Navigation Table...Whoot, Whoot!!";

		///////////////////////////////////////////////////////////////////////////////////

		//classBrowserInfo derived from, ZNIPPets.com, "Zprime.js", by DocOzone.../////////

		///////////////////////////////////////////////////////////////////////////////////

		function classBrowserInfo() 

		{

			var agt = navigator.userAgent.toLowerCase();

			this.isExplorer = (agt.indexOf("msie") > -1) ? 1 : 0;

			//this.isNetscape = ('insert some test here') ? 1 : 0;

			this.isOpera = (agt.indexOf("opera") > -1) ? 1 : 0;

			this.isMac = (agt.indexOf("mac") > -1) ? 1 : 0;

			this.version = parseFloat(navigator.appVersion);

			if (agt.indexOf("msie 5.0") > -1) { this.version = 5.0 };

			//

			if (document.getElementById) {

				this.layerStart = "document.getElementById('";

				this.layerStyle = "').style";	  

			}

			else if (document.all) {

				this.layerStart = "document.all.";

				this.layerStyle = ".style";		

			}

			else {

				this.layerStart = "document.";

				this.layerStyle = ""; 

			}

			this.width = function() {

				return this.isExplorer ? document.body.clientWidth : window.innerWidth;

			}

			this.height = function() {

				return this.isExplorer ? document.body.clientHeight : window.innerHeight;

			}

			this.scrollY = function() {

				return this.isExplorer ? document.body.scrollTop : pageYOffset;

			}

			this.scrollX = function() {

				return this.isExplorer ? document.body.scrollLeft : pageXOffset;

			}

		}

		///////////////////////////////////////////////////////////////////////////////////

		browserInfo = new classBrowserInfo();

		///////////////////////////////////////////////////////////////////////////////////

		function cNavigationTable(objName, id, offset, vis, speed)

		{

			this.objName = objName;

			this.id = id;	

			this.offset = offset;

			this.isShown = vis;

			this.position = this.isShown ? 0 : this.offset;

			this.speed = speed;

			this.interval = 0;

			this.updatePos = function() {

				eval(browserInfo.layerStart+this.id+browserInfo.layerStyle+".left = this.position+'px'");

			}

			this.show = function() {

				if (this.position < 0) {

					var nextPos = this.position+this.speed;

					this.position = ((nextPos > 0) ? 0 : nextPos);

					this.updatePos();

				}

			}

			this.hide = function() {

				if (this.position > this.offset) {

					var nextPos = this.position-this.speed;

					this.position = ((nextPos < this.offset) ? this.offset : nextPos);

					this.updatePos(); 

				}

			}

			this.toggleDisplay = function() {

				clearInterval(this.interval);

				if (this.isShown = !this.isShown) {

					this.interval = setInterval(this.objName+".show()", 10);

				}

				else {

					this.interval = setInterval(this.objName+".hide()", 10);

				}

			}

		}

		///////////////////////////////////////////////////////////////////////////////////

		objNavBar = new cNavigationTable("objNavBar", "idNavbar", -135, false, 3);

		///////////////////////////////////////////////////////////////////////////////////

		//-->

		</script>

		<title>Navigation Table</title>

	</head>

	<body>

		<table id="idNavbar" class="navigation" onclick="objNavBar.toggleDisplay();">

			<tr>

				<td>navigation</td>

			</tr>

		</table>

		<p>clickie</p>

		<p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>

		<p>

      <a href="http://validator.w3.org/check/referer">

			<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /></a>

    </p>

	</body>

</html>




[edit]I also wasn't sure of the best way to check whether a browser was Netscape?[/edit]

..
~Existence is a mere pattern.~

[This message has been edited by Rooster (edited 11-28-2002).]
H][RO
Bipolar (III) Inmate

From: Australia
Insane since: Oct 2002

 posted posted 12-08-2002 03:25

your I.E probably isnt refreshing, i have so many problems with it not refreshing even after it apparently clears cache and temp files, really gives me the **** sometimes.. Maybe ive just got a dodgey install or something.
DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

 posted posted 12-08-2002 04:39

Slime - just a note about unit of measure - you are correct as it relates to his example of course. In your example though, the 'px' is not needed. A value of 0 is valid as is.
Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

 posted posted 12-08-2002 07:14

Oh, you're right. I always forget that. Not a bad thing to forget, in my opinion =)

« Backwards — Onwards »

Show Forum Drop Down Menu
Maximum Security
OZONE
DHTML/Javascript
Server-Side Scripting - Oh my!
CSS - DOM - XHTML - XML - XSL - XSLT
Stupid Basic HTML
Visual Therapy
Photoshop
Photoshop Pong, Anyone?
***WARNING*** BIG SIG APPROACHING
Photography
3D Modelling & Rendering
Multimedia/Animation
Print Graphics
Holding Pens
Philosophy and other Silliness
Outpatient Counseling
Site reviews!
Mad Scientists' Laboratory
Getting to know the Grail