Douglas on Web Applications

Better Rollover with CSS & jQuery

My third pass at a rollover and my favorite solution by far. This one uses minimal code, avoids flickering while also decreasing load times.

Basically create each image or button with active and over states next to one another. For for our example, side by side. We apply the image as a background, defining the width of the space as half our image (so only the active state shows). Then when the use hovers, we reposition the background to show the active state only.

 
  $(function() {
	$("#teasers div").hover(function() {
	  $(this).css('background-position', 'top right');
	}, function() {
	  $(this).css('background-position', 'top left');
	});
  });
 

Tags: better, css, rollover, sliding

EXTJS 3 Combo in Window Bug Fix

Issue:
Often after closing a window containing a from, upon relaunching the combo boxes do not expand correctly. This is a z-index problem. The simplest solution is to add this CSS to your stylesheet:

 
.x-combo-list{z-index:100000 !important;}
 

Tags: combo, css, extjs, z-index

Minimum CSS Required to Clear Floats

Minimum required CSS to clear floats across all modern browsers:

<pre lang="css">

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  height: 0;
  content: " ";
  clear: both;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

</pre>

Tags: clearfix, css, floats, minimum