Creating Login Panel with jQuery and CSS

Among many studies conducted to find out just what influences people’s perception of a website’s credibility, one interesting finding is that users really do judge a book by its cover… or rather, a website by its design.

Rapid changes in design trends are driving focus towards its usability. More and more features are being zipped into a plain and simple design for users to get bountiful results without spending more than a jiffy. The back-end coding is the key device to achieve this simplicity in design.

Keeping this mind, I’ve designed a small script to introduce a sliding login box into your website, just as you see in Twitter login page. The script comprises jQuery & CSS techniques to display this arty feature. Checkout the code below and try it yourself or simply download the ready to use files.

View Demo | Download Code

xHTML Code

Clients Area




Username:
  
Password:
 

Press ESC to close

CSS Code

jQuery Code

What more features can I zip for you? Do let me know in the comments.

What is Regular Expression?

Regular Expression is a type of sub language used with main stream programming languages like PHP, ASP, JAVA, and many more. As a matter of fact, it can be used with any programming language. You can think of regular expressions as wild cards on steroids. You are probably familiar with wild card notations such as *.txt to find all text files in a file manager.

The regular expression equivalent is . *\.txt$.

What is its use?

Regular expression is used to match strings of text, such as particular characters, words, or patterns of characters, e.g., I wish to search a word which starts with the letter ‘c’ and is followed by O twice and can end with any alphabet or a numerical. I can use these regular expressions to get exact matches like cool, cook, cooked, cooking, cooper, cooperate, etc.

What’s in it for me?

Regular expressions are very useful as they involve interpolation with strings, numerical, alphabets and special symbols like $ @ % * etc. In my opinion no application can be built without using regular expressions in some way. There are many features and uses of regular expressions and we will proceed to discuss a few regular expressions that are a “Must Know” for any programmer. We shall tests these expressions in the following scenarios using PHP:

1. Validating Username.
2. Validating Password.
3. Validating Email Address.
4. Matching a URL.

Validate Username

// regular expression for validating username
$valid_username = "/^[a-z0-9_-]{3,16}$/";  

// input from user through a textbox
$user = $_POST['user'];  

// using ‘preg_match’ to validate user input against the expression.
if(preg_match($valid_username, $user)){
	$message= "Username Valid! You may proceed.";
}else{
	$message = "Inavlid Username.";
	$message .= "Username should contain only alphabets, numbers, underscores or hyphens.";
	$message .= "Should be between 3 to 16 characters long.";
}

In the above code the regular expression will look for a specific pattern of username which contains characters such as letters (a-z); number (0-9); an underscore or a hyphen. Later, it would verify that the username is minimum 3 characters long without exceeding the upper limit of 16 characters. This verification is performed by {3,16} expression. Then we will end the string by a ‘$’.

Live Demo

Validate a password

$valid_password = "/^[a-z0-9_-]{6,18}$/";
$pass = $_POST['pass'];
if(preg_match($valid_password, $pass)){
        $message = "Valid Password. You may proceed.";
}else{
        $message = "Invalid Password.";
        $message .= "Password should contain only alphabets, numbers, underscore or hyphen.";
        $message .= "Should be between 6 to 18 characters long.";
    }

Password is almost similar to matching a username the only difference here is that we need minimum of 6 characters.

Live Demo

Validate an email

$valid_email = "/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/ ";
$email = $_POST['email'];
if(preg_match($valid_email, $email)){
        $message = "Valid Email. You may proceed.";
}else{
        $message = "Please enter a Valid Email.";
}

This is one of the most common, widely used and important regular expression for validating an email address. This matches a string that has all the parts required for an e-mail address. To explain in detail, it will look for one or more lowercase letters, numbers, underscores, dots, or hyphens first followed by @ sign, next it will look up for a domain name which can consist of one or more lowercase letters, numbers, underscores, dots, or hyphens and then it would look for extension which would vary from 2 to 6 characters that can be country specific like .ca, .net, .uk, .com or .co.uk.

Live Demo

Regular expression to match a URL

$valid_url = "/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/";

$url= $_POST['url'];
if(preg_match($valid_url, $url)){
        $message = "Valid URL. You may proceed.";
}else{
        $message = "Please enter a Valid URL.";
}

This one compares the URL where it will first look for http://, https:// or check for it presence at all. Next it looks up the domain name which consists of one or more numbers, letters, dots, or hyphens followed by another dot then two to six letters or dots. The later section “?([\da-z\.-]+)\” is optional files and directories. Then the inside part “.([a-z\.]{2,6})([\/\w \.-]*)” matches any number of forward slashes, letters, numbers, underscores, spaces, dots, or hyphens. Then we say that this group can be matched as many times as we want. Pretty much this allows multiple directories to be matched along with a file at the end. I have used the star instead of the question mark because the star says zero or more, not zero or one. If a question mark was to be used there, we could match only one file/directory. Then a trailing slash is matched, but it can be optional. Finally we end with the end of the line.

Live Demo

Stay tuned and updated for more useful regular expressions to come in future readings.

Simple light-box effect with jQuery and CSS

As you already know that I’ve been working on improving the performance of my website and I needed a simple solution to create light-box effect for Live-Chat on this website. I had many options to choose from available jQuery plug-ins however, the idea was to optimize the code with minimal use of heavy third-party scripts and CSS. Moreover, Only thing I needed was a light-box effect without any other functionality.

So I created the light-box effect with a few lines of code using CSS and jQuery.

View Live Demo

Let’s start coding

xHTML Code

Place this code within <body></body> tags where ever you like.

<a id="show-panel" href="#">Show Panel</a>

<div id="lightbox-panel">
<h2>Lightbox Panel</h2>
<p>You can add any valid content here.</p>
<p align="center">
<a id="close-panel" href="#">Close this window</a>
</p>
</div><!-- /lightbox-panel -->

<div id="lightbox"> </div><!-- /lightbox -->

First line of the above code is a link with id “show-panel” which will display the “light-box” and the “lightbox-panel” DIVs, similarly on line 7 we have a link with ID “close-panel” to hide these DIVs. This will be handled by jQuery of course.

#lightbox-panel will hold the content to be dispalyed and #lightbox will add a transparent background behind our content panel. Let’s write some CSS code to stylize these two DIVs before we add the functionality to our links with jQuery.

CSS Code

You can add this code within the document’s <head></head> tag or in any linked style sheet.

* /Lightbox background */
#lightbox {
 display:none;
 background:#000000;
 opacity:0.9;
 filter:alpha(opacity=90);
 position:absolute;
 top:0px;
 left:0px;
 min-width:100%;
 min-height:100%;
 z-index:1000;
}
/* Lightbox panel with some content */
#lightbox-panel {
 display:none;
 position:fixed;
 top:100px;
 left:50%;
 margin-left:-200px;
 width:400px;
 background:#FFFFFF;
 padding:10px 15px 10px 15px;
 border:2px solid #CCCCCC;
 z-index:1001;
}

Note: The z-index value for #lightbox-panel should be greater than z-index value of #lightbox to display it above the transparent background and both should have the property display as none so they should not show up by default or if the users have Javascript disabled in their browsers.

Let’s put some life to our code with jQuery.

jQuery Code

You can add this code within the document’s <head></head> tag and we are done.

<script type="text/javascript" src="PATH_TO/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 $("a#show-panel").click(function(){
 $("#lightbox, #lightbox-panel").fadeIn(300);
 })
 $("a#close-panel").click(function(){
 $("#lightbox, #lightbox-panel").fadeOut(300);
 })
 })
</script>

Pretty simple, huh!!

Could it get easier than this?

Once you click the link with ID “show-panel” it will display both the DIVs with some nice fade effect and if you click the link with ID “close-panel” it will hide these DIVs.

I hope you enjoyed this little trick to create simple light-box effect with CSS and jQuery and You are most welcome to share your inputs and code in the comments below.

Recently I started hearing from a lot of people complaining about their theme developers using minified CSS in their themes for maximizing performance without any consideration for their ease of use / customization. People keep asking me if there are tools that convert minified CSS back to normal human-readable form and recently someone even asked me to do a job – normalize some minified stylesheets (of course I didn’t do it and rob him off!)

Whether or not developers should minify CSS when giving out themes / websites has been a subject of debate for a long time but why developers choose to minify some parts of their stylesheets has often been overlooked. Performance issues for larger projects, minifying the reset styles (you don’t have to change them anyway!) and non-developer license are just some of the reasons!

Anyway, coming back to the subject of this post – How can you read minified CSS with ease?
(No, we are not going to install any 3rd party software!)

Simply validate the CSS (only the minified part if you have other files attached as well) in question using the W3C’s CSS Validation service!

The output of the validation check is:

1. whether or not, your CSS validates to standards set by W3C.
2. Normal, Properly Formatted and Easily Readable version of your minified / compressed CSS

You need to keep the formatted and decompressed CSS? Just copy it from the validation output and replace your version. Voila!

This means that if you don’t set a margin and padding on your body and xHTML tags, you could get inconsistent results on the page depending upon which browser your users are using to view the page. A simple way to solve this is to set all the margin and padding on the xHTML and body tags to 0:

html, body {
margin: 0px;
padding: 0px;
}

This will keep your design structure in the same place on all browsers.

Borders

You may be thinking “but no browsers have a border around the body element by default”. This is not strictly true. Internet Explorer has a transparent or invisible border around elements. Unless you set the border to 0, that border will mess up your web-page layouts. So add the following to your body and xhtml styles:

html, body {
margin: 0px;
padding: 0px;
border: 0px;
}

Various resources over the web are trying to explain the process of (deep) integrating WordPress and bbPress without any issues, but mostly they are broken or outdated. In this guide, we’ll explain the process of integrating the latest stable versions of both WordPress (2.7.1) and bbPress (0.9.0.4) step by step in a comprehensive way.

Step 1: Downloading the Latest Stable Versions

Download the latest stable version of WordPress from Wordpress.org and the latest version of bbPress from bbPress.org

Step 2: Extracting the files

Extract the WordPress files into the root directory of your web server (or where you want to install it). Create a new database on your host using your phpMyAdmin or host’s cPanel.

Now, create a folder named forums inside the WordPress directory so that it forms a sub-directory of your WordPress website (for example www.YourDomain.com/forums). Now your FTP directory listing should look somewhat like this:

FTP Structure after creating the Forums Folder

Extract the bbPress files into this forums directory.

Step 3: Installing WordPress and bbPress

Now install WordPress by visiting your website URL in your favorite browser (www.YourDomain.com) and Create a Configuration File using the name of the freshly created database and database username and password. You’ll be done through, quite easily.

To install bbPress as your forums software go to www.YourDomain.com/forums. When the installation page appears click on the Let’s Get Started link to begin with the configuration. Enter the same database name, user name and password as you used for your WordPress install. Don’t check the advanced settings. Just save your database configuration settings.

Step 4: Integrating WordPress into bbPress

The next option is basically where the integration process actually starts. Place a check against the add integration settings. Then place a check against the add cookie integration settings. This enables you to use shared logins.

This is also where the complication comes in, in the integration of WordPress 2.7.1 and bbPress 0.9.0.4. Cookie generation and management mechanism in WordPress 2.7.1 is very different from WordPress 2.5. However bbPress still uses the cookies compatible with previous versions of WordPress. We’ll use a plugin as a work around to downgrade the cookies generated by WordPress to sync with bbPress. Follow the steps below.

Step 5: Filling in the WordPress integration details

In WordPress address, enter http://www.YourDomain.com

In Blog address, enter http://www.YourDomain.com

Now go to https://api.wordpress.org/secret-key/1.1/ to generate WordPress Cookie secret keys. They’ll look somewhat like this:

define('AUTH_KEY', '3{=J|rF]CLK3XNzzKc+*Bn@2yeMh#y{c$PqfAgmW*WgPevIOEAi6Gl{b1');
define('SECURE_AUTH_KEY', '-P`&G!_+5|1uu`>8y9!$f;.T<6-Oa');
define('LOGGED_IN_KEY', '3xIsD$9TmGg;FAu.[V,nqb%lE/`N~)h4rE>cO`]@h vkN?`>fA0w;|FFb|_3NW40');
define('NONCE_KEY', '{qBV?O[wCsW5 Y+1^ ].%Y-Mp[0*m`$A@M3:;OHm=>&R*$I4Zlv7^n*+G`ib.#?a');

In your root directory, open the wp-config.php file. Look for 4 lines starting similarly… Replace them with the generated keys. Perform this step carefully.

Now copy the value of 'AUTH_KEY' that is

3{=J|rF]CLK3XNz<DGr|K>zKc+*Bn@2yeMh#y{c$PqfAgmW*WgPevIOEAi6Gl{b1

(whatever is generated for you) and go back to your browser. Paste it into the WordPress Cookie Secret Key field.

Now go to http://www.YourDomain.com/wp-admin/options.php and look for a field named secret. Copy the value of this field and paste it into the next field of bbPress configuration – WordPress Database Secret. Finally place a check mark against the Add user database integration settings. You don’t need to use the advanced settings. Just Save WordPress Integration Settings and proceed to the next step.

Step 6: Finishing bbPress install with Site Settings

Enter the Site Name and Site Address (mostly, it’ll be automatically guessed for you). Select admin in the username drop-down to map it as the Key Master. Type the name for your first forum and save site settings to finish setting up the forums.

Registration – Setting up User Roles

When a user registers on your bbPress forum, your WordPress blog doesn’t know about it (and vice versa). The user will be created, but WordPress won’t know what user role to apply.

In the “WordPress Integration” section of the “Settings” area in your bbPress admin you will find a “User Role Map” where you can set which roles will be applied to users who register on your forums. Users who register on your WordPress blog will have the appropriate role applied to their account when they first login to bbPress.

Setting Up User Roles When Integrating WordPress With bbPress

If you don’t setup a role map, then this will not work. When you do setup a role map (or change it) any users who are missing either role will be updated, but existing roles will not be affected.

Step 7: Modifying the wp-config.php file

Add these lines of code

define('COOKIE_DOMAIN', '');
define('COOKIEPATH', '/');

Just before this line:

// ** MySQL settings - You can get this info from your web host ** //

This would generally be near the top of the wp-config.php file at around lines 16 to 18.

Step 8: Modifying the bb-config.php file

Create a new blank file path.php and insert the following lines of code into it:

<?php
$p = getcwd();
echo $p;
?>

Upload it into your root directory and access it from your browser at www.YourDomain.com/path.php. It would show you the absolute path to your website and would be something like this: /home/xyz/public_html/sitename/

Copy this path as we will paste this in the bb-config.php file.

In the forums directory, edit the bb-config.php file and insert these lines of code in line 2 immediately after the opening PHP tag ( <?php )

if ( !defined('ABSPATH') & !defined('XMLRPC_REQUEST')) {
define('WP_USE_THEMES', false);
include_once( 'PASTE ABSOLUTE PATH HERE/wp-blog-header.php' );
header("HTTP/1.1 200 OK");
header("Status: 200 All rosy");
}

Then, near the bottom of the file – add these 2 lines of code just before the /* Stop editing */ line

$bb->custom_user_table = 'wp_users';
$bb->custom_user_meta_table = 'wp_usermeta';

Save your bb-config.php file and exit.

Step 9: Installing a magical plugin

Ann Oyama developed a WordPress plugin that enables WordPress to generate cookies that work with bbPress 0.9 so that a single shared sign in can be accomplished between the two! Download this plugin at WordPress.org

Basically the cookies generated by the latest version of WordPress are downgraded to the cookies generated by previous versions of WordPress. Upload the plugin to wp-content\plugins\ and activate it from your WordPress admin dashboard.

After you activate the plugin, you’ll be asked to log in again into your WordPress admin dashboard. Instead of logging in once again – type

www.YourDomain.com/wp-login.php?action=logout

When you’re logged out, clear your browser’s cache and cookies. Restart your browser.

Step 10: There’s no step 10. Bingo!

You’ve successfully deep integrated your WordPress 2.7.1 with bbPress 0.9.0.4. You can now use WordPress template tags in your bbPress theme and style it similar to your WordPress theme… and you’ve a single sign-on shared login set up and running! I hope you find this guide helpful. If you face any problems, feel free to drop us a comment. We’ll try our level best to help you out.

This quote by Alexander Fleming explains all what I am going to share with you today. I am pretty sure that you are aware of Google Search Suggest and Yahoo Search Assist feature. This feature helps you effortlessly find exactly what you’re looking for. No doubt, it lists a few suggestions to keep the user looking for more and more.

As you type something in the search box, it automatically offers search terms and phrases in real time. How nice will it be to have the same feature on your website or blog. In this post, I am going to explain an easy way to add search suggestion feature on your WordPress blog or website.

Things You’ll Need

jQuery: You can download the lates version from jQuery.com
Autocomplete Plugin: Download this plug-in by Jörn Zaefferer from http://bassistance.de

Now let’s play with some code

Include this code within <head>..</head> tag.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.pack.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.autocomplete.css" media="screen" />

Here I am assuming you are using “js” folder to keep all your java scripts and supported files. You may need to update the location of these files based on your folder setup.

Here’s the actual jQuery code to enable this feature on an input box:

<script type="text/javascript">
var data = "Search Terms Separated With Spaces".split(" ");
$("#myInputBox").autocomplete(data);
</script>

Variable “data” hold the terms that you would like the user to see in the search suggestion list and $(“#myInputBox”) is the id of the search input box.

Let’s check out how we can automatically call WordPress tags in our search suggestions, using WordPress wpdb class:

<?php
global $wpdb;
$search_tags = $wpdb->get_results('SELECT name FROM $wpdb->terms');
foreach ($search_tags as $mytag){
echo $mytag->name. ' ';
}
?>

Here I am using WordPress wpdb class to fetch all tags assigned to the posts.

Here’s the complete code to enable this feature on your WordPress blog. Just replace the folder name with actual folder and the jQuery selector $(“#myInputBox”) with the actual id of search input box.

<script type="text/javascript" src="<?PHP bloginfo('template_url'); ?>/REPLACE_THIS_WITH_THE_ACTUAL_FOLDER/jquery.autocomplete.pack.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/REPLACE_THIS_WITH_THE_ACTUAL_FOLDER/jquery.autocomplete.css" media="screen" />

<script type="text/javascript">
$(document).ready(function(){
var data = '<?php global $wpdb; $search_tags = $wpdb->get_results("SELECT name FROM $wpdb->terms"); foreach ($search_tags as $mytag){ echo $mytag->name. " "; } ?>'.split(" ");
$("#ID_OF_SEARCH_INPUT_BOX").autocomplete(data);
})
</script>

Download this file which contains the above mentioned code.

If you face any issues or need help implementing this code on your blog, feel free to post your queries in our forum. Don’t forget to add your inputs in the comments section below.

How to create a loading bar

Recently, while browsing I landed on a page on StackOverflow.com where people were discussing about how I implemented this loading bar on CSSJockey.com. I could sense a lot of confusion in the discussion so thought I would take the mystery out as I love to share best practices. Here’s how you can create a loading bar in few steps..

Things You’ll Need

1. A nice loading image: If you are good in creating animated GIF images that’s nice, otherwise you can create a loading image with this cool Ajax Loading Gif Generator.
2. jQuery: We are creating this loading bar using jQuery so download jQuery latest version here.

jQuery Code within <head>..</head> tags

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(window).load(function(){
      $("#loading").hide();
})
</script>

HTML Code within <body>..</body>tags

<div id="loading">
Loading content, please wait..
<img src="loading.gif" alt="loading.." />
</div>

Make sure you add this code just below the starting <body> tag so it should be downloaded first.

CSS Code for loading DIV

#loading {
    position:absolute;
    width:300px;
    top:0px;
    left:50%;
    margin-left:-150px;
    text-align:center;
    padding:7px 0 0 0;
    font:bold 11px Arial, Helvetica, sans-serif;
}

Use your imagination and create something nice & unique.

View Demo | Download Source Code

Your comment, suggestion and feedback is highly appreciated.

There’s more to come to stay tuned…

Pinging Site Update Services

As this Wordpress Codex page explains,

Update Services are tools you can use to let other people know you’ve updated your blog. Wordpress automatically notifies popular Update Services that you’ve updated your blog by sending a XML-RPC ping each time you create or update a post. In turn, Update Services process the ping and updates their proprietary indices with your update. Now people browsing sites like Technorati or Sphere can find your most recent posts!

There are several site update services up and running which you can add in WP-admin >> Settings >> Writing, in the update services section. Add one service URI per line. Once you update your Wordpress website with a new post or new page, these services will automatically be pinged. Then these pings are processed and associated indices (plural of index) are updated with your update.

You can have a list of active update services from this Wordpress Codex page and copy them into your update services section (WP-admin >> Settings >> Writing). As easy as that!

Tuning your website’s permalink structure

Having title of the post or keywords from the post in the URI of your web page is obviously better than having numbers, question marks and other symbols. Not only humans can identify the subject of the page from its URI but search engines also find it easier to identify and assort web pages in this manner. A link like this: http://www.cssjockey.com/seo/search-engine-optimization-google-juice-hard-to-get-but-tasty-to-drink tells you and Google bots clearly what the page is going to be about. However the WordPress default, which for the same page is http://www.cssjockey.com/blog/?p=469 (click to see that it’s actually the same!), which is not at all intuitive.

You can easily figure it out that if you are Google’ing from a specific keyword then obviously the results will list URI with these keywords in the link higher than the URI containing numbers and/or symbols.

Note that this tip is very effective for static websites as well. Always name and link your website and web pages with the title of the page, or keywords relating to the subject of the page instead of serial numbers.

Customizing permalinks in Wordpress

You can learn further more about what permalinks are and how to use them on Using Permalinks page of Wordpress Codex. The Wordpress default link structure, also known as Ugly permalinks structure is the least SEO friendly link structure. However changing your permalinks is easy.

On CSS Jockey and my other websites, I am using /%category%/%postname% structure which has remained pretty fruitful for me. You can optimize your own links by following these steps:

1. Login to Wordpress Admin Area
2. Open the Settings Menu and Click Permalinks
3. Click Custom Structure and customize the link structure.

Refer to the Using Permalinks page to see various tags that you can use.

Please note that websites hosted on Windows based hosts (Microsoft IIS Servers) experience issues setting up SEO friendly pretty permalinks. So in case you’re on such a one, stick to the ugly or almost pretty permalinks to avoid issues, or migrate to a Linux based host.

Pinging maximum number of Site Update Services and tuning your link structure play a good deal to get you listed in Google search results or other search engines in less than 30 minutes! Try implementing these magic tricks on your website and let me know how well did they work out for you.

And for the next part in this series, we are going to discuss how to use various social networks to promote our websites and blogs. We’ll talk about what all services you can use and how they are important for you and your website. Till then, see you.