Wenn Div angezeigt wird, JavaScript Funktion starten

html.de-Forum JavaScript
1

Hey Leute,
ich hoffe ich kann mein Problem erklären, ist etwas kompliziert.
Also, ich bin grade dran, eine WebApp fürs iPhone zu schreiben. Nun hat man da ja nicht so viel Platz, also muss man Views anlegen, durch welche man navigieren kann. Also musste eine Funktion her, welcher ich 2 Parameter übergebe, zum einen der aktuelle View, und zum anderen der View, der angezeigt werden soll, das ganze sieht so aus:
[HTML]

View2
[/HTML]

So kann ich bei jedem Div angeben, was er anzeigen soll, egal ob bei vorwärts- oder rückwärtsnavigieren. Nun gibt es aber beim iPhone auch die Möglichkeit, über den Eventhandler „touchstart“ und „touchmove“ und einer Funktion die Weite des „Slides“ zu berechnen und so z.B. ab 200px-Slide die Funktion goTo(view2,view1) auszulösen. Nur soll der ja nicht die ganze Zeit diese Events registrieren, sondern nur wenn ein „Panel“ angeziegt wird und es gelten ja für jedes Panel andere Parameter. D.h. ich suche einen Weg, die Rückwärtsnavigation über dieses Slides hinzubekommen.

2

Wird nicht immer mindestens ein Panel angezeigt?
Du kannst dir so eine Art Klassen bauen.
Die immer wieder diese Slide Daten abfragt. Jetzt weiss ich natürlich nicht wie das mit dem sliden ist. Nehme an mal an es sieht folgendermaßen aus:
[ATTACH]1576.vB[/ATTACH]

Wenn dem so st. Musst du am ja erst mal beachten. Am Anfang darf nicht nach Links geslidet werden und am Ende nicht nach rechts.

Du solltest dir dnan parameter setzen: slidePosLeft, slidePosRight

Nehmen wir mal an dein panel ist 400 px breit.
dein Slide links würde dann bei 200 px reagieren und dein Slide rechte bei 600 px.
Dein nächstes Panel wäre ja bei 600 und würde reagieren bei: links: 400 px und rechts: 1000px

Selbst wenn die Breite variieren sollte, hast du ja noch die CSS Eigenschaften. Dann kannst du abfragen welche Breite das Panel hat.
Du setzt dann bei jedem ausgeührten slide die slidePos variablen neu und definierst das aktuelle panel. (bzw nur einen index)

Heisst du legst die Eventhandler nicht mehr direkt per onclick auf, sondern definierst diese beim sliden.

Falls es das überhaupt nicht war was meintest mit nochmal bescheid sagen. Auch wenn du meinen Beitrag nicht verstehst. ich weiss nicht wie gut deine JS kenntnisse sind. Und leider ist es auch etwas kompliziert zu erklären :slight_smile:

3

Ok, sagen wir so. Ich weis ja nicht ob du das iPhone kennst, also dieses Slidefunktion. Ein Panel hat immer die Höhe 416px und die Weite 320px. Und das füllt den ganzen Bildschirm aus, die anderen Panel haben die Eigenschaften position:absolute; und visibilty:hidden; d.h. sie sind alle an der gleichen Position, werden aber nicht angezeigt. Ich zeigt dir mal die Funktion in Js, wie die Panels aufgerufen werden:
[HTML]
function showPanel(p1,p2){
panel1 = p1.id;
panel2 = p2.id

var myEffect = new Fx.Morph(panel1, {duration: '2000'});
myEffect.start({
'opacity': [1, 0],
});

var myEffect = new Fx.Morph(panel2, {duration: '2000'});
myEffect.start({
'opacity': [0, 1],
});

}

function wipePanelToLeft(p1,p2){
panel1 = p1.id;
panel2 = p2.id;

var myEffect = new Fx.Morph(panel1, {duration: '500'});
myEffect.start({
'marginLeft': [0, -320],
'opacity': [1, 0],
});

var myEffect = new Fx.Morph(panel2, {duration: '500'});
myEffect.start({
'marginRight': [-320, 0],
'opacity': [0, 1],
});

$(panel1).style.marginLeft = '0';

}

function wipePanelToRight(p1,p2){
panel1 = p1.id;
panel2 = p2.id;

var myEffect = new Fx.Morph(panel1, {duration: '500'});
myEffect.start({
'marginRight': [0, -320],
'opacity': [1, 0],
});

var myEffect = new Fx.Morph(panel2, {duration: '500'});
myEffect.start({
'marginLeft': [-320, 0],
'opacity': [0, 1],
});

$(panel1).style.marginRight = '0';

}

[/HTML]
Wie du siehst, benutze ich für die Animationen Mootools, jedes Div, das rausgeht wird erstmal schön bis -320 gefahren, damit es aussieht, als würden sich die Dibs verschieben, was aber in Wirklichkeit nicht ist.
Und nun soll beim aktuellen Div der Rückwärtsslide aktiviert werden, den vorwärts braucht man nicht, da ja die Navigation durch die „rowitems“ funktioniert.
Hier ein kleines Video:
http://dl.dropbox.com/u/202259/JSProblem.mov

4

Habe ein iphone. Werde das mal zu hause testen. kann dir jetzt nicht blind sagen, was du machen sollst. Dafür muss ich mich damit mal beschäftigen :slight_smile:

5

Ok, erstmal vielen Dank, dass du dich damit überhaupt beschäftigst :wink:
Es muss halt irgendwie zu schaffen sein, dass man sagen kann, bei dem Panel soll es aktiviert sein und bei dem anderen eben nicht, weil es später dann nicht nur so normale „Listen“ geben wird, sondern auch Fullscreenlisten, und bei denen soll es eben deaktiviert sein. Hoffentlich geht das irgendwie…

6

Oook, mein Fehler: Ich habe jetzt herausgefunden, dass es doch erlaubt ist die Events „ontouchstart“, „ontouchend“, „ontoucmove“ und „ontouchcancel“ auf ein Div zu setzten, d.h. es werden dann nur die Gesten in diesem Bereich registriert :wink:
[HTML]

[/HTML] Falls jemand Interesse an dem Script hat, hier ist es: PS: Das ganze hat echt Style, vor allem wenn man es mit der Animation von Mootools in Verbindung setzt. Ich finde es echt cool, dass so etwas nur mit JS möglich ist. Vor ein paar Jahren hätte man nie daran gedacht^^ [HTML] function slideToRight(e, p1, p2){ panel1 = p1; panel2 = p2; var touchDisplay, origX; 
// Enthält 1 wenn der Finger die Oberfläche berührt und 0 wenn dies nicht der Fall ist
touchDisplay = false;

// Enthält die ursprüngliche X-Koordinate (an der der Finger die OberflŠche das erste Mal berührt hat)
origX = 0;

// Verhindern des Scrollings und Verschiebens (siehe ŸbernŠchstes Kapitel)
e.preventDefault();

// Sobald der Finger die Obverfläche berührt
if (e.type == "touchstart") {
	touchDisplay = true;
	// Überprüfen, dass auch nur wirklich ein Finger die Oberfläche berührt
	if (e.touches.length == 1) {
		var touch = e.touches[0];
		// Usprüngliche X-Koordinate der Berührung auslesen
		origX = touch.pageX;
		// Zurücksetzen der Werte
		currentX = 0;
		moveX = 0;
		}
}
// Wenn der Finger sich auf der Oberfläche bewegt
else if (e.type == "touchmove") {
	// Überprüfen, dass auch nur wirklich ein Finger die Oberfläche berührt
	if (e.touches.length == 1) {
		var touch = e.touches[0];
		// X-Koordinate auslesen an der sich der Finger gerade befindet
		var currentX = touch.pageX;
		
		// Wenn der Benutzer den Finger von links nach rechts bewegt
		if (origX < currentX) {
			// Distanz ausrechnen
			var moveX = currentX - origX;
			// Der Slide wird erst als "vollendet" erkannt, wenn sich der Finger mindestens 250px nach rechts bewegt
			if (moveX > 250) {
				// DIE GESTE IST GENAU AN DIESER STELLE ERFOLGREICH
				var myEffect = new Fx.Morph(panel1, {duration: '500'});
				myEffect.start({
					'marginRight': [0, -320],
					'opacity': [1, 0],
				});

				var myEffect = new Fx.Morph(panel2, {duration: '500'});
				myEffect.start({
					'marginLeft': [-320, 0],
					'opacity': [0, 1],
				});

				$(panel1).style.marginRight = '0';
			}
		}
	}
}
// Sobald sich der Finger von der Oberfläche hebt, werden alle Werte zurückgesetzt
else if (e.type == "touchend" || e.type == "touchcancel") {
	touchDisplay = false;
	origX = 0;
	currentX = 0;
	moveX = 0;
	
}

}

[/HTML]

7

Hatte mich gestern und kurz dran gewagt, jedoch nur 30 min Zeit gehabt. In der Zeit war leider nicht viel zu machen. Aber gut, dass es trotzdem funktioniert hat :slight_smile:
Und es ist ecth gut, dass solche schönen Sachen tatsächlich auch ohne Flash funktionieren. :slight_smile: