Block A:
8 ZZ – Reverse re, Reverse li Straddle
8 ZZ – Chacha li (Süd), Mambo Turn re (Süd)
8 ZZ – Mambo Chacha re (Süd), Marchi li um das Step herum nach Nord
8 ZZ – 2 Kick li + re
Reverse aus V-Step aufbauen, dann den Straddle üben mit dem Basic zurück. Dann wieder bei den Reverse anfangen und alles auf einer Seite aufbauen und zum Schluß die Drehung dazu.
Block B:
8 ZZ – Spider re mit Boxstep, auf 7+8 mit Walzer auf die Südseite wechseln
8 ZZ – Baby Mambo re+li auf Süd, halber Basic rauf, dabei wieder Richtung Nord drehen
8 ZZ – re runter, li Knie hoch, li Sidekick, li Knie hoch, li Knie ab (unten abstellen), re hoch, li hoch, re ab
8 ZZ – 2 Basic mit Taps li Blick Ost
Spider und Boxstep mit 2 Marches am Platz üben. Den Sidekick kann man aus einem Double-Knee herunter aufbauen.
Block C:
8 ZZ – 2 Legcurl re+li, dabei seitlich von Step abgehen, V-Step re Vierteldrehung Richtung Ost
8 ZZ – Side Leglift re+li combined mit 2 Marches wieder ab (Blick Ost)
8 ZZ – halber Basic Straddle re, 2 Taps von außen nach innen
8 ZZ – Kneelift Drehung Nord, Mambo li
Grundaufbau: 2 Legcurl, V-Step, 2 Side Leg Lift, 1 Basic, 2 Taps, 1 Kneelift, 1 Mambo
Das ist auch ein wenig älter, fiel mir letzens ein. Ich hatte mal aus Spaß eine Seite machen wollen, die aussieht wie ein Browser und sich teilweise auch so verhält. Damals war Firefox 1 noch aktuell, also habe ich den nachgebaut. Exakt wie in einer 1024×768 Darstellung. Die Lesezeichen sind das Menü, die Icons sind nur Deko, die Adresszeile könnte ein Rootline-Menü sein und als Highlight – der Loader dreht sich beim Rollover. Ich finds schick und ein wenig nostalgisch (wo Firefox 3 als Beta schon da ist).
Dieses Experiment ist schon ein wenig älter, trotzdem sehr schön. Jeder kennt Panoramen mit QuickTime oder Flash. Ich wollte eine Möglichkeit finden, das gleiche (wenn auch ein wenig simpler) mit JavaScript umzusetzen.
Beim Laden der Seite wird eine Funktion aufgerufen, die das Div, in dem gescrollt werden soll, ausmisst. Dieses Div wird mit drei Listenern versehen:
– beim Bewegen der Maus über das Div wird eine Variable gesetzt, dass gescrollt werden soll
– beim Bewegen der Maus aus dem Feld wird das Scrolling beendet
– beim Bewegen der Maus wird die Position ermittelt und falls die Variable „scrollActive“ gesetzt ist, wird das Hintergrundbild verschoben
Im ersten Beispiel reiht sich der Hintergrund unendlich aneinander und man kann somit unendlich scrollen. JavaScriptScroll unendlich
Im zweiten Beispiel wird nicht mehr gescrollt, wenn der Hintergrund um einen bestimmten Wert verschoben worden ist, so dass man das Verhalten vom QuickTime-Panorama etwas simulieren kann. JavaScriptScroll begrenzt
Die Grundlagen dazu finden sich in dem Post davor, wo der Super-Simpel-Fileupload mit PHP erklärt worden ist. Das ist die Erweiterung des Beispiels, um den Fileupload auch ohne Reload üebrwachen zu können. Wie gesagt, die Beispiele, die ich gefunden habe, sind eigentlich ganz nett, aber haben meistens zu viel Code oder brauchen bestehende AJAX-Klassen, ich wollte ein Beispiel, das ohne weitere Dateien funktioniert. Ich habe es übrigends auch in eine Typo3-Extension gegossen.
Die Dateien im Beispiel davor habe ich alle mit dem Suffix _ajax versehen und bearbeitet. Das Formular bliebt, wie es ist, es kommt nur der Event-Handler onSubmit dazu, der nach dem Beginn des Uploads den Status abfragt. Das zweite iFrame, das sich ständig neugeladen hat, kommt auch raus, stattdessen werden hinter das Formular zwei divs gesetzt: response und response_counter. Im ersten wird der Ladebalken angezeigt und im zweiten will ich die Request zählen (einfach so), kann man nachher ausblenden. Das ist der Teil zwischen body-Start und -Ende.
Dann braucht man noch einen AjaxRequest, den hab ich mir hier abgeschaut: http://www.w3schools.com/AJAX/ajax_server.asp. Beim Absenden des Formulars wird die Funktion upm_start mit er generierten Id aufgerufen (upm = upload progress manager), da werden alle Werte gespeichert und die Update-Funktion aufgerufen. Innerhalb der Update-Funktion wird progress_ajax mit der Upload-Id und einem zufälligen Wert aufgerufen (damit das Caching umgangen wird). Wenn die Antwort von progress_ajax in XML-Form zurückkommt, wird diese verarbeitet und es wird ein Ladebalken generiert. Danach wird mit einem Timeout die Funktion zur Fortschrittsabfrage erneut aufgerufen. Wenn der Upload fertig ist, wird aus dem iFrame heraus die Funktion upm_end aufgerufen, die die Request stoppt.
Zu beachten sind folgende Sachen:
Der IE mag es nicht, wenn man einen Request ein weiteres Mal verwendet, damit es keine Probleme gibt, muss die Callback-Funktion erneut bei onReadyStateChange hinzugefügt werden und zwar nach der Open-Anweisung.
Dann habe ich eine zusätzliche Abfrage eingebaut, um eventuelle Endlos-Schleifen zu vermeiden, es wird bei jedem leeren Request ein Zähler gesetzt und wenn dieser 100 erreicht, wird die Schleife gestoppt.
Wichtig bei der Rückgabe (progress_ajax.php) ist, dass man den Content-Type auf xml setzt, ansonsten steht die Eigenschaft responseXML nach der Rückgabe nicht zur Verfügung.
Man könnte auch setInterval verwendet, das hat aber den Nachteil, das die Requests gesendet werden unabhängig davon, ob der letzte zurückgekommen ist. Und so könnten mehrere Requests parallel unterwegs sein, was den Server auf Dauer und bei mehreren Benutzern verlangsamt.
function initAjax() {
if(window.ActiveXObject) {
try {
xmlHttp = new ActiveXObject(„Msxml2.XMLHTTP“);
} catch(e) {
try {
xmlHttp = new ActiveXObject(„Microsoft.XMLHTTP“);
} catch(e) {
return false;
}
}
} else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function upm_start(upload_id) {
upm_counter = 0;
upm_upload_id = upload_id;
upm_started = 1;
total_negative = 0;
document.getElementById(„response“).innerHTML = „“;
document.getElementById(„response_counter“).innerHTML = „“;
upm_update();
}
function upm_update() {
upm_counter++;
if(upm_started == 1 && total_negative < 100) {
document.getElementById("xajax_response_counter").innerHTML+= upm_counter;
var randNum = Math.ceil(Math.random()*1000);
xmlHttp.open("GET","progress_ajax.php?uid="+upm_upload_id+"&r="+randNum,false);
// set the readystatechange again for IE to reuse the object
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState==4 && xmlHttp.status == 200) {
displayProgress();
}
}
xmlHttp.send(null);
}
}
function displayProgress() {
document.getElementById("response_counter").innerHTML+= "| ";
response = xmlHttp.responseXML.documentElement;
var loaded = 0;
var total = -1;
var time = 0;
var speed = 0;
var est_sec = 0;
// Bytes loaded
try {
loaded = response.getElementsByTagName("loaded")[0].firstChild.data;
} catch(e) {}
// Bytes total
try {
total = response.getElementsByTagName("total")[0].firstChild.data;
} catch(e) {}
// PHP time() function value -> to check how often the request are send
try {
time = response.getElementsByTagName(„time“)[0].firstChild.data;
} catch(e) {}
// speed
try {
speed = response.getElementsByTagName(„speed“)[0].firstChild.data;
} catch(e) {}
// est_sec
try {
est_sec = response.getElementsByTagName(„est_sec“)[0].firstChild.data;
} catch(e) {}
//
if(total == -1) total_negative++;
var percent = Number(loaded/total*100).toFixed(2);
var width = Math.round(percent * 2.5);
var progress = „
„;
progress+= „
„;
progress+= „
„+percent+“% („+formatBytes(loaded)+“ / „+formatBytes(total)+“) av speed: „+formatBytes(speed)+“/sec ETA: „+formatSeconds(est_sec)+“
Das in den Header der result_ajax.php
window.parent.upm_end();
‚;
$upload_id = $_GET[‚uid‘];
$xml = ‚‚;
echo $xml;
?>
UPDATE 26.August 2008: Hatte mit diesem Stückchen Code in den letzen Tagen tierische Probleme in den letzen Monaten. Zunächst mal funktionierte es nicht auf dem Mac – weder unter Firefox, noch unter Safari, nix. Hat mich wahnsinnig gemacht. Die Lösung war sehr dirty und nicht quick – ich musste den kompletten Upload Bar (in HTML) generieren und zurückgeben lassen, weil das Auswerten des XML-Objektes irgendwie nicht wollte. Soll auch ein bekanntes Problem sein, hab ich gehört.
Nun die nächste Problem: Unter Firefox 3 tats nicht. Also recherchiert – Firebug Bugs, Caching Probleme etc. Zum Glück gabs diesmal eine schöne Lösung, anstatt GET einfach POST zu verwenden:
xmlHttp.open(„POST“,“progress_ajax.php?uid=“+upm_upload_id+“&r=“+randNum,true);
Manchmal wünscht man sich, man könnte den Upload von Dateien überwachen. Normalerweise ist das so: man wählt im Formular eine Datei aus und wartet, bis sie irgendwann hochgeladen ist. Es wäre natürlich schön, wenn man während des Uploads ein Feedback hätte – wie viel bereits hochgeladen wurde, wie schnell etc.
PHP kann das von sich aus nicht, aber nach einiger Recherche bin ich auf diese Seite gestoßen: http://php5.bluga.net/UploadProgressMeter/demo.php. Dort wird ein PECL Package benutzt, das eine Funktion zur Verfügung stellt, um den Uploadvorgang zu überwachen. Das Package gibt es hier: http://pecl.php.net/package/uploadprogress.
Das Beispiel funktioniert auf der Seite wunderbar, man kann sich es zwar herunterladen, aber da fehlt der komplette AJAX-Server und zur Verdeutlichung ist es ein wenig wie mit Kanonen auf Spatzen schießen. Daher habe ich ein eigenes kleines Beispiel gebaut, das alle nötigen Elemente enthält und erstmal ohne AJAX funktioniert. Vielleicht kommt ein AJAX-Bespiel mal dazu.
Aufbau: upload.php enthält ein Formular und zwei iFrames – in das obere wird die Datei geladen, im unteren zeigt man den Status an. Das Zielframe ist sinnvoll, damit die Seite sich nicht aufhängt und nicht neugeladen werden muss. Im Progressframe ist eine Datei, die den Status abfragt und sich jede Minute aktualisiert. Wichtig im Formular folgende Felder: UPLOAD_IDENTIFIER ist eine Id, über die der Upload abgefragt werden kann, ein Input-Feld vom Type file (logisch) und ein Button. Nicht vergessen im Formular method und enctype zu setzen, target ist das iFrame.
Neueste Kommentare