Position eines JavaScriptes verändern?
Tom Boger
- javascript
Hallo,
ich hab hier einen Quelltext zu einem Bildlauf im Internet gefunden. Der funktioniert auch soweit nur möchte ich jetzt die Position des Slider selbst bestimmen. Ich hab versucht ein <div> drumherum zu setzen und dann per Css die 'absolute' Position festzulegen. Allerdings funktionierte der Slider dann nicht mehr. Kennt jemand eine Lösung, die die Position des folgenden Codes verändert (absolute Position oder mit margin left/top) ?
Vielen dank schon mal
Hier der Code:
<script type='text/javascript'>
<!--
var sliderwidth = 250; // Breite des Sliders
var sliderheight = 180; // Höhe des Sliders
var slidespeed = 1; // Geschwindigkeit des Sliders
var slidebgcolor = "#F0F0F0"; // Hintergrundfarbe
var leftrightslide = new Array();
var copyspeed = slidespeed;
var i = 0;
leftrightslide[i++] = '<a href="0001.html"><img src="http://www.kostenlose-javascripts.de/wp-content/uploads/_files_images_thumbs_0001.jpg"></a>';
leftrightslide[i++] = '<a href="0004.html"><img src="http://www.kostenlose-javascripts.de/wp-content/uploads/_files_images_thumbs_0004.jpg"></a>';
leftrightslide[i++] = '<a href="0005.html"><img src="http://www.kostenlose-javascripts.de/wp-content/uploads/_files_images_thumbs_0005.jpg"></a>';
leftrightslide[i++] = '<a href="0006.html"><img src="http://www.kostenlose-javascripts.de/wp-content/uploads/_files_images_thumbs_0006.jpg"></a>';
leftrightslide[i++] = '<a href="0010.html"><img src="http://www.kostenlose-javascripts.de/wp-content/uploads/_files_images_thumbs_0010.jpg"></a>';
leftrightslide[i++] = '<a href="0011.html"><img src="http://www.kostenlose-javascripts.de/wp-content/uploads/_files_images_thumbs_0011.jpg"></a>';
leftrightslide[i++] = '<a href="0012.html"><img src="http://www.kostenlose-javascripts.de/wp-content/uploads/_files_images_thumbs_0012.jpg"></a>';
leftrightslide[i++] = '<a href="0013.html"><img src="http://www.kostenlose-javascripts.de/wp-content/uploads/_files_images_thumbs_0013.jpg"></a>';
leftrightslide[i++] = '<a href="0014.html"><img src="http://www.kostenlose-javascripts.de/wp-content/uploads/_files_images_thumbs_0014.jpg"></a>';
leftrightslide[i++] = '<a href="0015.html"><img src="http://www.kostenlose-javascripts.de/wp-content/uploads/_files_images_thumbs_0015.jpg"></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:-100px;left:-3000px">' + 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+20+"px";
}
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+20;
ns_slide2.document.write(leftrightslide);
ns_slide2.document.close();
}
lefttime=setInterval("slideleft()",30);
}
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px";
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+"px";
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px";
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+"px";
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed;
else
ns_slide.left=ns_slide2.left+actualwidth;
if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed;
else
ns_slide2.left=ns_slide.left+actualwidth;
}
}
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 + 'px;height:' + sliderheight + 'px;overflow:hidden">');
document.write('<div style="position:absolute;width:' + sliderwidth + 'px;height:' + sliderheight + 'px;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"></layer>');
document.write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>');
document.write('</ilayer>');
}
document.write('</td></table>');
}
}
//-->
</script>
<script type="text/javascript">
function addEvent234(obj,type,fn){if(obj.addEventListener){obj.addEventListener(type,fn,false)}else if(obj.attachEvent){obj["e"+type+fn]=fn;obj[type+fn]=function(){obj["e"+type+fn](window.event)};obj.attachEvent("on"+type,obj[type+fn])}};addEvent234(window,'load',fillup);
</script>
Hallo,
Ich hab versucht ... die Position des folgenden Codes
wo sich der JS-Code aufhält, ist relativ egal. Du musst die vom Script erzeugten Elemente mit CSS stylen.
Die browsereigenen Entwicklerwerkzeuge helfen dabei.
Gruß
Kalk
wo sich der JS-Code aufhält, ist relativ egal. Du musst die vom Script erzeugten Elemente mit CSS stylen.
wie gesagt als ich Css verwendet habe funkionierte der Slider nicht mehr.
wo sich der JS-Code aufhält, ist relativ egal. Du musst die vom Script erzeugten Elemente mit CSS stylen.
wie gesagt als ich Css verwendet habe funkionierte der Slider nicht mehr.
oh man... hat sich erledigt. hat jetzt doch mit div und css geklappt. Muss ich davor wohl einen Fehler gemacht haben. Danke
Hallo,
wo sich der JS-Code aufhält, ist relativ egal. Du musst die vom Script erzeugten Elemente mit CSS stylen.
wie gesagt als ich Css verwendet habe funkionierte der Slider nicht mehr.
Dann hast du was falsch gemacht. Z.B. hast du eine Tabelle für das Layout missbraucht. Schmeiß die raus.
Gruß
Kalk
Dann hast du was falsch gemacht. Z.B. hast du eine Tabelle für das Layout missbraucht. Schmeiß die raus.
Bei dermaßen grottenschlechtem Code du machst dir Sorgen um eine Layout-Tabelle?
Hast du dir den Kram überhaupt angeguckt? Mir wird schon bei der ersten Javascript-Zeile ganz flummerig wegen der globalen Variablen.
Hallo
Hast du dir den Kram überhaupt angeguckt? Mir wird schon bei der ersten Javascript-Zeile ganz flummerig wegen der globalen Variablen.
Dann hast du wohl den Rest nicht gesehen. Da steckt, wie von JürgenB schon angemerkt, noch Spezialexpertencode für den Netscape 4.x drin. Ich würde ja gerne dazu etwas sagen, aber da ich in Sachen JS in keinster Weise firm bin, also auch keinen Weg zu einer Lösung anbieten kann, überlasse ich das euch.
bitteschön: <I> ;-)
Tschö, Auge
Hallo Tom,
ich blicke da nicht durch, da wird ja das ganze Markup per document.write erstellt. Kannst du deine (Test-)Seite mal online stellen?
Evtl. solltest du noch weiter suchen, das Script scheint uralt zu sein, es verwendet noch document.all und document.layers.
Gruß Jürgen
http://loa-tombola.co.gp/ hier sieht man wie der Slider aussieht danke schon mal für die schnellen Antworten