multiple javascript functions: problem!

I'm a student designer trying to put my portfolio site together over spring break (=I don't know javascript), and am experiencing several problems.

1. I believe the multiple javascripts on my identity.html page are conflicting, causing the image ready rollover to not work. Or: the onClick and onMouseOver conflict? I really have no idea, and have problem solved for hours...

2. The scroll code doesn't work on pcs. on macs It's fine. whaat?

3. I have a resize that resizes differently in pcs v. macs. how to fix? on macs it's correct, needs to hit the bottom of mainbkg.gif.


(ps, i have no idea how "difficult" this question might be for some of you master problem solvers...they gave me only 75 points when i joined)
Who is Participating?
miskateConnect With a Mentor Commented:
First, let me apologise for the tone of this reply... I've had a hard day and you've presented a convenient venting opportunity.

Second, go away and read the HTML 4.0 and CSS 2.0 standards and then have another look at your design. Also read Then start with some MUCH simpler pages and work your way up.

The HTML of identity.html is really truly awful and over complicated. You would do well to at least decide whether or not you're using stylesheets. And then rewrite it all to make full use of stylesheets anyway.

And for someone who doesn't know how to use javascript, you've got an awful lot of it in there. If you're trying to do what I think you're trying to do (it isn't obvious) you're making life unnecessarily complicated for yourself.

To address specific issues...
  well, it took me a couple of minutes to even *find* your wizbang DHTML scroll bar on the page. What exactly are you trying to scroll here? There doesn't seem to be anything that needs it when you first load the page.

the showSelectedNav function seems fine - but those little nameless grey rectangles at the bottom which have no obvious function and no alt tags to explain themselves clearly don't work (well, one of them works sometiems). Possible reasons:

1. code like this (this particular method seems to be common on the page):
<div id="identity3" style="position:absolute; z-index:1; visibility:hidden; left: 20px; top: 37px; bgcolor=; "#FFFFFF" class="portfolioheader">

ok... make up your mind if you're using styles or attributes ok?  And form your attributes properly. It should either be
<div id="identity3" style="position:absolute; z-index:1; visibility:hidden; left: 20px; top: 37px; background=color:#FFFFFF" class="portfolioheader">
<div id="identity3" style="position:absolute; z-index:1; visibility:hidden; left: 20px; top: 37px;" bgcolor="#FFFFFF" class="portfolioheader">

preferably the former. In short, you're missing the close quote on the style attribute and you have a weird semi colon after bgcolor.

2. Shall we have a look at the rest of that passage?

<div id="identity3" style="position:absolute; z-index:1; visibility:hidden; left: 20px; top: 37px; bgcolor=; "#FFFFFF" class="portfolioheader">
      <div align="right"><span class="court">characteristics<img src="images/spacer.gif" width="252
                  " height="1"><br>
            <img src="images/rightnotchoz.gif" width="363" height="17" align="right"><br><br><br><br>
      <td width="6" rowspan="2" align="left" valign="top" bordercolor="#FFFFFF" class="portfolioheader">
            <div align="left">
      <table width="95%" height="100%" border="0" align="right" cellpadding="0" cellspacing="0" bordercolor="#990000" bgcolor="#FFFFFF" valign="top">

Huh? Where did those TD tags come from? TD tags should only be inside a table. All of your identityX div's start like this and there's no overarching table in site. Tables at their simplest level work like this:
<tr><th><!-- other stuff --></th><th><!-- other stuff--></th></tr>
<tr><td><!-- other stuff --></td><td><!-- other stuff--></td></tr>
<tr><td><!-- other stuff --></td><td><!-- other stuff--></td></tr>

The only place between the <table> and </table> that ANYTHING other than a <tr>,<th>,<td> or their respective closing tags should appear is where I've got <!-- other stuff -->. There are of course <thead> and <tbody> tags etc, but we won't go into those now. No <t...> tags should ever appear outside of <table> tags.

Essentially, your layers are really badly formed. If you fix them, you may find that some of the other rendering and DHTML problems solve themselves. I can't guarantee anything, but it's a start.

Here's some more general gripes/issues.

1. Event handlers (eg onmouseover) don't need to return a value

2. ALT tags are your navigational friend

3. Do you really need 9 apparently identical "rightnotch" images?

4. Are you aware that sentences are supposed to start with a capital letter? Despite what you may think, bucking little traditions like this does not make you look cool, it just makes you look either pretentious or childish (or both). The caps are in your source - lose the lowercase styling.

5. The sentence "A seemingly simplistic concept, identity functions [like language] as one of societys integral components" doesn't work. Try replaceing replacing "as" with "are".

6. The little pink thingies at the top don't seem to be placed correctly. They come up under the letters.

<td width="80" align="right" valign="bottom" bgcolor="#FFFFFF"><br>
            <br> <br> <br> <br> <br> <br> <br> <br> <br></td>
          <td width="453" align="left" valign="top" bgcolor="#FFFFFF" class="portfolioheader"><img src="images/type2.jpg" width="432" height="284" align="right">

All those <br>'s are really unnecessary. The cell will stretch to acommodate the one next to it.

<div align="left">

How about just putting some left-padding on whatever is going next to it? Oh wait... there is nothing next to it. Except another apparently randomly placed <td> with no context...

Well... that's enough for me for now. I think if you actually fix up the basic structural problems in your HTML you may find that things start working, or at least that it's easier to debug.
Can you post a hyperlink to your website, or can you post some code here that you think is problematic?  If not, I could send you my email address, and you could forward me the files to look at.

(chomp, chomp)
courtneyboltonAuthor Commented:
(confused) i see a link when viewing my above post: (again)

<a href="></a>
The new generation of project management tools

With’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.


After just glancing at things really quick, one thing you might want to consider is to change the document's declaration at the top from:


to something like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

It's not totally correct but allows the browser to mix and match old and new scripts w/ css DOM effects better.  At least that's been my experience with pages that use css/dom effects.  The "strict" declaration can be unforgiving if anything in your html is off especially in your case with all the javascript DOM effects you've got.

Try it and see if that changes anything.  It may not help at all!  Just from the top of my head...
courtneyboltonAuthor Commented:
I am working very diligently on this page, and appreciate any and all help you provide. i recognize that my code is a mess; i'm not a programmer, i'm learning. please continue to post and i will continue to fix. thank you thank you
gator4lifeConnect With a Mentor Commented:
courtnetbolton -

First, I am sorry about not seeing the hyperlink earlier; a blatant oversight on my part.  I didn't see any code, so that is usually the first question I ask.

Second, I would have to agree pretty much with miskate's assessment of your page.  It is dreadfully and awfully overcomplex, and looking at the code gives me a headache.

Third, if you are NOT a programmer, why are you attempting to do something so complex in the first place?  Don't take this the wrong way (since I have used the books for many other topics), but get yourself an "HTML for Dummies" book and learn the basics of web design if you want to do it right.  The technologies on the page you linked to are much too overcomplex for your skill level.  Just by looking at the code, I can almost tell you are using some kind of visual development environment and pasting in code as you go.  The way to learn is that "Dummies" book and good 'ol Notepad (or whatever it's called on Macs).

Fourth, many of the experts around here are very keen on the web development standards and understand them well.  When we see stuff like this, you are bound to catch some flak.  What you are asking of the volunteers here is to basically redesign your entire web page for all platforms and all browsers, since you really do need to redesign it, and that kind of work is really beyond the scope of this forum.  Most people here post one or two questions that are readily solvable by some expert, but by the length of miskate's response, it is clear that you won't get everything solved here.

Do yourself a huge favor and learn the fundamentals, build your skillset, work on your design by doing it the hard way (like most of us learned), and then come back and see us if you really have some issues that can't be solved.

And don't get me wrong, I wish you the best of luck! ;-)

(chomp, chomp)
webwomanConnect With a Mentor Commented:
I'll add a third on all those comments.

Basically, if you don't know what it is or how to make it work, don't use it. ;-)

That said, deconstructing other people's scripts is a great way to learn -- but until you know what it does, and how to make it do what YOU want and make it work with other scripts, it's a plaything, NOT a finished piece.

I'm not sure what you're using to make your pages, but if it has canned effects, don't use them.

And lose the frames. ;-)
No comment has been added lately, so it's time to clean up this TA.
I will leave the following recommendation for this question in the Cleanup topic area:

Split: miskate {http:#8062778} & gator4life {http:#8062981} & webwoman {http:#8065061}

Please leave any comments here within the next seven days.

EE Cleanup Volunteer
All Courses

From novice to tech pro — start learning today.