Dave Burke : Freelance .NET Web Developer specializing in Online Communities

Using JQuery to supplement CSS inadequacies

The technical depth of this post is about as lightweight as it can be, but the subject is interesting because it represents a new level of controlling page layout with JQuery.  The use of "CSS inadequacies" in the post subject is a little misleading, as I'm also considering the inadequacies of the developer's CSS chops.  That would be me.

The situation was that I was placing a paging control at the right-side of a page.



Everything was jake until the last page when the Separator element and NEXT link did not appear. It looks good below thanks to JQuery, but it's original position was the same as above, an inch from the right-hand side rather than lining up at the edge.

 

There may have been a pure CSS approach to this, but it wasn't coming quickly enough for me so I turned to JQuery.  The pager links were in a subarea at right, with PREV float:left, NEXT float:right.  What I wanted to do was to change the float on PREV to "right" if no NEXT link existed.  Below was the drop-dead simple JQuery that did the job. If the BlogPagerNext class element did not exist, a float:right CSS property was added to BlogPagerPrevious.

 

The moral of the story is that there's still hope for old CSS hacks like me now that JQuery is available.

Comments (2) | Post RSS RSS comment feed

Posted on 9/24/2009 2:38:03 PM by Dave Burke
Categories: JQuery | Community Server | .NET
Tags: No tags for this post

Related posts

Comments

9/28/2009 5:20:43 PM Permalink

that's a neat trick, but i would be concerned about the inconsistent user experience. couldn't you have just replaced the 'next' link with something that is not linked to anything and says 'last'. that way the 'prev' link is in its predictable location and there's an explicit indication that there is nothing further rather than requiring the user to infer that it's the last page (or mistakenly assume that something broke because the next button didn't show up).

randynov United States |

9/28/2009 6:48:45 PM Permalink

Randy, I appreciate your comment.  Funny, I imposed the far-right placement FOR a consistent UI experience.  It would make more sense if you could see the first page where only a "NEXT" is visible (at the far right) than using a "PREV" "NEXT" as the first paging link screenshot.

Thinking more about it, the link status would would be a consistency factor, too.  If the final "NEXT" is replaced with, say, "END" or something, that would be visual noise and make some sort of unnecessary impression--"Oh, that's not a link..."--where I don't want to make the user think in any way other than show where to click PREV and NEXT.

When the site is released (currently on secure staging site) I'll ping you again to see if you still think it's inconsistent.

Have a good one!
Dave

daveburke United States |

Comments are closed

This site was built with the Sueetie .NET Open Source Community Framework. Learn more about Sueetie at Sueetie.com.