Natural Sort Using Post meta_key

@@ -2033,6 +2033,7 @@

      if ( !empty($q['meta_key']) ) {
              $allowed_keys[] = $q['meta_key'];
              $allowed_keys[] = 'meta_value';
+             $allowed_keys[] = 'meta_value_num';
      }
      $q['orderby'] = urldecode($q['orderby']);
      $q['orderby'] = addslashes_gpc($q['orderby']);

@@ -2056,6 +2057,9 @@

      case 'meta_value':
              $orderby = "$wpdb->postmeta.meta_value";
              break;
+     case 'meta_value_num':
+             
Avatar of Chris Coyier
Chris Coyier on (Updated on )

Detect Javascript On/Off, With Notification

<script type="text/javascript">
   document.write("Welcome, you have Javascript on.")
</script>

<noscript>JavaScript is off. Please enable to view full site.</noscript>

If JavaScript is on the user gets a welcome message. If off, the user is instructed to turn it on.…

Avatar of Chris Coyier
Chris Coyier on

Different Stylesheet Pending the Time of Day

<script>
<!--
function getStylesheet() {
      var currentTime = new Date().getHours();
      if (0 <= currentTime&&currentTime < 5) {
       document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
      }
      if (5 <= currentTime&&currentTime < 11) {
       document.write("<link rel='stylesheet' href='morning.css' type='text/css'>");
      }
      if (11 <= currentTime&&currentTime < 16) 
Avatar of Chris Coyier
Chris Coyier on (Updated on )

Different Stylesheets for Different Days of the Week

<script type="text/javascript">
<!--
dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
dayNumber = new Date().getDay();
document.writeln('<link rel="stylesheet" type="text/css" href="' + dayNames[dayNumber] + '.css">');
//-->
</script>

<noscript>
<link rel="stylesheet" type="text/css" href="default.css">
</noscript>

Name your css files accordingly: Saturday.css, Friday.css, Sunday.css, …

Avatar of Chris Coyier
Chris Coyier on

2009 .net Magazine Awards

The voting is now open for the 2009 .net Magazine Awards. I’m stoked this year to be nominated in both the Best Blog category and Best Vodcast category.

Voting is quick and easy and if you feel so inclined, go

Avatar of Chris Coyier
Chris Coyier on

#68: Think Geek Background Fade Technique

This video demonstrates the technique seen on the Think Geek 3.0 site. The bottom of the site has a design of a bunch of robots and as the screen is scrolled to the bottom, the color fades to black and …

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Video Screencasts

#40: How z-index Works
Running time: 18:37
Z-index can be a little confusing sometimes. In this screencast I attempt to explain how it works, how it’s tied to positioning, some quirks, and some general advice.
#39: How to Use sIFR
Avatar of Chris Coyier
Chris Coyier on (Updated on )

Cross Browser Inline-Block

li {
  width: 200px;
  min-height: 250px;
  border: 1px solid #000;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: top;
  margin: 5px;
  zoom: 1;
  *display: inline;
  _height: 250px;
}

Reference

Avatar of Chris Coyier
Chris Coyier on (Updated on )

CSS Text Shadow

Regular text shadow:

p { text-shadow: 1px 1px 1px #000; }

Multiple shadows:

p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }

The first two values specify the length of the shadow offset. The first value specifies …

Avatar of Chris Coyier
Chris Coyier on (Updated on )