WordPressCreme.com

YouTube-like adaptable view using jQuery and CSS

Youtube has several very cool functions for users; the one which allow’s you to switch from normal view to wide view is definitely a must. In this detailed tutorial, Janko will show you how to implement a similar functionality into your website.

» Read tutorial

Nicer dates/times with the CuteTime jQuery Plugin

Do you really like the “posted X minutes ago” date formats as seen on Twitter? Although I’d rather use some server-side scripting to format the dates, this jQuery plugin is pretty cool and extremely easy to implement on your website.

» Read tutorial

Turn forms into a powerful wizard using jQuery

Forms are extremely important on the internet, because it is the way visitors can interact with the site owner. But most of the time forms are very boring for visitors.
Using this nice tutorial written by Janko, you’ll learn how to turn a boring and long form into a user-friendly wizard.

» Read tutorial

Add Icons to External Links with Mootools and CSS

A trend going around on websites is putting icons on links that point to web pages externally. A very simple tip to implement, but a real usability enhancement for your visitors.

» Read tutorial

Flexible Client Side Table Sorting With jQuery

Last week I showed you how to create advanced HTML tables using PHP and MooTools. This tutorial, which uses jQuery, will show you how to easily create sortable HTML tables.

» Read tutorial

Learn how to AJAXify Comment Forms

I have never been a fan of video tutorials, but I was very happy to come across this one some time ago. In this screencast, Jeffrey Way from Nettuts will show you how to “Ajaxify” your blog comments form. It is recommended to any WordPress blogger!

» Read tutorial

Create astonishing iCal-like calendars using jQuery

Do you, like many other people, love Apple’s cool and functional design? If you answered “yes” to the previous question, there’s no doubt that you will enjoy this tutorial about creating an “iCal-like” calendar for your website.

» Read tutorial

Build a Simple Password Strength Checker

Despite all hacking attempts and well known security problems, most random internet users are still using passwords such as secret or admin. So, how about helping your users by telling them that their password is strong enough.

» Read tutorial

Favorite Rating with jQuery and Ajax

A very cool way to interact with your visitors is to implement this “I love this” code, which will enable your visitors to let you know that they liked a post of your blog with a single click.

» Read tutorial

Advanced CSS Printing — Using CSS Page Breaks

Although printing web pages is bad for the environment, many internet users have the nasty habit to print pages to read them later. Although, sometimes printing a page is very useful; for example you may want to print your invoice after ordering a product online.
Printing is often neglected by designers and developers, and this is a bad thing. Using CSS, you can definitely make your website printer-friendly. Just read this excellent tutorial from David Walsh to find out!

» Read tutorial

Have fun with all those cool techniques. I hope it will help you to build even better websites. By the way if you’re into WordPress, I just published a very cool hacks list for Thesis on Cats Who Blog, so you might want to check it out. Also, have you grabbed your copy of the excellent book “Digging into WordPress?”

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

10 front-end techniques to improve your site usability

Getting ready

In this tutorial, we are going to create a simple layout for a website, which includes a very cool animated background. Here is how the final result will look:

As you can see, in this example I have used the Twitter background clouds, which look really nice.
This tutorial has been inspired by the one called How To Build an Animated Header in jQuery that I definitely recommend you go check out.

Let’s do it

1. The first step of this tutorial is to download our background image. I have used this one from Twitter, but of course feel free to use any other image you’d like.

2. Once finished, let’s create a a file called index.html. In order to get started with the basic HTML structure, paste the following code in your file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<title>Animated background Image</title>
	</head>

	<body>
	</body>
</html>

3. Now, let’s define our document structure. Since we want to do a simple layout, we’ll only need to create a header and content area. Paste the following within the <body> and </body> tags:

<div id="container">
	<div id="header">
		<h1>Animated Background Image</h1>
	</div><!-- #header -->

	<div id="content">
		<!-- Your content will go here -->
	</div><!-- #content -->
</div><!-- #container -->

4. Well done! We already have our XHTML. Now, what we have to do is obviously use some CSS and give style to our document.
To do so, copy the code below and paste it within the <head> and <head> tags of the index.html file.

<style type="text/css" media="screen">
	body{
		background-color: #C0DEED;
		margin:0;
		padding:0;
	}

	#header{
		height:180px;
		background: #8EC1DA url(bg-clouds.png) repeat-y scroll left top;
		text-align:center;
		margin-top:-30px;
	}

	#header h1{
		padding-top:35px;
		font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
		color:white;
		font-size:45px;
	}

	#content{
		background-color:#fff;
		height:500px;
		width:980px;
		margin:25px auto 0 auto;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
	}
</style>

5. At this point, you can save your work and take a look at the index.html page using your web browser. If everything is ok, your index.html page should look like the screenshot above, with fixed clouds, of course.

6. Now, it’s time to give life to the layout by using the power of jQuery. As you probably guessed it, what we have to do right now is include the library. Since Google hosts a version that you can use, there’s definitely no need to download a copy. Just use the one from Google.

To do so, paste the following line of code in your index.html file, after the closing </body> tag:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

7. Now that jQuery has been loaded, we can code a function to animate the background. Copy the code below and paste it on your index.html file, just after the line where you imported jQuery into the file.

<script type="text/javascript" charset="utf-8">
	var scrollSpeed = 70;
	var step = 1;
	var current = 0;
	var imageWidth = 2247;
	var headerWidth = 800;		

	var restartPosition = -(imageWidth - headerWidth);

	function scrollBg(){
		current -= step;
		if (current == restartPosition){
			current = 0;
		}

		$('#header').css("background-position",current+"px 0");
	}

	var init = setInterval("scrollBg()", scrollSpeed);
</script>

There’s nothing really hard with that code. First, we declare a set of variables to control the animation (image width, scroll speed, etc). Then, we created a function to automatically move the background. The most tricky part is to calculate when we need to reset the position. If you have a better idea about doing it, let me know in a comment!

Demo & Download

I hope you enjoyed this tutorial and helps you to create very nice websites. If you want, you can see a Demo of this code, or you can Download the source files.

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

Animated background image with jQuery

Today, I’m glad to present to you a nice WordPress theme called Bulletin Board, which is released officially just moment ago!

When Brian from TemplateLite contacted me and offered to release this theme for my readers, I accepted it with pleasure. Discover what you will get from this theme below or download the theme now.

Main Features

Quick Installation
Brian’s themes are very easy to install for even a newbie. No exception for this one. Installation is done with just a few clicks. You don’t need to install any plugins to make it work on your blog.

Cross Browser Compatibility
This theme is tested for major browsers including Firefox, IE7, IE8, Chrome, Safari and Opera.

Code Compliant
High coding standard is applied for this theme. Try validate the theme against W3C XHTML and CSS and you’ll see it passes both tests.

SEO
This theme has been optimized for SEO. Besides W3C compliance which is important in search ranking, the title tag, heading tag and the content coding placement are coded with SEO in mind. Other things being equal, using this theme will get your blog ranked higher on search engines compare to other themes.

Theme Documentation
One of the good thing about this theme is that it includes a user guide in PDF format. You’ll find information regarding installation instruction, header title customization, main features and theme upgrade
etc.

Award Winning

ThemeGrade, a site which rates WordPress themes, gave this theme with the highest Gold rating. It gets full score in general coding as well as SEO. Less than 5% of the themes tested get this top ranking. You can verify the status on ThemGrade.

Free Forum Support

If you encounter any problem with the theme, Brian would be happy to help. His commitment in ensuring his theme work flawlessly on your blog is shown in the recently setup support forum. Previously, the theme support was performed in the comment sections.

Download Theme | Preview Theme

I have heard only positive things about TemplateLite’s Wordpress themes. And you, have you tried it yet? Your opinions are welcome.

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

CWC Freebie : Bulletin Board WordPress Theme