jQuery question from a person who can't javascript

Posted by Evilalan on Stack Overflow See other posts from Stack Overflow or by Evilalan
Published on 2010-04-21T23:57:20Z Indexed on 2010/04/22 0:03 UTC
Read the original article Hit count: 175

Filed under:
|
|

So I'm trying to adapt this Dropdown menu on Joomla the styles work great as expected so I'll post the javascript includes on the head of my website:

            <script type='text/javascript' src='js/jquery.js'></script>
                <script type='text/javascript' src='js/dropdown.js'></script>

                <script type='text/javascript'>
                  $(function() {
                    $('.menu').droppy();
                  });
                </script>

                <script type='text/javascript'>
                  $(function() {
                    $('.menu').droppy({speed: 100});
                  });
                </script>

ok I don't know why its is not working I'll post the dropdown.js should I post the jQuery too? it's really big!

                $.fn.droppy = function(options) {

                  options = $.extend({speed: 250}, options || {});

                  this.each(function() {

                    var root = this, zIndex = 1000;

                    function getSubnav(ele) {
                      if (ele.nodeName.toLowerCase() == 'li') {
                        var subnav = $('> ul', ele);
                        return subnav.length ? subnav[0] : null;
                      } else {
                        return ele;
                      }
                    }

                    function getActuator(ele) {
                      if (ele.nodeName.toLowerCase() == 'ul') {
                        return $(ele).parents('li')[0];
                      } else {
                        return ele;
                      }
                    }

                    function hide() {
                      var subnav = getSubnav(this);
                      if (!subnav) return;
                      $.data(subnav, 'cancelHide', false);
                      setTimeout(function() {
                        if (!$.data(subnav, 'cancelHide')) {
                          $(subnav).slideUp(options.speed);
                        }
                      }, 500);
                    }

                    function show() {
                      var subnav = getSubnav(this);
                      if (!subnav) return;
                      $.data(subnav, 'cancelHide', true);
                      $(subnav).css({zIndex: zIndex++}).slideDown(options.speed);
                      if (this.nodeName.toLowerCase() == 'ul') {
                        var li = getActuator(this);
                        $(li).addClass('hover');
                        $('> a', li).addClass('hover');
                      }
                    }

                    $('ul, li', this).hover(show, hide);
                    $('li', this).hover(
                      function() { $(this).addClass('hover'); $('> a', this).addClass('hover'); },
                      function() { $(this).removeClass('hover'); $('> a', this).removeClass('hover'); }
                    );

                  });

                };

My question here is: Why is it not working! I know that this is really complex (I don't anything about JavaScript) but if you help me I'll post a tutorial and edited files that will help a lot of people!

By the way I've download jQuery from the original site so I don't think that this can be the problem!

Thanks in advance!

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about JavaScript