 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
Farsch
Threadersteller
Dabei seit: 24.09.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 24.09.2010 13:56
Titel DIV in Animation bewegen |
  |
|
Hallo liebe Community,
seit Tagen bin ich auf der Suche, wie ich mit Scripte DIV bewegen kann.
Bin auf dieses Forum gestossen und habe dabei einige Threads gefunden, die Tipps bzw die jeweiligen Codes gepostet haben. An vielen Tipp und Codes habe ich mich herangewagt, jedoch scheitere ich jedes mal bei der Umsetzung.
Ich versuche ein Toolbar, welcher am unteren Rand der Webseite angepinnt ist (position: fixed), zu programmieren.
Dieser Toolbar hat 2 Buttons bzw Links, die ich mit folgenden Codes realisiert habe:
| Code: | <div id="nav-bar">
<div id="selector-button1">Button1</div>
<div id="selector-button2">Button2</div>
</div> |
Dazu kommen Menüs, die die Höhe 0px betragen, die also auf der Webseite noch nicht zu sehen sind. Die Codes:
| Code: | <div class="" id="button1-menu" style="left: 238px; height: 0px;">
<div class="" id="button2-menu" style="left: 238px; height: 0px;"> |
Und jetzt kommt der Teil mit Java und genau hier komme ich nicht weiter.
Ich möchte, dass, wenn auf Button1 geklickt wird, dass ein Menü, wie button1-menu seine Höhe von 0px nach 400px wechselt und dies in einer schönen Animation. Somit wird ein Menü sichtbar.
Wenn allerdings wieder auf Button1 geklickt wird, dann soll button1-menu seine Höhe auf 0px wechseln, also dieses soll runterklappen.
Oder beträgt button1-menu bereits eine Höhe von 400px und ich klicke auf Button2, dann soll button1-menu runterklappen und button2-menu hochklappen.
Dies alles mit Java zu programmieren ist mir zu knifflig, da ich nicht sonderlich fit in Java bin.
Möglicherweise lässt sich meine Anforderung auch ohne Java (also nur mittels HTML) bewerkstelligen, was ich allerdings nicht glaube.
Wäre schön, wenn mir jemand dabei helfen könnte, eine Lösung für mein Problem zu finden.
P.S: Habe eine Lösung mit Visible/Hidden versucht, aber da hat man ja keine Animation beim runter und hochklappen.
|
|
| |
  |
 |
Farsch
Threadersteller
Dabei seit: 24.09.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 24.09.2010 20:20
Titel
|
|
|
Guten Abend Leute,
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: | | <script type="text/javascript" src="http://mysite.de/demo.js"></script> |
2)
HTML:
| Code: | <?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: | 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;
}
});
}); |
|
|
| |
|
|
|
Anzeige
|
|
|
| |
|
|
| Ähnliche Themen |
MC mit AS bewegen
Symbol via Button bewegen?
Text Bewegen in Illustrator
Actionscript objekt bewegen
Alle Schlüsselbilder bewegen
Movieclips zufällig bewegen lassen...
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
