Array or GetElementsById?

[robertcathles]

[ I'm a n00b to the DynamicDrive forum and came here for some help ]

I need to know If I can get a simplified javascript for all this code:

---

<span class="tab" onClick="
javascript:this.document.all.t1.style.display='inline';
javascript:this.document.all.t2.style.display='none';
javascript:this.document.all.t3.style.display='none';
javascript:this.document.all.t4.style.display='none';
javascript:this.document.all.t5.style.display='none';
javascript:this.document.all.t6.style.display='none';
javascript:this.document.all.t7.style.display='none';
javascript:this.document.all.t8.style.display='none';
javascript:this.document.all.t9.style.display='none';
javascript:this.style.fontWeight='bold';
javascript:this.document.all.n2.style.fontWeight='normal';
javascript:this.document.all.n3.style.fontWeight='normal';
javascript:this.document.all.n4.style.fontWeight='normal';
javascript:this.document.all.n5.style.fontWeight='normal';
javascript:this.document.all.n6.style.fontWeight='normal';
javascript:this.document.all.n7.style.fontWeight='normal';
javascript:this.document.all.n8.style.fontWeight='normal';
javascript:this.document.all.n9.style.fontWeight='normal'" id="n1">Recommended</span>

---

Is it possible, instead of saying document.all one after another, if I could use an array() or getelementsbyid() action to get a list of these elements at once - and set them all to the same CSS style attribute?

t1, t2, t3 and so on are identified by id=" " attributes, as are n1, n2 n3 and so on.

all help is greatly appreciated - i use this code for 9 times on my page at http://uk.geocities.com/robcboff/programs.html, so I have a lot of KB taken up.

please note, this page works best in IE6. Firefox is rubbish at determining a javascript like the one above (it probably needs some rare extension).

thank you for your help

[mwinter]

<ul id="categories">
<li><a href="#recommended">Recommended</a></li>
<li><a href="#maintenance">System maintenance</a></li>
<li><a href="#settings">Systems &amp; settings</a></li>
<li><a href="#image">Image-related</a></li>
<li><a href="#media">Media</a></li>
<li><a href="#internet">Internet &amp; HTML</a></li>
<li><a href="#add-ons">IE add-ons</a></li>
<li><a href="#personal-additions">Personal additions</a></li>
<li><a href="#pdf">PDF creation</a></li>
</ul>

Styled with the following CSS:

@media screen {
  #categories {
    display: block;
    list-style-type: none;
    margin: 0 0 1em;
    text-align: center;
  }
  #categories li {
    display: inline;
    margin: 0;
    padding: 0 0.25ex;
  }
  #categories a,
  #categories a:visited {
    background: transparent;
    color: blue;
    text-decoration: underline;
  }
}

Each of tables should be given the relevant id attribute above. For example,

<table id="recommended">

Do not use the style attribute to hide the tables.

(function() {
  var active = {category : null, table : null};

  function showCategory() {
    var element;

    if((element = active.category)) {
      element.style.fontWeight = '';
    }
    if(this.style) {
      (active.category = this).style.fontWeight = 'bold';
    }

    if(active.table) {
      active.table.style.display = 'none';
    }
    if('string' == typeof this.href) {
      element = document.getElementById(this.href.substring(this.href.indexOf('#') + 1));

      if(element && element.style) {
        (active.table = element).style.display = '';
      }
    }
  }
  function finalise() {
    active.category = active.table
                    = null;
  }

  if(document.getElementById) {
    window.onload = function() {
      var list  = document.getElementById('categories'),
          element, links;

      if(list && list.getElementsByTagName) {
        links = list.getElementsByTagName('a');

        for(var i = 0, n = links.length, c; i < n; ++i) {
          c = links&#91;i];
          c.onclick = showCategory;

          if('string' == typeof c.href) {
            element = document.getElementById(c.href.substring(c.href.indexOf('#') + 1));

            if(element && element.style) {
              element.style.display = 'none';
            }
          }
        }
      }
      window.onunload = finalise;
    };
  }
})();

Place that in a script element. It doesn't really matter where.

This has been superficially tested, and I haven't found any problems. It works equally well in IE5.01+, Firefox, Mozilla 1.3+ and Opera 7.03+. It should also degrade to something usable in all other browsers.

Is it possible, instead of saying document.all one after another, if I could use an array() or getelementsbyid() action to get a list of these elements at once

You could use a loop and construct the property names at run-time, but the solution above is far superior.

please note, this page works best in IE6. Firefox is rubbish at determining a javascript like the one above (it probably needs some rare extension).

No, I'm afraid it's just that you don't know what you're doing.

In the code you posted, the this operator refers to the span element. No elements have an officially defined document property, so Firefox, and most other browsers, will error out. Similarly, the all collection is a proprietary feature of IE and many browsers do not support it. That aside, the all collection in this case should be deprecated in favour of the document.getElementById method.

There are other problems, too. A table element does not have a display property value of inline. In IE, it would (incorrectly) be block, and in modern browsers it would table. In addition, if a user visits that page with scripting disabled, it is useless because all of the content is hidden. In the solution above, the content will only be hidden if it could be made visible again. The use of proper links allows users to be taken to the relevant table, which makes life far easier for them.

Finally, I wouldn't make items bold to show they are active as it makes the text shift. This happens in the both the original and the suggestion above.

Mike

[robertcathles]

Thank you for your help, Mike, I greatly appreciate it.

I have tried editing my page so that it works, but all I get is all the tables showing, and the links following to the tables, in the same page. I saved a backup copy before editing, but have saved the editied one tohttp://uk.geocities.com/robcboff/programs2.html. I have corrected the id's of the anchors and tables, as I find it's easier to keep the recorded by number and not extended text. I was wondering if you could send me an exact copy of all the perfectly-working code via here, or if you need to, my email. This should sort my problem out. Alternatively, you could look at programs2.html and then tell me where I've gone wrong. Unless, of course, I am mistaken, and that is how it's supposed to work (in which case the javascript is worthless).

Thank you for the tip about document.all. This makes it much clearer why Firefox doesn't like my javascript.

In addition, if a user visits that page with scripting disabled, it is useless because all of the content is hidden. In the solution above, the content will only be hidden if it could be made visible again. The use of proper links allows users to be taken to the relevant table, which makes life far easier for them.

Thank you for this enlightenment, which I have considered. I would like inform you that my website is not very well known, and I therefore have a restricted amount of people who can access it (for bandwidth reasons on a free server). From my knowledge, their browsers have Javascript enabled. I would also like to bring in the fact that only 5% of the world's Internet users do not have Javascript available, according to TheCounter.com of June 22nd. 95% have Javascript 1.2+, and therefore, I find no reason to change my webpage just to suit a small majority of people with disadvantages. Yet, at the end of the day, you are the "Professor," I am the "Student," you know better than me, and I should be thankful that you even decided to send me a reply. (Statistics resource at http://www.thecounter.com/stats/2005/June/javas.php ).

Finally, I wouldn't make items bold to show they are active as it makes the text shift.

I like bold! It stands out well and I don't care if the text shifts, because it isn't making a problem to the rest of the coding on my page (which is why it is at such a small font size).

Continuing, even if the script is meant to do what I have seen and display the entire list (as above), I found out that it would be easier if users would not have to print about 5 pages of information to get what they want, but choose the one they need to print. I am aware of page selective printing (e.g. only page 5), but the info at the top of my page is relevant to me. This also makes a better presentational technique. I made a special table for my index.html page, where I wanted it to suit 800x600 and 1024x768 screens, and print on a page with causing the text to be cut-off, and suitably designed it. Therefore I have considered printing techniques before, which is why I brought this subject up.

Thank you so much for your help. I wish I could give you something in return for all that you have told me (as all of it is vitally important, helpful and reliable), but all I can do is say thank you.

[mwinter]

I have tried editing my page so that it works, but all I get is all the tables showing, and the links following to the tables, in the same page. I saved a backup copy before editing, but have saved the editied one to http://uk.geocities.com/robcboff/programs2.html.

The script element you created was:

<script type="Javascript">

Browsers will see that as an unrecognised MIME type, and ignore the script altogether. Correct the attribute value to text/javascript.

I have corrected the id's of the anchors and tables, as I find it's easier to keep the recorded by number and not extended text.

Fair enough. I feel the opposite, but it's you that needs to maintain the page. It was just a suggestion, not a rule.

I was wondering if you could send me an exact copy of all the perfectly-working code via here, or if you need to, my email.

Correcting the type attribute value should be all you need to do. Be aware that I get error messages from GeoCities' awful scripts and that could intefere with other features. Just a pre-emptive heads-up.

Unless, of course, I am mistaken, and that is how it's supposed to work (in which case the javascript is worthless).

I'd agree as the script really wouldn't be doing much of anything. In some browsers, the tables may remain visible, but that will only happen if it isn't possible to hide them.

I would also like to bring in the fact that only 5% of the world's Internet users do not have Javascript available

Browser statistics are generally meaningless. No two sites will have exactly the same demographics. Moreover, deriving much of anything from these sorts of statistics is usually self-serving: if you see few scripting-disabled browsers then move to a script-dependent site, you will see even fewer of these browsers in the future and think that your decision was justified.

Looking at the bigger issues, there are other important considerations, too. Producing script-dependent sites can prevent search engines from indexing a site. New legal requirements requiring the inclusion of disabled users (including less extreme conditions such as colour-deficient sight) is a major concern now as well.

95% have Javascript 1.2+, and therefore, I find no reason to change my webpage just to suit a small majority of people with disadvantages.

Something that is well-designed will work for everyone. There is no reason to exclude anyone. That doesn't mean to say that every visitor will have the same experience, but they will at least be able to access the content you are trying to provide. The extra effort is minimal.

By the way, versions of JavaScript (or its equivalent) earlier than 1.5 (possibly 1.4) aren't really worth considering. The object model provided by the browser is likely to be too primitive to do more than relatively basic tasks.

Yet, at the end of the day, you are the "Professor,"

Just as a point of fact, those titles relate to post count, not necessarily ability. You'll have to judge for yourself the worth of my advice.

I like bold! It stands out well and I don't care if the text shifts

Again, fair enough. I wanted to make sure you were aware of it.

Thank you so much for your help.

You're welcome.

Mike

[robertcathles]

Hello Mike

The script works - I thought that a little attribute like that wouldn't make a difference! How wrong I am!

I have corrected the id's of the anchors and tables, as I find it's easier to keep the recorded by number and not extended text.

I like the idea of named identitys, but it does save a few bytes (I'm just being picky, aren't I?)

Be aware that I get error messages from GeoCities' awful scripts and that could intefere with other features.

Yeah, GeoCities' adverts really muck the whole page up - there's supposed to be an advert, but I can no longer see it in IE, yet in Firefox, it loads three mini-adverts at the top of the page! To sort the errors problem, I could add in an onerror() javascript, which I can steal from my anti-virus software Norton Internet Security (Symantec) - this will elimate the little irritations. I won't try and get rid of the adverts, that's just against the terms and conditions - not of just this forum, but also GeoCities (although they don't even load correctly!). I'll only try to fix the errors - no problem with that, is there?!

I also now see your point in the choice of the whole javascript thing - if a browser does have Javascript enabled, it works fine, but if it doesn't, the tables will still be displayed safely! Thank you for your idea. All that stuff I said about JavaScript disabling an so on is now meaningless, although I still appreciate the info you gave me about it.

Just as a point of fact, those titles relate to post count, not necessarily ability. You'll have to judge for yourself the worth of my advice.

I know that, but I clearly needed your intelligent resources to get my page loading faster. I only write the HTML for my pages, so in my case, you are very helpful when it comes to Javascript.

Also, I think your advice is very important, as I now know more than I did about Javascript beforehand (it seems like fate that I just had to find Dynamic Drive).

Once again, thank you for your help, and also thanks to Dynamic Drive, who let me find my way in making a page better prepared for the World Wide Web.

Your'e a star, and I hope you know that. Thank you for all your help and guidance, for I would have an expired bandwidth without you!

'Happy coding'

[mwinter]

The script works - I thought that a little attribute like that wouldn't make a difference! How wrong I am!

Browsers are very lenient with most things. Far too much in my opinion. However, they do have to take some things at face value, and the script type is one of those things.

I like the idea of named identitys, but it does save a few bytes (I'm just being picky, aren't I?)

Yup. I'd say so.

Once again, thank you for your help

As I said before, you're welcome.

Mike