Hallo,
ich wage mich gerade an meine ersten Javascript Gehversuche und scheitere irgendwie gerade daran, dass mein Javascript die CSS darstellung stört. Die Idee war um mit fx.slide von mootools eine navigation zu erstellen die bei click auf einen Link rechts eines neues Div öffnet (visible macht).
Ohne Javascript sieht das ganze so aus wie es aussehen sollte (im moment noch vier divs nebeneinander...) Mit Javascript bekomme ich so etwas: http://www.rhizom.nl/moo/

Ich benutze
- mootools 1.2 beta und habe transitional und strict als doc type ausprobiert. Der code ist auch valide...

Ein anderer Fehler ist das 'toggling' nur vier, fünf Mal funktioniert danach
nicht mehr...

Danke Volkan


Bis jetzt ist das ganze noch eine HTML Datei

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>huhu</title>
<script type="text/javascript" src="mootools-beta-1.2.js"></script>
 
<style type="text/css">
#head_wrapper{
    width:1000px;
    background-color:pink;
}
#content_wrapper{
    width:1000px;
    background-color:lightblue;
    height:200px;
}
.header_boxes{
    background: #fff;
    color: #000;
    font-family: Helvetica;
    font-size:12px;
    padding: 10px;
    margin-left: 1px;
    height:45px;
    width:140px;
    border: 1px solid black;
}
 
#first_box {
    float:left;
}
 
#second_box {
    float:left;
}
 
#third_box {
    float:left;
}
#fourth_box {
    float:left;
}
</style>
 
<script type="text/javascript">
        window.addEvent('domready', function(){
 
            //$('second_box').setStyle('float','left'); 
            //$('second_box').setStyle('visibility','hidden'); 
 
            //--horizontal
            //$('first_box').fade(0.7); 
            var mySlide2 = new Fx.Slide('second_box', {mode: 'horizontal'});
            var mySlide3 = new Fx.Slide('third_box', {mode: 'horizontal'});
            var mySlide4 = new Fx.Slide('fourth_box', {mode: 'horizontal'});
 
            $$('.toggle2').addEvent('click', function(e){
                //$('third_box').setStyle('visibility','visible'); 
                e = new Event(e);
                mySlide2.toggle();
                e.stop();
            });
 
            $$('.toggle3').addEvent('click', function(e){
                e = new Event(e);
                mySlide3.toggle();
                e.stop();
            });
 
            $$('.toggle4').addEvent('click', function(e){
                e = new Event(e);
                mySlide4.toggle();
                e.stop();
            });
        }); 
    </script>
 
 
</head>
<body>
 
<div id='head_wrapper'>
    <div id="first_box" class='header_boxes'>
        ONE<br />
        <a class="toggle2" href="#">link 1</a> <br /> <a class="toggle2" href="#">link 2</a> <br /> <a class="toggle2" href="#">link 3</a>
    </div>
 
    <div id="second_box" class='header_boxes'>
        TWO<br />
        <a class="toggle3" href="#">go</a> <br /> <a class="toggle3" href="#">come back</a> <br /> <a class="toggle3" href="#">toggle</a>
    </div>
    <div id="third_box" class='header_boxes'>
        THREE<br />
        <a class="toggle4" href="#">go</a> <br /> <a class="toggle4" href="#">come back</a> <br /> <a class="toggle4" href="#">toggle</a>
    </div>
    <div id="fourth_box" class='header_boxes'>
        FOUR<br />
        <a class="toggle5" href="#">go</a> <br /> <a class="toggle5" href="#">come back</a> <br /> <a class="toggle5" href="#">toggle</a>
    </div>
 
<div id='content_wrapper'>CONTENT BOX</div>
</div>
 
 
 
 
</body>
</html>