slayeroffice - web experiments gone horribly awry

12.09.2005 - Where'd I leave that function...

Mostly for my benefit, a series of utilitarian javascript functions that I sometimes find myself in need of with no clue of what they appear in, or think will be useful for future projects and want to document before forgetting where they are:

so_applyStyeString
Applies a string of styles to an object.
so_clearInnerHTML
DOM based means of clearing an objects contents.
so_createColorPath
Returns an array of RGB colors to get from color1 to color2. Used in things like the Color Palette Creator.
so_isAppXML
Determines if the document is being served as application/xhtml+xml. Used in the Mouseover DOM Inspector to find out if innerHTML is read-only or not.
so_returnScrollDimensions
Returns the amount the window is scrolled either vertically or horizontally. Useful if you need an object to always be 10px down and 10px left from the browser chrome regardless of how far the user has scrolled.

Nothing spectacular, but potentially useful. I intend to start being more diligent with my documentation, so this list will grow.

Re: clearInnerHTML, another option is to replace the element with a shallow clone of itself via cloneNode(false). It should be quicker if it has many children but I haven't done any benchmarking.
Posted by Stephen Clay on December 11, 2005 @ 4:09 am
Very good idea Stephen!

100 paragraph tags, each containing the text "test".

Using a shallow clone, it takes 3ms. Using firstChild, it takes 36ms. In addition, it always takes the clone 3ms, while the length of time required by the firstChild method increases/decreases depending on the number of children.
Posted by Steve on December 12, 2005 @ 6:10 pm


Forgot to mention - the test page I put together is here:

http://slayeroffice.com/test/clone_vs_firstchild.html

I've tested in FF 1.5 and Safari on 10.4 - the numbers vary, but the results are the same.
Posted by Steve on December 12, 2005 @ 6:14 pm


so_applyStyleString() will come in handy.

One great line to add to the object functions is:

if (typeof obj=="string") obj = document.getElementById(obj);

Then you can pass an object's id, rather than contructing it's element first.

It also never hurts to wrap an if(obj) {} around the command.
Posted by Neil on January 10, 2006 @ 4:05 pm


Comments have been closed for this post.