nicht angemeldet
Hallo!!
Ich bin begeistert, nicht nur, dass du die Aufgabe sehr schön gelöst hast, vor allem auch weil ich anhand dieser viel lernen konnte! Ich danke dir für die Mühe, die du dir gegeben hast!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">In der Sprachangabe sollte wahrscheinlich »de« stehen für Deutsch.
Stimmt, das Grundgerüst war ursprünglich kopiert und wurde mit wachsendem Verständnis verändert.
var Navigation = new Object();
Navigation.buttonbreite = 50;
Navigation.buttonpressed = 0;
Navigation.breite = 0;Kurzschreibweise:
var Navigation = {
buttonbreite: 50,
buttonpressed: 0,
breite: 0
};
Das kenne ich, habe ich auch so versucht, jedoch hat das nur mit dem Firefox (Version 6) funktioniert und nicht mit dem IE (Version 8)?
buttonpressed sollte ein Boolean-Wert sein, also true oder false.
Stimmt.
if(Navigation.buttonpressed==1) { st = st + 10; if(st < Navigation.breite - document.body.offsetWidth - Navigation.buttonbreite)Ich würde hier nicht mit document.body.offsetWidth arbeiten. Dieser Wert ist weitesgehend uninteressant, dich interessiert die Breite der Navigation selbst.
Die Breite der Navigation war unter Verwendung von Divs die Breite des Fensters (offsetWidth) minus die Breite der Buttons, die daneben angebracht wurden. Habe hier aber noch einen Fehler, da Klammern um offsetWidth und buttonbreite fehlen. In deinem Code hast du das aber anders gemacht, schaue ich mir gleich an. :)
window.onload = function() {
var all_obj;
if(document.all) {
all_obj=document.all;
}
else if(document.getElementsByTagName && !document.all) {
all_obj=document.getElementsByTagName("*");
}
for(i=0; i<all_obj.length;i++) {
if(all_obj[i].className == "menu") {
Navigation.breite = Navigation.breite + all_obj[i].offsetWidth;
}
}Das ist unnötig umständlich. Hole dir das Navigationselement, das die Menü-Einträge umschließt, und durchlaufe mit .getElementsByTagName('li') seine Kinder.
Ah, ByTagName war mir bisher nicht bekannt, auch wäre ich nicht auf die Idee gekommen, dass man getElement (was natürlich logisch ist) auf jedes Element des htmls anwenden kann und nicht nur auf document.
document.getElementById("block").style.width = document.body.offsetWidth - Navigation.buttonbreite + "px"; document.getElementById("buttons").style.width = Navigation.buttonbreite + "px";Das kannst du alles mit CSS-Positionierung lösen.
Lediglich die maximalen Scrollwert muss man mit JavaScript berechnen.
Hier denke ich noch falsch. Habe das gemacht, damit ich für die Breite der Buttons nur eine Variable ändern brauche. Unnötig kompliziert, ob ich sie in einem JS umsetze, was man sicherlich vermeiden sollte, oder lieber in einer css, was eindeutig geschickter ist...
Die Containerbreite für die Navigation hast du gesetzt, indem du im CSS den Abstand nach oben, links und rechts gesetzt hast, den Rest macht der Browser selbst?! Oh man, manchmal denke ich wirklich langsam, das macht Sinn so!
function doResize() {
location.href = location.href;
}window.onresize = doResize;
Beim Resize musst du nicht neu laden, sondern lediglich einige Breiten neu berechnen, wie du es beim onload auch tust.
Ah, das ist sehr gut, löst das Problem, dass gemachte Eingaben gelöscht werden. :)
<table border="0" cellpadding="0" cellspacing="0">
Layouttabellen sind überflüssig, verwende CSS zur Positionierung.
<div id="block2"> <div class="menu">Navigation1</div > <div class="menu">Navigation1</div > <div class="menu">Navigation1</div > <div class="menu">Navigation1</div > <div class="menu">Navigation1</div > <div class="menu">Navigation1</div > </div>Das sollte eine Liste mit ul/li oder ol/li werden.
Wäre es mein Projekt würde ich deiner Empfehlung sofort nachgehen, es soll aber in einem bestehenden Projekt benutzt werden und da wird alles mit divs gehandhabt...
<div id="buttons"><a href="#" onmousedown="Navigation.buttonpressed=1;moveItLeft()" onmouseup="Navigation.buttonpressed=0">left</a> <a href="#" onmousedown="Navigation.buttonpressed=1;moveItRight()" onmouseup="Navigation.buttonpressed=0">right</a>
</div>Hier fehlt das Unterdrücken der Standard-Ereignisbehandlung des click-Events, um zu verhindern, dass der Browser # anspringt.
Außerdem solltest du Event-Handler mit JavaScript registrieren, am besten so, dass mehrere Event-Handler eines Typs registriert werden können (Unobtrusive JavaScript).
So, das habe ich halb verstanden beim ersten Durchlesen. Ich hoffe mit deinem Beispiel, dass ich mir nun genauer ansehen werde, werde ich das genauer verstehen.
Noch einmal: Ich danke dir, nicht nur für die Lösung des Problems, sondern auch weil ich mir gern einen vernünftigen Programmierstil aneignen möchte und dein Beispiel mir sehr gut gefällt.
PS: jsfiddle ist ja ne tolle Sache. Sollte ich noch einmal eine Frage haben werde ich auch darauf zurückgreifen.
Gunnar Bittersmann
Der Martin