When JavaScript Goes Bad

**tripwire45** · 01-24-2007

Actually, it should be "When the script writer goes bad". I wanted to create my own little version of "userbars". I found some JavaScript on the web I thought I could adapt to my own purposes. In IE, it works just fine but in Firefox, it does something quite different. It must be how the "window" positions itself in JavaScript. I've put the page on the web so you can take a look at it. Here's the link:

http://www.wiredwriter.net/image_file/signature.html

To view the source code, just right click the page and choose "view source". I'm reasonably adept at html and css (though still needing improvement) but am flat out trying to learn JavaScript. This isn't for a cert but just to improve my skills in the realm of web development. I'm still quite the neophyte but am enjoying the learning process. Experienced programmers, please be kind. Thanks.

-Trip

**Google ADS** · 01-24-2007

**Daemonic** · 01-24-2007

Wow... that took me quite a while to figure out what was wrong. It wasn't easy.

pixelLeft and pixelTop are interpreted differently between IE and FF.

Essentially, I changed a lot of the code to make it cleaner and more compact. Document.Layers will never return true in IE or FF, its a Netscape 4.x specific item.

I then removed the table items and replaced them with a single div, eliminating the need for the blank.gif.

Then I used a combination of clip and changing the top of the margin of the internal div in comparison to the external div.

Then I figured you could just set the height of the external div to the height of one image, set overflow to hidden and remove the use of clip. Then I figured out I wouldn't really need to do anything with the external div at all, but just move the internal div.

I then added a doctype, since every HTML page should have a doctype. I just set it to use the HTML 4.0 doctype, since its simple.

By removing position: absolute, top: 100px, bottom: 100px, you can position it inside anything you want.

I've tested it on IE 6, IE 7 and FF 2.0 and it works like a charm on them.

To the code!

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>signature</title>

<script language="JavaScript">
<!-- Original:  Dion (yobo42@hotmail.com) -->
<!-- Web Site:  http://yoboseyo42.virtualave.net -->

<!-- Begin

boxheight = 20;  // height of news box
scrollheight = 520; // total height of all data to be scrolled

function scrollnews(cliptop) {
cliptop = (cliptop + 1) % (scrollheight + boxheight);
tdel = document.getElementById("test2");
tdel.style.marginTop = 0 - cliptop+"px";
setTimeout("scrollnews(" + cliptop + ")", 50);
}
//  End -->
</script>
</head>
<body onload="scrollnews(0);" bgcolor="blue">

<div id="news" style="border-width: 0px; position: absolute; visibility: visible; top: 100px; left: 100px; height: 20px; overflow: hidden;">

<div id="test2">

<!-- Your News Items are Here -->
<img src="2001.gif" height="19" width="350"><br>
<img src="delta.jpg" height="20" width="350"><br>
<img src="Bond.png" height="20" width="350"><br>
<img src="ComptiaA.gif" height="20" width="350"><br>
<img src="contact.jpg" height="20" width="350"><br>
<img src="debian.jpg" height="20" width="350"><br>
<img src="dell.png" height="19" width="350"><br>
<img src="firefox.jpg" height="20" width="350"><br>
<img src="alpha.jpg" height="20" width="350"><br>
<img src="got_root.png" height="19" width="350"><br>
<img src="hardware.gif" height="20" width="350"><br>
<img src="html.gif" height="20" width="350"><br>
<img src="lan.gif" height="19" width="350"><br>
<img src="linux.gif" height="21" width="352"><br>
<img src="LoonyToons.jpg" height="19" width="350"><br>
<img src="matrix.jpg" height="19" width="350"><br>
<img src="nasa.jpg" height="20" width="350"><br>
<img src="banner.jpg" height="20" width="350"><br>
<img src="network.gif" height="20" width="350"><br>
<img src="pentium4.png" height="19" width="350"><br>
<img src="php.gif" height="20" width="350"><br>
<img src="scorpio.jpg" height="20" width="350"><br>
<img src="ubuntu.png" height="19" width="350"><br>
<img src="wifi.jpg" height="19" width="350"><br>
<img src="Windows_XP.png" height="20" width="350"> <br>
<!-- End Of Your News Items -->

</div>

</div>

</body>
</html>

Thanks for the challenge! I spent half and hour figuring it out!

If you want any clarification on anything I've changed, feel free to ask me.

Oh, and I hope I didn't go overboard.

**tripwire45** · 01-25-2007

Thanks for the help, Dae. You da man!

**tripwire45** · 01-25-2007

Thanks to Daemonic, I've been able to create the following:

http://www.wiredwriter.net/reviews/reviews.html

http://www.wiredwriter.net/testing/movie.html

**bschmitt78** · 03-16-2007

As long as there is a Javascript thread here, maybe I can pose a question.

I have recently started teaching (well, more like TRYING to teach) myself some Javascript functions. Should all functions be embedded in the <head> section of an HTML document? I have seen instances where the actual functions are dispersed among the body.

I have learned that certain page loading functions have to all be kept in the <head> section so that it is there by the time the page is loaded, correct?

Also, what is the benefit of having external JS scripts vs. internal?

Ben

**mitzs** · 03-16-2007

Originally Posted by tripwire45

Thanks to Daemonic, I've been able to create the following:

http://www.wiredwriter.net/reviews/reviews.html

http://www.wiredwriter.net/testing/movie.html

ok on the second link all I get is a moving pic that is about 1/4 in wide hx 6in wide. Is that what it is soupose to be?

**mitzs** · 03-16-2007

Originally Posted by mitzs

ok on the second link all I get is a moving pic that is about 1/4 in wide hx 6in wide. Is that what it is soupose to be?

Oh and i'm using IE6

**tripwire45** · 03-16-2007

The size is right. Do you see different scenes from the upcoming Spider-Man 3 movie?

**Daemonic** · 03-16-2007

Originally Posted by bschmitt78

As long as there is a Javascript thread here, maybe I can pose a question.

Absolutely! Pose as many questions as you want! There aren't many questions I can answer in any of the other forums.

I have recently started teaching (well, more like TRYING to teach) myself some Javascript functions. Should all functions be embedded in the <head> section of an HTML document? I have seen instances where the actual functions are dispersed among the body.

There is one essential rule: the function must be defined before it is used. So if you want to call Blah(), then by the time it gets to where that is going to be called, Blah() must be defined in the page, which usually translates to before it in the page (there are exceptions to this, but following this rule is always good).

I have learned that certain page loading functions have to all be kept in the <head> section so that it is there by the time the page is loaded, correct?

Yes. This is an extension of the previous question. It boils down to the fact that the function must be declared before it can be used. Somethings occur very early in the loading of pages, so if you want to use Javascript there, it is often safer to load it in the head section (since it is always loaded first).

Also, what is the benefit of having external JS scripts vs. internal?

There are various pros and cons for doing both.

The biggest benefit of having it in an external file is that your code can be reused by multiple pages. This is a huge benefit as it saves you from having to rewrite the same function on every page. This also minimizes bandwidth used by your pages, since the user will only have to download the javascript file once, instead of for every page.

Another benefit is that you can organize your code, keep it modular and organized slightly better in an external file. It can also be run through some javascript pre-compilers that can check it for errors (often easier than trying to debug them at runtime).

It also means that all the functions in your javascript file will be ready for anywhere on the page, since external javascript files are loaded in the head section.

Those are some of the bigger benefits of having javascript in an external file as opposed to an internal declaration. I much prefer putting mine in an external file.

--Daemonic

**mitzs** · 03-16-2007

Originally Posted by tripwire45

The size is right. Do you see different scenes from the upcoming Spider-Man 3 movie?

yes I do, but that size is very annoying just in case you wanted to know.

Thread: When JavaScript Goes Bad

Thread Tools

Display

When JavaScript Goes Bad

Similar Threads

JavaScript: The Good Parts

Simply JavaScript

Review Redux: The Book of JavaScript

Book Review: PPK on JavaScript

Bad day at the office

Bookmarks

Bookmarks

Posting Permissions