Dagnabit!  What is the point of combining xml and html standards if I can’t use them together all the time?  I know, you may be thinking, but xml is not html , no matter what you throw into your nodes.  You’re right, and this is exactly what jQuery tells us.  You can grab the text contents of any node, but if you have html tags in there, the .text() method in jQuery will just look right past them.  As it should.  This works fine, for little snippets like my titles, but what if I want to put some (ostensibly) well-formatted html code in my data?  Further, what about all those applications where you want to store html snips in a database and read them out in XML?  How do you get around this?

For that, we’d want to use the .html() method of jQuery, and for that, my friends, we suddenly get quite strict.  XML, according to jQuery, is not html, and so has no innerHTML quality for the .html() method to grab.  It doesn’t matter, says jQuery, if your html code is so well formatted that it can be parsed as xml…it’s just not possible to access an html-specific property that does not exist.

Like fun, I say!

But before we get to the solution, let’s heartlessly go over some available options:

1) We could punt on the whole jQuery thing and use Flash, which knows just what to do with a string of html parsed from within an xml node.  Furthermore, Flash has a nifty .htmlText property on its text fields, and although the formatting of said html pales compared to real css, it will faithfully render as html anything you tell it to, caveat codeur.  Since the project in question did involve some Flash, this was an option, but one of the points of the project was to take the same xml data and have both flash and jQuery parse it for different purposes, and thereby provide ease for content providers and improve accessibility.  So doing the whole thing in Flash was out.

2) We could escape the heck out of all our characters and turn the whole node into a mess of html character codes.  Un-fun to code and messy for the content people.  Also, I tried that and it rendered out a block of actual html onto my screen.  I’m sure I could have reconverted those characters back into actual html behind the scenes, but again, un-fun and a hassle.

3) Use a fancy xml consuming plugin or script.  There are some neat ones out there, and I tried one in particular that looked pretty good, but it seems they have a common issue – you have to know what tags you’re looking for in order to seek and replace within the script.  Some of them will hunt for anything that looks like an html tag in the string and convert that, but mostly these plugins seem like scripts that people wrote to perform functions for themselves, and then extracted and shared.  Which I applaud.  But these were not what I was looking for, and I found the implementation sometimes troublesome.

4) [Warning: bad solution] Hand jQuery a bag of grapes and say it’s “nature’s jellybeans” (at least that’s what my mom used to do to us).  It goes like so: grab your xml file with an ajax() call, and use the optional key/value pair:

dataType: “html”

And then you’d do ike so:

$.ajax({ url: “myXMLdoc.xml”,
dataType: “html”,
success: function(xml){
var myHtmlContent = $(‘node’,xml).eq(id).find(“nodeName”).html();
$(“#targetdiv”).html(myHtmlContent);
}
});

…and there you have it!  Or, would…if…

…can you see where this is going?

…search your feelings, Luke…

…if only Internet Explorer handled the XMLHTTPRequest result like the rest of the world!  Like most Microsoft stuff, IE, with its own version of the XMLHTTPRequest (someone correct me if I’m wrong on that), wants to get too clever and won’t let you, the developer, tell it what kind of data you’d like to see (even if it’s either of several types that are verging toward common standard).  No siree!

Supposedly, recent versions of IE (7+) have their own XMLHTTPRequest, not the previous Microsoft HTTPRequest.  However, the Microsoft XMLHTTPRequest doesn’t behave like the other girls and boys, even in the recent versions of IE.  Now, this post didn’t start off to be a discussion of the supposed evils of Microsoft’s proprietary habits.  But who else has almost 11 million results on a google search of how much they suck?  Hint: not Chrome (3 M), Firefox (1 M), or Safari (1 M).  (Can’t evaluate Opera on this critrion because sadly a lot of people out there think that real, actual opera – the music – sucks too).  For comparison: “yanni sucks” (400 K), “death metal sucks” (700 K), “paris hilton sucks” (1 M), “the lions suck” (1 M), “tv sucks” (11 M), and “new york sucks” (12 M).  So, yeah.

Anyway, after that turgid digression, finally, we come to the solution.  And…

It’s simple!  Maybe I’m, like, the last one to figure this out, but you just use XML’s CDATA declaration, and wrap it around our html code within our xml node.  If I had found that idea earlier, it would have saved me some time, but I would have missed a brain-scratching moment or ten for sure.

Anyway, this is fascinating to me for several reasons:

a) When oh when is Microsoft going to just give up and give us a truly standards-compliant web browser?  Maybe they should spin off a company whose software is intuitive and flexible and plays nice with others.  Oh wait, they already did that.

b) With the XHTML standard in full force, it seems totally silly that one would have to pass off perfectly valid XHTML within an xml document as CDATA.  Isn’t the whole point of XHTML to be able to one day have a semantic web, where code itself can be meaningful?  How far away are we when it’s trouble to get even well-formatted html out of my xml nodes without basically commenting it out?  In theory, that means I can’t parse through my html elements, which seems to go against the whole ethos of XHMTL.

Well, heck.  I remember when CSS was going to put an end to bad code.

Because web browsers are anchored to the top left of the window, you may want to use a combination of these three methods to achieve your desired results.  jsFloater allows you to define a minimum stage size, so that your elements won’t crash together if the user squashes the page size down by dragging the browser window’s bottom right corner to the middle of the screen, for example.  This minimum stage size is passed to the class constructor on instantiation.

There is a visual guide to the API available both in the downloadable zip file and also for browsing on this site.  You can mouse over the various objects in the visual API guide to reveal what method has been used to float them, which align mode they are employing, and what their current pixel x – y coordinates are.

jsFloater allows you several types of floating, in addition to the ability to “pad” or “stick” your floats, as will be expained below.  The types of floating are proportional (based off of the difference between the minimum stage size and current stage size) or Strict, meaning based only on the current stage size.

The methods:

constructor

public function jsFloat(sIW:uint, sIH:uint):void

returns: nothing

parameters:

sIW:uint – stage Initial Width.  This is also the stage minimum width you define based on your designs.
sIH:uint – stage Initial Height.  This is also the stage miniumum height you define based on your designs.

Both of these parameters will be used to calculate values in the proportional float modes and will also set the values for browser window resizes that are smaller than your minimum.

floatHor

public function floatHor(obj:Object, align:String,  yStick:int, xPad:int, sW:Number, sH:Number):void

returns: nothing.

parameters:

obj:Object – the object passed to the method.  Can be sprite or movieclip as well.
align:String – the alignment mode.  Options are:
“left” – aligns left, proportionate to minimum stage size
“leftStrict” – aligns left, based strictly on current window size
“right” – aligns right, proportionate to minimum stage size
“rightStrict” – aligns right, based strictly on current window size
“center” – aligns center (horizontally) in the window
yStick:int – allows you to force the floated object to “stick” to a particular y value.  A horizontal float with a yStick of 0 will align vertically with the top of the browser window.  Negative values can be used, as well as your own math (provided it results in an integer).
xPad:int – allows you to pad your float values.  For example, if you are using an image that always needs to be 20 pixels from the right edge of the window, you would use the “rightStrict” mode and and xPad of 20.  Positive values for pads will move objects toward the center of the window (horiztontally, in this case), except when using the “center” mode, which moves positive values toward the right.  Negative values can be used, as well as your own math (provided it results in an integer).
sW:Number – current stage width.
sH:Number – current stage height.

floatVer

public function floatVer(obj:Object, align:String, xStick:int, yPad:int, sW:Number, sH:Number):void

returns: nothing.

parameters:

obj:Object – the object passed to the method.  Can be sprite or movieclip as well.
align:String – the alignment mode.  Options are:
“top” – aligns top, proportionate to minimum stage size
“topStrict” – aligns top, based strictly on current window size
“bottom” – aligns bottom, proportionate to minimum stage size
“bottomStrict” – aligns bottom, based strictly on current window size
“middle” – aligns middle (vertically) in the window
xStick:int – allows you to force the floated object to “stick” to a particular x value.  A vertical float with a xStick of 0 will align with the left side of the browser window.  Negative values can be used, as well as your own math (provided it results in an integer).
yPad:int – allows you to pad your float values.  For example, if you are using an image that always needs to be 20 pixels from the bottom of the window, you would use the “bottomStrict” mode and and yPad of 20.  Positive values for pads will move objects toward the middle of the window (vertically, in this case), except when using the “middle” mode, which moves positive values to the bottom.  Negative values can be used, as well as your own math (provided it results in an integer).
sW:Number – current stage width.
sH:Number – current stage height.

floatHorVer

public function floatHorVer(obj:Object, stickMode:String, xPad:int, yPad:int, sW:Number, sH:Number):void

returns: nothing.

parameters:

obj:Object – the object passed to the method.  Can be sprite or movieclip as well.
stickMode:String – analogous to the align parameter in the methods above.  Options are:
“center” – aligns to the center (horizontally) and middle (vertically) of the window
“right” – aligns vertically to the middle and horizontally to the right, proportionate to the minimum stage size
“rightStrict” – aligns vertically to the middle and horizontally to the right, based strictly on current window size
“bottom” – aligns horizontally to the center and vertically to the bottom, proportionate to the minimum stage size
“bottomStrict” – aligns horizontally to the center and vertically to the bottom, based strictly on current window size
“bottomright” – aligns to the bottom right, both proportionate to the minimum stage size
“bottomrightStrict” – aligns to the bottom right, both based strictly on current window size
“bottomleft” – aligns to the bottom left, proportionate to the minimum stage size
“left” – aligns vertically to the middle and horizontally to the left, proportionate to the minimum stage size
“topleft” – aligns to the top left, proportionate to the minimum stage size
“top” – aligns horizontally to the center and vertically to the top, proportionate to the minimum stage size
“topright” – aligns to the top right, proportionate to the minimum stage size
Note: because the browser window is anchored to the top left, certain stickMode parameters for this method would be redundant.  For example, there is no topleftStrict, as that effect can be achieved with the floatHor method, taking an align mode of “leftStrict”.
xPad:int – allows you to pad your float values horizontally.
yPad:int – allows you to pad your float values vertically.
xPad and yPad are as described for the methods above.  Either can accept negative values and math that results in an integer, except that both will push objects toward the center (horiztonally) and middle (vertically) of the window when given positive values, unless the “center” mode is used, which will push positive values down and to the right.  For example, if you wanted two objects to float at the center of the screen, with one always offset from the other 20 pixels down and to the right, you would float the first using the floatHorVer method with xPad and yPad of 0 and 0, and float the second using the same method, with an xPad of 20 and a yPad of 20.
sW:Number – current stage width.
sH:Number – current stage height.

For more, see How To Use jsFloater.