Articles

7914 Articles
{
,

}

Pagination Function 

function pagination($item_count, $limit, $cur_page, $link)
{
       $page_count = ceil($item_count/$limit);
       $current_range = array(($cur_page-2 < 1 ? 1 : $cur_page-2), ($cur_page+2 > $page_count ? $page_count : $cur_page+2));

       // First and Last pages
       $first_page = $cur_page > 3 ? '<a href="'.sprintf($link, '1').'">1</a>'.($cur_page <
…
Avatar of Chris Coyier
Chris Coyier on (Updated on )

Standard List Navigation 

<ul id="nav">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Clients</a></li>
   <li><a href="#">Contact Us</a></li>
</ul>
…
Avatar of Chris Coyier
Chris Coyier on

Intelligent PHP Cache Control

This code snippet checks if a page has been modified since it was last displayed. If so, it sends a “304 not modified” header and exits, otherwise the content is rendered. Prepend this snippet on top of every PHP file …

Avatar of Chris Coyier
Chris Coyier on

PHP Include

Can be used multiple times:

<?php include("navigation.php"); ?>

Once only:

<?php include_once("navigation.php"); ?>

Including from the root:

<?php
   $path = $_SERVER['DOCUMENT_ROOT'];
   $path .= "/common/header.php";
   include_once($path);
?>
…
Avatar of Chris Coyier
Chris Coyier on

Center DIV with Dynamic Height

CSS:

* { margin: 0; padding: 0; }
#page{display:table;overflow:hidden;margin:0px auto;}
*:first-child+html #page {position:relative;}/*ie7*/
* html #page{position:relative;}/*ie6*/

#content_container{display:table-cell;vertical-align: middle;}
*:first-child+html #content_container{position:absolute;top:50%;}/*ie7*/
* html #content_container{position:absolute;top:50%;}/*ie6*/

*:first-child+html #content{position:relative;top:-50%;}/*ie7*/
* html #content{position:relative;top:-50%;}/*ie6*/

html,body{height:100%;}
#page{height:100%;width:465px;}

HTML:

<div id="page">
       <div id="content_container">
               <div id="content">
                     <p>your content</p>
               </div>
…
Avatar of Chris Coyier
Chris Coyier on

Serialize Form to JSON 

$.fn.serializeObject = function()
{
   var o = {};
   var a = this.serializeArray();
   $.each(a, function() {
       if (o[this.name]) {
           if (!o[this.name].push) {
               o[this.name] = [o[this.name]];
           }
           o[this.name].push(this.value || '');
       } else {
           o[this.name] = this.value || '';
       }
   });
   return o;
…
Avatar of Chris Coyier
Chris Coyier on (Updated on )

Sticky Footer

Works great if you can apply a fixed height to the footer.

<div class="page-wrap">
  
  Content!
      
</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>
* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal
…
Avatar of Chris Coyier
Chris Coyier on (Updated on )

Fixed Footer 

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
…
Avatar of Chris Coyier
Chris Coyier on (Updated on )

HTML5 Page Structure 

<!DOCTYPE HTML>

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Your Website</title>
</head>

<body>

	<header>
		<nav>
			<ul>
				<li>Your menu</li>
			</ul>
		</nav>
	</header>
	
	<section>
	
		<article>
			<header>
				<h2>Article title</h2>
				<p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
			</header>
…
Avatar of Chris Coyier
Chris Coyier on (Updated on )

XHTML 1.0 STRICT Page Structure 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       <title>Page Title</title>
       <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8"/>
</head>

<body>

</body>

</html>
…
Avatar of Chris Coyier
Chris Coyier on