# Weird server-level behavior affecting javascript

## audiodef

I think Networking and Security is the right place, since one of the criterion is "running a server"...

I'm having a really weird issue on my root-access hosted server, on which I run Gentoo. On my localhost, which is also a Gentoo machine, I have no trouble with certain javascript events, but on my live machine, those events simply do not work. So, obviously not a browser issue (I've confirmed this with two different browsers). 

For example, if you go to the site I'm having this trouble with, http://synthetronica.com, you'll notice what looks like a nested menu under "Main Menu". This is actually supposed to be an accordion menu, and on my localhost (a duplicate of my live site), "Stores" is all you see until you click on it, causing "Online Stores" to appear. 

Another example: in Joomla administration on my localhost, using the WYSIWYG editor works perfectly when I turn a word into a link, but it gets screwy on my live instance, leaving behind something like "http" instead of the word I wanted linked. 

So, at the server level, what could be causing this kind of weirdness?

----------

## audiodef

OK, this may actually belong in "Portage and Programming"...

I opened FF's error console and noted one difference between my localhost and my live site. The live site spit out this error:

```

Error: menu.getElements is not a function

Source File: http://synthetronica.com/modules/mod_accordeonck/assets/mod_accordeonck.js

Line: 52

```

Here's the file in question. Why would menu.getElements not be a function on one site but work on another?

```

/*

 *  Verschachteltes Mootools-Accordion

 *  Nested Mootools Accordion

 *  von / by Bogdan G<C3><BC>nther

 *  http://www.medianotions.de

 *

 *

 *  Script adapted by C<C3><A9>dric KEIFLIN for Joomla!

 *  @copyright  Copyright (C) 2011 C<C3><A9>dric KEIFLIN alias ced1870

 *  http://www.joomlack.fr

 *  Module Accordeon CK

 *  @license            GNU/GPL

 *  

 */

var accordeonMenuCK = new Class({

        Implements: Options,

        options: {    //options par defaut

                        eventtype : 'click',

                        fadetransition : false,

            mooTransition : 'linear',

            mooDuree : 500,

            menuID : 'accordeonck'

        },

                        

        initialize: function(menu,options) {

                        if ($(menu)) {

                                menu = $(menu);

                        } else {

                                menu = document;

                        }

            this.setOptions(options); //enregistre les options utilisateur

                        var maduree = this.options.mooDuree;

            var matransition = this.options.mooTransition;

            var menuID = this.options.menuID;

                        var eventtype = this.options.eventtype;

                        var fadetransition = this.options.fadetransition;

    // Anpassung IE6

    if(window.ie6) var heightValue='100%';

    else var heightValue='';

    // Selektoren der Container f<C3><BC>r Schalter und Inhalt

    var togglerName='a.toggler_';

    var contentName='ul.content_';

    // Selektoren setzen

    var counter=1;

    var toggler= menu.getElements(togglerName+counter);

    var content= menu.getElements(contentName+counter);

    while(toggler.length>0)

    {

                // check the active submenu to be open

                var activetoggler = -1;

                for (i=0; i<toggler.length; i++) {

                        if (toggler[i].getParent().getElement('a.isactive')) activetoggler = i;

                }

                

        // Accordion anwenden

        new Accordion(toggler, content, {

            opacity: fadetransition,

            display: activetoggler,

            alwaysHide: true,

                        transition: matransition,

                        duration: maduree,

                        trigger: eventtype,

            onComplete: function() {

                var element=$(this.elements[this.previous]);

                if(element && element.offsetHeight>0) element.setStyle('height', heightValue);

            },

            onActive: function(toggler, content) {

                toggler.addClass('open');

            },

            onBackground: function(toggler, content) {

                toggler.removeClass('open');

            }

        });

        // Selektoren f<C3><BC>r n<C3><A4>chstes Level setzen

        counter++;

        toggler=$$(togglerName+counter);

        content=$$(contentName+counter);

    }

        }

});

accordeonMenuCK.implement(new Options); //ajoute les options utilisateur a la classe

```

----------

## Hu

May I make a design suggestion?  Instead of using Javascript to pop open the menu, make the menu hidden until the mouse hovers over the trigger element.  This latter form can be done with CSS, is reasonably consistent, and works without requiring Javascript on the client.  If you are willing to do this, someone here can help you with the CSS.

----------

## audiodef

 *Hu wrote:*   

> May I make a design suggestion?  Instead of using Javascript to pop open the menu, make the menu hidden until the mouse hovers over the trigger element.  This latter form can be done with CSS, is reasonably consistent, and works without requiring Javascript on the client.  If you are willing to do this, someone here can help you with the CSS.

 

I would have no problem with that. I just want a menu that collapses when not in use, because I expect the main menu to become rather long.

----------

## Hu

From memory:

```
.menu-top-level { position: relative; }

.menu-top-level li { position: absolute; z-index: 1; bottom: 1em; }

.menu-top-level:not(:hover) li { display: none; }
```

Change the li to whatever element you use as the first level below your object with class="menu-top-level".  You can change the value of bottom: to affect how far down the object appears.  You can also use left, right, or top to position it in other orientations relative to the key item.  When your mouse hovers over the key item, the subitems will appear.

----------

