Calculate page size and viewport position

Basically every browser except Internet Explorer agrees where the dimensions information is located. Can’t say that I’m particularly surprised, Microsoft has made it their mission to complicate these things.

For a nice visual list of available properties and browser support check out the W3C DOM CSS Object Model Compatibility article on QuirksMode. It’s a very nice list of many useful properties and methods as well as a chart of what browsers support them and how effective their support is.

View port dimensions

I found three possible objects that contain the view port size information. In most browsers the self object has the properties of innerWidth and innerHeight. However Internet Explorer has two other objects, IE6 keeps this information in the document.documentElement object and all new IEs use thedocument.body object. These objects have a clientWidth and clientHeight property.

Document dimensions

Once again, I found three different ways to get the document measurements. Most browsers agree that this information is stored in the document.body object. However Firefox’s best measurement of total document height seems to be window.innerHeight + window.scrollMaxY. The rest of the browsers respond to the scrollWidth/scrollHeight or offsetWidth/offsetHeight.

Scroll offset

Last but not least is the scroll offset, and again three different possible locations for this information. The general consensus is that scroll offset can be found in the pageYOffset and pageXOffset properties of the self or window objects. However IE uses scrollTop and scrollLeft properties on thedocument.body or document.documentElement objects.

http://stevenbenner.com/2010/04/calculate-page-size-and-view-port-position-in-javascript/

jStorage - store data locally with JavaScript

jStorage is a simple wrapper plugin for Prototype, MooTools and jQuery to cache data on browser side.
jStorage was first developed under the name of DOMCached but since a lot of features were dropped to make it simpler (like the support for namespaces and such) it was renamed. DOMCached had separate files for working with Prototype and jQuery but jStorage can handle both in one go.
http://www.jstorage.info/

Using Sizzle with Prototype

Recently, John Resig of jQuery fame released the selector engine used in the new version of jQuery called Sizzle.
Sizzle is a new take on using CSS selectors within Javascript and aims to be far more efficient than the methods commonly used by most current Javascript libraries.

//Overwrite findChildElements to use Sizzle http://sizzlejs.com
Selector.findChildElements = function(element, expression){
expression = expression.join(", ");
var results = Sizzle(expression, element);
if(results.length > 0){
  for(var i=0; i < results.length; i++){
      results[i] = Element.extend(results[i]);
  }
}
return results;
};

http://briancrescimanno.com/2009/03/24/using-sizzle-with-prototype