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.

Article written by

A long time developer, I was an early adopter of Linux in the mid-90's for a few years until I entered corporate environments and worked with Microsoft technologies like ASP, then .NET. In 2008 I released Sueetie, an Online Community Platform built in .NET. In late 2012 I returned to my Linux roots and locked in on Java development. Much of my work is available on GitHub.