Wednesday

Apr 15, 2009

6:30 am

Hashtables and form labels with jQuery forms

Filed under Javascript, Web Development, jQuery

Javascript implements hash tables in a limited and somewhat unwieldy fashion as associative arrays. The jQuery.field plugin has some useful functions including a formHash() function that returns all the elements of the form with the field ids as the hash keys and the form values as the hash values corresponding to those keys.

Some people consider treating associative arrays as hash tables as being downright bad since they appear to have all the characteristics one would expect, but in fact, do not. For example, the way one iterates over the array and the ability to determine the size of the array (array.length).

This custom implementation solves those problems rather handily (and there’s an implentation in the comments with the Ajaxian post linked in the previous paragraph). I believe this is what people refer to when they recommend using objects rather than simple associative arrays (since arrays are, themselves, objects in Javascript).

For the purposes of the work I was doing, where it’s not intended for production and where performance (or scalability) is not a consideration, but rapid prototyping and the ability to easily correlate form fields with labels, this implementation seems to work just fine:

jQuery.fn.labelList = function(){
	var strValueList = [];
	var label = $(this).find("label");
	label.each( function (index) {
		var id = $(this).attr('for') || 'undefined';
		if (id) {
				labelText = $(this).text();
				if (labelText.substr(0,1)=="*") { labelText = labelText.substring(1, labelText.length); }
				if (labelText.substr(labelText.length-1,1) == ":") { labelText= labelText.substring(0, labelText.length-1); }
				strValueList[id] = labelText;
		}
	});
	return( strValueList );
}

Which is then used in a function something like the following which is called using:

$("#yourFormID").collectResults();
 
jQuery.fn.collectResults = function(){
	var currentForm = "";
	var myResults=$(this).formHash();
	var myLabelresults=$(this).labelList();
 
	currentForm += "
<ul>";
	$.each(myResults, function(i,item) {
		itemName = myLabelresults[i];
		if(itemName != undefined &amp;&amp; itemName != "") {
			currentForm += "
	<li>"+ itemName + ": " + item + "</li>
\n";
		}
	} );
	currentForm += "</ul>
";
	$("#outputContainerID").append(currentForm);
}

Comments Off

Friday

Feb 6, 2009

10:57 pm

jquery Image Rotator

Filed under Javascript, Web Development, jQuery

I had the opportunity to finally get my feet wet with jQuery recently and quite enjoyed the experience. One of the big parts of the site functionality that the designer was looking for was the ability to rotate through a potentially large number of logos, fading in and out from the set in order between three or four “image “slots” on the page.

What I came up with, building heavily on the work of Torsten Baldes and others, is nothing more than building an array of images within a container and then cycling through that collection by swapping items in a second array of image spots. This is the function that performs that work where “elements” is the array of images and “#logoimage”+slot is the id of a div from the list of divs we created based on how many images the user wants to display on the page at one time.

    $.imageslide.next = function(container, elements, settings, slot, addelement) {
 
		slot = slot + 1;
		if(slot > settings.count) {
			slot=1;
		}
		addelement = addelement + 1;
		if (addelement > elements.length-1) {
			addelement = 0;
		}
 
        if (settings.animationtype == 'slide') {
            $('#logoimage'+slot).slideUp(settings.speed, function() {
			$('#logoimage'+slot).empty();
			$('#logoimage'+slot).append($(elements[addelement]));
			});
            $('#logoimage'+slot).slideDown(settings.speed);
        } else if (settings.animationtype == 'fade') {
            $('#logoimage'+slot).fadeTo(settings.speed, 0, function() {
			$('#logoimage'+slot).empty();
			$('#logoimage'+slot).append($(elements[addelement]));
			});
            $('#logoimage'+slot).fadeTo(settings.speed, 1);
        } else {
            alert(settings + 'imageslide-animationtype must either be \'slide\' or \'fade\'');
			return false;
		}
 
        setTimeout((function() {
            $.imageslide.next(container, elements, settings, slot, addelement);
        }), settings.timeout);
    };

The script is invoked using

 		<script type="text/javascript">
			$(document).ready(
				function(){
					$('#slideImages').imageslide({animationtype: 'fade', speed: 750, timeout: 2000, count: 4 });} );
		</script>

and, in this case, addresses a container with an id of “slideImages” that contains a list of images.

You can download the script or see it in action if you’re so inclined.

Comments Off