Neuere Einträge »

Panorama mit JavaScript

Geschrieben in css,javascript von natalia am 25 April 2008

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

Geschrieben in css, javascript | Keine Kommentare »

Fileupload Progress mit PHP und AJAX

Geschrieben in default,javascript von natalia am 7 April 2008

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.

  1. <iframe src="" name="upload_target"></iframe>
  2. <?
  3. $uid = rand(1000000,9999999);
  4. ?>
  5. <form action="result_ajax.php" onSubmit="upm_start(<? echo $uid; ?>)" method="post" method="post" enctype="multipart/form-data" target="upload_target">
  6.     <input type="hidden" name="UPLOAD_IDENTIFIER" value="<? print $uid; ?>" />
  7.     <input type="file" name="upload_file" />
  8.     <input type="submit" name="submit_file" value="upload file" />
  9. </form>
  10. <div id="response"></div>
  11. <div id="response_counter" style="display: none;"></div>

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.

  1. function initAjax() {
  2.     if(window.ActiveXObject) {
  3.         try {
  4.             xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  5.         } catch(e) {
  6.             try {
  7.                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  8.             } catch(e) {
  9.                 return false;
  10.             }
  11.         }
  12.     } else if(window.XMLHttpRequest) {
  13.         xmlHttp = new XMLHttpRequest();
  14.     }
  15. }
  16. function upm_start(upload_id) {
  17.     upm_counter = 0;
  18.     upm_upload_id = upload_id;
  19.     upm_started = 1;
  20.     total_negative = 0;
  21.     document.getElementById("response").innerHTML = "";
  22.     document.getElementById("response_counter").innerHTML = "";
  23.     upm_update();
  24. }
  25. function upm_update() {
  26.     upm_counter++;
  27.     if(upm_started == 1 && total_negative < 100) {
  28.         document.getElementById("xajax_response_counter").innerHTML+= upm_counter;
  29.         var randNum = Math.ceil(Math.random()*1000);
  30.         xmlHttp.open("GET","progress_ajax.php?uid="+upm_upload_id+"&r="+randNum,false);
  31.         // set the readystatechange again for IE to reuse the object
  32.         xmlHttp.onreadystatechange = function() {
  33.             if(xmlHttp.readyState==4 && xmlHttp.status == 200) {
  34.                 displayProgress();
  35.             }
  36.         }
  37.         xmlHttp.send(null);
  38.     }
  39. }
  40.  
  41. function displayProgress() {
  42.     document.getElementById("response_counter").innerHTML+= "| ";
  43.     response = xmlHttp.responseXML.documentElement;
  44.     var loaded = 0;
  45.     var total = -1;
  46.     var time = 0;
  47.     var speed = 0;
  48.     var est_sec = 0;
  49.     // Bytes loaded
  50.     try {
  51.         loaded = response.getElementsByTagName("loaded")[0].firstChild.data;
  52.     } catch(e) {}
  53.     // Bytes total
  54.     try {
  55.         total = response.getElementsByTagName("total")[0].firstChild.data;
  56.     } catch(e) {}
  57.     // PHP time() function value -> to check how often the request are send
  58.     try {
  59.         time = response.getElementsByTagName("time")[0].firstChild.data;
  60.     } catch(e) {}
  61.     // speed
  62.     try {
  63.         speed = response.getElementsByTagName("speed")[0].firstChild.data;
  64.     } catch(e) {}
  65.     // est_sec
  66.     try {
  67.         est_sec = response.getElementsByTagName("est_sec")[0].firstChild.data;
  68.     } catch(e) {}
  69.     //
  70.     if(total == -1) total_negative++;   
  71.     var percent = Number(loaded/total*100).toFixed(2);
  72.     var width = Math.round(percent * 2.5);
  73.     var progress = "<div id=\"progress_upload\" style=\"width: 250px; height: 20px;\"><div style=\"border: 1px solid gray; width: 250px; height: 20px\">";
  74.     progress+= "<div id=\"progress_bar\" style=\"width: "+width+"px; background-color: silver;\">&nbsp;</div>";
  75.     progress+= "</div><div id=\"progress_message\">"+percent+"% ("+formatBytes(loaded)+" / "+formatBytes(total)+") av speed: "+formatBytes(speed)+"/sec ETA: "+formatSeconds(est_sec)+"</div></div>";
  76.     document.getElementById("xajax_response").innerHTML = progress;
  77.     window.setTimeout("upm_update()",500);
  78. }
  79.  
  80. function upm_end() {
  81.     document.getElementById("response").innerHTML = "";
  82.     upm_started = 0;
  83. }
  84.  
  85. function formatSeconds(sec) {
  86.     var min = Math.floor(sec/60);
  87.     var hour = Math.floor(min/60);
  88.     if(hour > 1) {
  89.         return hour+" h "+min+" m";
  90.     } else if(min > 1) {
  91.         return min+" m "+sec+" s";
  92.     } else {
  93.         return sec+" s";
  94.     }
  95. }
  96.  
  97. function formatBytes(b) {
  98.     var kb = Number(b / 1024);
  99.     var mb = Number(kb / 1024);
  100.     var gb = Number(mb / 1024);
  101.     if(gb > 1) {
  102.         return gb.toFixed(2)+" GB";
  103.     } else if(mb > 1) {
  104.         return mb.toFixed(2)+" MB";
  105.     } else if(kb > 1) {
  106.         return kb.toFixed(2)+" KB";
  107.     } else {
  108.         return b.toFixed(2)+" B";
  109.     }
  110. }
  111. initAjax();

Das in den Header der result_ajax.php

  1. window.parent.upm_end();
  1. <?
  2. header('Content-Type: text/xml');
  3. echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';
  4. $upload_id = $_GET['uid'];
  5.  
  6. $xml = '<progress>';
  7. if(function_exists('uploadprogress_get_info')) {
  8.     $progress = uploadprogress_get_info($upload_id);
  9.     $xml.= '<upload_id>'.$upload_id.'</upload_id>';
  10.     $xml.= '<time>'.time().'</time>';
  11.     //$xml.= '<loaded>'.var_export($progress,true).'</loaded>';
  12.     $xml.= '<loaded>'.$progress['bytes_uploaded'].'</loaded>';
  13.     $xml.= '<total>'.$progress['bytes_total'].'</total>';
  14.     $xml.= '<speed>'.$progress['speed_average'].'</speed>';
  15.     $xml.= '<est_sec>'.$progress['est_sec'].'</est_sec>';
  16. } else {
  17.     $xml.= '<upload_id>'.$upload_id.'</upload_id>';
  18.     $xml.= '<loaded>0</loaded>';
  19.     $xml.= '<total>0</total>';
  20.     $xml.= '<speed>0</speed>';
  21.     $xml.= '<est_sec>0</est_sec>';
  22. }
  23. $xml.= '</progress>';
  24. echo $xml;
  25. ?>

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:

  1. xmlHttp.open("POST","progress_ajax.php?uid="+upm_upload_id+"&r="+randNum,true);

Geschrieben in default, javascript | Keine Kommentare »

Script Debugger für IE

Geschrieben in javascript von natalia am 2 Januar 2008

http://blogs.msdn.com/ie/archive/2004/10/26/247912.aspx
Hab mal was gefunden zu Script Debugging in IE (“Objekt erwartet” ist einfach die dümmste Fehlermeldung überhaupt). Etwas scheisse, nicht zu vergleichen mit dem Debugger in Firefox, aber beser als gar nichts.

Geschrieben in javascript | Keine Kommentare »

Neuere Einträge »