Multiple ID in getElementById

Question

I've found a great tutorial to detach a navigation from the page to keep it static when you scroll using Javascript (http://code.stephenmorley.org/javascript/detachable-navigation/).

However, I'd like to implement this on more than one nav div.

I assume it's adding another class name to document.getElementById('navigation').className but I can't get the right syntax

Here is the code:

/* Handles the page being scrolled by ensuring the navigation is always in
 * view.*/   
function handleScroll(){

  // check that this is a relatively modern browser
if (window.XMLHttpRequest){

// determine the distance scrolled down the page
var offset = window.pageYOffset
           ? window.pageYOffset
           : document.documentElement.scrollTop;

// set the appropriate class on the navigation
document.getElementById('navigation').className =
    (offset > 104 ? 'fixed' : '');

  }

}

// add the scroll event listener
if (window.addEventListener){
  window.addEventListener('scroll', handleScroll, false);
}else{
  window.attachEvent('onscroll', handleScroll);
}

you shouldnt have multiple items on a page with the same ID, ID's are meant to be unique...if you want to capture multiple items you should use `document.getElementsByClassName('navigation')` (if not using jquery) which will get you yor nav bars, then check to see if that node is also "fixed" ( a node can have more than one css class,if using jquery, you can use .hasClass() ) — raddrick, May 22 '12 at 20:25
your current problem is that it cant add className to navigation because there are two of them and youre not specifying which one you'd like to use. — raddrick, May 22 '12 at 20:28
if you want this to happen in two navigation div's, consider putting them both into one div and call it nav and set a style on it (this depends on your design) — raddrick, May 22 '12 at 20:29

Lukx · Accepted Answer · 2012-05-22T20:39:13.450

You will have to call getElementById() for each ID. The Method is only designed to get exactly one element (or zero, if the ID isn't found).

Assuming, you have two navigation divs, left and right, like this:

<div id="navigationLeft">
     <ul>
         <!-- Navigation entries -->
     </ul>
</div>
<!-- Maybe some content or whatever? -->
<div id="navigationRight">
     <ul>
         <!-- Navigation entries -->
     </ul>
</div>

Then your Javascript line in question would look like this:

// set the appropriate class on the navigation
document.getElementById('navigationLeft').className = (offset > 104 ? 'fixed' : '');
document.getElementById('navigationRight').className = (offset > 104 ? 'fixed' : '');

// or, shorter but less readable (i think) 
document.getElementById('navigationLeft').className
    = document.getElementById('navigationRight').className
        = (offset > 104 ? 'fixed' : '');

If this does not yet answer your question, please feel free to add some relevant HTML-Code to your question. [Update: Example]

Thanks for the response. Could you give me an example? – Ryso May 22 '12 at 20:27 — Ryso, May 22 '12 at 20:27

score 0 · Answer 2 · answered May 22 '12 at 20:31

0

This is not recommended you should replace id with classes and use that in a loop to set the value:

HTML:

<div class="navigation">
  <p>test 1</p>
</div>
<div class="navigation">
  <p>test 2</p>
</div>

Javascript:

divs = document.getElementsByClassName('navigation');
for(i = 0; i < divs.length; i++) {
    var div = divs[i];
    var divClassName = div.className;
    if(divClassName.indexOf('fixed') != -1 && offset > 104) {
       divClassName.replace(' fixed','');
    } else {
       divClassName += ' fixed';
    }
}

I think that will do the trick :-)

Greetings! Gonzalo G.

answered May 22 '12 at 20:31

ggarcia24

382
1
8

Unfortunately, this does not work in IE 6 or 7, as they don't know getElementsByClassName() yet. – Lukx May 22 '12 at 21:26
If you use something else like mootools, jquery, prototype, or any other library you could replace the call of getElementsByClassName by something else, in the mean time let me see if I can find a replacement that could support IE6 and 7 PS: Here is a pure javascript implementation that you could use in those browsers: http://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/ – ggarcia24 May 31 '12 at 03:18

raddrick · Answer 3 · 2012-05-22T20:36:37.383

you shouldnt have multiple items on a page with the same ID, ID's are meant to be unique...if you want to capture multiple items you should use:

<div class="navigation"></div>

var nodes = document.getElementsByClassName('navigation')

...if not using jquery, otherwise do something like

var nodes = $('.navigation')

which will get you yor nav bars, then check to see if that node is also "fixed" ( a node can have more than one css class )

(nodes[i].indexOf("navigation") >= 0)

if using jquery, you can use .hasClass('fixed') )

nodes[i].hasClass('fixed')

...your current problem is that it cant add className to navigation because there are two of them and youre not specifying which one you'd like to use.

If you want this to happen in two navigation div's, consider putting them both into one div and call it nav and set a style on it (this depends on your design)

Steven10172 · Answer 4 · 2012-05-22T20:41:37.300

All id's on an element must be unique.

One solution so that you can do a simple change would be to change the CSS file to something like this:

.navigation{
  position:absolute;
  top:120px;
  left:0;
}

.navigationFixed{
  position:fixed;
  top:16px;
}

And define the Div's vis this:

<div class="navigation">
  <!-- your navigation code -->
</div>

And then edit the JavaScript to something along the lines of this:

/* Handles the page being scrolled by ensuring the navigation is always in
 * view.
 */
function handleScroll(){

  // check that this is a relatively modern browser
  if (window.XMLHttpRequest){

  divs = document.getElementsByClassName('navigation');
  for(i = 0; i < divs.length; i++) {
    // determine the distance scrolled down the page
    var offset = window.pageYOffset
               ? window.pageYOffset
               : document.documentElement.scrollTop;
    divs[i].className =
        (offset > 104 ? 'navigationFixed' : 'navigation');

    } 

  }

}

// add the scroll event listener
if (window.addEventListener){
  window.addEventListener('scroll', handleScroll, false);
}else{
  window.attachEvent('onscroll', handleScroll);
}

This is the option i would prefer if one could. Unfortunately, IE7 doesn't know getElementsByClassName(). — Lukx, May 22 '12 at 21:25

Multiple ID in getElementById

4 Answers4

Linked