tags:

views:

25

answers:

1

I am attempting to implement the suckerfish menu found on this tutorial. I get "object expected" error from the sample javascript:

    $(document).ready(function () {
        $("#nav-one li").hover(
            function () { $("ul", this).fadeIn("fast"); },
            function () { }
        );
        if (document.all) {
            $("#nav-one li").hoverClass("sfHover");
        }
    });

I have imported the JQuery using:

<script type="text/javascript" src="~/Scripts/jquery-1.4.1.js"></script>

The JQuery import is in the page header. The javascript is just inside the <body>. It would be nice if I could tell which object is having the issue instead of being pointed at this block of code. I'm new to JQuery and beginner level javascript.

UPDATE The start of the menu:

<ul id="nav-one" class="nav">
            <li>
                <a href="#item1">item 1</a>
                <ul>

(I think the #nav-one points to the id of the menu "nav-one").

And I believe this css covers the "sfHover" part:

#nav-one li.sfHover a {
  background: #ccc;
  color: #000;
}
+1  A: 

The 'object expected' error can occur when you are not including jQuery correctly. Do you have that 'jquery-1.4.1.js' file in the directory the src attribute is pointing to?

To test if this is the problem, try replacing your jQuery include with this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;

That will request jQuery from Google's servers.

Edit:

If I use your example code and the jQuery include I mentioned above, I don't get that error. But you'll also need to include the

$.fn.hoverClass = function(c) {
return this.each(function(){
    $(this).hover( 
        function() { $(this).addClass(c);  },
        function() { $(this).removeClass(c); }
    );
});
};

part from your example. That defines hoverClass as a jQuery method (it is not part of that standard jQuery library).

rosscj2533
That got rid of the object expected error. The menu works, but not like the tutorial. The tutorial has a nice fade effect that is not functioning. I get no errors and I still have the code implemented that you see above. Since there's no errors at this point I'm ever more at a loss then I was before. Also, using "../Scripts/jquery.js" worked instead of "~/Scripts/jquery.js" even though the webform.aspx and Scripts folder are in the same parent directory. Note that the extra code you included is in my code as well.
P.Brian.Mackey
I downloaded the jquery.js file from the tutorial and the fade started working. I thought this file was just the import of jquery, but apparently it is not. It's just one function with a whole bunch of jibberish, but it works so yea...
P.Brian.Mackey
@P.Brian.Mackey - Yes, mine must have worked the same way as your (no nice fade) until I included all the styles included on the example page. It looks like the css handles the show/hide of the menu items (and the styling of course), so you'll need that on your page.
rosscj2533
@P.Brian.Mackey - cool, I'm glad you got it working.
rosscj2533