Jquery problem - menu will not work

Question

Hi,

I'm trying to get the lavalamp menu working in a theme, but it just doesn't seem to wanna happen!

I've checked and rechecked the paths for the files, etc - but to no avail.

Any ideas would be appreciated! http://missjennifer.net/srini/

Thank you

Answer 1

As a rule of thumb, your element id's shouldn't start with a number. You've given ids of 1, 2 and 3 - try changing them to menu1, meny2 and menu3 and adjusting the ids in your script.

$("#menu1, #menu2, #menu3").lavaLamp({

Answer 2

It appears that you are trying to use numeric IDs for your HTML elements. HTML element ids must begin with a letter. Since your HTML is invalid, your selector $("#1, #2, #3") evaluates to null and thus you get a javascript error.

My solution would be to give your tags a class -- like "lavamenu" and then apply a class selector for your plugin:

$('.lavamenu').lavalamp( ... );

Update:

Since you are also using MooTools, you need to use jQuery in noConflict mode. You can do this using:

var $jq = jQuery.noConflict();

then whenever you would have used the $ function for jQuery, simply use $jq. Note that you need to invoke noConflict() after jQuery is loaded but before any conflicting javascript library is loaded. More information on noConflict() can be found on the jQuery site, as well as ideas on how to use jQuery with other libraries.

$jq(function() {
    $jq('.lavamenu').lavalamp( ... );


});

Answer 3

Please change

<script type="text/javascript"> 
        $(function() {
            $("#1, #2, #3").lavaLamp({
                fx: "backout",
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
    </script>

to

<script type="text/javascript"> 
        $(function() {
            $("A").lavaLamp({
                fx: "backout",
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
    </script>

Answer 4

You might as well change id to class

<script type="text/javascript"> 
    $(function() {
        $(".menuitem").lavaLamp({
            fx: "backout",
            speed: 700,
            click: function(event, menuItem) {
                return false;
            }
        });
    });
</script>