Friday, January 13, 2006

Random Ajax - Fun with Lists 1

Random Ajax - Fun with Lists

There are a lot of ways to use Ajax, some of which are definitely better than others. People have been working on some great encompassing scripts that will simplify the handling of multiple Ajax uses on a website. A few of the most notable are script collections from Script.aculo.us, Prototype, and Behaviour. Note, that I did not include the now famous Ruby on Rails script collections that have become a framework for Ajax development with Ruby. The reason I did not was because it is specific to Ruby. The script packages that appeal the most to me are the ones that can easily interface with multiple languages (see those three named above).

I have made a little test page (one of many more I hope) that shows how you can script and implement some simple Ajax using the Script.aculo.us and Prototype base scripts. Feel free to look at the source code of sample page and see the underlying code. The only header script references actually needed in the document itself are these:

<script src="http://www.websitestyle.com/blog/prototype.js" type="text/javascript"></script>
<script src="http://www.websitestyle.com/blog/behaviour.js" type="text/javascript"></script>

There is an additional script that goes in the page also, and that can also be linked to separately. However, in order for the two scripts above to work, the rest of the collection (just a few extra js files) should reside on in files on your server also so they can be called if needed. There is an explantion of how to use those base scripts here on the Script.aculo.us site.

When you look at the draggable lists demo you will see some extra things added to it for formatting purposes. However, the only things actually required to make it run are labling the <ul> section for each list with the appropriate id (in this case either id=firstlist or id=secondlist), the script directly below the lists in the page, and those two scripts referenced above. Everything else is just to make it pretty or to enhance useability.

I will try to add more of these example pages, and go into some of the fun little ways you can toy with Ajax. In fact, I plan to actually do more with this example, so perhaps it will get updated later with additions). For now, hopefully this will be a fun little thing to take a look at.

~Nicole

Thursday, January 12, 2006

Generated Content

CSS - Generated Content

After spending some of today in discussion with a friend on how to work with generated content in CSS, I've decided to take that discussion a bit further and go over the basics here. First, a great reference for generated content is on the W3C site, and can be found here.

Typically you are going to use generated content in combination with a pseudo class. For instance, the :before pseduo class is often associated with generated content. To elaborate on that, consider this simple example:

Goal: Create a list of links, and flag some links a generated 'New!' text that is red to indicate which of those links has been updated recently.

So, start by making the simple unordered list (code shown after).

<ul>
<li><a href="#">Section Foods</a></li>
<li><a href="#">Section Books</a></li>
<li><a href="#">Section Links</a></li>
</ul>

Now, we have a list a you probably have some general formatting that should apply to the list elements (in your CSS file). But, you can now add some generated content. It's very simple to do. You'll add these two rules to your CSS file:

li.updated:before { content: "New! ";}

Then you want to change it so that the color of that text is red, so you simply modify that code as follows:

li.updated:before { content: "New! ";color: red }

Now you can continue on by adding the class="updated" indicator to the list items where they have been updated. For example:

<li class="updated"><a href="#">Section Foods</a></li>

Pretty simple eh? You could do the same thing with an image of course. Another great use for this ability to generate content is for quotes. I have used this quite a few times, and though pseudo-classes are not supported by Explorer, it is still quite a nice feature to tinker with. You can easily generate an open quote and an end quote around your blockquoted text. You just need to add the following rules to your CSS:

blockquote:before { content: open-quote }
blockquote:after { content: close-quote }

There are lots of little things you can do with the generated content, just keep in mind that since pseudo classes are not globally supported by browsers, in order to stay true to accessibility, they should only be used to enhance. Don't make your content rely on them.

~Nicole