nicht angemeldet
Hallo,
nach einigen Änderungen habe ich endlich verstanden, was das Script tun soll. Allgemein machst du es dir sehr kompliziert und es ließe sich vereinfachen.
<!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.
.menu {
background-color: #99CC33;
width: 200px;
color: #006633;
float: left;
<!-- top: 20px;-->
<!-- left: 20px;-->
<!-- padding: 5px;-->
position: absolute;
}
Den position-Kram habe ich entfernt, sonst liegen die Navigationseinträge nicht nebeneinander, sondern übereinander.
var Navigation = new Object();
Navigation.buttonbreite = 50;
Navigation.buttonpressed = 0;
Navigation.breite = 0;
Kurzschreibweise:
var Navigation = {
buttonbreite: 50,
buttonpressed: 0,
breite: 0
};
buttonpressed sollte ein Boolean-Wert sein, also true oder false.
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.
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.
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.
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.
<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.
<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).
Hier ein Gegenvorschlag zur Strukturierung:
Schau dir den Aufbau mal genauer an.
Beim Laden wird erst einmal init aufgerufen. Darin werden die benötigten Elemente geholt und beim Navigation-Object gespeichert. Außerdem werden die Event-Handler registriert:
n.addEvent(window, 'resize', n.setupWidths);
n.container = document.getElementById('navigation-container');
n.element = document.getElementById('navigation');
var buttonLeft = document.getElementById('button-left');
n.addEvent(buttonLeft, 'mousedown', n.buttonLeftDown);
n.addEvent(buttonLeft, 'click', n.buttonUp);
var buttonRight = document.getElementById('button-right');
n.addEvent(buttonRight, 'mousedown', n.buttonRightDown);
n.addEvent(buttonRight, 'click', n.buttonUp);
Schließlich wird setupWidths aufgerufen, welches auch beim Resize wieder aufgerufen wird:
// Container-Breite
n.containerWidth = n.container.offsetWidth;
// Summe der Breite aller Navigations-Items
n.width = 0;
var lis = n.element.getElementsByTagName('li');
for (var i = 0, l = lis.length; i < l; i++) {
n.width += lis[i].offsetWidth;
}
n.element.style.width = n.width + 'px';
// Beides wird für die maximale Scroll-Position benötigt
n.maxScrollLeft = n.width - n.containerWidth;
Der Rest sind Event-Handler für die Button-Klicks sowie die beiden scrollLeft- und scrollRight-Funktionen. Neu hinzugekommen ist eigentlich nur buttonUp als click-Handler bei den Buttons:
buttonUp: function (e) {
Navigation.buttonPressed = false;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
},
Darin wird wie gesagt verhindert, dass der Browser # anspringt.
Mathias
Gunnar Bittersmann
suit
Der Martin