DIV in Animation bewegen

Professionelle Dienstleistungen oder Anfragen bezogen auf Joomla!
Locked
Farsch
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Thu Sep 23, 2010 11:21 pm

DIV in Animation bewegen

Post by Farsch » Fri Sep 24, 2010 5:07 pm

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;
        }
    });
});

Locked

Return to “Professioneller Service”