MooTools has all sorts of great Element based methods. These extend the functionality you normally get when dealing with an element. Things like .set() and .get() are great at setting or getting properties or even values for an element. For a more complete list of these helpers, check out the docs at http://mootools.net/docs/core/Element/Element.
The other day I needed a quick way to change the selected item in a select list. Select lists are a little different than a normal form element since it uses a selectedIndex property instead of a value property. However, MooTools is smart enough to figure this out, so code like this still works.
Select List HTML
<select id="list">
<option value="bender">Bender</option>
<option value="nibbler">Nibbler</option>
<option value="morbo">Morbo</option>
</select>
JavaScript
$('list').set('value', 'morbo');
The above line will select the third item in the list since that matches the value we passed to the .set() method. MooTools helps simplify my life.
I am not sure how I didn’t know about this PHP function until only a few days ago, but natcasesort() is pretty sweet for sorting arrays. This function is different than a normal sort() function because it implements a sort algorithm that orders alphanumeric strings in the way a human being would while maintaining key/value associations. The sorting is much more in line with what I was expecting for my sorted array. Note that natcasesort() is also case insensitive. If you want case preserved, check out natsort().
The best way to see the difference is with an example. Here’s a PHP array:
$a = array('IMG0.png', 'img12.png', 'img10.png', 'img2.png', 'img1.png', 'IMG3.png');
Continue Reading
Floom is a pretty sweet slideshow for MooTools I was working with this week. It supports a horizontal or vertical blind effect and looks very nice and different from some of the other slideshows out there.
It’s pretty straightforward to implement and I opted to create some img tags then use a little bit of JavaScript to trigger the slideshow. However, you can do a more JavaScript heavy implementation as well. When implementing Floom, I noticed a bug that caused the slideshow to start on image 2. I made a fork of the project, but that code has since been pulled to main repository as well.
Continue Reading
This post is tackles two things, how to create a CSS menu and how to vertically center text.
The menu is a standard horizontal menu that is a little bit of HTML and CSS. Its best practice to use an unordered list so the code degrades gracefully.
If you remember back to the good old days of using table based layouts, you use a handy valign=”middle” attribute in HTML or vertical-align: middle; in CSS. The modern way to layout a page ditches tables and uses CSS positioning instead (of course tables can still be used where they make sense – tabular data!). CSS layouts have numerous advantages over tables and is definitely the way to go. However, there are some workarounds needed and one such workaround is for vertically aligning text.
Gone is the valign attribute and vertical-align pretty doesn’t work in the scenarios you would expect. A great example that uses vertically aligned text is a menu. In this example, I’ll use line-height to accomplish the vertical alignment. It’s pretty clean and you don’t have to worry about setting top/bottom padding this way either.
Continue Reading
OSX 10.6 Snow Leopard comes bundled with Apache 2 and is setup well for the most part. By default each OSX user has their own web directory. In my case the web root is /Users/justin/Sites and I can access it via http://localhost/~justin. Notice if you navigate to http://localhost that a seemingly random set of webpages is loaded.
Since I’m the only user on my computer, it would be nice to make the web root point to my own Sites directory. This is an east change to make. Fire up your terminal program and type in this command:
cd /etc/apache2
This is the main Apache 2 configuration directory. We will be editing a file called httpd.conf and updating the web root to point directly to our main user account. Edit this file using your command line editor of choice or using the open command, seen in a previous post. I’ll use vi to edit, and make sure to run as sudo so we have the necessary permissions.
Continue Reading
If you have ever create a multi column CSS layout, you probably have had to clear the elements after your columns. If not, the general technique is to have a wrapper div with floated columns then a a clear div to make sure the content from then on starts below the longest of the floated columns.
If you don’t clear the floats, the markup occurring after the floats will be positioned incorrectly and will cause some unsightly overlap issues.
Note: A multi column layout is just one example since floated elements obviously have lots of other uses as well.
Continue Reading
