✔ Divs per Ajax verschieben

D

DiDiJo

Erfahrenes Mitglied
Hey Leute,

ich hab mich mal prommt hier angemeldet da ich bei meinem Projekt einfach nicht weiterkomme.

es dreht sich um folgendes:

Ich habe eine Seite gestaltet in der der Inhalt aus einer Datenbank kommt
zum anschauen einfach mal klicken. Nun soll beim wechseln der Kategorie der Text sammt Bilder auf der rechten Seite, aus der Seite "fahren". Man klickt also auf den Link und der Text / die Bilder fahren nach Links raus. Sobald der Text nicht mehr zu sehen ist soll dieser wechseln und rechts wieder reinfahren.

Zum Test habe ich diesen "test" link eingebaut, der mir meinen Inhalt einfach nur rausfahren soll.

im grunde genommen soll das in etwa so aussehen klick. Wählt man dort einen Ort aus, so werden alle übrigen elemente zusammengestaucht und verschoben. vom Prinzip her soll das gleiche auch bei mir passieren, nur das mein Inhalt sich nicht staucht sondern nur nach links fährt und von rechts wieder kommt.

Wie das mit der DB funktioniert spielt heir erstmal keine Rolle. Bei mir hackt es erstmal nur an der Bewegung.

Wenn ich bei mir nun die Funktion über meinen Test-Link aufrufe wir mein Text nur einmal verschoben. Trotz for schleife passiert einfach nix mehr. Drücke ich dann nochmal auf den Link geht gar nix mehr.

Mein FireFox-WebDeveloper Liefert auch keine Fehler.

HTML: 
<script type="text/javascript">
//<!--
function Moving(id){
 	var req = null;
	try{
		req = new XMLHttpRequest();
	}
	catch (ms){
		try{
			req = new ActiveXObject("Msxml2.XMLHTTP");
		} 
		catch (nonms){
			try{
				req = new ActiveXObject("Microsoft.XMLHTTP");
			} 
			catch (failed){
				req = null;
			}
		}  
	}
	
	if (req == null)
		alert("Error creating request object!");
		
	req.open("GET", 'http://w00a543f.dd12138.kasserver.com/index.php?kid='+id, true);	
	req.onreadystatechange = function(){            
                    switch(req.readyState) {
                            case 4:
                            if(req.status!=200) {
                                alert("Fehler:"+req.status); 
                            }else{    
                                //alert(req.responseText);
								for (var i=0; i<20; i++){
                               		 document.getElementById('content_move').style.left += -100+"px";
								}
                            }
							break;
                            default:
                                return false;
                            break;     
                        }
                    };
  
    req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    req.send(null);
}
//-->
</script>
</head>

<body>
<div id="out">
	<div id="top">&nbsp;</div>
    <div id="head">
    	<div id="head_left">&nbsp;</div>
    	<div id="head_main">&nbsp;</div>
        <div id="head_right">&nbsp;</div>
        <div class="clear"></div>
    </div>
	    <div id="main">
		  <?php include('content.php')?>
        </div>
    <div id="navigation">
     	<div id="navigation_left">&nbsp;</div>
    	<div id="navigation_main"><a href="#" onclick="Moving(1)">test</a><?= formatNaviLinks();?></div>
        <div id="navigation_right">&nbsp;</div>
        <div class="clear"></div>   
    </div>
  <div id="footer">&nbsp;</div>    	
</div>

Kann mir vlt. einer von euch einen Tipp geben. Ich hänge hier schon seit 2 stunden dran. Achja und wenn der Ajax-Kopf viel zu umfangreich ist, dann sagt es ruhig. Das ist mein erstes Ajax Projekt und ich bin noch ein richtiger Anfänger
 
gut gut ... das is geändert ... ich hab mein javascript teil auch nochmal überholt wobai dies rauskam (auf Ajax verzichte ich jetzt erstmal bei der "Animation") ...

HTML: 
var direction="right";

function doIt() {
 if(document.getElementById) {
     activeX=parseInt(document.getElementById("contentMove").style.left);
	  alert(document.getElementById("contentMove").style.left);
     maxX=document.body.offsetWidth;
     if(direction=="right") {
        if((activeX+60)<maxX || activeX+60<window.innerWidth) {
           document.getElementById("contentMove").style.left=(activeX+5)+"px";
           window.setTimeout('doIt()',50); }
        else {
           direction="left";
           window.setTimeout('doIt()',0); }
     }
     else {
        if(activeX>0) {
           document.getElementById("contentMove").style.left=(activeX-5)+'px';
           window.setTimeout('doIt()',50); }
        else {
           direction="right";
           window.setTimeout('doIt()',0); }
     }
 }
 return;
}

contentMove hat einen left wert von 0px ... es tut sich dennoch nix ... und wenn ich mir activeX alerte kommt NaN raus ... lasse ich das pareInt weg kommt "" raus, also nix.

ich bin ein wenig überfragt ....


hier noch ein auszug aus meiner css datei

Code: 
#main{
		height:397px;
		background-image:url(../pics/welt.jpg);
		background-repeat:no-repeat;	
		position:relative;
}

#contentMove{
		position:absolute;
		left:0px;
}

contentMove befindet sich in main


EDIT:

ok ein teil ist gelöst .. ich hab mal das left direkt ins div tag geschriben ... jetzt t schionmal ein teil
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück