Comments in HTML

<div id="header">
   <p>Stuff</p>
</div> <!-- END div-header -->

The <!– –> stuff is the HTML comment. It is a way to add notes into the code which will not display when the HTML is rendered by the browser. In the …

Avatar of Chris Coyier
Chris Coyier on

Truncate Long String Exactly In Middle

This will truncate a longer string to a smaller string of specified length (e.g. the “25” value in the code below) while replacing the middle portion with a separator exactly in the middle. Useful when you need to truncate a …

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Embedding Flash

This is different than the default code that Flash provides. That typically involves the <embed> tag and is not valid XHTML. This doesn’t use that, and is fully valid.

<object type="application/x-shockwave-flash" 
  data="your-flash-file.swf" 
  width="0" height="0">
  <param name="movie" value="your-flash-file.swf" />
  <param name="quality" 
Avatar of Chris Coyier
Chris Coyier on (Updated on )

Solution For Very Long Dropdown Menus

I like to be confident with post titles, but the reality in this case is a *possible* solution for very long dropdowns. The problem with long dropdowns is that the dropdown itself can go below the “fold” of the website. …

Avatar of Chris Coyier
Chris Coyier on

Top & Bottom Halves Layout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<title>Top and Bottom Halves</title>
	
	<style type="text/css">
	   
	   * { margin: 0; padding: 0; }
	   p { padding: 20px; }
	   #top { background: #eee; }
	   #bottom 
Avatar of Chris Coyier
Chris Coyier on

Left & Right Halves Layout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<title>Some Example from CSS-Tricks</title>
	
	<style type="text/css">
	   
	   * { margin: 0; padding: 0; }
	   p { padding: 10px; }
	   #left { position: absolute; left: 0; 
Avatar of Chris Coyier
Chris Coyier on

#74: Editable CSS3 Image Gallery

We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked. But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with CSS3 and jQuery, and …

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Word Count Bookmarklet

Add to bookmarks bar, select text, click it to get the word count.

<a href="javascript:(function(){var%20t;if%20(window.getSelection)%20t%20=%20window.getSelection();else%20if%20(document.selection)%20t%20=%20document.selection.createRange();if%20(t.text%20!=%20undefined)%20t%20=%20t.text;if(!t%20||%20t%20==%20""){%20a%20=%20document.getElementsByTagName("textarea");%20for(i=0;%20i<a.length;%20i++)%20{%20%20if(a[i].selectionStart%20!=%20undefined%20&&%20a[i].selectionStart%20!=%20a[i].selectionEnd)%20%20{%20%20%20%20t%20=%20a[i].value.substring(a[i].selectionStart,%20a[i].selectionEnd);%20%20%20%20break;%20%20}%20}}if(!t%20||%20t%20==%20"")alert("please%20select%20some%20text");else%20alert("word%20count:%20"%20+%20t.toString().match(/(\S+)/g).length);})()" class="button">Count Words</a>
Bookmarklet

Count Words < Drag to Bookmarks Bar …

Avatar of Chris Coyier
Chris Coyier on

Data Disaster

Hey folks, don’t salt your scotch with tears on my account, but I’m posting to tell you all I just suffered a complete data loss on my computer. I figured I’d go through how it happened.…

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Include jQuery in WordPress Theme

The following is the best way to go about it. Add the following to the theme’s functions.php file:

if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
   wp_deregister_script('jquery');
   wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, 
Avatar of Chris Coyier
Chris Coyier on (Updated on )