The House of AnimeJB » Javascript

Dynamic Style Sheets

Calophi — Thu, 29 Jun 2006 16:29:44 +0000

This isn’t about rotating through alternate stylesheets or importing them, or even changing an inline style on an element through Javascript. Oh no. This is about creating an actually stylesheet element ON THE FLY.

The reason for this is because for a bit I was just trying to create a long string with the style tags and rules inside it, and then just pop it in the innerHTML of the body. (Hey, I’m no Guru, I have a lot to learn!) Needless to say, this caused a few issues.

At first I tried to use DOM Stylesheets to serve my purposes, but I soon found that although they work in Mozilla and IE (though IE works funny and has different functions to use), the document.stylesheets object and it’s functions are woefully supported in other browsers, Safari in particular.

My next attempt was a tad more successful - I used document.createElement("style"), appended the rules to it as a TextNode, and then appended the style to the . I then learned that IE does not like to append TextNodes to style elements.

So, after a bit of research I found a way to get IE to insert the text into the style. It works in the latest-greatest Mozilla, IE, Safari, and Opera. Not sure about older versions. Just have it run onLoad() and make an example div to test it out.

var myCSS = "div{background-color: blue}";
var myStyle = document.createElement("style");
	myStyle.setAttribute("type", "text/css");

//only IE uses style.styleSheet, the rest use style.sheet
if(myStyle.styleSheet){
	//Many browsers won't let you change the style's cssText, but IE does.
	myStyle.styleSheet.cssText = myCSS;
} else {
	//this is the standard way to do it, which IE does not support.
	myCSS = document.createTextNode(myCSS);
	myStyle.appendChild(myCSS);
}

document.getElementsByTagName("head")[0].appendChild(myStyle);

Obviously if you don’t want things to blow up in more archaic browsers, you’re going to want to do a detect for document.createElement before running this code.

JavaScript XPath Support

Calophi — Thu, 29 Jun 2006 16:02:20 +0000

At work some of my tasks have led me to fooling around with new interface ideas. I figured this is a good way to get up to scratch with AJAX and related ideas.

Now if you’re pulling in XML with AJAX you know that it can be a perfect pain to parse the file. You’ve got to make sure that the file is converted into a document element (and the methods for doing so are unfortunately not cross-browser), and even afterwards there’s no cross-browser method to finding the tags you want - at least not one that will give you clean code. Basically, your choices are:

getElementsByTagName() - it works, but the function is long, and you’ll have more loops and nests than you can shake a stick at. Also, you’re limited to tags.
Functions such as firstChild and childNodes - which again, leads to long code and lots of nesting. Plus, using these you don’t even know what the tags are you’re messing with, and heaven forbid you change the XML schema a bit, if you didn’t well-document your javascript it could take you a bit to find the lines you need to alter.
XPath and XSLT transformations - which are sadly not cross-browser and in some cases don’t even exist in certain browsers.

That third option is what this post is really all about. After doing some research I have found a few lovely developers who created a wrapper for Internet Explorer to help it behave similarly to Mozilla, thus creating nice cross-browser XML parsers. Here are the three bigger ones.

Sarissa is my personal favorite of the three. It’s a cross browser library that handles making document objects, xmlHTTPRequest, xPath parsing, XML to XSLT transformations, and converting XML into strings. There is a lot of documentation on it, the forums are fairly active, it’s an active project, AND besides working for Mozilla and IE, it also partically supports Safari and Opera (which have incomplete native functionality).
Glazkov’s XPath Parser is by far the easiest of the three to use. It lets you use XPath parsing to traverse through the HTML DOM. I was pretty pleased with it and even managed to make a few wrapper functions for it to make it even easier to use. Unfortuantely, through, it only works with objects that are in your normal document’s DOM - that is, it won’t work on an XML type document. Bummage. It’s also been put in hiatus. Still, if you’re only using it to go through your own DOM, it’s the best one to go with.
Google AJAXSLT - I’m really only including this because it’s Google. It does, from what I can tell, AJAX calls, XPath parsing, and XML to XSLT transformations. The project itself isn’t terribly well documented and has been stagnant since October 2005. However people seem to enjoy it and they use something similar to this for Google Homepages, and they’ve said recently that the project isn’t abandoned, just not a priority. So if you can figure out how to use it, it’s probably pretty neat.

Reg Ex for Script Tags

Calophi — Fri, 12 May 2006 16:09:48 +0000

I thought it might be nice to have a little archive of Javascript Regular Expressions for other people coming through.

This one is for pulling