WordPress for iPhone/iPad v2.6 Released

Attention Apple-gadget-owning WordPress users! Have you been using the WordPress iOS app for iPhone and iPad? Or maybe you tried it a while back and thought it wasn’t for you? Either way, the new release — v2.6 — will knock your socks off. Why? A bunch of reasons:

  • Video. Record, upload, attach, and play videos within the app. Yay for being able to catch your friends’ and co-workers’ most embarrassing shenanigans creative moments with iPhone video and publish them immediately for all the world to see on your WordPress site.
  • A total rewrite of the way local drafts are handled, to prevent the unintentional loss of your pending posts.
  • Autosave/post revisions. Bam! One of the “oh, thank goodness” features of the web app makes it into the iOS version.
  • Easier setup. Faster and easier process for adding your sites to the app.
  • Media Library. We’re gradually getting closer to the media management you’re used to in the web app.

There are also numerous bugfixes and performance enhancements in this release, so if you haven’t been using the app lately, you should consider giving it another try. I’m personally pretty excited to start using the iPhone version more often now that there are all these fixes and new features. Especially the video upload. You know, for those creative moments that make life fun. :)

You can read the full 2.6 release post on the WordPress for iOS blog, and can download v2.6 from iTunes/the app store. Happy mobile blogging!

* * *

Not an iPhone user? We’ve still got your on-the-go back! Check out the WordPress apps for Android, Blackberry, and Nokia (beta). They’re all 100% GPL, of course, and we’re always looking for contributors to the development projects, so check the blogs if you have mobile dev skills and want to get involved.

Tags: - - - - - - - - - - - - - - - - - - - - - - - - - -
Read More...

Summer of WordCamp

It’s been summer for about a week now. Whether you’re on vacation or burning the midnight oil, attending a local/nearby WordCamp is a great way to spend a weekend. Meet other WordPress users, developers, designers & consultants, learn a little something, maybe share a little of your own experience and knowledge, and break bread (or raise a toast) with new friends and collaborators. Here are the WordCamps scheduled for this summer, along with what I know about them.

July 3: WordCamp Germany – Berlin, Germany. I love it that they’re using BuddyPress for their event site. They have multiple tracks, and what looks to be a nice variety of sessions. It’s only a few days away, so if you’re thinking of going, get your tickets now!

July 10: WordCamp Boulder – Boulder, Colorado, USA. This was WordCamp Denver last year, but the organizers have decided to mix it up and go back and forth between Denver and Boulder, which also has a thriving tech community. This year the venue is the Boulder Theater (so pretty!), and there will sessions for bloggers and devs alike, plus a Genius Bar to help people get their WordPress sites all fixed up. The speaker lineup looks good, and I hear they’re pumping up the wifi this year. I’ll be there, likely hunched over a notebook with Lisa Sabin-Wilson (author of WordPress for Dummies and BuddyPress for Dummies) to talk about the WordPress User Handbook project, and/or hunched over a sketchbook with Kevin Conboy (designed the new lighter “on” state for admin menus in WordPress 3.0) to work out a new default WordCamp.org theme (using BuddyPress). You can still get tickets!

July 17–18: WordCamp UK- Manchester, England, UK. The roving WordCamp UK will be in Manchester this year, and is probably the closest to BarCamp style of all the WordCamps, using a wiki to plan some speakers/sessions and organizing the rest ad-hoc on the first day of the event. I’ll be attending this one as well, and am looking forward to seeing WordPress lead developer Peter Westwood again. I’m also looking forward to meeting some core contributors for the first time in person, like Simon Wheatley and John O’Nolan. Mike Little, co-founder of WordPress, is on the organizing team of WordCamp UK. Tickets on sale now!

July 24: WordCamp Nigeria – Lagos, Nigeria. Their site seems to have a virus, so no link from here, but if you’re in Nigeria and interested in attending/getting involved, a quick Google search will get you to the organizers.

August 7: WordCamp Houston – Houston, TX, USA. Houston, Texas, birthplace of WordPress! Fittingly, Matt Mullenweg will be there to give the keynote. WordCamp Houston is running three tracks — Business, Blogger and Developer — in recognition of the fact that people who are interested in using WordPress for their business may not actually be bloggers or developers themselves. This used to get labeled as a “CMS” track at previous WordCamps (including NYC 2009), but with WordPress 3.0 supporting CMS functionality out of the box, “Business” is a much more appropriate label. Who wants to bet on if there will be BBQ for lunch?

August 7 : WordCamp Iowa – Des Moines, Iowa, USA. Another placeholder page. Happening, not happening? I’ve emailed the organizer and will update this post once I know more.

August 7–8: WordCamp New Zealand – Auckland, New Zealand. They haven’t announced this year’s speakers or topics, but they’ve been running polls to get community input into the program. Of note: in 2011 WordCamp New Zealand will be shifting seasons and will be in February instead, when the weather is nicer.

August 20–22: WordCamp Savannah – Savannah, Georgia, USA. Disclaimer: I am completely biased about Savannah, since I’m one of the organizers. This will be the first WordCamp in Savannah, and it’s being held at the Savannah College of Art and Design River Club, an awesome venue that used to be a cotton warehouse or something like that. Since Savannah doesn’t really have a cohesive WordPress community yet (though a fair number of people from Savannah attended WordCamp Atlanta earlier this year), this WordCamp is aimed squarely at building a local community. We’ll have a local meet-and-greet, regular sessions with visiting speakers (lots of core contributors coming to this one, plus Matt), and on Sunday it will be combination unconference/genius bar/collaborative workspace. Oh, and a potluck! We’ll also be running a pre-WordCamp workshop for people who have never used WordPress but want to get started, so that they’ll be able to follow the presentations and conversations littered with WordPress-specific vocabulary over the weekend. Ticket sales just opened, so get your tickets now.

For a schedule of all upcoming WordCamps, visit wordcamp.org. The autumn schedule is already packed! If you don’t see WordCamp in your area and are interested in organizing one, get more information and let us know.

Tags: - - - - - - - - - - - - - - - - - - - - -
Read More...

Security token failure & not found error

The CMS i’m using requires I open index.html in a web browser, I can do that but on the page that opens it gives me a login field and above that an error saying security token failure. Logging in gives me an error saying:

Code:

Not Found<br />
<br />
The server was not able to find the document (./public_html/gpEasy/data/index.html/) you requested.<br />
Please check the url and try again. You might also want to report this <br />
error to your web hosting provider.<br />
<br />
cpaneld/11.26 Server at 188.72.250.141

What can I do about that?

Tags: - - - - - - - - - - - - - - - - - - - -
Read More...

Orman Clark releases new WordPress theme on ThemeForest

Orman Clark, a UK based web designer, has created a WordPress theme called Repro. He usually makes free themes over at PremiumPixels.com, but Repro is a premium WordPress theme released over at ThemeForest. Some of Repro’s features include, but not limited to:

Repro is suitable for content producers at all levels, personal bloggers, newspapers, online magazines, community blogs… you get the idea ;)

Repro looks great out of the box but also acts as the perfect black canvas for those looking to customise and develop their own content-focused site.

  • Valid XHTML Strict 1.0 Tableless Design
  • Unlimited Colour Schemes (colour picker)
  • Full Localisation Support (contains .po/.mo files)
  • 10 Widget Areas
  • 8 Custom Widgets
  • Extensive Theme Options (unbranded!)

You can follow Orman on Twitter or be a fan of PremiumPixels.

Tags: - - - - - - - - - - - - - - - - - - - - -
Read More...

Celebrate doubled signups with snow on WordPress.com

WordPress.com snow

Automattic has plenty to celebrate this Christmas season.  There has been a dramatic increase in signups on WordPress.com in the last few months.  Ryan Markel announced on the WordPress.com blog that signups have gone from about 400,000 per month to more than 900,000.

WordPress is giving much of the credit to the transition of Live Spaces users announced in September, despite reports that Live Spaces had far fewer active users than the 30 million originally advertised.  We do know that 50,000 users switched very quickly, and perhaps the Spaces migration helped spur others to choose WordPress over competition like Blogger and Tumblr.  Based on our own look into WordPress market share numbers, we know that Matt Mullenweg’s creation has quickly become a force to be reckoned with.

It’s tough to say definitively why the jump in registrations, but it is reason to be jolly!  And in spirit of the season, it is snowing today at WordPress.com. The little tradition started in December 2007, and they provide instructions on how to do it on your own .com account too.  For the .org users out there, there’s a plugin to accomplish the task.

Tags: - - - - - - - - - - - - -
Read More...

Take the WordPress Users Survey, win over $3,000 in prizes

Today we’re happy to announce the 2010 WPCandy WordPress Users Survey, as well as a WordPress giveaway valued at over $3,000.

WordPress is used every day by bloggers and professionals all over the world—but how and what for? Just who is using WordPress? This survey aims to compile survey data on these sorts of questions into a report for the benefit of the community.

By participating in this quick WordPress Users Survey, you will get three things:

  • Access to the final survey report in January. Just make sure you include your email with the survey. It will only be used for the one-time email delivering you the survey report.
  • Entered to win a $3,000 grand prize. More on this below.
  • The satisfaction of contributing to a community-driven endeavor that will benefit everyone. Also know as the feel-goods.

The survey will be available through December, and the final report will be created in January. Take the 2010 WPCandy WordPress Users Survey today!

Take the survey for a chance at over $3,000 in WordPress prizes

Such a project just wouldn’t be as much fun without a massive giveaway, right? That’s what we thought.

We’re very thankful to have so many supportive sponsors who have generously donated items for this giveaway. But let’s get right to it; the giveaway items are (in no particular order):

Yes, one winner will be chosen from the survey participants to win the list of prizes you just read.

Will it be you?

Other ways to enter

You can also be entered to win up to two more times (in addition to taking the survey). To be entered again, you can:

  • Tweet about the survey using the #wpcandy hashtag.
  • Blog about it, linking back to this post or the survey itself.

We’re very excited about this survey, and think it can provide some valuable insight into how WordPress is used all over the world. The more we can spread the word, the better!

Take the 2010 WPCandy WordPress Users Survey today!

Tags: - - - - - - - - - - - - - - - - -
Read More...

How to Print With Any Printer From iPad, iPhone

Apple’s latest mobile operating system update introduces a much-demanded feature: wireless printing. Problem is, it will only officially print from printers labeled “AirPrint-compatible,” which you likely don’t own. However, if you want to print from just about any printer, there’s a mod for that.

AirPrint Hacktivator offers a solution for Macs to set up wireless printing with iOS 4.2 with any printer shared on your network. Here’s how to set it up, with instructions courtesy of the hack’s maker, Netputing.

You will need:

  • Mac OS X Snow Leopard 10.6.5
  • iTunes 10.1 (if you have neither, select the Apple icon in the upper-left corner of your screen and click “Software Updates” to download the latest software.
  • iOS 4.2.1 on an iPhone, iPod Touch or iPad (click “Check for Updates” in iTunes if you don’t have the latest iOS.)
  • AirPrint Hacktivator [.zip]

Instructions:

1. Copy the AirPrint Hacktivator software into your Applications folder, then launch the app.

2. Toggle the switch to “ON.”

3. Enter your admin password.

4. A window will prompt you to add the printer you want to use with AirPrint.

5. The hack will launch the Print & Fax utility in your Settings folder, and you’ll be able to perform the add-printer task here.

6. And you should be ready to start printing!

See the video below by Netputing for a visual tutorial.

Tags: - - - - - - - - - - - - - - - - - - -
Read More...

PHP snippets to interact with Twitter

Get number of Twitter followers

Have you seen my blog sidebar? I display the number of followers I have in full text. This is actually pretty easy to do. The first thing you need is this function:

function get_followers($twitter_id){
	$xml=file_get_contents('http://twitter.com/users/show.xml?screen_name='.$twitter_id);
	if (preg_match('/followers_count>(.*)</',$xml,$match)!=0) {
		$tw['count'] = $match[1];
	}

	return $tw['count'];
}

Once you have the function, you can call it as shown below:

$nb =  get_followers('phpsnippets');
echo "PHP Snippets already have ".$nb." followers!";

» Credit: http://www.phpsnippets.info/get-twitters-followers-in-php

Get latest Twitter status

Using PHP and cURL, it is pretty easy to get the status of a specific user. Once you have it, what about displaying it on your blog, like I do in WPRecipes footer?

function get_status($twitter_id, $hyperlinks = true) {
    $c = curl_init();
    curl_setopt($c, CURLOPT_URL, "http://twitter.com/statuses/user_timeline/$twitter_id.xml?count=1");
    curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
    $src = curl_exec($c);
    curl_close($c);
    preg_match('/<text>(.*)<\/text>/', $src, $m);
    $status = htmlentities($m[1]);
    if( $hyperlinks ) $status = ereg_replace("[[:alpha:]]+://[^<>[:space:]]+[[:alnum:]/]", '<a href="%5C%22%5C%5C0%5C%22">\\0</a>', $status);
    return($status);
}

The function is extremely easy to use:

echo get_status('catswhocode');

» http://www.phpsnippets.info/get-twitter-status-using-php

Link to update status, without encoding problems

Many websites and blogs show you how to create a link to Twitter that will update your status. But unfortunely, most websites don’t explain what you need to do in order to avoid encoding problems of spaces and special characters.

<a href="http://twitter.com?status=@catswhocode Hi Jean, how are you?">Tweet!</a>

So, where’s the change? Pretty simple: Just note that I havent linked to

http://www.twitter.com

, but to

http://twitter.com

, without the www.

A working example can be seen on my company website: http://www.webdevcat.com/contact.

Get number of retweets for a specific page

Most bloggers are using the Tweetmeme widget to display the number of retweets of their posts. Did you know that Tweetmeme also has an API you can use to get how many times a specific url has been retweeted?

The following function will get the number of RT’s of the url passed as a parameter:

function tweetCount($url) {
    $content = file_get_contents("http://api.tweetmeme.com/url_info?url=".$url);
    $element = new SimpleXmlElement($content);
    $retweets = $element->story->url_count;
    if($retweets){
        return $retweets;
    } else {
        return 0;
    }
}

Using the function is easy, as you can expect:

echo tweetCount('http://www.catswhocode.com');

Note that the Twitter API also provide a way to get the number of retweets. See http://urls.api.twitter.com/1/urls/count.json?url=www.google.com for example.

» http://www.phpsnippets.info/get-how-many-times-a-page-have-been-retweeted-using-php

Testing friendship between two users

If you want to know if a specific user is following you (or someone else) you have to use the Twitter API. This snippet will echo

true

if the two users specified on lines 18 and 19 are friends. It will return

false

otherwise.

/* makes the request */
function make_request($url) {
	$ch = curl_init();
	curl_setopt($ch,CURLOPT_URL,$url);
	curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
	$result = curl_exec($ch);
	curl_close($ch);
	return $result;
}

/* gets the match */
function get_match($regex,$content) {
	preg_match($regex,$content,$matches);
	return $matches[1];
}

/* persons to test */
$person1 = 'phpsnippets';
$person2 = 'catswhocode';

/* send request to twitter */
$url = 'https://api.twitter.com/1/friendships/exist';
$format = 'xml';

/* check */
$persons12 = make_request($url.'.'.$format.'?user_a='.$person1.'&user_b='.$person2);
$result = get_match('/<friends>(.*)<\/friends>/isU',$persons12);
echo $result; // returns "true" or "false"

» http://www.phpsnippets.info/get-twitter-status-using-php

Shorten urls for Twitter

As you know if you’re a Twitter user, you can’t post messages which are longer than 140 characters. To avoid this problem, you have to use an url shortener. There’s lots of different url shorteners on the internet. TinyUrl.com is one of them, it doesn’t produce the shortest urls but what I really love it is that you don’t need to have an account to use it with PHP.

The following function takes a long url as a parameter and return a shorter url, using the TinyUrl url shortener.

function getTinyUrl($url) {
    return file_get_contents("http://tinyurl.com/api-create.php?url=".$url);
}

» http://www.phpsnippets.info/convert-url-to-tinyurl

Shorten urls using Bit.ly

In the previous snippet of that article, I’ve shown you how you can shorten your urls using TinyUrl.com. This is cool, but I’m pretty sure some of you prefer using the bit.ly service. No problem, you can still use PHP to get your shortened url.

function bitly($url) {
	$content = file_get_contents("http://api.bit.ly/v3/shorten?login=YOURLOGIN&apiKey=YOURAPIKEY&longUrl=".$url."&format=xml");
	$element = new SimpleXmlElement($content);
	$bitly = $element->data->url;
	if($bitly){
		return $bitly;
	} else {
		return '0';
	}
}

To use the function, simply use the following:

echo bitly("http://www.catswhocode.com");

» http://woorkup.com/2010/06/06/3-practical-wordpress-code-snippets-you-probably-must-know/

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

PHP snippets to interact with Twitter

Tags: - - - - - - - - - - - - - - - - - - - - - -
Read More...

PHP: Fast and easy SQL queries using ezSQL

What’s ezSQL, and why it is useful

On big projects, the usual good practice is to use a CMS or a framework such as Symfony or CodeIgniter to build your site on. But on smaller projects, many developers are still using PHP functions such as

mysql_query()

to do SQL queries to the database.

While it’s functional, I do not recommend to use all those

mysql_XXX

functions: Most websites are using MySQL, that’s right, but if one day you have to deal with another DB like PostGres or Oracle… Your code will not work at all, and you’ll have to rewrite it. Scary, isn’t it? This is why is it recommended to use a database abstraction layer, an API which unifies the communication between your application/website and databases such as MySQL, Oracle or PostgreSQL.

As you can guess, ezSQL allows you to work with various databases very easily. Though, please note that it does not support differences in SQL syntax implementations among different databases.

Also, ezSQL provide a few methods which simplify queries to the database, and help producing a cleaner code.

ezSQL and WordPress

As most of you are familiar with WordPress, you probably know the

wpdb

class, which allows you to send queries to the database. As wpdb is based on ezSQL, and you’re already familiar with the WordPress class, you won’t have any trouble to learn using ezSQL. And don’t worry if you never heard of WordPress or the wpdb class. ezSQL is extremely easy to learn and to use.

Downloading and installing ezSQL

Right, I have talked too much. How about some coding now? Let start by grabbing your copy of ezSQL. Once you have it, unzip on your server (or hard drive).

In order to be able to use ezSQL in your projects, you have to include two files: The first is

ez_sql_core.php

, which is ezSQL core file. The second depends on the database you’re going to use. In order to use ezSQL with a MySQL database, you have to include

ez_sql_mysql.php

.

Once done, you have to create a ezSQL object. This is done easily using your database username, password, name and host. The following example demonstrates the inclusion of the required files and the creation of a ezSQL object:

include_once "../shared/ez_sql_core.php";
include_once "ez_sql_mysql.php";
$db = new ezSQL_mysql('db_user','db_password','db_name','db_host');

Now, you have an object called

$db

. We’ll use it run any types of queries to our database.

Queries examples

ezSQL has a few methods to make SQL queries extremely simple. Let’s see what you can do with it:

Execute any query

In order to insert, delete or most generally, run any kind of query to the database, we have to use the

query

method. In case of a data insertion, the method will return the insert id.

$db->query("INSERT INTO users (id, name, email) VALUES (NULL,'The Cat','cat@google.com')");

Example of an update query:

$db->query("UPDATE users SET name = 'Patrick' WHERE id = 4");

Select a row

The

get_row

method is great if you just need to select a row from your database. The example below executes a simple select query and displays the results.

$user = $db->get_row("SELECT name, email FROM users WHERE id = 4");

echo $user->name;
echo $user->email;

Select a single variable

If you only need a variable, the

get_var

method is here to help. Using it is extremely simple as shown below.

$var = $db->get_var("SELECT count(*) FROM users");

echo $var;

Select multiple results

Although the methods documented above are quite useful, most of the time you’ll need to get various rows of data from your database. The method called

get_results

will get various data from your database. To output the data, a simple

foreach()

loop is all you need.

$results = $db->get_results("SELECT name, email FROM users");

foreach ( $results as $user ) {
    echo $user->name;
    echo $user->email;
}

Select a column

If you need to get a column, you can use the get_col method. The second parameter is the column offset.

foreach ( $db->get_col("SELECT name,email FROM users",0) as $name ) {
            echo $name;
}

Debug

When something doesn’t work as expected, ezSQL has a great method to perform some debugging. Not surprising, the method is called

debug

. When called, the method will display the last query performed and its associated results.

$db->debug();

I hope you enjoyed this article and that you’ll use ezSQL in your future projects. It’s a great tool which was very helpful for me many times!

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

PHP: Fast and easy SQL queries using ezSQL

Tags: - - - - - - - - - - - - - - - - - - - - - - - -
Read More...

How to create a kick-ass CSS3 progress bar

Please note: The original CSS3 progress bar shown in this tutorial has been created by Ivan Vanderbyl, which hereby gave me the right to reproduce and document his work.
The following tutorial and the demo works best on Chrome and Safari, correctly on Firefox and very badly in Internet Explorer (eh…I’m sure you hadn’t guessed that).

The Demo


Click on the image to view a live demo. You can also get the source on Github.

Getting ready

Let’s start by organizing our work. To achieve the effect of this tutorial, we’ll need to create 3 files:

  • progress.html

    , which will contain our markup.

  • ui.css

    which will contain our CSS styles.

  • progress.js

    which will contain some additional jQuery animations.

Create a directory on your webserver (or hard drive) and create the files.

The HTML markup

Here we go. Open your

progress.html

file and paste the following markup in it:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Pure CSS Progress Bar</title>

	<link rel="stylesheet" href="stylesheets/ui.css">
	<link rel="stylesheet" href="stylesheets/ui.progress-bar.css">
</head>
<body>
	<div id="container">
		<div id="progress_bar" class="ui-progress-bar ui-container">
        	<div class="ui-progress" style="width: 79%;">
				<span class="ui-label" style="display:none;">Processing <b class="value">79%</b></span>
      		</div><!-- .ui-progress -->
    	</div><!-- #progress_bar -->  

		<div class="content" id="main_content" style="display: none;">
	    	<p>Hello, World!</p>
	  	</div><!-- #main_content -->
	</div><!-- #container -->
</body>
</html>

Let me explain the code a bit: On line 1, I’ve declared a HTML5 doctype. Then, lines 12 to 16 contains the markup for the progress bar itself. If you save the file and view it in your browser right now, you’ll see that nothing appears. Don’t worry, we’re going to apply so CSS3 magic in a minute.

Diving into CSS3

Open your

ui.css

file and paste the following code in it. There’s nothing fancy there, just some basic styles (that I’ve simplified from the original source) for the layout.

body {
  background:#eee;
  padding: 30px;
  font-size: 62.5%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: relative;
  margin: 0;
}

#container {
  margin: 0 auto;
  width: 460px;
  padding: 2em;
  background: #DCDDDF;

}

.ui-progress-bar {
  margin-top: 3em;
  margin-bottom: 3em;
} 

.ui-progress span.ui-label {
  font-size: 1.2em;
  position: absolute;
  right: 0;
  line-height: 33px;
  padding-right: 12px;
  color: rgba(0,0,0,0.6);
  text-shadow: rgba(255,255,255, 0.45) 0 1px 0px;
  white-space: nowrap;
}

Once you are done, we can finally get into more serious things. The code below will make your progress bar come to life. I’ll explain it in details in a minute. For now, copy it and paste it in your

ui.css

file.

@-webkit-keyframes animate-stripes {
  from {
    background-position: 0 0;
  }

  to {
   background-position: 44px 0;
  }
}      

.ui-progress-bar {
  position: relative;
  height: 35px;
  padding-right: 2px;
  background-color: #abb2bc;
  border-radius: 35px;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6bcc6), color-stop(1, #9da5b0));
  background: -moz-linear-gradient(#9da5b0 0%, #b6bcc6 100%);
  -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
  -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
  box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
}        

.ui-progress {
  position: relative;
  display: block;
  overflow: hidden;
  height: 33px;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  border-radius: 35px;
  -webkit-background-size: 44px 44px;
  background-color: #74d04c;
  background: -webkit-gradient(linear, 0 0, 44 44,
    color-stop(0.00, rgba(255,255,255,0.17)),
    color-stop(0.25, rgba(255,255,255,0.17)),
    color-stop(0.26, rgba(255,255,255,0)),
    color-stop(0.50, rgba(255,255,255,0)),
    color-stop(0.51, rgba(255,255,255,0.17)),
    color-stop(0.75, rgba(255,255,255,0.17)),
    color-stop(0.76, rgba(255,255,255,0)),
    color-stop(1.00, rgba(255,255,255,0))
  ), -webkit-gradient(linear, left bottom, left top, color-stop(0, #74d04c), color-stop(1, #9bdd62));
  background: -moz-repeating-linear-gradient(top left -30deg,
    rgba(255,255,255,0.17),
    rgba(255,255,255,0.17) 15px,
    rgba(255,255,255,0) 15px,
    rgba(255,255,255,0) 30px
  ), -moz-linear-gradient(#9bdd62 0%, #74d04c 100%);
  -webkit-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
  -moz-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
  box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
  border: 1px solid #4c8932;
  -webkit-animation: animate-stripes 2s linear infinite;
}

Save your

ui.css

file and view

progress.html

in your web browser, and you’ll see your gorgeous progress bar, done without using any image.
So, what’s inside? Let me explain the code a bit.

First, we have two CSS classes:

.ui-progress-bar

and

.ui-progress

. The first is the container, and the second is the green progress bar.

  • Lines 1 to 9: These lines define a webkit-specific animation, which allows us to move an element from a pint to another.
    For more details about webkit animations, see http://webkit.org/blog/324/css-animation-2/.
  • Line 16: The
    border-radius

    CSS3 property allows you to define a radius and get rounded corners.

  • Line 17: Mozilla specific property for
    border-radius

    .

  • Line 18: Webkit specific property for
    border-radius

    .

  • Line 19: The -webkit-gradient property allows you to add a gradient to an element. It works only on Webkit, other browsers will ignore this property.
  • Line 20: Mozilla specific property, similar to
    -webkit-gradient

    with a different syntax.

  • Lines 21 to 23:
    box-shadow

    (and its browser specific alternatives) allows you to add a shadow to an element.

  • Line 34: Webkit specific property, based on the standard
    background-size

    property, which allows you to specify the size of a background image.

  • Line 56: Triggers webkit animation defined on line 1.

Final touch: Using jQuery to animate the progress bar

A pure CSS3 progress bar is a very cool thing, but progress bars are here to show progress, so we have to animate it. We’re going to use jQuery to do so.

Open your

progress.html

file and paste the two line below just above the closing

&lt;/body&gt;

tag.

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

This code will load jQuery from Google (Which I recommend to do instead of loading your own copy) as well as your

progress.js

file, which will contain the required code to animate the progress bar.

Now, paste the code below in your 

progress.js

file:

(function( $ ){
  $.fn.animateProgress = function(progress, callback) {
    return this.each(function() {
      $(this).animate({
        width: progress+'%'
      }, {
        duration: 2000, 

        easing: 'swing',

        step: function( progress ){
          var labelEl = $('.ui-label', this),
              valueEl = $('.value', labelEl);

          if (Math.ceil(progress) < 20 && $('.ui-label', this).is(":visible")) {
            labelEl.hide();
          }else{
            if (labelEl.is(":hidden")) {
              labelEl.fadeIn();
            };
          }

          if (Math.ceil(progress) == 100) {
            labelEl.text('Done');
            setTimeout(function() {
              labelEl.fadeOut();
            }, 1000);
          }else{
            valueEl.text(Math.ceil(progress) + '%');
          }
        },
        complete: function(scope, i, elem) {
          if (callback) {
            callback.call(this, i, elem );
          };
        }
      });
    });
  };
})( jQuery );

$(function() {
  $('#progress_bar .ui-progress .ui-label').hide();
  $('#progress_bar .ui-progress').css('width', '7%');

  $('#progress_bar .ui-progress').animateProgress(43, function() {
    $(this).animateProgress(79, function() {
      setTimeout(function() {
        $('#progress_bar .ui-progress').animateProgress(100, function() {
          $('#main_content').slideDown();
        });
      }, 2000);
    });
  });

});

Save the file, and view

progress.html

in your web brower: Wow, the progress bar is now animated. How cool is that?

This Javascript code makes the progress bar go from 0 to 100, and then, it displays a message, which is simply “Hello World” in our tutorial.

I hope you enjoyed reading this tutorial as much as I enjoyed writing it. Have fun with CSS3!

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

How to create a kick-ass CSS3 progress bar

Tags: - - - - - - - - - - - - - - - - - - - - - - -
Read More...