Mootol´s Top Panel not appearing

Question

Ahoy everyone,

I am using this sliding top panel using mootools (for orientation, the code is basically the same).

I want it to appear when the page is loaded, means, index.html is loaded. I achieved this simply by adding the corresponding javascript to index.html:

<script type="text/javascript">
    window.addEvent('domready', function(){
    var mySlide = new Fx.Slide('top-panel');
    $('toggle').addEvent('click', function(e){
    e = new Event(e);
    mySlide.toggle();
    e.stop();
    });
    });
</script>

(Of course this is also the top-panel itself) When you click a link in this top panel, a new page will be loaded into a specified div, and then, the top panel should be hidden.

I think you can do this by adding

var mySlide = new Fx.Slide('top-panel').hide();

or

mySlide.hide();

in some javascript. I think it should execute, when the ahah.js-javascript is done loading the content into the div, i tried adding both the javascript quoted above and the two variations of mySlide.hide() in ahah.js. (into ahahDone(), after the last getElementById).

Using this setup, i get the following rendering. (This is after clicking the corresponding link wich loads content from an html-file into a div and clicking on the "More (mehr)" link on top of the page wich should slide down the top panel.) But only the button wich is visible always (sub-panel) slides down and is visible, the actual panel content does not show up.

Any ideas? It would be great, if you could leave an answer with a short explanation.

Thanks a lot

Answer 1

This looks like a scoping problem. You declare mySlide inside an anonymous function, and its scope will be limited to that function. Later, when $('toggle') is clicked, the event that is fired is outside the scope of that function so it does not have access to mySlide.

A quick fix (if you don't mind using globals) could be declaring var mySlide=null in the main javascript so that you have a closure, and then change your current var mySlide=new Fx.Slide(...) to just mySlide=new Fx.Slide(..)

(or it could be something else entirely...)