✔ Größe von Bidllaufleiste an Browserfenster anpassen

[ronaldo84]

Hallo

ich habe mir die Bildlaufleiste von http://www.kostenlose-javascripts.de/javascripts/bilder/bildlaufleiste.html. Eingebaut. Dann habe ich den Rahmen um die Bilder und den Zwischenraum zwischen dem erstem und letztem Bild weggenommen. Nun möchte ich aber das sich die Bildlaufleiste an der größe des Browserfensters orientiert. Das kriege ich leider nicht hin.
Hier mal der Quelltext

<!--
var sliderwidth = 1000; // Breite des Sliders
var sliderheight = 80; // Höhe des Sliders
var slidespeed = 1; // Geschwindigkeit des Sliders
var slidebgcolor = "#FFFFFF"; // Hintergrundfarbe
var leftrightslide = new Array();
var copyspeed = slidespeed;
var i = 0;
leftrightslide[i++] = '<a href="<A href=""><img src="../images/1.gif" style="border-color: white;"></a>';
leftrightslide[i++] = '<a href="<A href=""><img src="../images/3.gif" style="border-color: white;"></a>';
 
leftrightslide = '<nobr>' + leftrightslide.join(" ") + '</nobr>';
var iedom = document.all || document.getElementById;
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-3000">' + leftrightslide + '</span>');
var actualwidth = '';
var cross_slide, ns_slide;
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2;
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3;
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide;
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth;
cross_slide2.style.left=actualwidth;
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2;
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3;
ns_slide.document.write(leftrightslide);
ns_slide.document.close();
actualwidth=ns_slide.document.width;
ns_slide2.left=actualwidth;
ns_slide2.document.write(leftrightslide);
ns_slide2.document.close();
}
lefttime=setInterval("slideleft()",30);
}
window.onload=fillup;
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed;
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+30;
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed;
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+30;
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed;
else
ns_slide.left=ns_slide2.left+actualwidth+30;
if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed;
else
ns_slide2.left=ns_slide.left+actualwidth+30;
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>');
if (iedom){
document.write('<div style="position:relative; width:' + sliderwidth + '; height:' + sliderheight + ';overflow:hidden">');
document.write('<div style="position:absolute; width:' + sliderwidth + '; height:' + sliderheight + ';background-color:' + slidebgcolor + '" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">');
document.write('<div id="test2" style="position:absolute;left:0;top:0"></div>');
document.write('<div id="test3" style="position:absolute;left:-1000;top:0"></div>');
document.write('</div></div>');
}
else if (document.layers){
document.write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>');
document.write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed" bgcolor="#FFFFFFF"></layer>');
document.write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed" bgcolor="#FFFFFFF"></layer>');
document.write('</ilayer>');
}
document.write('</td></table>');
}
}
//-->
</script>

Ich habe nun folgende Sachen versucht.

var sliderwidth = document.getElementById("table2").width;

oder die im Tag

document.write('<div style="position:relative; width:auto; height:' + sliderheight + ';overflow:hidden">');

und im ilayer

document.write('<ilayer width="100%" height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>');

Das hat leider alles nichts gebracht. Ich habe auch versucht die Sliederheight =100% zu setzen. Ohne Erfolg. Die Seit wird zwar geladen, aber die Bildlaufleiste erscheint nicht. Wenn ich wieder einen statischen Wert einsetzte klappt es wieder. Wieß jemand Hilfe?

Danke

Edit: Link funktioniert jetzt.

 

[Sven Mintel]

Wenn du der Tabelle, die das Skript schreibt, eine Breite von 100% gibst, und sliderwidth ebenfalls auf 100% setzt, sollte es gehen.
Achte darauf, die 100% bei sliderwidth in Anführungszeichen zu setzen.