2009 January | Learning Is Fun

JavaScript: Div & Element hide & show cross-browser script solution

January17

Hello Guys,

Today I was working in a project where I had to add element hide and show depending on the condition. For example, if the client wants to contact by phone, the phone DIV element or area appears. If not, the phone DIV element hide quickly. I was writing scripts for this. But to my surprise, I noticed that none of them are cross-browser supporting. When one scripting working in few browsers, the same script is not working in other browsers. So, I struggled to come up with the cross-browser solution and at last, I succeeded. You can use this code in your form whenever you need to show and hide elements dynamically in JavaScript. This script is a kind of Contact Us form.

So, what am I gonna do? I am going to share my small script so that you can save your time I you find my this article by Google search or any other search.

OK!
No more introduction. Let us start.

Download:

I suggest you first download the script and take a look.
http://www.tanzilo.com/demo/code/hide_show/hide_show.zip

Features:

It is a totally CSS-based and table-less scripting
I have used phpMailer version 2.3 and it works for PHP 5 and/or 6 version
JavaScript used as you already know

CSS Code:

{code type=CSS}

{/code}

HTML Code:

{code type=HTML}

Name:

Email:

Best method to contact you:

Phone No:

Will this server host a vBulletin site?

Forum Link:

Current size of database:

Average concurrent users:

Do you currently have a dedicated server?

Current Provider:

Current Server Specs:

Are there any specs you must have with your new server
or additional notes you would like us to consider?

Time frame to purchase

Do you have a budget we need to consider?

Anti Spam Question: How much is: 5+5+3=?

{/code}

JavaScript Code:

{code type=JavaScript}

function displayContactMethod()
{
var id = ‘phone’;
var contatMethod = document.contact_form.contact_method.value;

if(contatMethod == “Phone”)
{
displayDiv(‘phoneNoDiv’)
}
else
{
hideDiv(‘phoneNoDiv’);
document.contact_form.phone.value = ”;
}
}

function initialHiddenDivs()
{
var divID_1 = ‘phoneNoDiv’;
var divID_2 = ‘formRowForum’;
var divID_3 = ‘formRowDatabase’;
var divID_4 = ‘formRowUsers’;
var divID_5 = ‘formRowProvider’;
var divID_6 = ‘formRowCurrentSpecs’;

hideDiv(divID_1);
hideDiv(divID_2);
hideDiv(divID_3);
hideDiv(divID_4);
hideDiv(divID_5);
hideDiv(divID_6);
}
function hideDiv(id)
{
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = ‘none’;
}
else {
if (document.layers) { // Netscape 4
document.id.display = ‘none’;
}
else { // IE 4
document.all.id.style.display = ‘none’;
}
}
}

function controlServerHostOptions()
{
var host_vb = document.contact_form.host_vb.value;

if(host_vb == “Yes”)
{
displayDiv(‘formRowForum’);
displayDiv(‘formRowDatabase’);
displayDiv(‘formRowUsers’);
}
else
{
hideDiv(‘formRowForum’);
hideDiv(‘formRowDatabase’);
hideDiv(‘formRowUsers’);
document.contact_form.forum_link.value = ”;
document.contact_form.size.value = ”;
document.contact_form.users.value = ”;
}
}

function controlCurrentHostOptions()
{
var server = document.contact_form.server.value;

if(server == “Yes”)
{
displayDiv(‘formRowProvider’);
displayDiv(‘formRowCurrentSpecs’);
}
else
{
hideDiv(‘formRowProvider’);
hideDiv(‘formRowCurrentSpecs’);
document.contact_form.current_provider.value = ”;
document.contact_form.current_specs.value = ”;
}
}

{/code}

PHP Code:

{code type=PHP}

if($_POST)
{

$name = trim($_POST['name']);
$email = trim($_POST['email']);
$contact_method = trim($_POST['contact_method']);
$phone = trim($_POST['phone']);
$host_vb = trim($_POST['host_vb']);
$forum_link = trim($_POST['forum_link']);
$size = trim($_POST['size']);
$users = trim($_POST['users']);
$server = trim($_POST['server']);
$current_provider = trim($_POST['current_provider']);
$current_specs = trim($_POST['current_specs']);
$specs = trim($_POST['specs']);
$time = trim($_POST['time']);
$budget = trim($_POST['budget']);
$total = trim($_POST['total']);

$_SESSION['name'] = $name;
$_SESSION['email'] = $email;
$_SESSION['contact_method'] = $contact_method;
$_SESSION['phone'] = $phone;
$_SESSION['host_vb'] = $host_vb;
$_SESSION['forum_link'] = $forum_link;
$_SESSION['size'] = $size;
$_SESSION['users'] = $users;
$_SESSION['server'] = $server;
$_SESSION['current_provider'] = $current_provider;
$_SESSION['current_specs'] = $current_specs;
$_SESSION['specs'] = $specs;
$_SESSION['time'] = $time;
$_SESSION['budget'] = $budget;

if($total != 13)
{
echo '

Anti Spam Question is wrong!
Please sum up and type the current result of: 5+5+3=?

‘;
}
else
{

$emailBody = ”;
if(!empty($name))
{
$emailBody .= ‘Name : ‘ . $name . chr(10);
}
if(!empty($email))
{
$emailBody .= ‘Email : ‘ . $email . chr(10);
}
if(!empty($contact_method))
{
$emailBody .= ‘Best method to contact you : ‘ . $contact_method . chr(10);
}
if(!empty($phone))
{
$emailBody .= ‘Phone : ‘ . $phone . chr(10);
}
if(!empty($host_vb))
{
$emailBody .= ‘Will this server host a vBulletin site? : ‘ . $host_vb . chr(10);
}
if(!empty($forum_link))
{
$emailBody .= ‘Forum Link : ‘ . $forum_link . chr(10);
}
if(!empty($size))
{
$emailBody .= ‘Current size of database : ‘ . $size . chr(10);
}
if(!empty($users))
{
$emailBody .= ‘Average concurrent users : ‘ . $users . chr(10);
}
if(!empty($server))
{
$emailBody .= ‘Do you currently have a dedicated server? : ‘ . $server . chr(10);
}
if(!empty($current_provider))
{
$emailBody .= ‘Current Provider : ‘ . $current_provider . chr(10);
}
if(!empty($current_specs))
{
$emailBody .= ‘Current Server Specs : ‘ . $current_specs . chr(10);
}
if(!empty($specs))
{
$emailBody .= ‘Are there any specs you must have with your
new server or additional notes you would
like us to consider? : ‘ . $specs . chr(10);
}
if(!empty($time))
{
$emailBody .= ‘Time frame to purchase : ‘ . $time . chr(10);
}
if(!empty($budget))
{
$emailBody .= ‘Do you have a budget we need to consider? : ‘ . $budget . chr(10);
}

include_once(‘php5Mailer/class.phpmailer.php’);

$mail = new PHPMailer();

$body = $emailBody;
$body = eregi_replace(“[\]“,”,$body);
$subject = eregi_replace(“[\]“,”,$subject);

$mail->From = $email;
$mail->FromName = $name;

$mail->Subject = “New Email from $name ($email)”;

// optional, comment out and test
$mail->AltBody = “To view the message, please use an HTML compatible email viewer!”;

$mail->Body = nl2br($body);

$mail->AddAddress(“todd@urljet.com”, “Todd”);
$mail->IsHTML(true);

if(!$mail->Send())
{
echo ‘

Failed to send mail

‘;
}
else
{
echo ‘

Mail sent

‘;
$_SESSION['name'] = ”;
$_SESSION['email'] = ”;
$_SESSION['contact_method'] = ”;
$_SESSION['phone'] = ”;
$_SESSION['host_vb'] = ”;
$_SESSION['forum_link'] = ”;
$_SESSION['size'] = ”;
$_SESSION['users'] = ”;
$_SESSION['server'] = ”;
$_SESSION['current_provider'] = ”;
$_SESSION['current_specs'] = ”;
$_SESSION['specs'] = ”;
$_SESSION['time'] = ”;
$_SESSION['budget'] = ”;
}

}

?>
{/code}

Once again I would like to remind you that you first download this small script from the above download link and take a look at the whole script.

That is all for now, Dude!

Thank you for reading.

posted under JavaScript, PHP | 4 Comments »

WordPress: adding a custom option box and developing file upload plugin

January15

Hello Buddy,

One of my clients wanted to show thumbnail photo beside the post text as below. So, I had to make a plugin so that the admin can post the thumbnail when he is writing the post or can edit when editing the post. Take a look at the thumbnail’s position below.

Thus, recently I solved a plugin problem in one of my wordpress works although it was small. You know you may sometimes need to add a custom field in your wordpress posting/writing/editing area. To check what I am saying, take a look at the following image:

Adding such a box is extremely easy using the wordpress’s builtin add_meta function. But does file upload works i.e. if you upload the file, will it work? The answer is straight – “NO”. But why? The reason is also simple. If you want to upload a file, your form should have “enctype=”multipart/form-data” in the form opening such as

{code type=HTML}

{/code}

But the problem is – if you open the source code of text editor tool as following,

you will see that it does not have “enctype=”multipart/form-data” unfortunately. It looks exactly like this in my wordpress 2.7 version if I open the wp-admin/edit-form-advanced.php file at line # 520.

{code type=HTML}

{/code}

Not funny? Huh?

So, to cope up with this situation, I had to add “enctype=”multipart/form-data” in the form although I do not like changing the core files. Why do not I like to change the core files? The answer simple. Because whenever there is an update, the client have to update the file everytime. The client may not like it or may even forget it. Anyway, after change, it looks like this:

{code type=HTML}

{/code}

OK. Lemme show you step by step what to do if you want to add a file upload plugin.

Step One: Change the “wp-admin/edit-form-advanced.php” file

Open this file from the mentioned location and change the following line in the file:

{code type=HTML}

{/code}

to this line:

{code type=HTML}

{/code}

Step Two: Write you plugin

Here goes mine:

{code type=PHP}

/*
Plugin Name: Bag Thumbnail
Plugin URI: http://www.tanzilo.com/
Description: This plugin helps you to set thumbnail image of your bags.
Author: Tanzil Al Gazmir
Version: 1.0
Author URI: http://www.tanzilo.com/
*/

function init_bag_review_thumb_widget()
{

global $wpdb;

$result = mysql_list_tables(DB_NAME);
$current_table = array();
while($row = mysql_fetch_row($result))
{
$current_tables[] = $row[0];
}
$myNewDatabaseTable = $wpdb->prefix . ‘bag_thumb’;
if(!in_array($myNewDatabaseTable, $current_tables))
{

mysql_query(”
CREATE TABLE IF NOT EXISTS `” . $myNewDatabaseTable . “` (
`id` int(11) NOT NULL auto_increment,
`post_id` int(11) NOT NULL,
`image_name` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
);
“);
}

/*
// Now I am going to delete all unnecessary thumb images by scanning the
// whole directory
*/
$sqlQuery = “SELECT image_name FROM ” .$wpdb->prefix . “bag_thumb; “;
$fileArray = $wpdb->get_col($sqlQuery);
$fileArray[] = ‘no_thumb.jpg’;

if ($handle = opendir(‘../bag_thumb/’))
{

// This is the correct way to loop over the directory.
while (false !== ($file = readdir($handle)))
{
if(is_file(‘../bag_thumb/’ . $file))
{
if(!in_array($file, $fileArray))
{
unlink(‘../bag_thumb/’ . $file);
}
}
}

closedir($handle);
}

}

// This function tells WP to add a new “meta box”
function add_bag_photo_box()
{

add_meta_box(

‘bag_photo’, // id of the

we’ll add
‘Add Bag Thumbnail Photo’, //title
‘add_bag_photo’, // callback function that will echo the box content
‘post’, // where to add the box: on “post”, “page”, or “link” page
‘normal’,
‘high’

);
}

// This function echoes the content of our meta box
function add_bag_photo()
{
echo
‘ Select a thumbnail (150px by 100px) photo for this bag

‘;
}

function bag_thumbnail_plugin_save_postdata()
{
$fileArray = array();
global $wpdb;

$file = $_FILES['bag_thumbnail_photo'];
$fileName = $_FILES['bag_thumbnail_photo']['name'];
$basename = ”;

if(!empty($fileName))
{
if(isAllowedExtension($_FILES['bag_thumbnail_photo']['name']))
{

$postID = $_POST['post_ID'];

# Do uploading here
$basename = basename( $_FILES['bag_thumbnail_photo']['name']);
$basename = str_replace(‘ ‘, ‘_’, $basename);
$basename = str_replace(‘-’, ‘_’, $basename);
$basename = strtolower($basename);
$basename = $_POST['post_ID'] . ‘_’ . $basename;
$target_path = ‘../bag_thumb/’;
$target_path = $target_path . $basename;

$sqlQuery = “DELETE FROM ” . $wpdb->prefix . “bag_thumb WHERE post_id=$postID;”;
$wpdb->query($sqlQuery);

move_uploaded_file($_FILES['bag_thumbnail_photo']['tmp_name'], $target_path);

// adding record in the database
$sqlQuery = “INSERT INTO ” .
$wpdb->prefix . “bag_thumb(post_id, image_name)
VALUES($postID, ‘$basename’)”;
$wpdb->query($sqlQuery);
}

}

function isAllowedExtension($fileName)
{
$allowedExtensions = array(“png”, “gif”, “jpg”, ‘jpeg’);
return in_array(end(explode(“.”, $fileName)), $allowedExtensions);
}

// This starts whenever the plugin is loaded
add_action(“plugins_loaded”, “init_bag_review_thumb_widget”);

// Hook things in, late enough so that add_meta_box() is defined
if (is_admin())
{
/* Use the admin_menu action to define the custom boxes */
add_action(‘admin_menu’, ‘add_bag_photo_box’);
}

/* Use the save_post action to do something with the data entered */
add_action(‘save_post’, ‘bag_thumbnail_plugin_save_postdata’);

?>
{/code}

Please notice that I dynamically delete any unnecessary file using the PHP’s unlink() function.

Step Three: get your image name from the database

I have placed the following code in my functions.php file.

{code type=PHP}

if(!function_exists('getBagThumbName'))
{
function getBagThumbName($postID)
{
global $wpdb;
$sqlQuery = 'SELECT image_name FROM ' . $wpdb->prefix . ‘bag_thumb WHERE post_id=’ . $postID . ‘;’;
$fileName = $wpdb->get_var($sqlQuery);
$fileName = trim($fileName);
$fileURL = get_option(‘siteurl’) . ‘/bag_thumb/’ . $fileName;
if(!empty($fileName))
{
return $fileURL;
}
else
{
return (get_option(‘siteurl’) . ‘/bag_thumb/no_thumb.jpg’);
}
}
}

?>
{/code}

Step Four: Link with the index.php or single.php or wherever you want

See how I placed the thumbnail image source in the code of index.php and single.php file.

{code type=PHP}

Step Five: Test

Now you need to test and we are done!

You can also download my little plugin if you want from here:
http://www.tanzilo.com/demo/code/bag-thumb/bag-thumb.zip

Thank you for reading.

posted under PHP, Wordpress | 31 Comments »

WordPress: display posts by category ID. Solution with code & example.

January6

Hello Guy!

Often in many blogging sites, you will see two or three columns of the most important categories. Recently I had to do this for a blog. It was a little bit cumbersome and time consuming. So, I would like to share the solution so that you can kill the time waste trying yourself in case you do not know how to do it. In this solution, I show 5 posts at maximum from my chosen three categories.

OK.
Let us start and let me show how to do it.

Step One: See the sample what would be the output

In the above image, you will notice that the first category has enough posts, so it can fetch 5 (five) posts for us. But in second column and third column, there are only three posts because those categories do not have more than three posts. And what I want to say at this point is – although we will try to get 5 posts from each category, we will not get enough in case that category has less than 5 (five) posts and this is done automatically.

Step Two: Adding custom function

{code type=PHP}

if(!function_exists('postListByCategory'))
{
function categoryNameByCategoryID($categoryID = 0)
{
global $wpdb;
$sqlQuery = 'SELECT name FROM ' . $wpdb->prefix . “terms WHERE term_id=$categoryID”;
return $wpdb->get_var($sqlQuery);
}
}

if(!function_exists(‘postListByCategory’))
{
function postListByCategoryID($categoryID = 0)
{
$outputString = ”;
query_posts(‘orderby=name&order=asc&cat=’ . $categoryID . ‘&showposts=5′);
$outputString .= ‘

‘ . chr(10);
$outputString .= ‘‘ . get_the_title($post->ID) . ‘
‘ . chr(10);
$outputString .= ‘‘ . get_the_time(‘D M jS Y’) .’‘ . chr(10);
$outputString .= ‘

‘ . chr(10);
}
endwhile;
$outputString .= ‘

‘ . chr(10);
return $outputString;
}
}

?>
{/code}

Now open the functions.php file inside your theme directory and insert these two functions. If there is none, create a functions.php file. And at this point, please remember that all the functions and coding in this file are automatically added during the code execution.

Note that the function names are self descriptive.

Step Three: Embed code in your file(s)

Now open your footer.php file or any other file and add this code. In 99% cases, you may need to customize this small piece of code. The first three lines are category IDs.

{code type=PHP}

$firstColumnCategoryID = 1;
$secondColumnCategoryID = 30;
$thirdColumnCategoryID = 31;

{/code}

Step Four: Link your CSS code

{code type=CSS}
#bottomThreeColumns
{
width:940px; min-height:100px; margin:0 auto; clear:both;
}
#bottomThreeColumns UL
{
margin:0px 0px 30px 0px; padding:0px;
}
#bottomThreeColumns LI
{
list-style:none; border-bottom:#EEEEEE solid 1px; margin:7px 0px 0px 4px;
}
#bottomThreeColumns LI A
{
text-decoration:none; color:#000000;
}
#bottomThreeColumns LI A:hover
{
text-decoration:underline;
}
#bottomThreeColumns SMALL
{
font-style:italic; line-height:25px; padding:0px 0px 0px 4px;
}
#bottomColumn
{
float:left; width:300px; margin:20px 20px 0px 0px;
}
#bottomColumnThird
{
float:left; width:300px; margin:20px 0px 0px 0px;
}
#bottomColumnTop
{
width:300px; height:26px; background:#5FB8EB; color:#FFFFFF;
line-height:25px; font-weight:bold;
}
{/code}

I have put the above CSS code in my style.css file. In 99% cases, you may need to customize according to your requirements.

Step Five: Test everything by opening the link

Now test you code and we are done!

Thank you for reading.

posted under PHP, Wordpress | 9 Comments »

PHP: Convert number & currency to text in asian i.e. Bangladeshi, Indian format
9:45 am, January 28, 2011

JavaScript: Div & Element hide & show cross-browser script solution
4:17 pm, January 17, 2009

WordPress: adding a custom option box and developing file upload plugin
11:54 am, January 15, 2009

WordPress: display posts by category ID. Solution with code & example.
1:26 pm, January 6, 2009

PHP: Serialization & Unserialization explanation, code & example
7:00 am, December 31, 2008

PHP & MySQL: Creating a website in your local language smoothly
6:04 am, December 29, 2008

PHP & MySQL: Unicode number add, subtract etc for any language
12:22 pm, December 23, 2008

WordPress: get page id and content with example & code
10:44 am, December 19, 2008

WordPress: Custom URL rewrite and reading URL values
2:48 pm, December 17, 2008

WordPress: Upload many PHP files quickly by Zip & Unzip
3:29 pm, December 15, 2008

Hello,

I am actually a website designer and programmer from Dhaka, Bangladesh. I completed my B.Sc. in Computer Science degree in 2006 from North South University. But before that I have been working as a free-lance website designer and software programmer for the last three years. Besides, I finished my MBA from the same university in December 2009. I use HTML, CSS, PHP, JavaScript etc. for the front-end design and MySQL & SQL Server for the backend (i.e. database) design. I also use AJAX and XML.

I love learning. Because Learning is Fun.

I opened my own blogging site (this one!) after writing some posts in WordPress.com. Actually I am planning to write articles on technologies, specially web technology. Often I am learning new things and I believe that sharing these knowledge will be a part of my education. I have learned a lot from others’ articles and used open source codes & projects many times before. I think this is a great time to join the queue. I believe writing articles will also increase the dimensions of my knowledge since I have think a lot, read a lot, edit a lot before I deliver the final article.

Nowadays I am working in some freelancing sites like http://www.RentACoder.com

That is all about me and my reason to come here.

Click here to contact me.

Thanks for reading my profile.

Be Sociable, Share!

Smashing Magazine RSS