Fancy Indexing

Adds fixed width fonts, file size and date, sort capability. Propagates to higher level directories. See example.

IndexOptions FancyIndexing
IndexOptions FoldersFirst
IndexOptions NameWidth=*
Avatar of Chris Coyier
Chris Coyier on

Fade One Image to Another Menu

Make a CSS sprite image, with the top half and the bottom half being the two images you want to animate between. The jQuery adds a <span> tag, and adds the bottom half of the sprite image as its background. …

Avatar of Chris Coyier
Chris Coyier on (Updated on )

End Articles with Ivy Leaf

p:last-child:after {
       content: "\2766"; /* Here comes the ivy leaf */
       font-size: 150%; /* Makes the leaf larger than the normal text */
       padding-left: 10px; /* Leaf won't clash with the last letter of the text */
       float: right; /* 
Avatar of Chris Coyier
Chris Coyier on

Stop IE Page Load Flicker

Otherwise known as Fajax (fake ajax). For example, when submitting a form and the next page is mostly similar to the new page, the entire page isn’t whited out and redrawn, it blends smoothly to the next (IE only).

<!--[if 
Avatar of Chris Coyier
Chris Coyier on

iPhone Catcher

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} .*iPhone.*
RewriteRule ^index\.html$ http://www.mobile.mydomain.com [L]
RewriteRule  ^/$ http://www.mydomain.com/index.html [L]
</IfModule>
Avatar of Chris Coyier
Chris Coyier on

RSS Generator

You’ll need a MySQL database with a a table called `rss_feed`. In that table there are 3 colums: item title (which is the name a person will see for an item), the item link (which is the location of the …

Avatar of Chris Coyier
Chris Coyier on

Redirect

<script type="text/javascript">
<!--
  window.location = "http://www.google.com/"
//-->
</script>
Avatar of Chris Coyier
Chris Coyier on

Prevent Image Hotlinking

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?yourdomain\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*\.(jpg|gif|bmp|png)$ /images/dontsteal.jpg [L]

Images linked to from anywhere else than your website are redirected to a custom graphic. Do note though, that this would affect people reading posts through RSS …

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Password Strength

$('#pass').keyup(function(e) {
     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
     var enoughRegex = new RegExp("(?=.{6,}).*", "g");
     if (false == enoughRegex.test($(this).val())) {
             $('#passstrength').html('More Characters');
     } else if (strongRegex.test($(this).val())) {
             $('#passstrength').className = 'ok';
             $('#passstrength').html('Strong!');
     } else if (mediumRegex.test($(this).val())) 
Avatar of Chris Coyier
Chris Coyier on

Rounded Corners

Standard:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */

Individual Corners:

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 0;

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;

Shorthand:

-moz-border-radius: [top-left] …

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Force Files to Download (Not Open in Browser)

AddType application/octet-stream .csv
AddType application/octet-stream .xls
AddType application/octet-stream .doc
AddType application/octet-stream .avi
AddType application/octet-stream .mpg
AddType application/octet-stream .mov
AddType application/octet-stream .pdf
Avatar of Chris Coyier
Chris Coyier on