Broken Menu Styling After Adding New Javascript

Question

I have dropdown menus that look like this:

However, I wanted a div element to stick the top of a page at a certain scroll range, so I added this code in the head:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
$(window).scroll(function(e){
    $el = $('.fixedElement');
    if ($(this).scrollTop() > 1437 && $el.css('position') != 'fixed'){
        $('.fixedElement').css({'position': 'fixed', 'top': '0px'});
    }
    if ($(this).scrollTop() < 1437 && $el.css('position') != 'absolute'){
        $('.fixedElement').css({'position': 'absolute', 'top': '1437px'});
    }
});
// ]]>
</script>

.fixedElement is defined in my CSS file, and then referenced with

<div class="fixedElement">

Now, my dropdown menus look like this:

When I comment out the new javascript, the menus go back to normal.

Any ideas on how to make my new javascript work with my dropdown menus?

Thanks!

EDIT:

One console error pertaining to the dropdown javascript is:

Uncaught TypeError: Object #<Object> has no method 'getElements'

That is referencing this line:

var links = $(this.options.id).getElements('a');

In this javascript: MenuMatic

When I comment out the new javascript the error disappears and my menus come back!

@Utkanos The one error I have pertaining to the dropdown javascript is: `Uncaught TypeError: Object # — jm_hall, Jul 29 '12 at 21:44
Well then that's coming from another script, since the bit you posted makes no reference to `getElements()`. — Mitya, Jul 29 '12 at 21:47
Right, the error is in the dropdown script. I'm using [MenuMatic](http://code.google.com/p/erptrojas-caja-chica/source/browse/trunk/+erptrojas-caja-chica+--username+miguel.cornejo/MenuMatic/MenuMatic_0.68.3-source.js?r=2) for that code because I'm not very familiar with javascript. — jm_hall, Jul 29 '12 at 21:52

score 0 · Accepted Answer · edited May 23 '17 at 12:19

Got it.

My dropdown javascript was using the MooTools library, while my sticky div was using jQuery.

jQuery uses "$" as a shortcut for "jQuery", so the line

var links = $(this.options.id).getElements('a');

referencing javascript from the MooTools library throws an error because jQuery has overwritten the definition for "$"

This conflict is solved by inserting

jQuery.noConflict();

before my jQuery script and replacing all of the "$" in my jQuery script with "jQuery"

More info here: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Broken Menu Styling After Adding New Javascript

1 Answers1