Problem
I want to have a one-pixel one-color solid border around a table and its cells. Adding border="1" to the table tag isn’t suitable, because it looks horrific in most of the browsers.

Solution
To make the CSS code easier to maintain, we can first set the border color for both table and td and then set the differing part separately. If you later want to change the border color, you only need to change it in one place.

Here is our final code:

<style type="text/css">
/* <![CDATA[ */

table, td
{
    border-color: #600;
    border-style: solid;
}

table
{
    border-width: 0 0 1px 1px;
    border-spacing: 0;
    border-collapse: collapse;
}

td
{
    margin: 0;
    padding: 4px;
    border-width: 1px 1px 0 0;
    background-color: #FFC;
}

/* ]]> */
</style>

<table>
<tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
</tr>
<tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
</tr>
</table>

CSS trick for Web Developers to DISABLE phone number detection by Skype browser addon (e.g. AVOID "Skype Call" buttons):
Just insert invisible <span> with "_" inside phone number:
+123 456 <span style="display:none;">_</span> 789
Simple!

Moving from a procedural system to object-oriented can be a daunting task. One feature to assist you is the MySQLi class, which allows for an object-oriented approach to database manipulation. This tutorial gives insight into the structure and basic usage of the MySQLi class. If PDO isn’t an option for you, then try MySQLi!

MySQLi stands for MySQL Improved, and is available from MySQL versions >= 4.1.3 and must be compiled in PHP with –with-mysqli=/path/to/mysql/bin/mysql_config.

There are three hierarchical classes with MySQLi:

1. mysqli – Represents a connection between PHP and a MySQL database
2. mysqli_stmt – Represents a prepared statement
3. mysqli_result – Represents the result set obtained from a query against the database

Each one of these classes represent a different situation. The mysqli class is absolutely necessary because you will be communicating only through this class. It contains the connection to the other two classes (mysqli_stmt and _result). For instance, if you were executing a SELECT statement to pull cities from the states table, you would do something like the following:

<?php
$mysqli = new mysqli('hostname','username','password','database');
//This is where we will query the database and pull using the cities/states SELECT statement
// If the result returns true
if ($result = $mysqli->query("SELECT city FROM state WHERE state='AL'")) {
// So the result returned true, let's loop and print out each city.
// The number of rows returned is assigned to the property "num_rows" in the mysql_result class
echo 'For the state of AL, there are '.$result->num_rows.' cities.
';
// The "fetch_object()" method is the equivalent of the old mysql_fetch_object() function. It allows access to the returned rows within the resouce object ($result in this case).
while ($row = $result->fetch_object()) {
echo 'City Name: '.$row->city.'
';
}
} else {
// Notice below that the errors are still contained within the mysqli class. This means that each result will affect a single "error" property. In otherwords, if your result fails, the error returned from MySQL is assigned to the property "error".
// This means the query failed
echo $mysqli->error;
} // end else
$mysqli->close();
?>

Before we go any further, let’s look at each one of the methods and parameters of the mysqli and mysqli_result class. This tutorial will not cover the mysql_stmt class, as this will be “Part 2″, which will cover prepared statements, and will be available within the next week.

Part 3 of the mysqli tutorial will cover transactions using the InnoDB engine.

mysqli Class Methods:

• mysqli – construct a new mysqli object


• autocommit - turns on or off auto -commiting database modifications


• change_user - changes the user of the specified database connection


• character_set_name - returns the default character set for the database connection


• close - closes a previously opened connection


• commit - commits the current transaction


• connect - opens a new connection to MySQL database server


• debug - performs debugging operations


• dump_debug_info - dumps debug information


• get_client_info - returns client version


• get_host_info - returns type of connection used


• get_server_info - returns version of the MySQL server


• get_server_version - returns version of the MySQL server


• init - initializes mysqli object


• info - retrieves information about the most recently executed query


• kill - asks the server to kill a mysql thread


• multi_query - performs multiple queries


• more_results - check if more results exist from currently executed multi -query


• next_result - reads next result from currently executed multi -query


• options - set options


• ping - pings a server connection or reconnects if there is no connection


• prepare - prepares a SQL query


• query - performs a query


• real_connect - attempts to open a connection to MySQL database server


• escape_string - escapes special characters in a string for use in a SQL statement, taking into account the current charset of the connection


• rollback - rolls back the current transaction


• select_db - selects the default database


• set_charset - sets the default client character set


• ssl_set - sets ssl parameters


• stat - gets the current system status


• stmt_init – initializes a statement for use with mysqli_stmt_prepare


• store_result - transfers a resultset from last query


• thread_safe - returns whether thread safety is given or not


• use_result - transfers an unbuffered resultset from last query

mysqli Class properties:

• affected_rows - gets the number of affected rows in a previous MySQL operation


• client_info - returns the MySQL client version as a string


• client_version - returns the MySQL client version as an integer


• errno - returns the error code for the most recent function call


• error - returns the error string for the most recent function call


• field_count - returns the number of columns for the most recent query


• host_info - returns a string representing the type of connection used


• info - retrieves information about the most recently executed query


• insert_id - returns the auto generated id used in the last query


• protocol_version - returns the version of the MySQL protocol used


• server_info - returns a string that represents the server version number


• server_version - returns the version number of the server as an integer


• sqlstate - returns a string containing the SQLSTATE error code for the last error


• thread_id - returns the thread ID for the current connection


• warning_count - returns the number of warnings generated during execution of the previous SQL statement

The best way to explain the usage of the mysqli class is to show by example. There are too many methods and properties to go over in this tutorial, so I will only give examples of some.

It’s important to note that some of these methods listed, aren’t methods at all. For instance, if you wanted to get the client library version of MySQL, you would use mysqli_get_client_version(), which returns the integer version. Here is an example:

<?php
printf("Client version: %d\n", mysqli_get_client_version());
?>

You are forced to use the functions since there is no need for the connection to the actual database.

You have already seen the usage of the mysql_result connection from the mysqli class, so let’s go over some more examples:

Getting some info on the result from the mysql database:

<?php
$mysqli = new mysqli('localhost','db_user','my_password','mysql');
// Get all the MySQL users and their hosts
$sql = "SELECT user, host FROM user";
// If the query goes through
if ($result = $mysqli->query($sql)) {
// If there are some results
if ($result->num_rows > 0) {
// Let's show some info
echo 'There were '.$result->num_rows.' rows returned.
';
echo 'We selected '.$result->field_count.' fields in our query.
';
echo 'Our thread ID is '.$mysqli->thread_id.'
';
// Ok, let's show the data
while ($row = $result->fetch_object()) {
echo 'Username: '.$row->user.' :: Host: '.$row->host.'
';
} // end while loop
} else {
echo 'There are no results to display. Odd how we connected to this database and there are no users.';
} // end else
} else {
// Notice the error would be within the mysqli class, rather than mysql_result
printf("There has been an error from MySQL: %s",$mysqli->error);
} // end else
// Close the DB connection
$mysqli->close();
?>

Here we used some common methods and properties to test and display information. Next week we will go over prepared statements and how they might assist in your scripts.

If you have any questions regarding MySQLi, please feel free to put comments and I will answer them soon.

– Will

A particularly useful function of WordPress is that it informs you when a new update is available to download. This is displayed at the top of your WordPress admin panel and provides a link to the update page where you can automatically install the new available version.

Updating your WordPress installation is important because the latest version will likely contain security updates and will give you access to any new functionality that has been developed.

However, there are occasions where you might not want this message to displayed – for example, if you’re building a WordPress site for a client, you might want to remove the message to stop them from updating the site themselves.

This is because sometimes it’s best to initially test the effects of a new WordPress update locally to ensure that it doesn’t cause the site any problems – it’s not unusual to have configuration issues with plugins that cause the website not to display or work properly.

Removing the update message is very straightforward to do – simply add the following lines of code to your functions.php file:

remove_action('wp_version_check', 'wp_version_check');
remove_action('admin_init', '_maybe_update_core');
add_filter('pre_transient_update_core', create_function( '$a', "return null;"));

With wordpress 3.x, we should be using an other way:

go to: wp-admin/includes/update.php

Search:

add_action( 'admin_notices', 'update_nag', 3 );

Replace to:

//add_action( 'admin_notices', 'update_nag', 3 );

Then check your WordPress admin panel and you should see that the message has disappeared.

Whilst this removes the update message, please make sure that you still update to the latest version when it becomes available. Not doing so can leave you vulnerable to security risks, so make sure you’re aware of when new versions are released and ensure that you apply the update.

I hope you found this tip helpful – let me know if you have any questions or comments.

Hopefully i can do this here...

It’s finally here! Down to earth, simple to read, simple to understand tutorial on how to install Mac OS X on Toshiba Satellite A205-S5804 model. If you read my previous article on this subject, you know that it is possible mainly because of Apple’s move to Intel chips. (Wait, did I write about it before?) Anyway, I did a lot of research and have come to believe that Toshiba Satellite is one of the easiest laptops to get Mac OS X working. And by working I mean full video support, sound, Wi-Fi, Ethernet, usb ports, sound adjuster, battery meter, restart and shutdown. Plus, you can run it all on vanilla kernel (original apple kernel).

Toshiba laptops are relatively cheap. Besides, if you want to spend lots of money just to create ‘hackintosh’, I suggest you buying a real Mac instead. Why? Simply because OS X was designed to run on Apple hardware. You won’t have any issues or problems if you run major software update straight from the Apple Software Update. But if you do the same thing on the Toshiba for example, you might get ‘spinning circle of death’ (ha ha, you never heard of the term 'spinning cirlce of death?; you heard 'blue screen of death', havent you?) after reboot. Some can argue that it’s not a big deal if you use modified updates from hackers (good ones) however, you must be willing to spend some time getting your system up to date. (Honestly, it’s not a big deal.)

This tutorial is for educational purposes only. You, of course, assume all responsibility for choosing to follow this tutorial. Also, OS X EULA states that you can run Leopard on Apple labeled hardware only.

Let’s get to work. As I said I use Toshiba Satellite A205-5804. A little of specifications won’t hurt. So here you go, download it from here.

You will need a modified OS X installation DVD with modified boot loader. It will allow you to load, and install OS X with no problems. This is the result of BIOS not being able to recognize Retail OS X DVD as bootable. For this install, I use ‘leo4allv3’.

Here is what you need:
• Leo4allv3 (Google it)
• Drivers (Kext) – here.
• Kalyway 10.5.3 Combo Update with Kernel package (dont ask me where to find it, Google it)

1. Burn your leo4allv3 ISO to a DVD

2. Changing BIOS Settings:
• In BIOS settings, make sure DVD drive is selected as the first booting device. This is required in order to install OS X. No need to change anything else.

3. Booting/Installing leo4allv3:
• Place your leo4allv3 DVD into DVD drive and turn on/restart your laptop.
• At the Darwin prompt, you will read this: “Press any key to start from CD-Rom, or press F8 to enter start up options…” You need to press F8 and type ‘-v’ (without ‘) and press ‘Enter’ to load OS X in verbose mode. After few minutes you should see a window with a choice of different languages. Choose your own and click on ‘next’ button.
• After you see a ‘Welcome Screen’, make sure you don’t click on ‘Continue’ button yet. You need to format your hard drive first. Go to ‘Utilities → Disc utility’. (You should be able to see ‘Utilities’ option on the top bar.)
• Select your hard drive at the top left corner and click on ‘Erase’ tab (located in the middle of the window).
• Choose ‘Mac OS Extended (Journaled)’ from the drop down menu of ‘Volume Format’ and click on ‘Erase’ button. Confirm the erase command.
• Click on ‘Partition’ tab and in the ‘Volume Scheme’ drop down menu choose – 1 Partition. In the Name field type ‘OSX’. Leave the format option to ‘Mac OS Extended (Journaled).
• Now, click on ‘Options’ button at the bottom left corner and choose ‘Master Boot Record’ (MBR), click on OK and hit ‘Apply’ at the main ‘Disk Utility’ window. Confirm the creation of the ‘OSX’ partition. Wait few moments as ‘Disk Utility’ works its way through.
• Close ‘Disk Utility’ by clicking on the red dot at the top of the ‘Disk Utility’ window. You are back to the ‘Welcome’ screen.
• Click on ‘Continue’ button and hit ‘Agree’.
• Select destination hard drive – OSX and click on ‘Continue’.
• Click on ‘Customize’ button just before you click on ‘Install’ at 'Install Summary' window.
• Choose these packages: Under Audio, choose Azalia Audio; under Chipset, don’t select anything; under Kernel option, choose 9.2.0 sleep; under (SMBIOS), choose Apple SMBIOS 667; under Video choose GMAX3100; under Applications, choose all; select Remove Firewire; select Power Management for laptops; select About This Mac; Click on ‘Done’ button.
• After you get back to ‘Install Summary’, click on ‘Install’ (you can skip checking install DVD by hitting ‘skip’ button).
• Installing - wait. At some point it will look like the installation process got stock, its normal. Just wait.
• After you see ‘Install Succeeded’ window, click on ‘Restart’ button.

4. Fixing minor bugs:
Note: Don’t let OS X boot normally, it will most likely get stuck on a cycled reboot at ‘Transfer Your Information Window’ later, during account setup. Instead Press F8 at Darwin boot prompt and type: -v –s (hit enter);
• After you see ‘root#’, type ‘/sbin/fsck –fy’ and hit ‘Enter’ Type /sbin/mount -uw / and hit ‘Enter’ again. (it’s going to take a little time to run script, wait)
• Type ‘touch /var/db/.AppleSetupDone’ and hit Enter;
• You will need to set up password for root, type: passwd (yes, passwd) and hit enter; choose your password.
Note: when you log in for the first time, your user name will be: root and password is the one you set up.
• Now, after you log in, set up your personal account. (It’s not recommended to use ‘Root Account’) Under Settings  User Account, you will have an option of creating an account, do that.
• As you see, you DVD drive don’t show up, you will have to fix it. There is a driver in ‘Driver Folder’ you downloaded earlier called ‘IOATAFamily.kext_V1.1’, open it and install it with KextHelper. (Google it)
• If you want to change default Verbose Loading mode to Regular, do this: go to /Library/Preferences/SystemConfiguration/com.apple.Boot.plist. Open it with BBEdit delete ‘-v’ from the list and it will boot normally.
• To fix Wi-Fi, install rtl8187b drive from the Drivers folder. Restart if needed. Go to 'system/library/extensions folder and find rtl8187.kext' Open it with TextMate and find this line: 33161 and change numbers to 33175. Restart your computer. (Don’t freak out if you don’t see your Wi-Fi connection yet, you will have to install 10.5.3 combo update to make it work as it should!)

5. Updating to 10.5.3:
• Open your folder with Kalyway 10.5.3 Combo Update, and double click on Kalyway UpdCombo10.5.3.pkg to initiate install. Confirm it by entering your password. Note: Do not click on ‘Restart’ after successful install, as it most likely give you lots of problems on boot. Rather leave the window open and navigate to ‘Kalyway10.5.3 Kernel’ (it should have been in the same folder with kalyway combo update). Double click on it to open the installer, and install it WITHOUT selecting any kernel versions. Close the window, get back to 10.5.3 Combo Update window and click on ‘Restart’. (You should be able to restart successfully)
• Power management will not work after 10.5.3 update. To make it work, install Power Management 10.5.3 fix from drivers’ folder.

6. Updating to 10.5.4:
• Navigate to Apple Software Update from your desktop by clicking on ‘Apple’ logo at the top left corner and choosing ‘Software Update’. It will check if your system is up to date, which of course not, so it will show you that 10.5.4 is available. Install it and reboot. Now you should have completely working ‘Mac’ running on latest OS X.

Congratulations on your 100% working ToshiMac!!! If you found this article interesting, please leave a comment. By the way comments are always welcome, so please take 30 seconds of your time to write one. If you want to share your experience, please do so by writing below.

Introduction:

Below is the simple Bookmark script, which has been implemented using jQuery, this might help most of the people to bookmark your respective webpages / blogs. I have tested the application in Mozilla Firefox (Latest Version – 3.0.10), IE 7 & 8, Google Chrome. Simple code to understand and to implement, I am sure its going to help most of the people to save your website / blog url to their favorites. For this to achieve we need jQuery library file, so please download the same from jQuery Site that is http://www.jquery.com

jQuery Code:

<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("a.jQueryBookmark").click(function(e){
	e.preventDefault(); // this will prevent the anchor tag from going the user off to the link
	var bookmarkUrl = this.href;
	var bookmarkTitle = this.title;
 
	if (window.sidebar) { // For Mozilla Firefox Bookmark
		window.sidebar.addPanel(bookmarkTitle, bookmarkUrl,"");
	} else if( window.external || document.all) { // For IE Favorite
		window.external.AddFavorite( bookmarkUrl, bookmarkTitle);
	} else if(window.opera) { // For Opera Browsers
		$("a.jQueryBookmark").attr("href",bookmarkUrl);
		$("a.jQueryBookmark").attr("title",bookmarkTitle);
		$("a.jQueryBookmark").attr("rel","sidebar");
	} else { // for other browsers which does not support
		 alert('Your browser does not support this bookmark action');
		 return false;
	}
});
});
</script>

HTML Code

<h2>Click on the respective links below to bookmark the same</h2>
<a href="http://www.tailoc.net" title="tailoc.net" class="jQueryBookmark">Website Design</a>

jQuery has overpowered Flash in a lot of web uses becoming a very powerful tool for web designers. One of these uses that I’m referring to is the image slider. Implementing this feature in your site will definitely count as a big plus so don’t waste your time and download the available jQuery plugins in this 30 Powerful jQuery Slideshow (Sliders) Plugins and Tutorials.

You’ve probably noticed that a lot of websites lately have a featured area with content that slides or changes in some way. This is a great technique to show several pieces of content in a limited amount of space and a good way to engage the user.Content sliders are a great way to show large amount of content or images on a smaller area in a website or blog. They are commonly used in portfolio sites, corporate sites or blogs. You may probably heard that jQuery isn’t very hard to learn. If you are interested in implementing a content slider in your website please check our jQuery tutorials and plugins collection.

Powerful jQuery Slider Plugins and Tutorials

Minimalistic Slideshow Gallery

In this tutorial we will create a simple and beautiful slideshow gallery that can be easily integrated in your web site. The idea is to have a container with our slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will slide out from the top and allow the user to navigate through a set of thumbnails.

Slider Details Download Script

---

Advanced jQuery background image slideshow

With the use of transparent PNG’s, some HTML, pretty nifty CSS and jQuery, we can make this technique work. Read the rest of this article to learn how to create a beautiful advanced jQuery background image slideshow.

Slider Details Download Script

---

Fancy transitions effects

Main idea was to build some ’strip curtain’ effect and I start from that. But, while I was building this some other effects just pop up and I decided to adjust code and include some of those effects. Now, there are ‘wave’, ‘zipper’ and ‘curtain’ effect, plus options that can be used for custom effect.

Slider Details Slider Demo Download Script

---

jQuery Blinds

jQuery Blinds Slideshow using CSS Sprites.

Slider Details Slider Demo Download Script

---

Making a Mosaic Slideshow With jQuery & CSS

When designing a product page, it is often necessary to present a number of images in a succession, also known as a slideshow. With the raise of the jQuery library and its numerous plugins, there is an abundance of ready-made solutions which address this problem.

Slider Details Slider Demo Download Script

---

The Lof JSiderNews Plugin

Base on the Jquery Framework and the Easing Plugin, The JSiderNews Plugin is a slideshow plugin that displaying images or type of content and support favious navigation to previous|next items.

Slider Details Slider Demo Download Script

---

Blinds-effect Slideshow

There are two ways of setting Floom up. One is the object way, where you specify the image url and the caption using the key-value notation.

Slider Details Slider Demo Download Script

---

Slideshow plugin for the Tabs

Here you can see a slideshow plugin in action. Click on the arrow buttons, navigator or the content area to navigate through the slides. You can also enable the automatic slideshow by pressing the “play” button below the slides.

Slider Details Slider Demo Download Script

---

Slideshow plugin for the Tabs

we learn how to fade list of images through each other in continuous loop. We will also add captions and tooltips to make it more usable. This simple effect is ideal for portfolio websites, galleries or magazines where images need to be seen.

Slider Details Slider Demo Download Script

---

loopedCarousel

Slider Details Slider Demo Download Script

---

Supersized 2.0

Slider Details Slider Demo Download Script

---

jQuery Carousel

Slider Details Slider Demo Download Script

---

Create a jQuery Carousel with WordPress Posts

Slider Details Slider Demo Download Script

---

Create a Simple Infinite Carousel with jQuery

This tutorial will show you how to create a infinite carousel script with jQuery. It also have a simple autorotate script that will rotate items in the carousel.

Slider Details Slider Demo Download Script

---

jQuery Infinite Carousel-version 2

Slider Details Slider Demo Download Script

---

Agile Carousel

Agile Carousel is a JQuery Plugin. The JQuery AJAX function is used to deliver settings to the included PHP script “make_slides.php”, which you do not need to modify. The PHP script uses the requested settings to custom-build an image carousel. The carousel html is then placed to the html document within the container you specify.

Slider Details Slider Demo Download Script

---

jQuery Multimedia Portfolio

This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.

Slider Details Slider Demo Download Script

---

Ajax Search – Carousel

Slider Details Slider Demo Download Script

---

Create a Simple Slideshow using Mootools / JQuery

In this post i’ll walk you through the process of making a very simple(minimilistic) slideshow using Mootools / Jquery.

Slider Details Slider Demo Download Script

---

Lateral Slider

Slider – The easiest known way to showcase your images and photos on the web in style.

Slider Details Slider Demo Download Script

---

Horinaja

Horinaja is a slide-show ready-to-use for scriptaculous/prototype or jQuery.

Slider Details Slider Demo Download Script

---

Gradually

Gradually offers API, a slide show, and a thumbnail gallery using ImageDrawer.

Slider Details Slider Demo Download Script

---

Simple jQuery slideshow bubble messages

Slider Details Slider Demo Download Script

---

Sexy Slider

SexySlider is a JQuery plugin that lets you easily create powerful javascript Sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider!

Slider Details Slider Demo Download Script

---

siteFeature

siteFeature is an unobtrusive jQuery plugin that simplifies the creation of an interactive “Featured Items” widget.

Slider Details Slider Demo Download Script

---

DDSlider – 10 Transitions – Inline Content Support

DDSlider introduces a new easy-to-go slider with 9 different unique transitions (+fading & random—11 total) that support Inline Content. You can also have multiple sliders in the same page

Slider Details Slider Demo Download Script

---

AviaSlider – jQuery Slideshow

AviaSlider is a very flexible and easy to use Image slideshow plugin for jQuery with a set of really unique transitions that were nver available before, as well as some basic transitions, so the slider will fit into every project.

Slider Details Slider Demo Download Script

---

jQuery Banner Rotator / Slideshow

This is a jQuery banner rotator plugin featuring multiple transitions. The thumbnails and buttons allow for easy navigation of your banners/ads. The banner rotator is also re-sizable and configurable through the plugin’s parameters.

Slider Details Slider Demo Download Script

---

TinySlider

This super lightweight (1.5 KB) sliding Javascript slideshow script can easily be customized to integrate with any website through CSS. You can add any content to it, not just images, and it gracefully degrades without Javascript support.

Slider Details Slider Demo Download Script

---

Slideshow 2

Slideshow 2! is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website. This page features some examples of how Slideshow might be used to enhance the presentation of images on your website. Please view the source of this page for usage information.

Slider Details Slider Demo Download Script

---

BlogSlideShow

BlogSlideShow is a free open-code JQuery plugin that enhances your blog pages with fancy image viewer, which provides nice transition effects including CSS3/HTML5-related ones.

Slider Details Slider Demo Download Script

---

PictureSlides

PictureSlides is a plugin for jQuery, and it is a highly customizable JavaScript-based way to easily turn your images into a collection viewable as a slideshow, and with fading effects, if desired.

Slider Details Slider Demo Download Script

---

CSS3 enhanced zoom-in zoom out slideshow

This free copy and paste script adds a stylish CSS3 effect to your slideshow. Simply by setting the style attributes you can apply corners to any or all four image-corners, furthermore you can apply shadows.

Slider Details Slider Demo Download Script

---

[www.themeflash.com]

There are a lot of free scripts to create a content slider. One of the example is SmoothGallery by JonDesign. But, if you are using jQuery and don’t want to install another JavaScript library, then you may need to consider jQuery slider plugin.

Today, i am going to provide a tutorial on using jFlow, a minimalist jQuery plugin to create a content slider. Readers are required to have basic XHTML/CSS and JavaScript skills. I will provide a download link after this tutorial. This is the first tutorial post on WebDesignBooth, and i will write more tutorials in future.

So, let’s start to create our content-slider now. Download both jQuery and jFlow before you proceed.

1. Create a style.css file, and insert the following code into the file:

#jFlowSlide{ background:#DBF3FD; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0;  width:610px; background:#3AB7FF; }
#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }

.slide-wrapper { padding: 5px; }
.slide-thumbnail { width:300px; float:left; }
.slide-thumbnail img {max-width:300px; }
.slide-details { width:290px; float:right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { margin-top:10px; }

.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }

2. Open your main document and include the style.css, jQuery, and jFlow in the <head> tag.

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flow.1.2.js"></script>

3. Then add this simple JavaScript code to define the settings for jFlow

<script type="text/javascript">
$(document).ready(function(){
    $("#myController").jFlow({
        slides: "#slides",  // the div where all your sliding divs are nested in
        controller: ".jFlowControl", // must be class, use . sign
        slideWrapper : "#jFlowSlide", // must be id, use # sign
        selectedWrapper: "jFlowSelected",  // just pure text, no sign
        width: "610px",  // this is the width for the content-slider
        height: "235px",  // this is the height for the content-slider
        duration: 400,  // time in miliseconds to transition one slide
        prev: ".jFlowPrev", // must be class, use . sign
        next: ".jFlowNext" // must be class, use . sign
    });
});
</script>

Think #slides as a container, which contain all slides, while .jFlowControl is the controller which let us go to the individual slide. As you can see from the style.css, we have 300px .slide-thumbnail to display our image, 290px .slide-details to display our title and description. Besides these, we have 10px margin-left for the .slide-description and 5px padding for the .slide-wrapper. So totally we need 610px width. For the “height” setting, you need to estimate the maximum height for your content. Here, i will use 235px as an example.

4. Now is the turn to create the individual slide. The slide is contained in the #slides div. Here, i will conly show one slide. You may refer the source code for more info.

<div class="slide-wrapper">
    <div class="slide-thumbnail">
        <!-- image here -->
    </div>
    <div class="slide-details">
        <h2><!-- title here --></h2>
        <div class="description">
            <!-- description here. -->
        </div>
    </div>
    <div class="clear"></div>
</div>

5. We will wrap everything in a .slide-wrapper class, and float our thumbnail to the left while our content to the right. Don’t forget to clear the floats also. Replace image, title, and description with your own content.

After that, we may add controls to the slides, which are resides in a #myController div.

<span class="jFlowPrev">Prev</span>
<span class="jFlowControl">1</span>
<span class="jFlowNext">Next</span>

The .jFlowPrev and .jFlowNext are necessary controls to go to previous and next slides, while .jFlowControl is a “button” to jump to any particular slide. The number of .jFlowControl span is depends on the number of slides you have.