ZENVERSE » Web Development

[Javascript] Search Box to Show Default Text on Load and Cleared When Focused

Zen — Mon, 09 Jul 2012 13:35:15 +0000

Very often we want our search box to show a default text such as “Search…” when it is loaded. Then when users clicked on the search box, the word is cleared, allowing user to enter their search query. We will see how to do that in this short guide in both plain Javascript and jQuery.

You can use the jQuery method if your website is already using jQuery library. If not, it is not recommended because there is no need to load a library just for this simple script.

Demo Page

Click here to go to the DEMO PAGE

Using Plain Javascript

Below shows the codes to achieve the behavior in a simple search form using plain javascript.

^?View Code HTML

It is pretty straightforward, we just need to set the default text, the onfocus & onblur behaviors to the search form’s text element.
But make sure you placed the javascript codes AFTER the search form or else you will get an error complaining that the element doesn’t exist.

Using JQuery

Below shows the codes for jQuery, where the jQuery library is loaded from Google API. You can also use your local copy of jquery.js if you want.

^?View Code HTML

Similar codes go for jQuery but with different syntax. Also, for jQuery, you can put the javascript anywhere (it does not matter before or after the form)

Hope this short guide helps. Please Share or Like it if it does :)

PHP Code to Get Current Page’s URL

Zen — Sun, 01 Jul 2012 14:43:05 +0000

It is quite often that we need to redirect users back to current URL. I wrote my own function for this purpose, but then I realized some weaknesses: it cannot capture HTTPS and the port number, which is very important for some websites. Luckily, I found this piece of code from dev.kanngard.net which does the magic:

The PHP Code

^?View Code PHP

function getCurrentURL() {
	$s = empty($_SERVER["HTTPS"]) ? '': ($_SERVER["HTTPS"] == "on") ? "s" : "";
	$protocol = strleft(strtolower($_SERVER["SERVER_PROTOCOL"]), "/").$s;
	$port = ($_SERVER["SERVER_PORT"] == "80") ? "" : (":".$_SERVER["SERVER_PORT"]);
	return $protocol."://".$_SERVER['SERVER_NAME'].$port.$_SERVER['REQUEST_URI'];
}
 
//usage
echo getCurrentURL();

It works perfectly in returning the following URLs

http://localhost/
http://localhost/a.html?b=1
http://localhost:8080/a.html
https://example.com/a/b/c.html?b=1

Hope this helps.

Fixing Javascript Error: Property ‘submit’ of object # is not a function

Zen — Sun, 01 Apr 2012 09:55:25 +0000

Property ‘submit’ of object # is not a function

If you come across this error in javascript, most probably you are trying to submit the form dynamically using javascript. Don’t worry, the solution is easy.

The Solution

Check your

How to Remove Facebook Cache of Your Page’s Metadata

Zen — Sun, 04 Mar 2012 14:14:21 +0000

Whenever Facebook visited a page (most probably when someone shared your URL on Facebook), your page’s metadata will be cached. I am not sure when the cache expires, but you can actually clear the cache easily by directing your browser to this address below:

http://developers.facebook.com/tools/debug/og/object?q=[YOUR_PAGE_URL]&fbrefresh=any

Of course, replace “[YOUR_PAGE_URL]” with your page URL and you are good to go.

I also created a quick page for you to clear facebook cache of any page in my WebTools Site. You can bookmark this page to use it in future.

Hope this helps :)

Reducing Image File Size (Compression) using PHP GD

Zen — Thu, 16 Feb 2012 09:11:23 +0000

Most of the time, photos uploaded by users are not optimized for web. In other words, they might not be using the best file format for their photos, thus taking much more spaces in your server than it actually need. Using PHP, you can easily reduce the file size of those uploaded images during upload time. But of course, when reducing the file size, we sacrifice the image quality. Therefore, if you are running image uploader website, this is not recommended.

The simple function

The best file format for photo is JPEG as it provides the best reduction in file size. The downside is losing details – your photo will be blurred depending on your quality setting. If your photo contains crisp texts, the text will most likely be blurred. Check out the code below.

This function below can load from PNG, JPEG or GIF file ($source_url) and save the compressed photo as JPEG in $destination_url.

^?View Code PHP


 
function compress_image($source_url, $destination_url, $quality) {
	$info = getimagesize($source_url);
 
	if ($info['mime'] == 'image/jpeg') $image = imagecreatefromjpeg($source_url);
	elseif ($info['mime'] == 'image/gif') $image = imagecreatefromgif($source_url);
	elseif ($info['mime'] == 'image/png') $image = imagecreatefrompng($source_url);
 
	//save file
	imagejpeg($image, $destination_url, $quality);
 
	//return destination file
	return $destination_url;
}
 
//usage
$compressed = compress_image('source.png', 'destination.jpg', 90);
 
?>

Explanation

imagecreatefromjpeg() is where PHP loads your source image.
imagejpeg() is the part where PHP output the image. In our case, we specified the second parameter (destination_url) therefore PHP saved the image instead of outputting it.
You can control the quality of the image. In the example above, we used 90/100 to maintain the quality of the photo while reducing file size. You need to try out various setting to suit your need.

A quick testing page

I have written a small PHP page to test the image compression. It put your original and compressed photos side by side so that you can compare the quality and file size. Save it as compress.php, change the image URL and quality setting then run it in your server.

^?View Code PHP


 
function compress_image($source_url, $destination_url, $quality) {
	$info = getimagesize($source_url);
 
	if ($info['mime'] == 'image/jpeg') $image = imagecreatefromjpeg($source_url);
	elseif ($info['mime'] == 'image/gif') $image = imagecreatefromgif($source_url);
	elseif ($info['mime'] == 'image/png') $image = imagecreatefrompng($source_url);
 
	//save it
	imagejpeg($image, $destination_url, $quality);
 
	//return destination file url
	return $destination_url;
}
 
$source_photo = 'uploads/source.jpg';
$dest_photo = 'uploads/testing.jpg';
 
$d = compress_image($source_photo, $dest_photo, 90);
 
echo '

	.$source_photo.'" alt="" />
	
'.filesize($source_photo).' Bytes

 

	.$dest_photo.'" alt="" />
	
'.filesize($dest_photo).' Bytes

';
 
?>

Hope this helps :)

PHP – Using oEmbed API to Embed Videos

Zen — Mon, 30 Jan 2012 08:53:09 +0000

oEmbed is a format for allowing an embedded representation of a URL on third party sites. Which means, if we have a video page’s URL, we can easily get the video thumbnail photo, video title, HTML code to embed it in our website and more. But of course, the video site must have oEmbed support in order for us to do that. Check out http://oembed.com for full documentation.

Let’s look at how YouTube oEmbed works

1. First, send a request to YouTube’s Oembed API page with a video URL (must be urlencoded) as parameter and we also specified that we want it to be returned in json format.

http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch%3Fv%3DbDOYN-6gdRE&format=json

2. You will then see a long json-encoded string which contains all information about the video.

3. Next thing you need to do is just simply json-decode the string using your programming language, then you are free to use the information. We will see how to do that in PHP.

Using Oembed to Embed Youtube Videos in PHP

^?View Code PHP


 
$videourl = 'http://www.youtube.com/watch?v=gB4nwqNM190';
 
$json = @file_get_contents('http://www.youtube.com/oembed?url='.urlencode($videourl).'&format=json');
$decode = json_decode($json, true);
 
if ($decode == null || !$decode) {
	$error = true;
	//error control here
} else {
	$thumb = $decode['thumbnail_url'];
	$html = $decode['html'];
}
 
?>

It’s pretty straightforward and self-explanatory:

First, we send a url request to YouTube’s obembed API page using file_get_contents() function.
Second, we decode the response using json_decode() function which convert json format to array.
Third, if there is no error in decoding, we then assign $thumb and $html and use it in our website or program.

Extra: If you want to limit the embedded video’s width or height

You can specify the max height or max width by appending the maxwidth or maxheight parameters to the oembed URL. (Please note that this cannot resize a smaller video to bigger size)

For example, from our example above, to specify max width of 300 pixels:

http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch%3Fv%3DbDOYN-6gdRE&format=json&maxwidth=300

You should notice the video embedding code (iframe) is now limited to width of 300 pixels.

How do I embed videos from other video sites like Vimeo?

Most of the popular video sites has oEmbed support just like YouTube. For example, by googling “vimeo oembed” we found vimeo oembed documentation.

In vimeo, this is the URL we should send our request to:

http://vimeo.com/api/oembed.json?url=http%3A//vimeo.com/7100569

More details about oEmbed API page for other video sites will be covered in our next blog post (coming soon).

PHP MySQL – Get Next Auto Increment Value of a Table

Zen — Sat, 14 Jan 2012 06:05:14 +0000

We do not often need this but sometimes when we need to retrieve the next auto increment value of a table (without incrementing the auto increment value of course), this solution below will help.

^?View Code PHP


 
$query = mysql_query("SHOW TABLE STATUS WHERE name='your_table_name_here'");
if (mysql_num_rows($query)) {
	$result = mysql_fetch_assoc($query);
	echo $result['Auto_increment'];
} else {//error
	//error control here
}
 
?>

Just replace “your_table_name_here” with your mySQL table name.

As a Function

Furthermore, making it a PHP function would make the solution looks clean.

^?View Code PHP


 
function get_next_value($tablename) {
	$query = mysql_query("SHOW TABLE STATUS WHERE name='".mysql_real_escape_string($tablename)."'");
	if (mysql_num_rows($query)) {
		$result = mysql_fetch_assoc($query);
		return $result['Auto_increment'];
	} else {//error
		return false;
	}
}
 
//usage
$nextval = get_next_value('your_table_name_here');
 
?>

Hope this helps.

PHP Smart Date Function – Display Time Elapsed (Difference) Based on a Given Timestamp

Zen — Mon, 12 Dec 2011 04:43:29 +0000

As a web developer, we often need to display dates in our website. As a web user myself, I don’t like to read full dates like “26 November 2011 11:30PM” because it takes me a little while to interpret the date. I prefer reading smart dates like “1 hour ago” or “6 months ago”. Therefore, here I wrote a quick and simple function in PHP that display the time difference/elapsed based on a given timestamp value.

PHP Smart Date Function

^?View Code PHP

/*
Simple PHP Smart Date Function
by Zen (http://zenverse.net)
*/
function smartdate($timestamp) {
	$diff = time() - $timestamp;
 
	if ($diff <= 0) {
		return 'Now';
	}
	else if ($diff < 60) {
		return grammar_date(floor($diff), ' second(s) ago');
	}
	else if ($diff < 60*60) {
		return grammar_date(floor($diff/60), ' minute(s) ago');
	}
	else if ($diff < 60*60*24) {
		return grammar_date(floor($diff/(60*60)), ' hour(s) ago');
	}
	else if ($diff < 60*60*24*30) {
		return grammar_date(floor($diff/(60*60*24)), ' day(s) ago');
	}
	else if ($diff < 60*60*24*30*12) {
		return grammar_date(floor($diff/(60*60*24*30)), ' month(s) ago');
	}
	else {
		return grammar_date(floor($diff/(60*60*24*30*12)), ' year(s) ago');
	}
}
 
 
function grammar_date($val, $sentence) {
	if ($val > 1) {
		return $val.str_replace('(s)', 's', $sentence);
	} else {
		return $val.str_replace('(s)', '', $sentence);
	}
}

Basically I defined 2 functions above:
smartdate – calculates the difference between given timestamp and current time, then returns the correct sentence
grammar_date – modifies the returned sentence to plural form or singular form

Usage

The usage is simple and straightforward.

^?View Code PHP


 
//example 1
echo smartdate($yourtimestamp);
 
//example 2
echo 'Posted on '.smartdate($yourtimestamp); 
 
?>

By default, this function returns the floor() value, i.e: instead of returning “1.7 years ago”, it returns “1 year ago”. Anyway, the function can be easily modified to suit your specific needs.

Give users the choice to view the full date

1 disadvantage of smart date is of course, it reduces the level of detail and granularity of the date information. For example, dates of 13 months ago or 19 months ago will both be displayed as “1 year ago”.

The most common way to let user view the full date is to add a “title” attribute with full date as the attribute value. Now, when user mouseover your smart date, they can see the full date popping up as tooltip. Facebook uses this approach.

^?View Code PHP


 
//from example 2 above
echo 'Posted on . $originalfulldate . '">' . smartdate($yourtimestamp) . ''; 
 
?>

Hope this helps.

Cannot Access Localhost After Editing etc/hosts and Flushing DNS Cache

Zen — Mon, 21 Nov 2011 16:23:42 +0000

I was developing a new website that uses Facebook Login as the membership system. I came across this situation where I needed to create a “fake” domain by editing the etc/hosts file. Somehow, after editing the etc/hosts file (following an online guide), I cannot seems to browse http://localhost in my browser anymore. However, I can still browse my local apache server using http://127.0.0.1

NOTE:
This is not XAMPP / apache issue
This is not browser-specific issue

In fact, this is a simple problem with simple solution. However, this problem occurs when I am getting frustrated with the Facebook integration problem (after 12 hours of debugging). Therefore, I missed some simple but important steps to solve this problem. Here I list them down below:

1. Ping Localhost

For Mac OS users, open up your Terminal. For windows users, open up your command prompt.

Type the “ping localhost” and press enter.
You should get error messages like “unknown host” since you are having this problem.

Next, type “ping 127.0.0.1″ and press enter.

If you saw something like this, the ping is successful:

^?View Code CMD

PING 127.0.0.1 (127.0.0.1): 56 data bytes
64 bytes from 127.0.0.1: icmp_seq=0 ttl=64 time=0.118 ms
64 bytes from 127.0.0.1: icmp_seq=1 ttl=64 time=0.171 ms
64 bytes from 127.0.0.1: icmp_seq=2 ttl=64 time=0.167 ms

If you get “unknown host error”, please check whether you have started your local server service.

2. Clear your browser cache

Modern browsers cache a lot of stuff, including DNS cache. They may have cached the erroneous DNS setting in etc/hosts, so you might want to clear your browsers cache and try loading localhost again. Clearing cache alone would already be sufficient, you can skip clearing cookies, saved session, etc.

If it still doesn’t work, try #3 below.

3. Did you just flushed the DNS cache?

I ran this command in terminal (Mac) to flush my cache before I get into this mess: “dscacheutil -flushcache”
For some reason, after I flushed the cache, the DNS setting is not being rebuilt – I cannot ping localhost but I can ping 127.0.0.1

After restarting my laptop (to rebuild the DNS settings & cache) and clearing all browser cache once again, I finally get my localhost displayed again.

Now I hope this helps some of you.

Legacy Facebook “Share” Button Codes (Bubble Count, Box Count and More)

Zen — Wed, 16 Nov 2011 16:12:32 +0000

Few months ago, Facebook removed the page that allow us to generate codes for their official “Share” button. They replaced it with “Like” button instead. While “Like” button is fast and easy but we cannot add our comment along with the “Like” action. Therefore, in some cases, we still need the old Share button. Fortunately, the sharer.php still exists, so we can add the Share button using Facebook’s official script.

Here are the complete codes for all sizes of Facebook share button for those who are interested:

Box Count

Share *count will only visible when there is at least 1 share

Codes:

^?View Code HTML

Share

Button Count

Share *count will only visible when there is at least 1 share

Codes:

^?View Code HTML

Share

Button only

Codes:

^?View Code HTML

Share

Small Icon only

Codes:

^?View Code HTML

Share

Custom URL?

All codes above “shares” the current page. If you want to share another page or a specific page, you need to add a “share_url” attribute to the tag. You need this too when you have multiple share buttons in a single page.

Example below shares our main website http://zenverse.net instead of this page.

Here’s how:

^?View Code HTML

Share

Multiple Share Buttons

If you have multiple share buttons in a single page, you just need to include the