Twitter: raymondcamden


Address: Lafayette, LA, USA

Using the autodivider feature in jQuery Mobile (take two)

11-18-2014 1,962 views Mobile, jQuery, JavaScript, HTML5 8 Comments

Almost a year ago I blogged about using the autodivider feature in jQuery Mobile. This is a simple feature that enhances list views with dividers. It makes content a bit easier to parse when working with a large list.

One of my readers, Fher (who has a cool name - I kind of imagine her/him as a fire-breathing wolf), asked if there was a way to add a bubble count to the dividers. You can see an example of this on the docs for listview, but this is what the feature looks like:

So, the short answer is no, you can't do this with autodividers. Why? While the feature allows you to build a function to create dynamic dividers, it only lets you specify the text for the divider, not random HTML. However, if you are willing to give up having the "pretty bubble" effect, you can simply use it as part of the label. To make that work, I modified my code a bit from the previous demo (and again, you can read that here, I'd suggest checking it out just so you can see the context). Here is the complete JavaScript code. (The HTML didn't change.)

$(document).ready(function() {

	var dates = [
		"12/16/2013 12:00:00",
		"12/16/2013 14:00:00",		
		"12/17/2013 12:00:00",
		"12/18/2013 12:00:00",
		"12/19/2013 12:00:00",
		"12/19/2013 16:00:00"
	];

	var dateList = $("#dates");
	for(var i=0, len=dates.length; i<len; i++) {
		dateList.append("<li>"+dates[i]+"</li>");	
	}

	/*
	Create a generic func to return the label
	*/
	var getLabel = function(d) {
		return (d.getMonth()+1)+ "/" + d.getDate() + "/" + d.getFullYear();
	}
			
	/*
	Now that we have a func, use it to generate a label to count hash
	*/
	var dateCount = {};
	for(var i=0, len=dates.length; i<len; i++) {
		var l = getLabel(new Date(dates[i]));
		if(dateCount.hasOwnProperty(l)) {
			dateCount[l]++;
		} else {
			dateCount[l] = 1;
		}
	}
			
	dateList.listview({
		autodividers:true,
		autodividersSelector: function ( li ) {
			var d = new Date(li.text());
			var label = getLabel(d);
			
			return label + " (" +dateCount[label] +")";
		}
	}).listview("refresh");

});

The first change was to abstract out the code used to generate the divider - basically turning the date value into a label. Once I have that, I iterate over my data to figure out how many unique date labels I have. This is done with a simple object and a counter. Finally, my autodividersSelector function is modified to make use of this count. Here is the result.

There you go. Not exactly rocket science, but hopefully helpful. It is possible to create dividers with list bubbles, just not quite as simply as this entry demonstrates. I'll show that tomorrow.

ColdFusion Example: Using jQuery UI Accordion with a ColdFusion query

11-12-2014 1,888 views jQuery, JavaScript, ColdFusion 3 Comments

A reader pinged me yesterday with a simple problem that I thought would be good to share on the blog. He had a query of events that he wanted to use with jQuery UI's Accordion control. The Accordion control simply takes content and splits into various "panes" with one visible at a time. For his data, he wanted to split his content into panes designated by a unique month and year. Here is a quick demo of that in action.

Delaying an Edge Animate asset until visible - Part 6

10-14-2014 2,634 views jQuery, JavaScript, HTML5 1 Comment

Welcome back to the thread that won't die. I've blogged (see related links below) about this topic six times now. It started off as something simple - making an Edge Animate animation wait to run until visible - but it has turned into a pretty complex set of entries discussing not only how to do it but alternatives and other modifications. Today's entry is rather simple though as it just covers updates for the October 2014 release of Edge Animate.

Eventbrite API Demos

08-15-2014 2,702 views jQuery, JavaScript, ColdFusion Comments

A few days ago a client of mine, Rich Swier of HuB, asked if I could build him two quick demos that made use of the Eventbrite API. I whipped up the two demos for him and once done, he graciously allowed me to share it on my blog. (Thank you Rich!) I will warn you that this code was written for ColdFusion 8 so it is entirely tag based. At the very end a mod was made for ColdFusion 9. Obviously it could be converted to script and perhaps improved in other ways as well, but I hope this is useful for folks who want to play with the Eventbrite API in the future.

Keep your DOM from shifting around...

08-05-2014 5,577 views Development, jQuery, JavaScript, HTML5 5 Comments

I've been meaning to write this up for a while now, but I never got around to it till today when a meeting got cancelled suddenly. It was this or get on the treadmill, and unfortunately, the treadmill lost. Lately I've noticed a common problem with both web apps and native apps. The problem is this: The application renders some sort of dynamic content. In that content are various UI elements you can click. At the same time, the app is fetching additional content asynchronously. When that content comes in, it is displayed then and the layout of the content is adjusted as the new stuff comes in. The problem is that the user may have been just about to click on a button, link, or whatever, and now finds that their click action has done nothing. Or worse - has activated another action that they didn't want. TweetDeck is especially bad about this. Facebook, surprisingly, is actually pretty darn good about this. Let's look at a simple example in case I'm not making sense.

Building a Car Safety Inspection Finder (the good, ugly, and more ugly)

06-17-2014 2,909 views jQuery, JavaScript, ColdFusion 13 Comments

Earlier this week I came across a person looking to find a local (to Louisiana) car safety inspection location. I think most states require this but they differ on schedules. Louisiana recently moved to letting you pay more for a two-year sticker which is nice, but it is still a bit of a hassle if you don't know where an inspection location can be found. Turns out - there is a web page for it: http://www.dps.state.la.us/safetydirections.nsf/f3f91999370ccaed862574a20074b158?OpenView.

PhoneGap Tip: Temporarily changing orientation for video in a portrait only application

05-24-2014 10,193 views Mobile, jQuery, JavaScript 7 Comments

That's probably the longest title I ever used for a blog post. A PhoneGap user came to me recently with an interesting problem. His application was set to be portrait only. In case you weren't aware, you can lock orientation for an application using this config.xml value:

Mimicking the GMail Delayed Message Load UX

05-07-2014 4,144 views jQuery, JavaScript, HTML5 1 Comment

Before I begin, I want to point out that the title of this blog is far more complex-sounding than what I'm actually going to demonstrate here. GMail has an interesting way to handle large mail threads. When you view it, only the most recent few emails will be visible. The rest will be collapsed and are loaded as you click them.

Reprint: What in the heck is JSONP and why would you use it?

03-12-2014 4,761 views jQuery, JavaScript 6 Comments
Earlier this week I blogged about the demise of DevelopRIA. Last night someone pinged me about one of my articles there so I thought it would be a good idea to republish it. The article is somewhat old (4 years or so) and doesn't mention CORS at all, but hopefully it is still useful to folks. But please keep the age in mind when reading. (My god - I actually preferred XML. What was I thinking?!?!)

Have you ever looked at some technology, or framework, and simply didn't understand why someone would use it? For some time now I've never quite gotten what JSONP is, nor why someone would use it over XML. Everything finally cleared up for me last week and since I assume (I hope!) I'm not alone in being confused, I thought I'd share what I learned.

Using the autodivider feature in jQuery Mobile

12-17-2013 6,992 views Mobile, jQuery, JavaScript, HTML5 13 Comments

A few days ago a reader asked me an interesting question. He wanted to create a list of dates in jQuery Mobile and group them by date. Turns out, this is fairly easy using the Autodividers feature of the ListView widget.