Tom Boger: Position eines JavaScriptes verändern?

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>
  1. 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

    1. 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.

      1. 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

      2. 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

        1. 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.

          1. 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

            --
            Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war. Terry Pratchett, “Wachen! Wachen!
  2. 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

    1. http://loa-tombola.co.gp/ hier sieht man wie der Slider aussieht danke schon mal für die schnellen Antworten