Usually an easy task. Set the body width to 100%, add an negative margin, which is the same height as the footer should be and you’re done. In my case there was a little detail that smashed my approach: The layout has an fixed header navigation plus a top padding of the body so that the beginning of the content is not hidden beneath the navigation.

Read on to find a (hopefully good) solution to fix that.

Making your Footer stay put with CSS (w/o fixed header)

There are a lot of tutorials, who explain how to accomplish that. After my little research I would say that this one from Forty Sevenmedia is the best one. Basically, you set your footer to a specific height and add a negative margin with the same value as the footer height to the content. The last child of for content has to be a clear:both. Also with the same height as the footer. Here is a little visualization what it does:

Footer at bottom with a fixed header

If you have an fixed header in your layout the above method does work as long as you don’t add an padding to the body-element. But you kinda have to, otherwise some content will be hidden under your header.

You could use JavaScript to align the footer the way you want it. But I am not a big fan of using JavaScript for something like this. Especially if the solution could easily be achieved using only CSS. But sticking with the body padding does not work. At least I couldn’t find a solution if you want to keep the padding. The good news is: You don’t have to. But sometimes it is impossible to see the forest for the trees.

Instead of using the padding to align the content use an additional element with the height set to your former padding value. I chose not to support IE7/8 because the deparment’s IT support (which is actually me) forces you to use Chrome or Firefox. This way I was able to use peusdo element. The following example will also use them, but if you have to support bad browsers use div-element instead. Personally, I feel that using :before and :after is just cleaner (HTML-wise).

The HTML

<header class="navbar navbar-fixed">
    This is the Header
</header>
<div class="content">
    <div class="container">
        <p>Some content.</p>
    </div>
</div>
<footer>
    This is the footer, which will stay at the bottom!
</footer>

The CSS

html, body {
    height: 100%;
}

header, footer { display:block; text-align: center; }

header { height:30px; background-color:#f5f5f5 }

.navbar-fixed {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1030;
}

.content {
    position: relative;
    min-height: 100%;
    height: auto !important;
    margin-bottom: -50px; /* the bottom margin is the negative value of the footer's height */
}

.content:before {
    display: table;
    content: "";
    height: 40px;  /* the value of the header's height */
    zoom: 1;
}

.container:after {
    display: table;
    content: "";    
    clear: both;
    height: 50px;
}

footer {
    height: 50px;
    position: relative;
    background-color:#dddddd;
}


footer:before {
    content: ".";
    visibility: hidden;
    display: table;
    height: 0;
    clear: both;
}

Conclusion

Sometimes you rack your brain and in the end the solution is just so simple. If you want to see it in action take a loot at the jsFiddle demo:

Here is a example what it could look like (the mentioned application wip):

Snippet

Here is the snippet that solves the problem:

$categories = get_terms('books_category');
      
for( $i=0; $i<sizeof($categories); $i++ ){
  if ( $categories[$i]->name == 'New Publications' ) :
    $latest = array($categories[$i]);
    unset($categories[$i]);
  endif;
}

if( isset($latest) )
  array_splice( $categories, 0, 0, $latest );

What it does

After querying for the categories (line 1) it loops through all categories until it (hopefully) finds the desired category. If the category was found it is saved into a new variable and removed from the category array (line 2-8). Line 11 inserts the category again at the beginning of the array. Now you can iterate through the categories and display your items and the new publications will always be the first displayed category.

Last week I redid my work page. It was hard to navigate through the page without a second navigation. So I used the chance to tinker around with jQuery. The goal was to provide an alternative to scrolling through the content. Also, it should be much easier to navigate through the page.

In this post I explain how to create a simple page layout with fixed navigation. jQuery is used to enhance usability of the the navigation even more.This includes animated scrolling, aligning the navigation to sections and a fancy fading effect.

Step 1: Basic HTML

First of all we have to create some basic HTML layout to work with. Nothing fancy, just a sidebar and a content area like this:

<div id="wrapper">
	<div id="sidebar">
		<ul id="navigation">
			<li><a id="navfirst" class="current" href="#">First Section</a></li>
			<li><a id="navsecond" href="#">Second Section</a></li>
			<li><a id="navthird" href="#">Third Section</a></li>
			<li><a  id="navtop"href="#">Back to top</a></li>
		</ul>
	</div>
	<div id="content">
		<div class="section" id="first">
			<!--  content goes here -->	
		</div>
		<div class="section" id="second">
			<!--  content goes here -->
		</div>
		<div class="section" id="third">
			<!--  content goes here -->
		</div>
	</div> 
</div>

Step 2: Adding the CSS

Now that we have the basic layout we position the element. Float the content div to the right and fix the position of the navigation list. Don’t forget to set a width for the list and the content. Otherwise the content will float over your navigation. The added width should be equal to the parent width. Don’t forget that padding is also added to the total width.

#wrapper {
    width: 850px;
    margin: 50px auto;
    overflow: hidden;
}

#sidebar ul {
position: fixed;
	width: 180px;
}

#content {
float: right;
width: 630px;
padding: 0 20px 20px;
}

Step 3: Aligning the navigation

The navigation is sticky already but the distance to the top will never change. This doesn’t look good and it could possibly cause some problems. E.g. the navigation can overlap with subsequent content. To prevent this from happening we’ll use some jQuery.

// distance to the window
var navOffset 	= 15;
// navigation is aligned to #content
var minTop = $('#content').offset().top,
	maxTop = $('#content').height()+minTop-$('#navigation').height();		
// place navigation
var currentScroll = $(window).scrollTop();
$('#navigation').css({'top' : minTop});
// align navigation after loading
if( currentScroll > minTop && currentScroll < maxTop ) {
	// while scrolling though the content
	$('#navigation').css({'top' : navOffset+'px'});		
}
if( currentScroll <= minTop ) {
	// adjust navigation top to content top
	$('#navigation').css({'top' : minTop-currentScroll});
}
if( currentScroll >= maxTop ) {
	// end of content
	$('#navigation').css({'top' : maxTop-currentScroll});
}	

This code will align the navigation to top edge of the content div and when you start scrolling it will fit the navigation to top edge as long as it is in the browser’s viewport (line 14-17). While scrolling though the site the navigation will have a certain distance to the viewport (predetermined by navOffset; line 10-13) and when the end of the content div is reached the navigation will align with the bottom of the content (line 18-21). We have to call the code after the page has loaded and when the scroll event is triggered.

Step 4: Jump to a section

Instead of a simple jump via an HTML anchor we’ll use the power of jQuery and scroll smoothly to the anchor.

//navigation click actions	
$('#navfirst').click(function(event) {
	event.preventDefault();
	scrollToID('#first', 500);
});	
$('#navsecond').click(function(event) {
	event.preventDefault();
	scrollToID('#second', 500);
});
$('#navthird').click(function(event) {
	event.preventDefault();
	scrollToID('#third', 500);
});
$('#navtop').click(function(event) {
	event.preventDefault();
	$('html, body').animate({scrollTop:0}, 'slow'); 		
});

Here is the helper function for the scrolling:

function scrollToID(id, speed){
	var offSet = 15;
	var targetOffset = $(id).offset().top-offSet;
	$('html,body').animate({scrollTop:targetOffset}, speed);
}

Step 4: Display current position

The last thing we have to do is displaying the current position. To do this we fade out every section except the one we are currently in and color the section name in the navigation.

var fadeSpeed = 300;
// indicator for current position in the document
if(	(winScroll + navOffset) < secondTop ) {
	// current section = first
	$('#navfirst').css({'color' : '#CC0000'});
	$('#navsecond').css({'color' : '#FFFFFF'});
	$('#navthird').css({'color' : '#FFFFFF'});
	// animate
	$('#navfirst').stop().stop().animate({ opacity: 1.0 }, fadeSpeed);
	$('#navsecond').stop().animate({ opacity: 0.2 }, fadeSpeed);
	$('#navthird').stop().animate({ opacity: 0.2 }, fadeSpeed);
	$('#navtop').stop().animate({ opacity: 0.2 }, fadeSpeed);		
} else if ( (winScroll + navOffset) < thirdTop && (winScroll <= maxTop) ) {
	// current section = second
	$('#navfirst').css({'color' : '#FFFFFF'});
	$('#navsecond').css({'color' : '#CC0000'});
	$('#navthird').css({'color' : '#FFFFFF'});
	// animate
	$('#navsecond').stop().animate({ opacity: 1.0 }, fadeSpeed);
	$('#navfirst').stop().animate({ opacity: 0.2 }, fadeSpeed);
	$('#navthird').stop().animate({ opacity: 0.2 }, fadeSpeed);
	$('#navtop').stop().animate({ opacity: 0.2 }, fadeSpeed);			
} else {
	// current section = third
	$('#navfirst').css({'color' : '#FFFFFF'});
	$('#navsecond').css({'color' : '#FFFFFF'});
	$('#navthird').css({'color' : '#CC0000'});
	// animate
	$('#navthird').stop().animate({ opacity: 1.0 }, fadeSpeed);
	$('#navsecond').stop().animate({ opacity: 0.2 }, fadeSpeed);			
	$('#navfirst').stop().animate({ opacity: 0.2 }, fadeSpeed);
	$('#navtop').stop().animate({ opacity: 0.2 }, fadeSpeed);				
}
// current section = last section & if end of page is reached
if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
	// current section = design
	$('#navfirst').css({'color' : '#FFFFFF'});
	$('#navsecond').css({'color' : '#FFFFFF'});
	$('#navthird').css({'color' : '#CC0000'});
	// animate
	$('#navthird').stop().animate({ opacity: 1.0 }, fadeSpeed);
	$('#navsecond').stop().animate({ opacity: 0.2 }, fadeSpeed);			
	$('#navfirst').stop().animate({ opacity: 0.2 }, fadeSpeed);
	$('#navtop').stop().animate({ opacity: 0.2 }, fadeSpeed);			
}			

Step 5: Final touch

This step is optional but gives the navigation a nice touch. By adding the following code the navigation items will fade in on hover.

var hoverSpeed = 200;
// on hover
$('#navigation a').hover(function(e) {
	$(this).hoverFlow(e.type, { opacity: 1.0 }, hoverSpeed);
}, function(e) {
	if( $(this).hasClass('current') || $('html,body').is(':animated') ) return false;
	$(this).hoverFlow(e.type, { opacity: 0.2 }, hoverSpeed);
}); 

Since this would also include the current section we have to filter it. This is done by the current-class, which has to be added and remove when entering or leaving a section. E.g.:

$('#navfirst').addClass('current');
$('#navsecond').removeClass('current');
$('#navthird').removeClass('current');	

Conclusion

That’s it! If you have any questions or suggestions don’t hesitate to post a comment below.

A good friend of mine, named Simon, is webmaster at tanzmusik-online.de. If you wanna dance to your favorite song, but don’t know what, this is the place to go to. It is almost impossible to not find your song because the data base behind the website is huge and every new submission is personally validated by Simon. A lot of work but it’s worth it. The songs range from Abba to ZZ Top, from Pop to Heavy Metal and from ’70 until today.

But there is one thing that’s bothering me. The design doesn’t fit the great service. 2006 was the last time the website got a new skin. But in it looks more like a millennium design. In this post I’ll present some ideas, which hopefully help to improve the usability and appearance for the next design.

The front page

When you land on the front page you’ll see a lot of stuff. You cannot focus on one thing. There is an ad for the community, a small banner, whose only purpose is to be there, some news, the newest submissions and so on, and so on. The problem is not that there is too much stuff on the front page. The alignment is just not quite right and a new visitor has no clue what the purpose of the website is. The latter bothers me the most. Instead of the banner and the community ad, tell the visitor what he/she can do here! There is enough space below for the rest.

The possibility to search is obviously the most important part, but on the front page (and every other page) there is only this little search field at the upper right. TMO (TanzMusik-Online) is more or less a search engine, thus the search field should be easily visible at all time. At least on the front page I would suggest a big search form.

The rest of the information presented on the front page can be summarized. The news, which inform about site updates, don’t need to be on the front page. It would be better to have a small blog for that. Rather put the last submission, charts and a tag cloud on the front page. These three are the most important information for new and returning visitors. The top submitter and top dances are nice to know at most.

This leaves us with a layout like this:

I also created some drafts, which outline a possible “update” for the design. The graphics shouldn’t be fancy or awesome. They are awesome if they support the usability.

Since I moved the navigation to the top and made it horizontal there is not enough space for every sub items anymore. Some of them are redundant and can be removed (e.g. home, search). The dance sub menu (“Latein”, “Standard”, “Modetänze”) on the other hand is very important for browsing the site. I propose another solution for the navigation dilemma. Everything not listed in the navigation will be moved to the footer.

Search Results

Another important part is the listings of songs. The listing is used everywhere (e.g. display charts, search results or dance categories). This is how the look right now:

And this is my proposal:

Yeah, I made it bigger. But this doesn’t necessary means that it’s better. But in this case the additional space provides more readability. I think the old listing displayed too much information. The details should be displayed later.

Social Networks

The current design is old and because of this there is no integration of social networks. I am not sure if Simon wants to implement social networking or if he will solely rely on his own message board. I certainly would add some Twitter and Facebook buttons to (hopefully) improve the conversion rate even further.

At least a TMO Facebook page should be considered. Nobody has a guestbook anymore. It is so convenient to use Facebook instead. This also may help boost the forum, because you can sign up with your Facebook account.

Conclusion

The designs presented are all drafts. They should be considered anchor points for further development. I promised Simon that as soon as I finished my blog I would help him redesigning TMO. This posting illustrates my first thoughts on what (in my opinion) has to improve.

Now is your turn. Do you have some suggestions? What do you like/dislike about the current TMO?

This post will explain how to display an excerpt, which is not longer than a predetermined length and doesn’t cut off in mid-sentence.

Standard excerpt and dynamic length

If you take a look at the WordPress Codex the standard procedure to change the excerpt length is as follows:

function new_excerpt_length($length) {
	return 20;
}
add_filter('excerpt_length', 'new_excerpt_length');

But, as already mentioned, words have different lengths. Even if you take an average word length into account, it will fail sometimes. Therefore it is not sufficient to limit the excerpt by word count, if you have limited space. It also doesn’t solve the problem with excerpts cutting off in mid-sentence.

I searched for a solution and found a very close solution for the problem. Sadly I cannot find the source anymore. If anyone knows the origin of the following snippet, please post it in the comments.

// Variable excerpt length.
function dynamic_excerpt($length) { // Variable excerpt length. Length is set in characters
	global $post;
	$text = $post->post_excerpt;
	if ( '' == $text ) {
		$text = get_the_content('');
		$text = apply_filters('the_content', $text);
		$text = str_replace(']]>', ']]>', $text);
	}
	$text = strip_shortcodes($text); // optional, recommended
	$text = strip_tags($text); // use ' $text = strip_tags($text,'<p><a>'); ' if you want to keep some tags

	$text = substr($text,0,$length);
	// echo $text; // Use this is if you want a unformatted text block
	echo apply_filters('the_excerpt',$text); // Use this if you want to keep line breaks
}

Improving the function

Although you can determine the length exactly with the previous snippets, it has the same problem the code from the WordPress Codex had. It cuts off excerpts in mid-sentence. But it is still a better solution if you want to have the same length every time. So it satisfies at least one of the two requirements.

In order to not cut off in mid-sentence we only have to adjust the code a little bit. After the excerpt got shortened to the desired length, we search for the last occurrence of a dot. PHP doesn’t support this. There is only the strrchr-method, which returns the portion after the last dot. Fortunately someone else posted a reverse-strrchr in the php.net-comments.

// Returns the portion of haystack which goes until the last occurrence of needle
function reverse_strrchr($haystack, $needle, $trail) {
    return strrpos($haystack, $needle) ? substr($haystack, 0, strrpos($haystack, $needle) + $trail) : false;
}

Final result

Just add the following function to the dynamic_excerpt function and it will return an excerpt, which is not longer than the given length and always ends with a complete sentence. Paste the following code to your theme’s functions.php and you are done.

// Variable & intelligent excerpt length.
function print_excerpt($length) { // Max excerpt length. Length is set in characters
	global $post;
	$text = $post->post_excerpt;
	if ( '' == $text ) {
		$text = get_the_content('');
		$text = apply_filters('the_content', $text);
		$text = str_replace(']]>', ']]>', $text);
	}
	$text = strip_shortcodes($text); // optional, recommended
	$text = strip_tags($text); // use ' $text = strip_tags($text,'<p><a>'); ' if you want to keep some tags

	$text = substr($text,0,$length);
	$excerpt = reverse_strrchr($text, '.', 1);
	if( $excerpt ) {
		echo apply_filters('the_excerpt',$excerpt);
	} else {
		echo apply_filters('the_excerpt',$text);
	}
}

// Returns the portion of haystack which goes until the last occurrence of needle
function reverse_strrchr($haystack, $needle, $trail) {
    return strrpos($haystack, $needle) ? substr($haystack, 0, strrpos($haystack, $needle) + $trail) : false;
}

Here is an example how to use the function in your theme templates. It will return the excerpt with a maximum length of 50 characters and removes everything after the last sentence within the excerpt.

<?php print_excerpt(50); ?>