:: Archive for the 'Web Development' Category ::

Scriptaculous Lists with PHP

Posted on August 16th, 2005 in PHP, Web Development by Greg

Scriptaculous is one of many great new JavaScript libraries created to answer the call for well written ‘Web 2.0’ JavaScript libraries. Written by Thomas Fuchs, scriptaculous has many features that can be used in AJAX-ified applications, drag-and-drop effects, and a whole slew of visual effects. The drag-and-drop effects, most notably the sortables, caught my eye because the look great, they are so easy to implement, and they’re just so much nicer than the standard listbox with up/down arrows that we see in most of today’s applications and administration tools.

SLLists – a PHP wrapper around scriptaculous sortables

So scriptaculous lists are really easy to use and implement…so why put together a PHP script to wrap around it all? I did this for a couple reasons (no the following list isn’t sortable!):

  • It isn’t very obvious from scriptaculous (or other similar drag-and-drop sorting libraries) how sortables can actually be used in a real application
    to perform a useful function.
  • I wanted a simple way to serialize the result of all this snazzy ordering into a simple PHP array with which I could update a database
  • Many people are just plain scared of JavaScript and don’t know what to do with it – I’m one of these folks too!
  • PHP is fun.

The resulting PHP class is a very simple class that makes it easy – with a couple lines of code to get a sortable list (or sortable just about anything) onto a page and to translate the result into a PHP array. I’ll be the first to admit that there’s no real innovation here – just trying to make an already easy to use JavaScript library easier to use for the JavaScript-scared people out there. I’ve got no documentation except for a sample page…so here’s a brief rundown of the class functions:

  • SLLists – constructor that basically sets the path to the JavaScript files
  • addList – adds a list or other element as a new sortable entity
  • printTopJS – prints the JavaScript into the head of a PHP file
  • printForm – prints an HTML form that contains the hidden inputs needed. Alternatively users can create their own forms or use the printHiddenInputs functions to put these hidden inputs in existing forms
  • printBottomJS – prints the JavaScript that should go right before the closing body tag
  • getOrderArray – returns an array with items and their order after being passed an input with the serialzed scriptaculous list

Download Version 0.01 of the class (and a sample page) to get started – no JavaScript needed!

For the full info, head to the SLLists page. The page has examples and shows what scriptaculous can do. And leave some comments here if you like it or have any comments…

Standards and CSS in IE7

Posted on July 30th, 2005 in Web Development by Greg

I just read some fairly encouraging news on the Internet Explorer blog. They have a new entry up titled Standards and CSS in IE that details the changes they have / will be making to IE in the 7.0 release that will help to improve IE’s standards support. Some of the key items listed include fixes for:

# Peekaboo bug
# Guillotine bug
# Duplicate Character bug
# Border Chaos
# No Scroll bug
# 3 Pixel Text Jog
# Magic Creeping Text bug
# Bottom Margin bug on Hover
# Losing the ability to highlight text under the top border
# IE/Win Line-height bug
# Double Float Margin Bug
# Quirky Percentages in IE
# Duplicate indent
# Moving viewport scrollbar outside HTML borders
# 1 px border style
# Disappearing List-background
# Fix width:auto

And support for some of these HTML doodads:

# HTML 4.01 ABBR tag
# Improved (though not yet perfect) fallback
# CSS 2.1 Selector support (child, adjacent, attribute, first-child etc.)
# CSS 2.1 Fixed positioning
# Alpha channel in PNG images
# Fix :hover on all elements
# Background-attachment: fixed on all elements not just body

All of these should simplify the process greatly of creating CSS based web sites, but the question I have is….when will this help. First IE7 will have to be released, then it’ll take a while for people to actually go ahead and download it. As web developers we’ve been supporting old web browsers such as IE 5.5 for years, despite the fact that IE 6 has been around for so long. So while this is a great step and will certainly help to simplify development of web sites catering to the latest browsers, it won’t help for the others. Also of note…IE 7 will be available for Windows XP and Vista (formerly known as Longhorn), but not for Windows 2000. This may hold back a lot of corporate users as many haven’t had a compelling reason to upgrade to XP.

While I’m typically in full support of the adherance to standards, I must say that some of the w3c standards around CSS and HTML are quite unusual. The key one, that is so central to developing any CSS based site, is the box model. Man that’s a weird one. A box is 100 pixels wide and has 10 pixels of padding on the left and right – how wide is it? 120 pixels. I thought we said it was 100 pixels wide? Yeah, whatever. For most cases you can use the awkward w3c model (while brushing up on your highschool algebra), but certain scenarios make it quite nasty. How do I make a box that spans half the width of the page and has 10 pixel borders on the left and right? Without nested all sorts of useless markup, I don’t know.

Enough rambling!