So I spent an entire day discovering a quirk about javascript that I must now share. In a previous post on creating default settings for classes/objects I discussed the following technique:

var Widget = new Class({
	initialize: function(element, options){
		this.element = element;
		this.options = Object.extend({
			offsetX: 0,
			offsetY: 0
		}, options || {});
		this.setPosition();
	},
	setPosition: function(){
		this.element.setStyles({
			left: this.options.offsetX + 'px',
			top: this.options.offsetY + 'px'
		});
	}
});

Now, this isn’t a very useful class, but it illustrates the technique. The functions in our class don’t have to worry if the options are defined; they are either what the default value is or they are what the user passed in. If the user elects to just pass in a subset of the values, that’s fine:

var myWidget = new Widget(myElement, {offsetX: 100});
//myElement will be offset by 100 on the left,
//zero (the default) on the top

But what if you want to extend the functionality of your class later? What if you want to be able to insert more default options?

Here’s what I was doing that caused me trouble: Read the rest of this entry »

via Ajaxian:

Daniel Kantor has implemented a Back button solution in Streampad and has shared it with us.

One of the main gripes against AJAX webapps is how they break the back button in a typical browser. There have been a few solutions (notably Brad Neuberg’s Really Simple History) but none have got it working in Safari. GMail still does not have a working back button in Safari.

They say the third time is the charm and I have tried to get a Back button thing in Streampad twice before. I do not want to use someone else’s library as they are usually more complex than I need and I did not want to put something in place until I had Safari working. I tried a few different techniques, but when I got it working in Safari, it would break in Firefox or IE.

I finally figured out a way to get this working in Firefox, IE and Safari.

While Daniel struggled with this, he found that the back button support caused a slow down in the entire app performance. He came up with a new solution that didn’t suffer from the performance issues:

The general concept is this: You load a page into an iframe that calls parent.goBack() and then changes its own location to a new page (a blank page will do). Because the page jumps to a new location, it now has a history. If you click the back button, it will load the page again (calling parent.goBack()) and then spring forward to the dummy blank page.

var historyArray = Array(); // create an empty array to hold the history
var historyCounter = -1; // initialize the array pointer to -1

function historyAdd(f){
  if (historyCounter == -1){  // the first time this is called it will change the iframe location
  document.getElementById(’hFrame’).src = “/historySpring.php”;
}

var o = historyArray[historyCounter];
if (f != o){ // don’t put in consecutive duplicates
  historyCounter++
  historyArray[historyCounter] = f; // add function to history
}

function goBack() {
  if (historyCounter> 0){ // don’t want to call it if there is nothing in history array
    historyCounter– // set the pointer back one
    var f = historyArray[historyCounter]; // get the function from the history array
    f = f+”()”;
    eval(f); // call the function
  }
}

via ajaxian (as usual):

Aaron Hopkins of Google has released an article on Optimizing Page Load Time which came out of his experience optimizing page load times for a high-profile Ajax application.

He starts off talking about “how much I could reduce latency due to external objects. Specifically, I looked into how the HTTP client implementation in common browsers and characteristics of common Internet connections affect page load time for pages with many small objects.” Read the rest of this entry »

via ajaxian:

Abe Fettig knows that we need to start detecting the difference between IE6- and IE7+, because a lot of the hacks that we were using for IE are no longer needed.

He didn’t want to grok the user agent, as that is very brittle, so he came up with:

if (typeof document.body.style.maxHeight != “undefined”) {
// IE 7, mozilla, safari, opera 9
} else {
// IE6, older browsers
}

Any other thoughts?

Read the rest of this entry »

Want several copies of IE running side by side? Want to test out IE 7 but don’t really want to zorch your IE 6 that you also need to test? No problem.