Few times back, sNare asked me how do display wordpress like overlay box where you can pass the variables when you click on the link and manipulate simultaneous actions in the overlay until user choose to close it. Today, I’ve come up with the solution of this with model upload overlay box using thickbox, a jquery plugin. I’ve used the Iframe content of thickbox while displaying the box as modal box.

LIVE DEMO

How to use the thickbox as modal overlay box?

Let’s look at the step by step to use thickbox for passing variables.

First of all, we have to include jQuery JavaScript Library to our page,

<script type="text/javascript" src="jquery.js"></script>

After this, include the thickbox plugin of jQuery,

<script type="text/javascript" src="thickbox-compressed.js"></script>

There is a CSS for using thickbox which also need to linked to the current page,

<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />

Now, let’s look at the anchor tag which passes the variables to overlay box and keep the overlay at top no matter how many simultaneous accesses occur in the box.

<a href="file_upload.php?post_id=5&TB_iframe=true&height=200&width=300&modal=true" class="thickbox" ><strong>Upload Files</strong></a>

If you want to know how to use the thickbox, then you can checkout their home page which contains good documentation. The main point is, class=’thickbox’ must be used for the displaying the content in overlay.

How to pass variables to overlay box (thickbox)?

If you look at the href attribute of anchor tag, you can see clearly that I’ve passed post_id variable with value 5 to file_upload.php, which can be easily fetched from PHP using $_GET['post_id'].

How to make overlay box stay opened on simultaneous access?

Now this is part which many people has asked me how to do it. To use thickbox in this fashion, you’ve to use it in iframe content mode.The following property of thickbox make it remained open on simultaneous access,

TB_iframe=true

Furthermore, We’ve used the following property to display the overlay box as modal box.

modal=true

DOWNLOAD SOURCE CODE

Today, I would like to tell you how to handle character set problem which occurs during the data fetched from PHP using Ajax mainly on the western characters(European charset).Lots of people asked me about this problem where these European charset is displayed in unreadable format after fetching it from ajax.

Problem with European Charset with Ajax and PHP

Suppose that I’ve the following code in PHP file, which output the string which contain the european characters.

<?php
  $str="€-accentuée";
  echo $str;
?>

Now, let’s use the Ajax from JavaScript using Jquery Code to fetch the data from PHP.

<script type="text/javascript">
$(function()
{
  $('#charsetdiv').load("test2.php");
});
</script>
<div id="charsetdiv"></div>

If you’ve not used jQuery then you might be wondering about the ajax code, you can check the benefits of jquery from this post and download free ebook of jQuery.

After getting value from Ajax, the division with id “charsetdiv”, let’s look at the output.

?-accentu?e

Solving western Character Set problem with Ajax and PHP

The above problem is occurred because of not defining proper charset to these European characters. We can solve this problem by sending the header which define the appropriate Character Set for these characters.Let’s see, how I solve this problem just adding the header which define the charset Windows-1256 – which support Arabic as well as European characters.

<?php
  header("Content-Type: text/html; charset=Windows-1256\n");
  $str="€-accentuée";
  echo $str;
?>

After adding that header in PHP, you’ll get the appropriate european characters in your Ajax enabled application.

The problem of precision lost in floating point number in PHP haunted me for about 10 minutes yesterday but I quickly figured out the problem and solved it as I was aware of this problem. But, I would like to post here it here so that many others PHP programmers, who are not aware with this kind of problem ,get solution easily and don’t get stuck with it.

Calculation problem floating Point number in PHP

First of all, let me show you a small piece of example of the PHP code which I was working on.

$no_of_time=(0.60-0.55)*100;
var_dump($no_of_time); //displays float(5)
for($i=1;$i<=$no_of_time;$i++)
{
   echo $i;
}

In the above code,  the line var_dump($no_of_time); displays float(5). Ok, this is a expected result. But what about the loop, which runs just for 4 time. The above loop runs just for four time although var_dump () outputs that it is 5. Yes, it is 5 but with lost precision and that why never ever trust on the regular arithematic calculation with the floating point numbers in PHP. It always gives the wrong result because of the problem of lost precision. You can also see this warning in the PHP’s website.

Solving the problem of floating point precision in PHP

To solve this problem in floating point number, you need the function which calculates and support the calculation of floating point number of any precision. And, I recommend you to use BC Math functions, the binary calculator, of PHP for calculations  of floating point number to prevent yourself from the problem of precision lost. But note down that, these functions always returns calculated output as string.Now, let’s try to solve the problem of above code rewrite it using bcsub and bcmul functions of PHP.

$no_of_time=bcmul(bcsub(0.60,0.55,2),100);
var_dump($no_of_time); //display string(1) "5"
for($i=1;$i<=$no_of_time;$i++)
{
   echo $i;
}

Now the above, loop runs 5 times without any problem.

In this post, I’ll show you how can you download the multiples files in a zip archive using PHP. I’ve made a function in PHP where you’ve to pass the parameters the array of files to be zipped, the second parameter is file name as which zip archive file has to be downloaded and finally the path of files where files to be zipped are located.(assuming that they are all in same folder)

PHP function to download mutiple files in a zip archive

//function to zip and force download the files using PHP
function zipFilesAndDownload($file_names,$archive_file_name,$file_path)
{
  //create the object
  $zip = new ZipArchive();
  //create the file and throw the error if unsuccessful
  if ($zip->open($archive_file_name, ZIPARCHIVE::CREATE )!==TRUE) {
    exit("cannot open <$archive_file_name>\n");
  }

  //add each files of $file_name array to archive
  foreach($file_names as $files)
  {
    $zip->addFile($file_path.$files,$files);
  }
  $zip->close();

  //then send the headers to foce download the zip file
  header("Content-type: application/zip");
  header("Content-Disposition: attachment; filename=$archive_file_name");
  header("Pragma: no-cache");
  header("Expires: 0");
  readfile("$archive_file_name");
  exit;
}

Download Source code

In the above PHP function, first of all the object of ZipArchive class. Remember that this library is bundled in PHP after the version of PHP 5.2 only.If you’re using the PHP version older than that one then you’ve to get it from PECL extension.

After that, we’ve tried to create the zip arhive with the open() function using the ZIPARCHIVE::CREATE flag.After successfully creating the archive, each files whose names are passed as array are added to zip file using addFile() function of ZipArchive() class.Then, this zip archive is closed using close() function of same class.

And, finally different headers are passed through PHP to force download the newly created zip file.

Example of Using Above PHP function

  $file_names=array('test.php','test1.txt');
  $archive_file_name='zipped.zip';
  $file_path=dirname(__FILE__).'/';
  zipFilesAndDownload($file_names,$archive_file_name,$file_path);

The above PHP function call is straighforward and after calling that function you’ll get the zip archive containing mutiple files passed as array in the first parameter of the function.

Today, I would like to share the way of handling array of HTML FORM elements using JavaScript and PHP.Well, it’s very easy to get the data from the array of HTML form elements in PHP and using them but in JavaScript it’s a bit tricky to handle the array of HTML form elements. I had a hard time to handle them via JavaScript in past thats why I’m posting it here so that people will not have hard time to cope with array of form elements in JavaScript and PHP.

Array of HTML form elements

You can create the array of Form Elements for grouping the similar kind of object or data. The array of elements are very useful in the context where you don’t know how many similar kind of data user have to enter. For example, you have a form where user have to enter his education qualification then you might not know how many of the textboxes are required for a person and in such kind situation you can dynamically generate array of the elements in the form for entering such kind of information.

<input name="education[]" type="text" size="20" maxlength="40" />
<input name="education[]" type="text" size="20" maxlength="40" />
<input name="education[]" type="text" size="20" maxlength="40" />

As you can in the above code, there are array element of textbox defined with the name “education”.Now, let’s see how can we handle them via JavaScript and PHP.

How to handle array of HTML form elements using PHP

If you submit the the the form with the above the array of elements then you can assess it via array of $_POST['education'] in PHP. You can use foreach() loop to access the value of the value of these form elements via PHP.

foreach($_POST['education'] as $key=>$value)
 echo $key.' '.$value;

Normally, posted variable are contained within the POST array but when you post the array of Form Elements then at that time the values are contained within the array of array i.e within $_POST['education'] in above exmaple.

How to handle array of Form elements using JavaScript

Handling the array of Form element part is a bit tricky. Now, let try to access the values of the above elements using JavaScript. First, let’s store the above object in a JavaScript variable

var mutli_education = document.form_name.elements["education[]"];

After storing the object in the variable, we can access the individual variables in the following way in JavaScript

for(i=0;i<mutli_education.length;i++)
{
 alert(mutli_education[i].value);
}

As you can see, you can get how many elements are there in the array using the lengh property and you can use the value property to get the value of the indivisual element.

Today, I’ve come along with another post where you’ll see how to move a object within web page when you scroll the mouse wheel using JavaScript.In this example, when you move the mouse wheel the object i.e div moves upwards or downwards depending upon the scrolling direction the mouse wheel. Now, let’s look at the detail of this tutorial in JavaScript.

View Live Demo

HTML and CSS for object to be scrolled on mouse wheel movement

<div id="object">This block moves as you move mouse wheel.</div>

As you can see above code, the object which is going to be moved is placed in the division with id object. For the above division, I’ve defined style and you can see the CSS code below. Remember that ,you can change the below CSS code according to your need but remember that the position should be absolute.

#object {
font-weight:bold;
background:yellow;
padding:5px;
width:300px;
position:absolute;
left:500px;
top:200px;
}

JavaScript code for handling mouse scroll event.

window.onload = function()
{
  //adding the event listerner for Mozilla
  if(window.addEventListener) document.addEventListener('DOMMouseScroll', moveObject, false);
  //for IE/OPERA etc
  document.onmousewheel = moveObject;
}

First of all, we need to attach the mouse wheen scroll event to the document.As you can see in the first line of above function, event listner “moveObject” is added to the mouse scroll event in the document for Mozilla browsers and in the second line event handler “moveObject” is called for document.onmousewheel event for browsers like IE and Opera etc.

Now look at the mouse wheel scroll event handler function “moveObject”

function moveObject(event)
{
  var delta = 0;
  if (!event) event = window.event;
  // normalize the delta
  if (event.wheelDelta)
  {
    // IE & Opera
   delta = event.wheelDelta / 120;
  }
  else if (event.detail) // W3C
  {
    delta = -event.detail / 3;
  }
  var currPos=document.getElementById('object').offsetTop;
  //calculating the next position of the object
  currPos=parseInt(currPos)+(delta*10);
  //moving the position of the object
  document.getElementById('object').style.top=currPos+"px";
}

As you can see in the above function first the scrolling delta value is calculated. The delta variable holds the value  -1 or 1 depending upon the movement of the wheel.

After calculating the detail value, the top offset of the object is taken using offsetTop property using JavaScript. After that, the next position of the object is calculated, which is 10 pixel up or down from the current position of the object.

Finally, style.top property is used to set the current position of the object using JavaScript.

Download Full Source Code

Today, one of the friend of my office asked me how to make dotted or dashsed link as he was looking for “text-decoration” for making it.Today, I’ve come up with a very simple technique to make a dotted or dashed hyperlink using CSS.This technique might be known to most of you guys but it might be useful for those guys who don’t know about this technique.

Making dotted and dashed link using CSS

a
{
border-bottom:1px dotted #FF0000;
text-decoration:none;
color:#FF0000;
}

As, you can can you can use the border-bottom property to add the border in the bottom and then you must specify that text-decoration property to “none” to remove the underline from hyperlink which comes default in hyperlink. In the similar fashion, you can create dashed underline link with the following example code.

a
{
border-bottom:1px dashed #FF0000;
text-decoration:none;
color:#FF0000;
}

Everybody tells me that my blog is under monetized. Ya it is a bitter truth of this blog. I’m always looking for the better option to make money from this blog. And, you must know that affiliate marketing is one the best and largest method of monetizing your blog. Today, I’ve purchased a great plugin WP affiliate eliite for improving the affiliate marking income with the help of this blog. Let me show you how much money you can earn from affiliate marketing and how this plugin helps to make money for you.

How much money a person can earn from affiliate marketing?

Just look at the image below, you can see how much money a person can earn from affiliate marketing. Jeremy Shoemaker, a biggest name in Internet Marketing, made around $700,000 in a month from affiliate marketing.

A better plugin of WordPress for making money from blog

With the help of WP affiliate eliite plugin, you can easily convert the useful keyword of your blog post to affiliate links and start making more money from your blog.

It just cost $47 to purchase that WP affiliate eliite plugin.Why don’t you start making money from blog from affiliate marketing with the help of this plugin. I think video speaks more than writing, check out the video from creator of WP affiliate eliite to know how this plugin helps you for making money from your blog.

Yesterday, I saw one of my friend was working on the the contact form and was filtering the user input data(posted variables) individually. He was using a function in PHP to filter the input and using  tedious approach while calling the filtering function for each variables with coding  each of them in single line . Today, I’m going to show you how can you filter the posted variables easily using callback function in PHP.

PHP function to filter the user supplied data.

function filter_data($val)
{
  return htmlentities($val,ENT_QUOTES);
}

This is just a example of very simple function is PHP to filter the user ssubmitted data.But ,you can add more code according to your requirement to make this function robust.

Common programmer’s approach to filter submitted data in PHP

$name=filter_data($_POST['name']);
$email=filter_data($_POST['email']);
$website=filter_data($_POST['website']);

It was the approach which I’ve used in beginning of my career and most of the beginner PHP programmer use this approach to filter the posted variables.And, the above list can be long if there are more posted data.At that time, it will be very irritating to use the same kind of line in many places.

Using array_map() function to filter the posted data in PHP

As you know, POST variables are super global array in PHP and you can use array_map() function in PHP to filter the input using the callback function. Let’s see how you can filter the the posted data easily,

$post=array_map("filter_data",$_POST);

As you can, each values of POST variables is mapped into another array using a call back function filter_data() which is defined above.

Now, you can access the filtered variables easilly with $post['name'] or $post['email'] etc.

Yesterday, Jacob mailed me and asked me how can I show different text or link in the status bar of browsers like Firefox or safari when mouse is over the link.He found the technique which only worked for IE but not for other browser but I’ve come up with a technique which works for all browser. This kind of technique is quite useful if you want to hide the actual link in status bar of browsers and show the different URL instead of actual one.

Old technique to display hide actual URL  in the status bar

If you search in google with the keyword change status bar text , you’ll find that many codes in different websites which are using window.status to change the text of the status bar while mouse is over the link. For example,

<a href="http://www.sell.com/?referrer=225" onMouseOver="window.status='http://www.sell.com';
return true" onMouseOut="window.status=''">Click here </a>

The above link displays “http://www.sell.com” instead of “http://www.sell.com/?referrer=225″ in the status bar when mouse is mover the hyperlink. But, the main drawback of above code is that it only works in Internet Explorer(IE) . It doesn’t change the status bar text of the link in any other browsers like “Firefox”, “Safari” etc.

How to display diferent URL of links in status bar of Firefox , Safari etc ?

To change the satus bar text of the the link in firefox and safari you’ve to just use a small technique with the help of “href” and “Onclick” attribute of the hyperlink. Let’s look at the this technique step by step,

1. First, make a javaScript function and define it exactly as below,

       <script language="javascript" type="text/javascript">
        function redirect(URL)
        {
          document.location=URL;
          return false;
        }
       </script>

2. Now, define the hyperlink with the status bar text in href attribute and call the above function from onClick attribute of the link like below,

   <a href="http://www.sell.com" onclick="return
   redirect('http://www.sell.com/?referrer=225');">Click here</a>

As we know the we see the text in status bar which is defined in the href attribute of the hyperlink. And when you click the link, code within onclick event of element is called. We’ve taken the benefit of this phenomenon to show the different text .

But remember, this technique also have a drawback as it doesn’t work if JavaScript is diabled in the web browsers. In that case, the browers will be redirecteed to URL in the href attribute. If you worried about disabled JavaScript then you can check this post to knnow how to handle disabled JavaScript in browser.

Yesterday, miaki asked me how can we get the country name from the IP address in PHP. Today, I’ve come up with the answer of this question. I’ve used the API from hostip.info to fetch the country name , city name and country code from the given IP address. I’ve mad this function in PHP which uses XML response from hostip.info and extracted country name, city name and country code using regular expression.

Function to return country, city name from IP address in PHP

function countryCityFromIP($ipAddr)
{
//function to find country and city from IP address
//Developed by Roshan Bhattarai http://roshanbh.com.np

//verify the IP address for the
ip2long($ipAddr)== -1 || ip2long($ipAddr) === false ? trigger_error("Invalid IP", E_USER_ERROR) : "";
$ipDetail=array(); //initialize a blank array

//get the XML result from hostip.info
$xml = file_get_contents("http://api.hostip.info/?ip=".$ipAddr);

//get the city name inside the node <gml:name> and </gml:name>
preg_match("@<Hostip>(\s)*<gml:name>(.*?)</gml:name>@si",$xml,$match);

//assing the city name to the array
$ipDetail['city']=$match[2]; 

//get the country name inside the node <countryName> and </countryName>
preg_match("@<countryName>(.*?)</countryName>@si",$xml,$matches);

//assign the country name to the $ipDetail array
$ipDetail['country']=$matches[1];

//get the country name inside the node <countryName> and </countryName>
preg_match("@<countryAbbrev>(.*?)</countryAbbrev>@si",$xml,$cc_match);
$ipDetail['country_code']=$cc_match[1]; //assing the country code to array

//return the array containing city, country and country code
return $ipDetail;

}

Download Source Code

As you can see, I’ve documented all the PHP code and I don’t think I need explain anymore about that code. Just notice that, this function returns the array containg three key elements “country” , “city” and “country_code”. Each elements have the value of city, country and country code.

Now, look the the how we can use the above function in PHP,

$IPDetail=countryCityFromIP('12.215.42.19');
echo $IPDetail['country']; //country of that IP address
echo $IPDetail['city']; //outputs the IP detail of the city

Notice that the above PHP function returns the array containing the country , city and country code from IP Address and we can use them in PHP. If you want to know how to get IP address in PHP, you can check this post how you can get real IP address in PHP.

Today, I was going through the Technorati API to find the rank of the blog using PHP. Those who doesn’t know about Technorati, Technorati is known as the authority for tracking, indexing and ranking the blog sytems. When I went through the Technorati Api, I found that it is not that hard to get the ranking of a blog which is indexed in Technorati.You need to get the developer API  key from Technorati and use their Web Services to get the ranking of a blog.

But, those who are not registered to the Technorati, here is the shortcut method to get the ranking of blogs indexed under Technorati without using their Api. I’ve used the following  URL of technorati

“http://www.technorati.com/blogs/<blog-url>”

and used some regular expression to find the ranking of the blog indexed under technorati withoug using their API.

PHP code to find the technorati ranking without using API

<?php
//enter the blog url don't include http
$blog_url="roshanbh.com.np";
//seeting the URL for technorati
$technorati_url="http://www.technorati.com/blogs/".$blog_url;
//get the html code of the URL
$html_values=file_get_contents($technorati_url);
//get the string within <div class="rank"></div>
preg_match("@<div\b[^>]* class=\"rank\">(.*?)</div>@si",$html_values,$matches);
//strip out of the HTML element from the matches
$rankvalue=strip_tags($matches[1]);
//geting the the rank values out of the string
preg_match("/(\d+(,\d+)?(,\d+)?)/",$rank_value,$matches);
//Display the rank.
echo "Technorati rank is : ".$matches[0];
?>

Download Source Code

As you can above, I’ve used file_get_contens() function of PHP to get the content from Technorati. The rank of the blog if found under the division “<div class=”rank”></div>” in that page of Technorati, you can verify it by viewing the source of that page. After that, I’ve used few regular expression to find the ranking of the blog in PHP.

One thing you must notice that this code will works under this design of Technorati, if the technorati will change the design then there is no guarantee that this code will work at that scenario.

Which kind of traffic are you interested for your blog ? Is it traffic from social media or Is it traffic from search engine ? Which kind of traffic  is the better for your blog ? It must be one the which is consistent and regular and it is the traffic from search engine. It’s been around 6 month when I started blogging in this domain. And nowadays, this blog is getting more than 1500 visits from the search engine.For detail,You can see the picture below directly taken from Google Analytics.

I think search engine traffic is the best traffic for your blog. Unlike social media traffic which are flashy, search engine traffic is consistent and regular. I’m so happy that this newborn blog is getting good amount of traffic from the search engine.

Do you know tips to build search engine traffic for your blog ?  Do you want to how to build the search engine traffic for your blog ?

Subscribe the RSS feed of this blog by email

Why might be surprising why I’m not posting the tips here and asking you subscribe to rss feed of this blog by email. The answer of this question is blogging Idol competition. I’ve to increase RSS subscribers to win this competition. So, Subscribe Now and make me Blogging Idol and get the tips to increase search engine traffic for your blog.

I’ll email the tips to build search engline traffic for your blog in the first week of next week. Don’t miss the tips to build and increase the search engine traffic for your blog. Subscribe Now By Email

I never knew that Google search can be used as calculator, currency converter or height and weight unit converter. Today I’ve discovered few Google search technique and I would like to share those technique with you. Look at the few useful search technique and you’ll get the answer “Why Google is the superior search engine?”.

Google search tips to find time of a city or country

You can use “time” keyword followed by name of the city or country to find the current time of that country of city in Google search.

Examples :

time kathmandu
time new york

Google search tips for Currency conversion

you can use keyword like “1 USD in AUD” or “1 singapore money in japanese money” to find the currency difference using Google search.

Examples :

1 USD in thailand money
1 singapore money in australian money

Google Search tips for Unit conversion

You can use the following kind of examples to convert the various unit of height and weight.

Examples:

1feet in meter
1feet in cm
1kg in pounds

Google search as calculator

You can enter math expression in Google search box to get the calculated result. For example, you can put the following expression in the Google search to find result of the calucation.

Examples:

(30+45)+5^2
((30+45)+554)^2

Using Google search as Dictionary

You can use the Google as a dictionary as well. Just you have to type the keyword as “define:keyword” in google search box and you’ll get the meaning of that word.

Examples:

define:intelligent
define:blog

]]> http://roshanbh.com.np/2008/07/useful-google-search-tips.html/feed 14 http://roshanbh.com.np/2008/07/control-character-case-css-text-transform.html http://roshanbh.com.np/2008/07/control-character-case-css-text-transform.html#comments Sun, 06 Jul 2008 10:25:00 +0000 Roshan http://roshanbh.com.np/?p=148

How are you controlling the case of the characters in your project. Talking about me, I was using ucwords() function of PHP to control the case of the characters when required. Today, I come to know  two new property of CSS which controls the output of the case of the characters of the words.

You can control the characters using “text-transform” and “font-variant” property of the CSS to do this. You can change the characters of words to upper case, lower case and capitalize the first character of the word.Furthermore, you can use “font-variant” to display the font in small caps font i.e. all the lower case characters are converted into uppercase character but have small font size compared to text with character capitalized. Let’s see example,

Example of using text-transform and font-variant

<span style="text-transform: capitalize">bill gates</span> => bill gates
<span style="text-transform:lowercase">Bill Gates</span> =>  Bill Gates
<span style="text-transform: uppercase">bill gates</span> => bill gates
<span style="font-variant:small-caps">Bill Gates</span> => Bill Gates

As you can see clearly in the example how the character of case is changed using text-transform and font-variant property of CSS. I hope these property might be useful for those people who didn’t know about these properties. But “text-transform” should have had one more attribute to capitalize the first character of sentence, I’m missing that .