Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    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/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •