ansaurus

Question

jQuery question from a person who can't javascript

Answer 1

+1 A:

Since your <script> block is in the <head> tag, it executes before the page body is loaded, when there is no .menu element

You need to move your <script> block to the end of the <body> tag, or wrap it in $(function() { ... });.

SLaks 2010-04-22 00:03:45

That was quick I'll try that and get back to you! thank you!!!

Evilalan 2010-04-22 00:06:19

I put all the <script></script> right before the <body> it give the sabe result I'm really sorry about asking but how would I wrap it with a $(function() { ... }); ? in other words how would it look like!I really need to learn Javascript

Evilalan 2010-04-22 00:10:42

You need to put it at the _end_ of the `<body>` element, write before `</body>`.

SLaks 2010-04-22 00:11:42

You would have to put it right before the closing body tag, not the opening body tag. But, instead of that, I would probably create an initialization method and add an "onload" method like:$(document).ready(function(){ // Your code here...});and initialize your drop-down list.

El Guapo 2010-04-22 00:14:35

use of the $(function(){}) will hold execution until the window is loaded.

Tracker1 2010-04-22 00:23:13

Why was this downvoted?

SLaks 2010-04-22 00:23:33

You need to put it at the end of the <body> element, write before </body>, that is what I did! I can't do $(document).ready(function(){ // Your code here... }); because it's a CMS (joomla), if I load inside there it will load a div before the ul li ul il

Evilalan 2010-04-22 00:23:34

voted up so you don't negative points...

Evilalan 2010-04-22 00:42:32

Answer 2

+1 A:

Can you post some of your drop down menu HTML?

Right now you are applying the droppy plugin to the selector '.menu', which looks for an element on your page that has the CSS class 'menu', is that what you intended? If you want to apply the dropdown to an element with id="menu" you would use $('#menu').

Update

I would recommend using superfish instead, the mechanics of drop down menus are really hard to get right to make the menus easy to use. Superfish does an excellent job of being very forgiving for the site visitors.

I can't find anything particularly wrong with the code, seems to work ok. The only change I had to do to get it to work was to initially set the submenus to hidden using CSS. Try this out, you'll need to add your CSS back into the HTML. I would suggest using Firefox, Firebug and Firequery. This will give you insight into what exactly is breaking if there are any JavaScript errors.

<html>
<head>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript" src="javascripts/jquery.droppy.js"></script>
    <style>
        ul#nav li ul {
            display: none;
        }
    </style>
</head>
<body>
    <h2 id='example'>
        Example</h2>
    <ul id='nav'>
        <li><a href='#'>Top level 1</a></li>
        <li><a href='#'>Top level 2</a>
            <ul>
                <li><a href='#'>Sub 2 - 1</a></li>
                <li><a href='#'>Sub 2 - 2</a>
                    <ul>
                        <li><a href='#'>Sub 2 - 2 - 1</a>
                            <ul>
                                <li><a href='#'>Sub 2 - 2 - 1 - 1</a></li>
                                <li><a href='#'>Sub 2 - 2 - 1 - 2</a></li>
                                <li><a href='#'>Sub 2 - 2 - 1 - 3</a></li>
                                <li><a href='#'>Sub 2 - 2 - 1 - 4</a></li>
                            </ul>
                        </li>
                        <li><a href='#'>Sub 2 - 2 - 2</a></li>
                        <li><a href='#'>Sub 2 - 2 - 3</a>
                            <ul>
                                <li><a href='#'>Sub 2 - 2 - 3 - 1</a></li>
                                <li><a href='#'>Sub 2 - 2 - 3 - 2</a></li>
                                <li><a href='#'>Sub 2 - 2 - 3 - 3</a></li>
                                <li><a href='#'>Sub 2 - 2 - 3 - 4</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href='#'>Sub 2 - 3</a></li>
            </ul>
        </li>
    </ul>

    <script>
        $(function() {
            $('#nav').droppy();
        });
    </script>

</body>
</html>

DavGarcia 2010-04-22 00:10:25

I just updated the "post" with the generated HTML. Thank you very much for helping me out!

Evilalan 2010-04-22 00:18:28

I using superfish now but a little bit of PHP was missing... Something like that:'<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>' thanks

Evilalan 2010-04-25 09:34:48

It's 100% valid and working on IE6 by the time I'm writing this down! Really neat piece of jQuery! since I've loaded jQuery I can't resist to use and style a few more 1kb plugins this is awesome! I can implement JS solutions without knowing JS! I'll learn it tho!

Evilalan 2010-04-25 09:38:22

So that is why YooTheme use jQuery so often! haha I'll create a post explaining how to create a easy to use DropDown for joomla in a few weeks!

Evilalan 2010-04-25 09:40:04

ansaurus

tags:

views:

answers:

jQuery question from a person who can't javascript

Update

related questions