SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Uncaught TypeError: Cannot call method of null

    Hi there,

    I have a jQuery script which works fine online, but when it comes to testing locally I get this error on the 2nd line of code:

    Uncaught TypeError: Cannot call method 'hide' of null
    Ok so, that means I'm trying to call a method on something that doesn't exist, or is set to null. But I'm trying to call the method on anything with the class menu. And there are divs with the class menu on my page.

    The script runs fine on several other pages, so it must have something to do with this page in particular, but I have no idea why...

    Here's my HTML:
    Code:
    <div id="navigation">
      <ul id="navbar">
        <li><a href="http://www.pilot-chiswick.co.uk">Home</a></li>
        <li><a class="drop-down" href="#">Food Menu</a></li>
        <li><a class="drop-down" href="#">Drinks Menu</a></li>
        <li><a href="gallery.html.php">Gallery</a></li>
        <li><a href="function.html.php">Function Room</a></li>
        <li><a href="contact.php">Contact Us</a></li>
      </ul>
      <div id="drinks" class="menu">
        <ul>
          <li><a href="reds.html.php">Reds</a><hr></li>
          <li><a href="whites.html.php">Whites</a><hr></li>
          <li><a href="roses.html.php">Ros&eacute;s, Champagne and Dessert Wines</a><hr></li>
          <li><a href="spirits.html.php">Malt Whiskies, Cognac and Port</a></li>
        </ul>
      </div>
      <div id="food" class="menu">
        <ul>
          <li><a href="lunch.html.php">Lunch</a><hr></li>
          <li><a href="evening.html.php">Evening</a><hr></li>
          <li><a href="dessert.html.php">Dessert</a></li>
        </ul>
      </div>
    </div>
    and my jQuery script:
    Code:
    $(document).ready(function(){
    	$('.menu').hide();
    	$('a, #header').not('.drop-down, .menu a').hover(function(){
    	$('.menu').hide();
    	});
      $('.drop-down').mouseenter(function(){
    	$('.menu').hide();
    	id=($(this).text().toLowerCase().replace(' menu', ''));																		 
    	$('#' + id).show();
    	});
    	$('.menu').mouseleave(function(){
    	$('.menu').hide();
    	});
    });
    I've put up the page online, but I don't have a direct link to it because it's a live site. You can see the code working here: The Pilot, and the offending page is here: The Gallery

    Any ideas greatly appreciated,
    Mike

  2. #2
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Well I feel pretty stupid... one of the scripts was clashing with the other, cos it was build using scriptilicious and prototype, rather than jquery.

    I've installed a jQuery plugin and it's all good now. Sorry if I've waisted anyone's time.

    Mike


Tags for this Thread

Bookmarks

Posting Permissions

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