Very simple JS tab script

Moin Moin,

actually I needed a simple tab script for a page with tabbed navigation. Because coding is fun I decided to write my own, very simple tab script. In this case I used prototype. The whole thing is for a little picture gallery which you can see here: http://www.woodheads.de/docs/picsframe.html. This is a page from my friends of my hometown in southern Germany. My job is to extend the existing code.

There are two div areas marked with a id. The name of the id starts with page_ as an identifier. prototype has a nice method to get all elements with a special attribute. In this case I grab the div elements having a id with $$(‘div[id]’). That makes it possible to iterate over the grabed div’s and handle only the needed objects - choosen with a simple regex.

This is the basic HTML structure:

<span onclick="Pics.change_page('lutterhaus')">Lutterhaus</span> |
<span onclick="Pics.change_page('plankstadt')">Plankstadt</span>

<div id="page_plankstadt" style="display:none">
  <div id="pic_gallery">
    <div class="pics">
      <img id="1" onclick="Pics.show_pic(this.id,'pla');" src="/img/1_th.jpg" alt="#" /><br />
      <img id="2" onclick="Pics.show_pic(this.id,'pla');" src="/img/2_th.jpg" alt="#" /><br />
    </div>
    <div style="float:left;" id="pla" class="big_pic"><img src="/images/1.jpg" /></div>
    <div class="pics">
      <img id="3" onclick="Pics.show_pic(this.id,'pla');"src="/img/5_th.jpg" alt="#" /><br />
      <img id="4" onclick="Pics.show_pic(this.id,'pla');"src="/img/6_th.jpg" alt="#" /><br />
    </div>
    <div style="clear:both"></div>
  </div>
</div>

<div id="page_lutterhaus" style="display:none">
  <div id="pic_gallery">
    <div class="pics">
      <img id="5" onclick="Pics.show_pic(this.id,'pla');" src="/img/5_th.jpg" alt="#" /><br />
      <img id="6" onclick="Pics.show_pic(this.id,'pla');" src="/img/6_th.jpg" alt="#" /><br />
    </div>
    <div style="float:left;" id="lutt" class="big_pic"><img src="/images/1.jpg" /></div>
    <div class="pics">
      <img id="7" onclick="Pics.show_pic(this.id,'pla');"src="/img/7_th.jpg" alt="#" /><br />
      <img id="8" onclick="Pics.show_pic(this.id,'pla');"src="/img/8_th.jpg" alt="#" /><br />
    </div>
    <div style="clear:both"></div>
  </div>
</div>

And here the JavaScript code:

<script language="javascript">
  var Pics = {
    show_pic: function(id,area) {
      $(area).innerHTML = '<img src="/images/' + id + '.jpg" />';
    },
    change_page: function(show) {
      // get the div elements with attribute id
      var elem = $$('div[id]');

      // iterate over the div elements
      for(i = 0; i < elem.length; i++) {
        // id does not match page_
        if(!elem[i].id.match(/^page_/)) continue;
        // we ignore the page to be choosen
	if(elem[i].id == 'page_' + show) continue;

	// all matched elements will be hidden
	elem[i].style.display = 'none';
      }

      // only the page we want to see is set to display
      $('page_' +  show).style.display = 'block';
    }
  }
</script>

I think this is quiet simple and very lightweight. For sure scriptaculous and jQuery (yes - and many other librarys) offer ready to go solutions for tabbed pages. But sometimes you just need a minimum of what these librarys can do and it’s faster to write it by yourself.

Extending this for your needs hould be more than simple.

Andreas