Total DOMination
Today I rocked the DOM. For the longest time I had very little understanding of what the Document Object Model was, even though I'm supposedly a web designer and I've actually used it before in my designs. Turns out the DOM is just a way of using javascript to bend HTML and CSS to your will.
And so, for the very first time, I created my own script from scratch! This is hard for me, because unlike CSS, if a script isn't exactly right, you can't figure out what's wrong by previewing it in a browser. If it's wrong at all, it won't work at all.
So what would cause me venture into the bug-infested waters of my own sorry attempts at scripting instead of sticking to friendly CSS and HTML coding? Breadcrumbs. They're a required feature of the site I'm working on now. A lot of sites have them:
Home » Products and Services » Devices » Fusion
But who wants to make a separate breadcrumb trail for every single page on the site?? To avoid this, many sites use javascript to take apart a URL like
http://actel.com/products/devices/fusion/index.html and use the directory names as the crumbs, but I wasn't sure whether every page on the site would have a tidy URL like that.
So my idea was to have one big nested list of all the categories and page names and somehow let the browser know which category, subcategory, and page name to display and which to hide for a given page.
This can be done purely with CSS, but with a large site it would take lines upon lines of unsightly code. So instead I used a short DOM script to tell the browser that when the page's body tag has a class of "Fusion" to display only the Fusion list item and each of its parent list items (Home, Products and Services, Devices). I wrote it myself and it worked, yippee!
And so, for the very first time, I created my own script from scratch! This is hard for me, because unlike CSS, if a script isn't exactly right, you can't figure out what's wrong by previewing it in a browser. If it's wrong at all, it won't work at all.
So what would cause me venture into the bug-infested waters of my own sorry attempts at scripting instead of sticking to friendly CSS and HTML coding? Breadcrumbs. They're a required feature of the site I'm working on now. A lot of sites have them:
Home » Products and Services » Devices » Fusion
But who wants to make a separate breadcrumb trail for every single page on the site?? To avoid this, many sites use javascript to take apart a URL like
http://actel.com/products/devices/fusion/index.html and use the directory names as the crumbs, but I wasn't sure whether every page on the site would have a tidy URL like that.
So my idea was to have one big nested list of all the categories and page names and somehow let the browser know which category, subcategory, and page name to display and which to hide for a given page.
This can be done purely with CSS, but with a large site it would take lines upon lines of unsightly code. So instead I used a short DOM script to tell the browser that when the page's body tag has a class of "Fusion" to display only the Fusion list item and each of its parent list items (Home, Products and Services, Devices). I wrote it myself and it worked, yippee!