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 which loads content from an html-file into a div and clicking on the "More (mehr)" link on top of the page which should slide down the top panel.) But only the button which 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.
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...)