Whilst working on a project recently I came across a need for us to show a selection of images depending on their type and when a link to them is clicked. I decided to use jQuery as it saves a lot of time as most of the work is done for you. I will step through the code so you can see how I did it.

View Demo As with any jQuery, we are required to use the following line to tell our jQuery code to run as soon as DOM is ready rather than when the page has finished loading.

$(document).ready(function(){

The next line detects any click from a link inside the div with an id of “links” $('#links a').click(function(){ Once a link has been clicked any attribute from that link is accessible through $(this), so the next line sets up a new variable called “color” and takes the “rel” attribute from the tag and puts it into our new variable. var color = $(this).attr('rel'); Once we know which colour link has been clicked we can then fade out all images that have a different colour and fade in the colour that has been clicked.

$('#tiles div.tile:not(.' + color + ') img').fadeTo("slow", 0.3); $('#tiles div.' + color + ' img').fadeTo("slow", 1);

To finish off we need to close our function brackets. You will notice there is a “return false;”. This is to stop the link actually activating the href attribute and basically overriding it so we can do our magic. This becomes useful when users don’t have Javascript activated in there browser, you can make the link work as normal. Unfortunately, you would need to create separate pages with different colours highlighted instead. (sigh!) So, to sum up I have put all the code below and you will need to remember to include the latest jQuery Javascript file from http://www.jquery.com All the HTML you can grab from the source of the demo page. Final Code

$(document).ready(function(){ $('#links a').click(function(){ var color = $(this).attr('rel'); $('#tiles div.tile:not(.' + color + ') img').fadeTo("slow", 0.3); $('#tiles div.' + color + ' img').fadeTo("slow", 1); }); return false; });

Hopefully, this will be useful to someone. Have fun! View the Demo

Recently, a friend of mine asked me if I knew of any good tutorials or websites for people that are beginners to intermediate skill level with php. There are many websites, one could say too many, that have sub par tutorials and tips on php. If you are looking for some quality sites to visit and really increase your knowledge of the language then this post is for you! Join us as we take a look at 5 quality sites to increase your knowledge of php, all of them have been Drew Approvedtm, so you know it's good.

1. Ennui Design

Ennui design is the website of Jason Lengstorf, a fellow php and MySQL nerd. Jason frequently has quality articles and real world example and implementations on the topic of php. 1. Zend Developer Zone 101

This was perhaps the one series of articles/website that really got me into php enough to be proficient. The tone is anything but boring and the material taught is extremely useful for anyone. Don't let the '101' fool you, I still reference this series of articles from time to time and always find it helpful. 2. Roshan Bhattarai's Blog

I don't personally know Roshan, but I have been through every single php article on the site (yes, I do have a life also) and every one of them I learned a little something knew. His blog isn't only php related, it also features excellent Javascript and MySQL tips as well. 3. PHP Freaks Community and Forum

I am semi-new to the php freaks community, but I love it considering I am myself a php freak. A great way to learn any web or programming language is to lurk around the popular forums and check out the threads. You will learn a lot more thank you think just by looking at the problems others are having or participating yourself. 4. Query 7

I would consider Query7 an intermediate php website and a damn good one at that. A huge plus is that they frequently cover the use of CodeIgniter and API's such as the Google language API. Bonus! Brenelz Web Blog

For a quick bonus I have included Brenelz, who is a good friend of Dev-Tips and myself. Brenelz constantly has experts in the field of php and other languages guest posting on his blog with their tips, as well as great tips from the man himself. After all, Brenelz was the one who first showed me how to use a transparent png-8 without needing any hacks for IE6. And there you have it, five sites plus a bonus site to increase your knowldege of php. And in case you were wondering, here at Dev-Tips, we always start counting from zero

Howdy folks! In case you missed it, I recently wrote an article for the ThemeForest Blog entitled display your recent items with WordPress and the Envato API. This post showed you how to display items from markets like ThemeForest and Flashden on your blog, along with their thumbnails and links. Well, the plugin has been updated with some new features and is now available on the WordPress plugin directory. Read on to find out about the features and how to use the plugin!

Features of the Envato Recent Items Plugin In short, the plugin allows you to easily show and style your recent items from Envato, from any market place (FlashDen, ThemeForest, AudioJungle, GraphicRiver etc). The plugin comes with the following features as of version 1.0:

Thumbnails of item are shown and also link to your item. Any number of items can be shown, depending on your preference. You can choose to display the price of each item if you wish, the price does not display by default. The title, thumbnail, and link are all wrapped in custom classes so you can easily style however you desire. You can now add a referrer ID (username) in case you want to take part of the referral program.

How to use and install

Upload envato_recent_items folder to the /wp-content/plugins/ directory. Activate the plugin through the 'Plugins' menu in WordPress. Place <?php echo envato_recent_items('collis', 'themeforest', 5, true, $ref='collis'); ?> in your template file(s) where you wish the items to be displayed.

The first argument is your username and is required. The second argument is the marketplace and is required. The third argument is the number of items to display and is required. The fourth argument is wether or not to show the price and is not required. Defaults to false. The fifth argument is your referral id (your username) and is not required. Defaults to null.

Now, you may be wondering, why not just have the referral id be the same as the username? Good question. I wanted to keep this plugin as flexible as possible, and there may be cases when the items you are displaying (maybe a buddy or a co workers) would not be the same as your username. Screenshots Below is a screenshot of the plugin without any styling, also note that the price here is being shown, which is off by default:

Below is an excellent use of the plugin by The Molitor:

Download the Plugin! You can download the plugin from the WordPress plugin index. If you have any questions, please be sure to read the FAQ and installation instr unctions on the plugin homepage. Any suggestions or comments are always welcome, enjoy! Donate If you have found this plugin to be helpful, I ask you to consider making a donation of any amount. Donations keep me motivated and allow me to continue to build and enhance WordPress plugins. Any donations are greatly appreciated!

Designing Posters is very interesting to do with Photoshop or Illustrator. If your fun of creating Posters, here are some cool list of tutorials that could improve your skill more and better.

This article is a 30+ Photoshop Tutorials in Creating Amazing Posters. Some of this tutorials are a combination of Illustrator and Photoshop.

You may notice the last few days I made some list of free texture resources. And as a continuation of gathering some High Quality Textures on the internet, Here is another textures which I can say very useful when it comes in creating a grunge concept of design. So here is a list of 60+ Hand-Picked Extremely Useful Free Concrete Texture Backgrounds. These are some of the best Concrete Texture you could ever find. As always its free however make sure to check some agreements and conditions from the owners of this textures. Also try to check 200+ Ultimate Free High Quality Wood Textures and 200+ High Quality Free Paper Textures to Grab for more texture resources.

How frustrated do you get when annoying people post "ffffffffffffffffff…ffff" on your blog/forum? And this piece of line annoyingly stretches the page. How many times have you researched for a solution but realize that some work well on firefox but messes up on internet explorer whereas some work smoothly on safari but messes up on opera? I've ran so many tests here and there on existing websites. Sadly but true, even the forms created by wordpress allow people to post such content.

I've decided to share this because:

it frustrated the living hell out of me
I don't want you to waste time while developing.

Some decide to use the PHP function wordwrap() function to just wrap a string to a given number of characters using a string break character. BUT this doesn't do the trick! Some decide to use the PHP chunk_split() function to split a string into smaller chunks. BUT this doesn't do the trick! After intense research, I came up with a solution which works perfectly on all browsers and doesn't even stretch the page. I was looking for something which will break up words of that sort (i.e: ffffffff, aaaaaaaa, ect. ) but at the same time wrap it at a certain fixed length. Here's a function that adds a space (" ") after every $i characters, if no space is found until that character, the browser will automatically wrap the text:

<?php

function layout_wrap($str, $i) { $j = $i; while ($i < strlen($str)) { if (strpos($str, ' ', $i-$j+1) > $i+$j || strpos($str, ' ', $i-$j+1) === false) { $str = substr($str, 0, $i) . ' ' . substr($str, $i); } $i += $j; } return $str; }

?>

But if you try the above, it will not work since it's still not enough. It's true that words are cut after every $i character but it still stretches the page. Another interesting function is the following:

function utf8_wordwrap($str,$width,$break, $cut){ return utf8_encode(wordwrap(utf8_decode($str), $width, $break, $cut)); }

This will wrap the content at a certain given width but, same as the previous comment, it's not enough. Words are not being cut. After many trials and errors, I've tried combining them since I was interested to have both features at the same time. This is what I came up with which works like a charm:

utf8_wordwrap(layout_wrap(str, 30), 75, "\n", false);

What will this do? Well, it will combine the best of 2 worlds.

It will not exceed a width of 75 Words of more than 30 characters will simply be cut.

Happy coding! Enjoy!

One of the latest raves in Web design is to add an id attribute to the body tag, like <body id="coolpage">. It's a small thing, but it's a damn good idea! Why? Let's say you have 15 pages total on your Geocities Star Wars fan site. You want the headlines (<h1>Headline!</h1>) to be 16 px in size with the exception of the home page. On the homepage you want the headlines to be 18px and bold! Will you make a new separate CSS file just for the homepage that the user has to download in addition to the default CSS? NO! You're too good for that! You & C3PO hang out on the weekends.

Instead of all that extra CSS file nonsense, you can use <body id="homepage"> in replacement of <body>, which enables you to assign unique CSS only to the homepage like so:

/* for all pages */ h1 { font-size: 16px; }

/* for homepage only */

homepage h1 { font-size: 18px; font-weight: bold; }

And BOOM! Your homepage headlines are styled differently without any hacks or additional files. That's awesome and incredibly useful. So why not stop there? Because adding id attributes to the body element of each page takes time and work. When you start that new section on your Geocities Star Wars fan site about Princess Layla's secret love affair with R2D2, you'll be adding lots of id attributes for all the juicy pages. It'll be redundant and boring. Let's use PHP to make things A LOT easier. Use the following line in replacement of <body> and your pages will automatically have id tags based on their filenames.

<body id="<?php echo (str_replace('/', '', substr($_SERVER['REQUEST_URI'], 1, strlen($_SERVER['REQUEST_URI']) - strrpos($_SERVER['REQUEST_URI'], '.') - 1)) ? str_replace('/', '', substr($_SERVER['REQUEST_URI'], 1, strlen($_SERVER['REQUEST_URI']) - strrpos($_SERVER['REQUEST_URI'], '.') - 1)) : 'index'); ?>">

There you have it. Use that line in your HTML template, and your pages will have id attributes assigned to <body> automagically. Yippy! For example, c3po.php will become #c3po, c3po/loveaffairs.php will become #c3po_loveaffairs (forward slashes "/" are replaced with underlines "_"), and your homepage will be #index. Enjoy!

So you wanna serve a separate page or sub domain for mobile phones? Add this bit of fun to your .htaccess and you're rockin'. All iPhone, Blackberry, & Palm requests will go to a mobile subdomain.

redirect mobile browsers

RewriteCond %{HTTP_USER_AGENT} ^.iPhone.$

RewriteRule ^(.*)$ http://mobile.yourdomain.com [R=301]

RewriteCond %{HTTP_USER_AGENT} ^.BlackBerry.$

RewriteRule ^(.*)$ http://mobile.yourdomain.com [R=301]

RewriteCond %{HTTP_USER_AGENT} ^.Palm.$

RewriteRule ^(.*)$ http://mobile.yourdomain.com [R=301]

If you're not using PHP's output buffering, you should be. And if you are, you may not be using it to its potential. In this article written specifically for web developers, I'll make a case for output buffering and show you how to get started within seconds. This article is the beginning of a series in which I'll share with you the awesome potential of output buffering.

Simple explanation of output buffering for Web developers Without output buffering (the default), your HTML is sent to the browser in pieces as PHP processes through your script. With output buffering, your HTML is stored in a variable and sent to the browser as one piece at the end of your script. Can you already begin to see the performance advantages and post processing opportunities? Advantages of output buffering for Web developers

Turning on output buffering alone decreases the amount of time it takes to download and render our HTML because it's not being sent to the browser in pieces as PHP processes the HTML. All the fancy stuff we can do with PHP strings, we can now do with our whole HTML page as one variable. If you've ever encountered the message "Warning: Cannot modify header information - headers already sent by (output)" while setting cookies, you'll be happy to know that output buffering is your answer.

Here's a "hello world" of PHP output buffering

<?php // start output buffering at the top of our script with this simple command ob_start(); ?>

<html> <body> <p>Hello world!</p> </body> </html>

<?php // end output buffering and send our HTML to the browser as a whole ob_end_flush(); ?>

It's that simple! Just by doing this our webpages appear less choppy as they render. Now let's take it one step futher. The next step: compress the output In the code below, ob_start() is changed to ob_start('ob_gzhandler'). That one simple change compresses our HTML, resulting in a smaller HTML download size for most browsers.

<?php // start output buffering at the top of our script with this simple command // we've added "ob_gzhandler" as a parameter of ob_start ob_start('ob_gzhandler'); ?>

<html> <body> <p>Hello world!</p> </body> </html>

<?php // end output buffering and send our HTML to the browser as a whole ob_end_flush(); ?>

One more step further: custom post processing In the code below, ob_start() is changed to ob_start('ob_postprocess'). ob_postprocess() is a function we define below used to make changes to the HTML before it is sent to the browser. Instead of Hello world!, the user will see Aloha world!

<?php // start output buffering at the top of our script with this simple command // we've added "ob_postprocess" (our custom post processing function) as a parameter of ob_start ob_start('ob_postprocess'); ?>

<html> <body> <p>Hello world!</p> </body> </html>

<?php // end output buffering and send our HTML to the browser as a whole ob_end_flush();

// ob_postprocess is our custom post processing function function ob_postprocess($buffer) { // do a fun quick change to our HTML before it is sent to the browser $buffer = str_replace('Hello', 'Aloha', $buffer); // "return $buffer;" will send what is in $buffer to the browser, which includes our changes return $buffer; } ?>

Bonus tip: you can set cookies at any time with output buffering on Since HTML is not sent directly to the browser, we can set cookies anywhere in our scripts without worrying about anything. Just turn it on like we did in step 1 and voilà! No more cookie problems. Finished for now, subscribe for more There you have it! Three simple steps into output buffering to get you started. First we just turned it on with ob_start(), then we added automatic compression with ob_start('ob_gzhandler'), and finally we made ob_postprocess()—a custom function to modify our HTML before output. In following articles in this series, we'll build on this tutorial with specific examples that really take advantage of some massively cool opportunities with output buffering that you can plug right into your own scripts. Stay tuned!

I'm glad to release the first of many free themes to come on Dev-Tips. Every once in a while, we will release another free HTML or Wordpress theme for you to use however you like. You cannot sell these themes or use them commecially without the permission of Dev-Tips.com. Other than that, enjoy them! Today, we will have a look at a fully functional HTML and PHP based theme called iBlog.

Introducing iBlog If you didn't already guess, iBlog as named and inspired by Apple, as are a lot of my designs. Call me a fanboy, I'm cool with that. Below you will find the screenshots, features, and a screencast going over the features and install. Home Page

Single/About Page

Image Gallery

Contact Message Fail

Contact Message Pass

iBlog Features

Font embedding via typeface.js Twitter updates via JSON Working php contact form with custom success and error messages Lightbox effect on the image gallery The "paper clip" is a seperate image, thus any image can be replaced under it. Compatible with IE6+ FF 2+ Opera 9+, Safari 3.0+ Full psd file included. Help file included that explains everything you need to know about setting up this theme.

Important Note You need to be running PHP version 5 or higher for this to work properly. It may work in PHP 4, however, no support will be provided for those running PHP 4. Please upgrade. Live Preview You can view a live preview and all source code at the live preview page for iBlog. Usage You may use iBlog in any non-commercial way you wish. If you enjoy the theme, a link back to Dev-Tips is appreciated and helps keep us motivated to build more free themes! Download iBlog Download iBlog (10) - 2.63 MB Get Support Please read the help file thoroughly before requesting support. If you still need help, please contact us via the contact page with the subject of 'Theme Support'. Lastly, if you enjoyed this theme, let us know! We'd love to know what you think, and what you would like in the future.

Subscribe to all these awesome blogs at once? Download & Import: Blog RSS XML Import File (Right Click > Save As. Import to Feed Reader) The Best New Design Blogs of 2008 The Design community really exploded in 2008 with many rich new blogs. If you’re anything like me, you probably have a tough time keeping up with everything in the design community given the number of blogs to follow. For this reason, I’ve collected the Top 9 New Design Blogs to follow in 2009. In short, these are blogs that have made a strong impact in the design community in a short amount of time. You can download the XML file and import these blogs to your feed reader, or read on to see what blogs you should be keeping an eye on in the new year. 1. Fuel Your Creativity

Fuel Your Creativity is the design blog founded by Adelle Charles in early 2008 that has quickly become a designer hang out of sorts. It’s not just a blog, it’s an experience that keeps getting better with fresh new updates every week. Subscribe to Fuel Your Creativity 2. Function

Function offers outstanding design services, but also doubles as an insightful design blog. Liam McKay has really made it into a wild success with it’s resources being used by the likes of PSDTUTS. Subscribe to Function 3. UX Booth

UX Booth is a group that writes about User Experience and offers free Website Usability Reviews that all designers and developers can benefit from. If you take your design seriously, UX is something you should be paying attention to. Subscribe to UX Booth

1. Web Design Ledger

Web Design Ledger may be a young design blog, but it packs quite the punch. It’s definitely a blog to keep on your radar in the new year — we don’t think they’ll disappoint. Subscribe to Web Design Ledger

1. Think Design

Think Design has been sharing some great design resources since late 2008, and they don’t seem like they’ll start slowing down anytime soon. Subscribe and you’ll have new freebies, sent to you regularly. Subscribe to Think Design

1. Design Mag

Design Mag is a new site that is aimed at providing a wide variety of resources for web designers and developers. Run by Steven Snell of Vandelay Website Design, Design Mag is quickly becoming a go-to spot for new and creative design resources. Subscribe to Design Mag

1. Elite By Design

Elite By Design is a design blog that publishes great articles, tutorials and resources on a regular basis. They contributed some great things to the design community in 2008, and we expect much more from them in 2009. Subscribe to Elite By Design

1. PSDTUTS

PSDTUTS isn’t a new blog by any means, but the Envato network deserves tremendous applause for everything it accomplished in the past year. An array of new tutorial sites have been launched (including NETTUTS and VECTORTUTS), new online marketplaces have taken off, and they even helped the community by organizing Blog Action Day 2008. To say the least, a certain someone over at Envato has really become a tue inspiration and role model for the rest of us (ahem that’s you Collis). Subscribe to PSDTUTS 9. Design Cubicle

Design Cubicle was actually chosen by the design community at large. Founded only recently by Brian Hoff, it’s become a valuable asset to designers everywhere, helping people design, interact, and learn new things. Subscribe to Design Cubicle What Were Your Favorites? Now that we’ve shared our favorite blogs of 2008, we’d like to know what your favorites were (And don’t all say Tutorial9 at once now!)