Dave Bond – Web DevelopmentWeb Development and Anything Else Stuck in My Head //

Update: See end of post for jQuery versions after 1.5.1

This is just another reason to love HTML5 and never let it leave your life ♥

The second version of XMLHttpRequest (XMLHttpRequest2) supports progress events… for upload and download!!!!

This is very easy to implement if your familiar with JQuery, example code below.

$.ajax({
  type: 'POST',
  url: "/",
  data: {},
  beforeSend: function(XMLHttpRequest)
  {
    //Upload progress
    XMLHttpRequest.upload.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with upload progress
      }
    }, false);
    //Download progress
    XMLHttpRequest.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with download progress
      }
    }, false);
  },
  success: function(data){
    //Do something success-ish
  }
});

This is done by modifying the XMLHttpRequest provided by “beforeSend” to create event handlers within the AJAX call.

This is only a simple working example, it should be tested before production use, I have not tested this code when using multiple asynchronous requests.

Please keep in mind that HTML5 is still under development and this is by no means a perfect solution to upload progress as yet as some browsers do not support it. This does work in Chrome 5, Safari 4 and Firefox 3.1+, don’t know when Internet Explorer might catch up…

Updated version for jQuery > 1.5.1

$.ajax({
  xhr: function()
  {
    var xhr = new window.XMLHttpRequest();
    //Upload progress
    xhr.upload.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with upload progress
        console.log(percentComplete);
      }
    }, false);
    //Download progress
    xhr.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with download progress
        console.log(percentComplete);
      }
    }, false);
    return xhr;
  },
  type: 'POST',
  url: "/",
  data: {},
  success: function(data){
    //Do something success-ish
  }
});

Creates a new XHR object for use, would need to also detect IE and deliver the activeX in production.

Have fun
Cya

Sometimes JPEG files will not load in Internet Explorer and will instead just display a red x while other browsers load the image perfectly.

Before you start searching through your code for errors, try this. Open the image in paint on Windows or preview will do on a mac and just save the file, upload it again and you may find it just starts working.

The reason for this is that Internet Explorer gets confused when it finds extra XML data inside JPEG files and refuses to load them. Programs that may add XML to your JPEGs I know of are Photoshop, Illustrator and iPhoto.

:)

Ok this seems to be a very rare problem, when I ran into this problem nobody on the entire internet seemed to know… Any advice I found was to change the colors I was using….

The problem occurs when you put a light colored font over a dark background (the issue doesn’t seem to affect all fonts), the anti aliasing seems to go into overdrive and makes the font much bolder than it should be. OSX uses the quartz system to render the text which is optimized for dark text on a light background, but when we do the opposite it goes crazy and the font goes super bold.

Example: Text with issue on the left, the text you really want on the right.

Well I have a present for all you, just cause I’m a nice guy. Want it to look like the text on the right?

Apply “opacity:0.99;” to the CSS of all affected text, we’ve only dropped the opacity by 1% but suddenly we have the right weighting :)

Cya  ;)