Hi Leute,

bei meinem Thread handelt es sich nicht um Spielentwicklung aber schon um Java selbst und dazu noch HTML.
Um genau zu sein, geht es um Webseiten und da viele in der Community fit in Java sind, wollte ich es wagen, meine Frage zu stellen:

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:
[php]<div id="nav-bar">
<div id="selector-button1">Button1</div>
<div id="selector-button2">Button2</div>
</div>[/php]

Dazu kommen Menüs, die die Höhe 0px betragen, die also auf der Webseite noch nicht zu sehen sind. Die Codes:
[php]<div class="" id="button1-menu" style="left: 238px; height: 0px;">
<div class="" id="button2-menu" style="left: 238px; height: 0px;">[/php]

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.

Diesen Toolbar unten möchte ich realisieren: klick mich

Aber jede moderne Homepage da draußen nutzt .js, oder etwa nicht?!

Ich selbst benutze Joomla und darin finde ich jede Menge .js-Dateien.
Und wenn ich eine bestimmte Methode erzeugen will, sei es allein das Menü, dass herunterklappt, wenn man mit der Maus drauf ist, wird .js benötigt. Wie soll ich also einen Bogen drumherum machen?

Und .js ist doch Java oder nicht? Sind solche .js Dateien nun serverseitig oder clientseitig? Da bin ich etwas verwirrt.
Um .js Datein abzuspielen, braucht der Client doch kein Java-Applet zu starten, denn wozu besitzt Joomla solche .js Framework?

Vielen Dank.

Ich habe momentan ein heftiges Know-How Problem.
Füge ich .js scripte in meiner .php-Datei wie z.B header ein oder muss ich .js-scripte seperat in einer datei.js packen, diese irgendwo auf dem server hochladen und dann von header.php abrufen?

Wenn das zweite betrifft, wie heißt der Code dazu, der ein .js-Datei abruft, damit dieser seine Funktion ausübt, wenn irgendwo, irgendwas angeklickt wurde? Da scheitere ich momentan ziemlich.

Zitat

Der rest wäre easy going wie in java.

Für mich alles andere als easy-going. Ich bekomme es nicht mal hin ein DIV von Punk A nach B zu bewegen.

Hi, also so wie ich jetzt deinen Beitrag verstanden habe, muss ich folgendes tun:

1)
.js Datei erstellen mit dem Inhalt:
[php]<script type="text/javascript">
function xyz(parameter1, parameter2, parameterX ){}
</script>[/php]

2)
Die .js Datei irgendwo auf dem Server hochladen.

3)
Im Header-Bereich meines Template-Index rufe ich die Datei ab, welche dann einsatzbereit ist:
<script type="text/javascript" src="DATEI_PFAD"></script>

4)
Um die Funktion aufzurufen, folgender Code:
javascript:xyz(1,2,3)

Jedoch, wie vereinbare ich diese mit den in meine HTML vorhanden Codes?

Das sind Buttons, die bei einem Klick javascript laufen lassen sollen:
[php]<div id="nav-bar">
<div id="selector-button1">Button1</div>
<div id="selector-button2">Button2</div> </div>[/php]

Und das sind die Menüs, um die es dabei geht. Die durch Javascript rauf und runterklappen sollen:
[php]<div class="" id="button1-menu" style="left: 238px; height: 0px;">
<div class="" id="button2-menu" style="left: 238px; height: 0px;">[/php]

Wenn ich mir aber deinen Javascript anschaue, fehlt doch jeder Bezug zu <div id=button1-menu.


Sorry...aber wie gesagt, bin java-anfänger. Ein vorgefertigter Code wäre nicht schlecht, die ich dann nur einfügen müsste.


Wer es bildhaftig haben möchte, dem kann ich diesen Link hier geben: klick mich
Um den Toolbar unten geht es.
Habe die CSS und HTML Codes übernommen, aber verstehe nicht, wie sie da mit dem rauf und runterklappen hingekriegt haben.



EDIT:

Also ich habe HTML CSS und Javascript vorbereitet.
Jedoch klappt es nicht mit dem javascript. 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:
[PHP]<script type="text/javascript" src="http://mysite.de/demo.js"></script>[/PHP]2)
HTML (habe ich im footer meines Templates eingefügt:
[PHP]<?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>[/PHP]3)
Javascript (habe ich als demo.js abgespeichert und in meinem Joomla-Root hochgeladen)
[PHP]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()-4+"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 = 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++"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;
}
});
});[/PHP]

Hoffe das macht die Zusammenarbeit mit euch einfacher[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]

Welchen Unterschied macht es denn, ob http://mysite.de/demo.js oder /demo.js?

Entweder mein Javascript ist falsch oder sie stehen nicht in Relation, weil ich den Javascript per HTML falsch aufrufe oder gar nicht aufrufe! Vllt liegt der Fehler darin, dass in dem Code...

[php] Button1[/php]


...also in den Buttons kein Bezug zu Javascript genommen wird?
Ich wäre jetzt sehr abhängig, was ihr dazu meint.

Zitat

(etwas viel Code nur für die Animation)

Ja das stimmt. Weil in dem Code noch einiges mehr animiert wird.
Müsste ich eines Tages kürzen.

Hi,

erstmal ein dickes Dankeschön an jeden, der mich hier unterstützt hat.
Ihr seid ohne Übertreibung spitze!

Ich habe mein JavaScript studiert, verbessert und lauffähig gemacht.
Die Animation folgt per Mootools = xyzFx.start("height",40);

Jetzt versuche ich Cookies zu setzen, damit sich meine Seite jedes mal erinnert, ob beim jeweiligen Nutzer das Menü
runter oder hochgeklappt war, um diesen jeweiligen Zustand so zu laden.

Hauptsächlich soll entweder True oder False gespeichert werden.
Cookies erzeugt man durch document.cookie = 'name=wert;';
Alles schön und gut, nur weiß ich nicht, wie ich das in meinem Javascript einbinden soll.
Jeder Versuch hat gescheitert.

Um meinen Code verständlich, jedoch kurz und knackig zu halten:

Wenn ein Besucher zum erstenmal eine Seite besucht, dann sind vorgegebene Variablen false. Zunächst wird überprüft, ob eine bestimmte Variable True oder False ist:
[php]if (mouseOverTaskleiste == true){}
else{
var mouseOverTaskleiste = false;} [/php]

Weiter unten, wird je nach True oder False das Menü hoch oder runtergeklappt.
Da am Anfang noch False ist, klappt er hoch:
[php]if(mouseOverTaskleiste == false){
tskFx.start("height",600);}
else{tskFx.start("height",0);} [/php]

Durch einen Button wird wird die Variable True/False geschaltet:
[php]taskleisteSelector.addEvent("click", function(){
if(!mouseOverTaskleiste){
tskFx.start("height",0);
mouseOverTaskleiste = true;
}else{
tskFx.start("height",600);
mouseOverTaskleiste = false;
} [/php]

Rein technisch klappt ja alles wunderbar. Aber die Werte True und False gehen jedes mal verloren, sobald die Seite neugeladen wird.
Ich weiß leider nicht wie und wo ich Cookies für dieses Beispiel setzen soll.

Habe auch versucht per Mootools es zu verwirklich da es kürzer und einfacher ist.
Aber in beiden Fällen scheitert es an der Umsetzung.

Wenn mir da jemand bei dem Code hilft, wäre ich im sehr dankbar.