Having recently adding jQuery to my arsenal of web tools I've been experimenting with new ways of organizing content. While tabs is one obvious way of doing this (tutorial to come), my newly preferred method is the Accordion widget in jQuery UI.
It offers a nice flexible options and can be used for nearly all types of content. And the best part of this particular option has to do with the fact that the required code is very minimal and straightforward. Enjoy!
With the amount of jQuery tutorials being written, tweeted, and retweeted I keep seeing one common theme in nearly all of them. None of them use the jQuery shorthand to launch their scripts when their DOM is loaded.
Of course there's nothing wrong with this and it is perfectly valid, but if you are able to cut out code, that means you cut down on development. If you are familiar with jQuery then you're most likely familiar with starting your scripts like so:
$(document).ready(function() { //your code here });
Well, I've finally finished my redesign. It took about a month and half of "here and there" work, but I think it paid off. I've tested it across Firefox and IE quite extensively so everything should pretty much be in order. I hope to review it in Safari over the next couple days.
One of the features I've added is an AJAX search. I wanted to eliminate page reloads when a visitor wants to find something and also allow for an alternative way to navigate. For instance if you're searching for a blog post and don't find what you want through the results, all you have to do is type "blog" and voila! The blog page loads on the fly. This particular functionality works for all 4 primary pages (blog, lifestream, portfolio, contact) and I'll likely add to this feature overtime.
As you probably notice, there's currently a few discrepancies with my live site. This has been done on purpose. Why? Well, because as much as I love playing around with websites, Drupal, jQuery, etc., I tend to get a little lazy when it comes to my own site.
To keep myself on track, I decided to create a new theme on and put it on top of my live site instead of in a sandbox. For the most part, this is transparent since I haven't enabled the new theme. However, when it comes to changing the design of my fragmented content (known as "blocks" in Drupal), the content and code changes but doesn't have access to the new theme's CSS.
When writing CSS for large sites and/or redesigns, does it ever feel like your duplicating style after style? The one thing about CSS that really gets me down sometimes, is the duplication of effort.
For instance, you set a color in your stylesheet via a hexidecimal value and after about 20 minutes you realize you need to reuse that color for another id/class. Since you are using several hex values, its hard to remember which is which so now you have to go back and dig through the stylesheet to find the one you want.
Enter LESS, a leaner CSS. Taken directly from their site "Less extends css by adding: variables, mixins, operations and nested rules." Now you're probably thinking, "Huh? CSS doesn't have variables...does it?". Well, no it doesn't, but LESS does.
