multiple javascript functions: problem!

Posted on 2003-03-03
Medium Priority
Last Modified: 2013-11-19
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)
Question by:courtneybolton
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

Expert Comment

ID: 8062702
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)

Author Comment

ID: 8062716
(confused) i see a link when viewing my above post: (again)

<a href="http://www.homepage.mac.com/courtney.bolton>http://www.homepage.mac.com/courtney.bolton</a>

Accepted Solution

miskate earned 100 total points
ID: 8062778
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 http://www.webstandards.org. 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.
WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.


Expert Comment

ID: 8062789

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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> 

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

Author Comment

ID: 8062806
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

Assisted Solution

gator4life earned 100 total points
ID: 8062981
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)
LVL 19

Assisted Solution

webwoman earned 100 total points
ID: 8065061
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. ;-)
LVL 16

Expert Comment

ID: 10097335
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

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question