Arghh! undefined null or not an object

programming web dev
1

I am using hideAllExcept.js from

http://enure.net/dev/hide-all-except-one/

I have everything working perfectly locally & when uploaded. However when it is included on a page with other scripts I get the “undefined null or not an object” error and the hidden divs are stacked below the div that is supposed to be visible.

Is this possibly a conflict that jQuery.noConflict(); would solve? Or is this a race condition where other scripts are loading first and even though jQuery uses $(document).ready(function() { the content of the hidden divs is loading before the function can hide them?

2

post link or source

3

Edited to add. Looks like the problem may be prototype.js. I implemented jQuerynoConflict in hideAllExcept.js. I’m used to jQuery breaking prototype and not vice versa.

The hidden divs unfortuantely do show briefly stacked below the visible div. I had this same issue with hidden content in <li>s showing stacked on pages with multiple scripts until scripts load with jCarousel. Dynamically loaded content did not do it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="en-us" />
 
        <title>hide all except one demo (like tabs)</title>
 
              <!-- import the DOM logic from external javascript files -->
        <script type="text/javascript" src="http://enure.net/_js/jquery.min.js"></script>
        <script type="text/javascript" src="http://enure.net/dev/hide-all-except-one/hideAllExcept.js"></script>
 
<style type="text/css">
 .hide { display: none; } /* required */
 body { background-color: #ffffff; }
 #wrapp { margin: 0; padding: 0; width:300px;   background-color: white;}
 #ccc;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc; font-family: 'arial',  helvetica, sans-serif; font-weight: bold; font-size: 70%;}
 ul { padding-left: 0; padding-bottom:0 }
 li { float: left; display: block; margin-right: 0.1em; }
 ul#buttons {
  margin: .1em .1em .1em .1em;
  font-family: arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 70%;
 
 }
 ul#buttons li { padding: .1em .1em .1em .1em; border-right: 1px solid #000; border-left: 1px solid #000; border-top: 1px solid #000; border-bottom: 1px solid #000; border-bottom: 0; 
  background-image: url(tabsBG.gif);}
 div#toggleThis { margin-top: 0; margin-bottom:0; border-left: 1px solid #ccc;border-right: 1px solid #ccc;}
 div#toggleThis div {  padding: 0; color: #000; border-left:#eee; font-family: georgia, serif; }
 a, a:link, a:visited { color: #111; text-decoration: none; }
 a.active, a:hover { color: red; }
 
</style>
 
    </head>
    <body>
       <div id="wrapp">
 
 
            <ul id="buttons">
                <li><a class="toggle" href="#one">&nbsp;one&nbsp;</a></li> <!-- The js looks for any links with a class of 'toggle'. It then makes visible the id which matches the href. -->
                <li><a class="toggle" href="#two">&nbsp;two&nbsp;</a></li>
                <li><a class="toggle" href="#three">&nbsp;three&nbsp;</a></li>
            </ul>
           <div id="toggleThis"> <!-- the js looks for an id of 'toggleThis' and divs inside of it. -->
                <div id="one"><br /><br /><br />DIV ONE CAN HAVE ANYTHING IN IT
</div>
                <div id="two"><br /><br /><br />DIV TWO CAN HAVE ANYTHING IN IT
            </div>
                <div id="three"><br /><br /><br />DIV THREE  CAN HAVE ANYTHING IN IT
 
</div>
            </div></a>
 
 
</div>
 
 
 
    </body>
</html>