Postpostmodern » jQuery http://postpostmodern.com Speaking of web development. Wed, 11 Jan 2012 00:21:50 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Pseudo Pseudo Classes http://postpostmodern.com/2009/02/10/pseudo-pseudo-classes/ http://postpostmodern.com/2009/02/10/pseudo-pseudo-classes/#comments Tue, 10 Feb 2009 05:16:19 +0000 Jason Johnson http://postpostmodern.com/?p=384 The :first-child and :last-child pseudo classes in CSS are super-handy for stying things like lists. For example, if you want a horizontal line between list items, you can set:

ul li {
  border-bottom: solid 1px #e0e0e0;
}
ul li:last-child {
  border: none;
}

Unfortunately, most current browsers can’t stomach :first-child and :last-child. :(

But just a teaspoon of jQuery will make that pseudo-class medicine go right down:

function firstLast()
{
  $('ul li:first-child').addClass('first');
  $('ul li:last-child').addClass('last');
}
jQuery(firstLast);
]]>
http://postpostmodern.com/2009/02/10/pseudo-pseudo-classes/feed/ 1
Global AJAX Cursor Change http://postpostmodern.com/2009/01/06/global-ajax-cursor-change/ http://postpostmodern.com/2009/01/06/global-ajax-cursor-change/#comments Tue, 06 Jan 2009 22:08:54 +0000 Jason Johnson http://postpostmodern.com/?p=290 I don’t know if I’ve ever mentioned this before, but in case I haven’t:

Something to this effect should be used on all AJAX web pages:

function globalAjaxCursorChange() 
{
  $("html").bind("ajaxStart", function(){
     $(this).addClass('busy');
   }).bind("ajaxStop", function(){
     $(this).removeClass('busy');
   });
}

Along with this CSS:

html.busy, html.busy * {
  cursor: wait !important;
}

The javascript above is jQuery, but I used to do the same type of thing back when I used Prototype.

Developers sometimes go to great lengths to supplement the native behavior of a system with custom ‘busy’ indicators. And that’s great, but don’t forget what’s built-in. Users instinctively know that something’s working when they see the old hourglass/watch cursor.

]]>
http://postpostmodern.com/2009/01/06/global-ajax-cursor-change/feed/ 13