The House of AnimeJB

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.

Read the rest of this entry »

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.

Read the rest of this entry »

I had made this entry in our old blog, but since that’s lost and there’s a lot more Firefox Extensions out now, I figured it’d be good to make a new list of extensions that are useful for web development.

• Web Developer - A great toolbar that allows you to easily disable browser elements (css, cookies, javascript, cache, etc), outline elements on a page, edit css and html, and even view the generated source on the page - that is, what your JavaScripts print out.  Way nifty.
• Colorzilla - Lets you pick a color from anywhere on a website and copy it into your page.  Has a color pallet that lets you fine tune your colors, too.
• MeasureIt - Lets you draw a ruler on a webpage.  Pretty useful for estimating space.
• View Source Chart - The ultimate tool for viewing the generated source of a page.  Color codes and indents everything into nice crisp boxes.
• View Formatted Source - Like the View Source Chart but want to kick it up a notch?  Not only does this extension view the generated source (though not as neatly organized, I think) - you can also view images by highlighting them int he source code, and the same goes for the CSS of an element!  PLUS it has an inline element that allows you to select a section of the page and view it’s source. AWESOME.
• FireBug - A spiffy little console that attaches to the bottom of the browser.  Lets you traverse the DOM, view errors in JavaScript, XML, and CSS (and toggle them on and off!), shows you results of AJAX requests, and even gives you the option of writing messages directly to the console instead of alerting them through JavaScript.  Very, VERY awesome.
• Console² - If FireBug is a bit too much for you, you can always turn to Console².  As of Firefox 1.5 all your error messages for XML, CSS and JS are all shoved into the same JavaScript Console.  This extension renames it to an “Error Console” and allows you to toggle your error types on and off.
• CSSViewer - Switch it on and then hover over any element to get it’s style in a nicely organized floating box.  Very cute, but doesn’t seem to like frames very much.

There are a few more out there that I haven’t tried, but look pretty useful.  Please do try them and comment here with results!

• Regular Expressions Tester
• XPath Checker
• XPather