JAVASCRIPT

Building Slide Shows Using Progressive Enhancement

In this seventh part of the series, I develop a jQuery-driven slide show which uses the Cycle plug-in for performing the transitions between the sample images. While the fancy zooming effect applied to the images is carried out by the plug-in, it's worth noting that the images will remain visible even if the web page is displayed with JavaScript disabled. This demonstrates yet another case where Progressive Enhancement is applied with satisfying results.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

July 26, 2010

TABLE OF CONTENTS:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>

</div>

<h2>Contact Form</h2>

<p><label for="fname">First Name</label> <input type="text" name="fname" id="fname" /></p>

<p><label for="email">Email Address</label> <input type="text" name="email" id="email" /></p>

</fieldset>

</form>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

Simply put, the above code sample implements an enhanced version of this validation program, where the file responsible for checking the form data is called via the "ajax()" jQuery method and the errors raised during this process are echoed to the same web page.

Obviously, if JavaScript is disabled, this dynamic behavior is no longer available. The form is still validated via PHP, however, as its "action" attribute points to a file called "processform.php," which looks like this:

(processform.php)

<?php

// include 'Validator' class

require_once 'Validator.php';

$validator = new Validator;

// check entered form data

$validator->checkEmpty($_POST['fname'])

->checkEmpty($_POST['lname'])

->checkEmail($_POST['email']);

echo !$validator->validate() ?

$validator->getFormattedErrors() :

'<p>The data you entered is correct.</p>';

In this case, this earlier PHP file uses an instance of a class called "Validator" to check the data entered in the previous contact form. For the sake of completeness, below I include the definition of this class, which is as follows:

(Validator.php)

<?php

class Validator

{

protected $_errors = array();

protected $_errorPrefix = '<p>';

protected $_errorSufix = '</p>';

// check an empty string

public function checkEmpty($value)

{

$value = $this->sanitizeValue($value);

if ($value === '')

{

$this->_errors[] = 'The entered value must be a non-empty string.';

}

return $this;

}

// check an integer number

public function checkInteger($value, array $options = array())

{

$value = $this->sanitizeValue($value);

if (!filter_var($value, FILTER_VALIDATE_INT, $options))

{

$this->_errors[] = 'The value ' . $value . ' must be an integer number.';

}

return $this;

}

// check a float number

public function checkFloat($value, array $options = array())

{

$value = $this->sanitizeValue($value);

if (!filter_var($value, FILTER_VALIDATE_FLOAT, $options))

{

$this->_errors[] = 'The value '. $value . ' must be a float number.';

}

return $this;

}

// check an email address

public function checkEmail($value)

{

$value = $this->sanitizeValue($value);

if (!filter_var($value, FILTER_VALIDATE_EMAIL))

{

$this->_errors[] = 'The value '. $value . ' must be a valid email address.';

}

return $this;

}

// sanitize basically inputted value

protected function sanitizeValue($value)

{

return filter_var(trim($value), FILTER_SANITIZE_STRING);

}

// check the errors

public function validate()

{

return empty($this->_errors);

}

// get the error messages as an array

public function getErrors()

{

return $this->_errors;

}

// get the error messages as a formatted string

public function getFormattedErrors()

{

return $this->_errorPrefix .

implode($this->_errorSufix .

$this->_errorPrefix, $this->_errors) .

$this->_errorSufix;

}

// clean up error messages

public function clearErrors()

{

$this->_errors = array();

}

Done. At this point, you should have a clearer idea of how to utilize Progressive Enhancement for building truly accessible web form checking applications. But is that all that can be achieved with PE? Not by a long shot; as I said in the introduction, there's a plethora of cases where it's possible to take advantage of the functionality offered by PE. This includes the construction of engaging slide shows as well.

Therefore, in the following section I'm going to create the structural markup of the aforementioned slide show, which will be animated later in this article via the popular Cycle jQuery plug-in (http://jquery.malsup.com/cycle/).

Now, hurry up and read the lines to come!

Next: Building a simple slide show with jQuery >>