Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 07-22-2009, 11:22 AM   PM User | #1
rob-y2k
New to the CF scene

 
Join Date: Jul 2009
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
rob-y2k is an unknown quantity at this point
tab displaying errors

I am trying to use this Tab script on my site. I am using IE7 and FireFox, Both of the browsers are displaying this error more often than not: Error: document.getElementById("buttons") is null


I am totally new to JS and Ive tried a few tabs already and this seems to be the simplest one of them all, i like the layout of it too.

Im at a loss as to what the problem is.

Any help would be gratefully appreciated.

Thanx

Here's the JS Ive got:

Code:
onload = function() {

 var e, i = 0;

 while (e = document.getElementById('buttons').getElementsByTagName ('DIV') [i++]) {

  if (e.className == 'on' || e.className == 'off') {

  e.onclick = function () {

   var getEls = document.getElementsByTagName('DIV');

    for (var z=0; z<getEls.length; z++) {

    getEls[z].className=getEls[z].className.replace('show', 'hide');

    getEls[z].className=getEls[z].className.replace('on', 'off');

    }

   this.className = 'on';

   var max = this.getAttribute('title');

   document.getElementById(max).className = "show";

   }

  }

 }

}
Heres the css:

Code:
#buttons {
width:450px; 
padding:15px 0 0 0; 
line-height:15px;

}
#buttons div.off {
color:#000; 
height:33px; 
margin-right:2px; 
line-height:33px; 
padding:0 20px; 
float:left; 
background:url('../media/tabs_0.gif') repeat-x left bottom; 
border:1px solid #ddd; 
border-bottom-color:#000;
 cursor:pointer; 
 position:relative; z-index:20;
 }

#buttons div.on {
color:#c00; 
padding:0 20px; 
margin-right:2px; 
margin-top:1px; 
float:left; 
background:url('../media/tabs_2.gif') repeat-x left bottom; 
border:1px solid #000; 
cursor:pointer; 
border-bottom:0; 
height:33px; 
line-height:32px; 
position:relative; z-index:100;
}

div.hide {
display:none; 
width:0; 
overflow:hidden;
}
div.show {
clear:left; 
background:#fff; 
width:450px; 
margin-top:0; 
top:-1px; 
border:1px solid #000;
padding:20px; 
position:relative; z-index:50;
  line-height:18px;
  }

div.show img {
float:left; 
margin:0 10px 10px 0;
}
.clear {clear:both;}
And the 'test' HTML:

Code:
<div id="buttons">
<div class="on" title="Details"><span>Details</span></div>
<div class="off" title="Info"><span>Information</span></div>
<div class="off" title="Contact"><span>Contact us</span></div>
<div class="off" title="tab"><span>tab</span></div>
<div class="off" title="tab1"><span>tab 1</span></div>
</div>
 
<div id="Details" class="show">
<p>Although he showed an early talent for art and began painting his native Suffolk scenery before he left school, his great originality matured slowly.</p>
<p>He committed himself to a career as an artist only in 1799, when he joined the Royal Academy Schools and it was not until 1829 that he was grudgingly made a full Academician, elected by a majority of only one vote.</p>
<p>In 1816 he became financially secure on the death of his father and married Maria Bicknell after a seven-year courtship and in the fact of strong opposition from her family. During the 1820s he began to win recognition: The Hay Wain (National Gallery, London, 1821) won a gold medal at the Paris Salon of 1824 and Constable was admired by Electronoics Store</p>
<p>His wife died in 1828, however, and the remaining years of his life were clouded by despondency.</p>
<br class="clear" />
<p>This text is an excerpt from</p>

</div>
 
<div id="Info" class="hide">
<p>His youth was spent in Le Havre, where he first excelled as a caricaturist but was then converted to landscape painting by his early mentor from whom he derived his firm predilection for painting out of doors.</p>
<<p>In 1859 he studied in Paris at the Atelier Suisse and formed a friendship with. After two years' military service in Algiers, he returned to Le Havre and met whom he said he owed `the definitive education of my eye'.</p>
<p>He then, in 1862, entered the studio of Gleyre in Paris and there met Renoir, Sisley, and Bazille, with whom he was to form the nucleus of the Impressionist group.</p> 
<p>Monet's devotion to painting out of doors is illustrated by the famous story concerning one of his most ambitious early works, Women in the Garden (Musée d'Orsay, Paris; 1866-67). The picture is about 2.5 meters high and to enable him to paint all of it outside he had a trench dug in the garden so that the canvas could be raised or lowered by pulleys to the height he required.</p>
<p> visited him when he was working on it and said Monet would not paint even the leaves in the background unless the lighting conditions were exactly right.</p>
<br class="clear" />

</div>

<div id="Contact" class="hide">

<p>With  and greatest of Post-Impressionist artists. He powerfully influenced the current of  in modern art. His work, all of it produced during a period of only 10 years, hauntingly conveys through its striking colour, coarse brushwork, and contoured forms the anguish of a mental illness that eventually resulted in suicide. Among his masterpieces are numerous self-portraits and the well-known  (1889).</p> 
<br class="clear" />
<p>This text is an excerpt from</p>
</div>

<div id="tab" class="hide">
<p>Russian-born French painter. Born to a humble Jewish family in the ghetto of a large town in White Russia, Chagall passed a childhood steeped in Hasidic culture.</p>
<p>Very early in life he was encouraged by his mother to follow his vocation and she managed to get him into a St Petersburg art school. Returning to Vitebsk, he became engaged to Bella Rosenfeld (whom he married twelve years later), then, in 1910, set off for Paris, 'the Mecca of art'.</p>
<p>He was a tenant at La Ruche, where he had Modigliani and Soutine for neighbours. His Slav Expressionism was tinged with the influence of Jean-François Millet, the Nabis and the Fauves.</p>
<br class="clear" />
<p>Essentially a colourist, Chagall was interested in the Simultaneist vision of Robert Delaunay and the Luminists of the Section d'Or.</p>
</div>

<div id="tab1" class="hide"> 
<p>Pablo Picasso, born in Spain, was a child prodigy who was recognized as such by his art-teacher father, who ably led him along.</p>
<p>The small Museo de Picasso in Barcelona is devoted primarily to his  which include strikingly realistic renderings of casts of ancient sculpture.</p>
<p>He was a rebel from the start and, as a teenager, began to frequent the Barcelona cafes where intellectuals gathered.</p>
<p>He soon went to Paris, the capital of art, and soaked up the works of Manet, Gustave Courbet, and whose sketchy style impressed him greatly. Then it was back to Spain, a return to France, and again back to Spain - all in the years 1899 to 1904.</p>
<br class="clear" />
<p><br /></p>
</div>


Rob...

Last edited by rob-y2k; 07-22-2009 at 12:33 PM..
rob-y2k is offline   Reply With Quote
Old 07-22-2009, 05:36 PM   PM User | #2
vwphillips
Senior Coder

 
Join Date: Mar 2005
Location: Portsmouth UK
Posts: 4,354
Thanks: 3
Thanked 458 Times in 445 Posts
vwphillips is a jewel in the roughvwphillips is a jewel in the roughvwphillips is a jewel in the rough
your works for me with no errors

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
#buttons {
width:450px;
padding:15px 0 0 0;
line-height:15px;

}
#buttons div.off {
color:#000;
height:33px;
margin-right:2px;
line-height:33px;
padding:0 20px;
float:left;
background:url('../media/tabs_0.gif') repeat-x left bottom;
border:1px solid #ddd;
border-bottom-color:#000;
 cursor:pointer;
 position:relative; z-index:20;
 }

#buttons div.on {
color:#c00;
padding:0 20px;
margin-right:2px;
margin-top:1px;
float:left;
background:url('../media/tabs_2.gif') repeat-x left bottom;
border:1px solid #000;
cursor:pointer;
border-bottom:0;
height:33px;
line-height:32px;
position:relative; z-index:100;
}

div.hide {
display:none;
width:0;
overflow:hidden;
}
div.show {
clear:left;
background:#fff;
width:450px;
margin-top:0;
top:-1px;
border:1px solid #000;
padding:20px;
position:relative; z-index:50;
  line-height:18px;
  }

div.show img {
float:left;
margin:0 10px 10px 0;
}
.clear {clear:both;}
/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

window.onload = function() {

 var e, i = 0;

 while (e = document.getElementById('buttons').getElementsByTagName ('DIV') [i++]) {

  if (e.className == 'on' || e.className == 'off') {

  e.onclick = function () {

   var getEls = document.getElementsByTagName('DIV');

    for (var z=0; z<getEls.length; z++) {

    getEls[z].className=getEls[z].className.replace('show', 'hide');

    getEls[z].className=getEls[z].className.replace('on', 'off');

    }

   this.className = 'on';

   var max = this.getAttribute('title');

   document.getElementById(max).className = "show";

   }

  }

 }

}/*]]>*/
</script>

</head>

<body>
<div id="buttons">
<div class="on" title="Details"><span>Details</span></div>
<div class="off" title="Info"><span>Information</span></div>
<div class="off" title="Contact"><span>Contact us</span></div>
<div class="off" title="tab"><span>tab</span></div>
<div class="off" title="tab1"><span>tab 1</span></div>
</div>

<div id="Details" class="show">
<p>Although he showed an early talent for art and began painting his native Suffolk scenery before he left school, his great originality matured slowly.</p>
<p>He committed himself to a career as an artist only in 1799, when he joined the Royal Academy Schools and it was not until 1829 that he was grudgingly made a full Academician, elected by a majority of only one vote.</p>
<p>In 1816 he became financially secure on the death of his father and married Maria Bicknell after a seven-year courtship and in the fact of strong opposition from her family. During the 1820s he began to win recognition: The Hay Wain (National Gallery, London, 1821) won a gold medal at the Paris Salon of 1824 and Constable was admired by Electronoics Store</p>
<p>His wife died in 1828, however, and the remaining years of his life were clouded by despondency.</p>
<br class="clear" />
<p>This text is an excerpt from</p>

</div>

<div id="Info" class="hide">
<p>His youth was spent in Le Havre, where he first excelled as a caricaturist but was then converted to landscape painting by his early mentor from whom he derived his firm predilection for painting out of doors.</p>
<<p>In 1859 he studied in Paris at the Atelier Suisse and formed a friendship with. After two years' military service in Algiers, he returned to Le Havre and met whom he said he owed `the definitive education of my eye'.</p>
<p>He then, in 1862, entered the studio of Gleyre in Paris and there met Renoir, Sisley, and Bazille, with whom he was to form the nucleus of the Impressionist group.</p>
<p>Monet's devotion to painting out of doors is illustrated by the famous story concerning one of his most ambitious early works, Women in the Garden (Musée d'Orsay, Paris; 1866-67). The picture is about 2.5 meters high and to enable him to paint all of it outside he had a trench dug in the garden so that the canvas could be raised or lowered by pulleys to the height he required.</p>
<p> visited him when he was working on it and said Monet would not paint even the leaves in the background unless the lighting conditions were exactly right.</p>
<br class="clear" />

</div>

<div id="Contact" class="hide">

<p>With  and greatest of Post-Impressionist artists. He powerfully influenced the current of  in modern art. His work, all of it produced during a period of only 10 years, hauntingly conveys through its striking colour, coarse brushwork, and contoured forms the anguish of a mental illness that eventually resulted in suicide. Among his masterpieces are numerous self-portraits and the well-known  (1889).</p>
<br class="clear" />
<p>This text is an excerpt from</p>
</div>

<div id="tab" class="hide">
<p>Russian-born French painter. Born to a humble Jewish family in the ghetto of a large town in White Russia, Chagall passed a childhood steeped in Hasidic culture.</p>
<p>Very early in life he was encouraged by his mother to follow his vocation and she managed to get him into a St Petersburg art school. Returning to Vitebsk, he became engaged to Bella Rosenfeld (whom he married twelve years later), then, in 1910, set off for Paris, 'the Mecca of art'.</p>
<p>He was a tenant at La Ruche, where he had Modigliani and Soutine for neighbours. His Slav Expressionism was tinged with the influence of Jean-François Millet, the Nabis and the Fauves.</p>
<br class="clear" />
<p>Essentially a colourist, Chagall was interested in the Simultaneist vision of Robert Delaunay and the Luminists of the Section d'Or.</p>
</div>

<div id="tab1" class="hide">
<p>Pablo Picasso, born in Spain, was a child prodigy who was recognized as such by his art-teacher father, who ably led him along.</p>
<p>The small Museo de Picasso in Barcelona is devoted primarily to his  which include strikingly realistic renderings of casts of ancient sculpture.</p>
<p>He was a rebel from the start and, as a teenager, began to frequent the Barcelona cafes where intellectuals gathered.</p>
<p>He soon went to Paris, the capital of art, and soaked up the works of Manet, Gustave Courbet, and whose sketchy style impressed him greatly. Then it was back to Spain, a return to France, and again back to Spain - all in the years 1899 to 1904.</p>
<br class="clear" />
<p><br /></p>
</div>
</body>

</html>
__________________
Vic

God Loves You and will never love you less.

http://www.vicsjavascripts.org.uk/

If my post has been useful please donate to http://www.operationsmile.org.uk/
vwphillips is offline   Reply With Quote
Reply

Bookmarks

Tags
tabs

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 09:03 AM.


Advertisement
Log in to turn off these ads.