Page 1 of 1

DIV in Animation bewegen

Posted: Fri Sep 24, 2010 5:07 pm
by Farsch
Guten Abend Leute,

ich möchte ein Toolbar erstellen, die so aussieht: http://demo.gavick.com/
Die Rede ist von dem weißen Toolbar unten.

Also ich habe HTML CSS und Javascript vorbereitet.
Jedoch klappt es nicht mit dem javascript. Die Menüs wollen sich nicht öffnen, wenn man auf den Buttons klickt. Ich weiß nicht so recht, wo der Fehler liegt, dass auf der Seite keine Reaktion stattfindet.

Ich poste hier lieber die gesamten Codes:

1)
In Head-Bereich habe ich eingefügt:

Code: Select all

<script type="text/javascript" src="http://mysite.de/demo.js"></script>
2)
HTML:

Code: Select all

<?php
/* Toolbar*/ ?>
<div id="nav-bar-toolbar">

        <img src="http://www.html.de/images/logo.png" id="logo-img-toolbar" alt="LOGO" />
        <div id="selector-templates-toolbar">Button1</div>
        <div id="selector-extensions-toolbar">Button2</div>

</div>

<div id="templates-hide-toolbar" class="unvisible-toolbar">
   <div id="list-templates-toolbar">
       <div class="column-toolbar">

                <h2>Text</h2>
                    
        </div>
    </div>
</div>
3)
Javascript:

Code: Select all

window.addEvent("domready",function(){
    var templates = $('templates-hide-toolbar');
    var templatesWrap = $('list-templates-toolbar');
    var extensions = $('extensions-hide-toolbar');
    var extensionsWrap = $('list-extensions-toolbar');
    var templateSelector = $('selector-templates-toolbar');
    var extensionSelector = $('selector-extensions-toolbar');
    var iframe = $('loader-toolbar');
    var navbar = $('nav-bar-toolbar');
    var mouseOverTemplates = false;
    var mouseOverExtensions = false;
    var tooltip = $('tooltip-toolbar');
    var submenuFx = [];
    var submenuItems = $$('ul.submenu li-toolbar');
    var mouseOverSubmenu = [];
    
    if(!window.opera){
        iframe.setStyle("height",(window.getHeight()-48)+"px");
    }else{
        iframe.setStyle("height",(navbar.getCoordinates().top)+"px");    
    }
    
    iframe.src = (toLoad != 'null') ? toLoad : $$('ul.thumbs li a')[0].href;
    
    templates.setStyle("left",templateSelector.getCoordinates().left - 1);
    extensions.setStyle("left",templateSelector.getCoordinates().left - 1);
    
    $$('.list-submenu').each(function(el,i){
        submenuFx[i] = new Fx.Tween(el,{duration:300});
        submenuFx[i].start("width",0);
        (function(){el.setProperty("class","list-submenu");}).delay(50);
        mouseOverSubmenu[i] = false;
    });
    
    submenuItems.each(function(el,i){
        el.addEvent("mouseenter",function(){
            submenuFx.each(function(elm,j){
                if(j == i) {
                    elm.start("width",242);
                }
                else{
                    elm.start("width",0);
                }
            });

            if(i == 0){
                $$('.list-submenu')[i].setStyle("left",el.getPosition().x + 50 + "px");
                $$('.list-submenu')[i].setStyle("top",($$('ul.submenu li')[0].getPosition().y-42)+"px");
            }else{
                $$('.list-submenu')[i].setStyle("left",el.getPosition().x + 50 + "px");
                $$('.list-submenu')[i].setStyle("top",($$('ul.submenu li')[0].getPosition().y+8)+"px");
            }
        });
        
        el.addEvent("mouseleave",function(){
            (function(){
                 if(!mouseOverSubmenu[i]) submenuFx[i].start("width",0);
             }).delay(50);
        });
    });    

    $$('.list-submenu').each(function(el,i){
        el.addEvent("mouseenter", function(){
            mouseOverSubmenu[i] = true;
        });    
        
        el.addEvent("mouseleave", function(){
            mouseOverSubmenu[i] = false;
            submenuFx[i].start("width",0);
        });
    });
    
    /*$$('ul.submenu').addEvent("mouseleave",function(){
        mouseOverSubmenu.each(function(elm,i){
            if(!elm) submenuFx[i].start("width",0);
        });
    });*/
    
    var tmplFx = new Fx.Tween(templates,{duration:300,transition:Fx.Transitions.Quart.easeInOut});
    var extFx = new Fx.Tween(extensions,{duration:300,transition:Fx.Transitions.Quart.easeInOut});
    tmplFx.start("height",0);
    extFx.start("height",0);
    (function(){
        templates.removeProperty("class");
        extensions.removeProperty("class");        
    }).delay(100);
    
    templateSelector.addEvent("click", function(){
        if(!mouseOverTemplates){
            tmplFx.start("height",templatesWrap.getSize().y);
            mouseOverTemplates = true;
            extFx.start("height",0);
            mouseOverExtensions = false;
        }else{
            tmplFx.start("height",0);        
            mouseOverTemplates = false;
        }    
    });

    extensionSelector.addEvent("click", function(){
        if(!mouseOverExtensions){
            extFx.start("height",extensionsWrap.getSize().y);
            tmplFx.start("height",0);
            $$('.list-submenu').fireEvent("mouseleave");
            mouseOverExtensions = true;
            mouseOverTemplates = false;
        }else{
            extFx.start("height",0);    
            mouseOverExtensions = false;    
        }    
    });
    
    $$('ul.thumbs li a').each(function(el){
        el.getParent().addEvent("mouseenter", function(e){
            var tooltip_content = el.getParent().getElement(".unvisible")
            if(tooltip_content){
                tooltip.innerHTML = tooltip_content.innerHTML;
                tooltip.removeProperty("class");
                tooltip.setStyle("left",el.getPosition().x+100+"px");
                tooltip.setStyle("top",e.page.y-190+"px");    
            }
        });
    
        el.getParent().addEvent("mouseleave", function(e){    
            tooltip.setProperty("class","unvisible");
            tooltip.setStyle("left","-10000px");
        });
    });
    
    $$('ul.thumbs li a').each(function(el){
        el.getParent().addEvent("click", function(e){
            e.stop();
            iframe.src = el.getProperty("href");
            tmplFx.start("height",0);
            $$('.list-submenu').fireEvent("mouseleave");
            extFx.start("height",0);
            mouseOverTemplates = false;
            mouseOverExtensions = false;
        });
    });
    
    $$('#list-extensions a').each(function(el){
        el.getParent().addEvent("click", function(e){
            e.stop();
            iframe.src = el.getProperty("href");
            tmplFx.start("height",0);
            $$('.list-submenu').fireEvent("mouseleave");
            extFx.start("height",0);
            mouseOverTemplates = false;
            mouseOverExtensions = false;
        });
    });
    
    $(document.body).addEvent("click",function(e){
        if(e.target != templateSelector && e.target != extensionSelector){
            tmplFx.start("height",0);
            $$('.list-submenu').fireEvent("mouseleave");
            extFx.start("height",0);
            mouseOverTemplates = false;
            mouseOverExtensions = false;
        }
    });
});