May 22

PHP function to convert time from one timezone to another


Some applications require finding out what the current time would be in a particular timezone. Another similar requirement would be to convert a given date/time value to a different timezone.

PHP has very powerful date handling functions and it makes the above very simple and easy. We have tried to use quite a few readymade timezone conversion classes but either they had a bug or they were too complicated. Hence we came up with our own class. The actual conversion code is only about 4 lines of code.

What it does is convert the time string argument from the source timezone into GMT time and then convert into the target timezone. This approach was far simpler than trying to directly convert from source timezone into the target timezone.

class convert_timezone
{
	function convert_timezone() // Constructor of the class
	{
	}

	function conver_to_time($conv_fr_zon=0,$conv_fr_time="",$conv_to_zon=0)
	{
		//echo $conv_fr_zon."<br>";
		$cd = strtotime($conv_fr_time); 

		$gmdate = date('Y-m-d H:i:s', mktime(date('H',$cd)-$conv_fr_zon,date('i',$cd),date('s',$cd),date('m',$cd),date('d',$cd),date('Y',$cd)));
		//echo $gmdate."<br>";

		$gm_timestamp = strtotime($gmdate);
		$finaldate = date('Y-m-d H:i:s', mktime(date('H',$gm_timestamp )+$conv_to_zon,date('i',$gm_timestamp ),date('s',$gm_timestamp ),date('m',$gm_timestamp ),date('d',$gm_timestamp ),date('Y',$gm_timestamp ))); 

		return $finaldate;
	}
}

Example usage would be:

$c = new convert_timezone();

$resultTime = $c->conver_to_time(5.30, “2011-05-09 11:00:00″, -13);

$resultTime = $c->conver_to_time(-4, “2011-05-09 11:00:00″, 10);

The first one converts 5th May, 2011, 11 am from the timezone GMT+0530hrs to GMT-1300hrs

The second one coverts 5th May,2011 11 am from the timezone GMT-0400hrs to GMT1000 hrs

May 18

15 Best HTML5 games of 2011


There have been so many leaps of innovations made in the field of web development and web technologies.
Who would’ve thought one day we would be able to create cool games just using HTML and JavaScript without the help of any other technology required to run it or support it except a browser ,which almost everyone has now a days and majority of them are all FREE to use and update as soon as something new comes around.

Well while searching for something about HTML5, I kind of wandered off towards what’s going on these days in HTML5, and since games are something which I find extremely interesting and cool, therefore I started trying out all the games based on HTML5 … and as you all would have guessed … I wasted a lot of time just playing games all day instead of working ( I hope my boss doesn’t read this…hehe ) :P

Since I did devoted a lot of my time to these HTML5 games… so I thought I should just put up a list of a few of them which i really liked :) . So here they are in no particular order -

 

1. Chain Reaction

 

2. Biolab Disaster

 

3. Bubble Trouble

 

4. Runfield

 

5. Sand Trap

 

6. Torus

 

7. Space War

 

8. Google Pacman

 

9. Angry Birds (Would run on Google Chrome only)

 

10. RGB Invaders

 

11. Canvas Rider

 

12. Blinkwang

 

13. CoverFire

 

14. HTML5 Helicopter

 

15. Blobby Volley

I would be quite appreciative if anyone has any other games which they like or play … and think it’s very much worth adding to this list … please do let me know :) Thank you so much.

Have fun with these games and do appreciate the awesome work of certain people who have provided us with the chance to experience such creativity and innovation :) .  Enjoy !!!

May 10

Changes in HTML 5.0


HTML is the most powerful content presenting language of the WWW, an old but crucial technology of the Internet. HTML 5 is the latest version of HTML standard and it added a lot of new features compared to the previous HTML 4 for better experience on web page layouts and designs. With new HTML 5 get ready to experience a new web browsing in multimedia and graphics related content. Almost all major browsers have already started supporting most of its elements and attributes.

I have mentioned below a few new changes and additions of elements and attributes in HTML 5.

 

Doctype and Charest

In new HTML 5 you can write <! doctype html> instead of long doctype declaration in HTML 4, it’s because HTML 5 is now separated from SGML.

HTML 5 uses UTF-8 as character set which again can be defined in meta tag as <meta charset=”UTF-8″>

 

New structure defining Tags

With HTML 5 web pages can now be easily structured.

<section> This new tag defines a section in web pages. this can be considered as the any chapter of the book. Section may be footer, header any part of the document.
<nav> Defines navigation from current pages, easy to handle other links on pages.
<header> Not same as <head>, It defines the heading of documents or sections.
<footer> You can easily guess as the name suggest, it defines the footer of the document or sections and generally contains the copyright or author name like information.
<article> The main text content of the page, also the external text content from blogs and forums can be linked.
<aside> To define some extra content apart from the main. It may represent content related to the main content in form of note, tip, pull quote, sidebar or remark.
<figure> It can represent a block of images or video. This related to the document or the section.


Inline elements

<mark> This is for highlighted text. Think of a highlighted text of a book. It is just like emphasized text but not exactly the same.
<time> To define the content of the HTML as time or date. It defines a specific moments.
<meter> Used to show a part of a numeric value, you can say a fraction of a value.
<progress> To define the state of any outgoing process. It defines the progress of work.

 

Media elements in HTML 5

<video> Allow adding video on your web page directly and in very simple way.
<audio> Simply add audio stream on your web page.
<embed> To embed plug-in like content.

 

The exciting new <canvas> element

Now on your web pages you can directly add images or graphs in <canvas> tag using JavaScript.
It basically provides drawing space on your web pages using JavaScript

 

The New form elements in HTML 5

<datalist> Provide a list of option for input values.
<output> This defines the output obtained from some different script.
<keygen> To authenticate users directly from HTML code.

 

Input type attribute’s values in HTML 5

<input type=”tel”> The ‘tel’ value of type attribute is for telephone number.
<input type=”search”> This value defines input field as search field.
<input type=”url”> This attribute value tells input value is an URL.
<input type=”email”> The input value is an email.
<input type=”datetime”> This attribute value defines input value is date or time.
<input type=”date”> This value defines input value is a date.
<input type=”month”> Input value is a month.
<input type=”week”> Input value is a week.
<input type=”time”> Input value is a time.
<input type=”number”> Input value is of type number.
<input type=”range”> Input value is a number in a defined range.
<input type=”color”> Input value is color in hexadecimal notation
<input type=”datetime-local”> Input value is local date or time.

 

Some other new elements in HTML 5

<command> Defines a button, radio button or checkbox,used with <menu> tag
<details> Defines the details of a document or a part of the document. We can use < legend> tag to summarize it further inside it if needed.
<wbr> Word break.

Note: [ There are many other new HTML5 elements which are introduced but not mentioned here. ]

 

Now I would like to tell about some HTML elements which have been removed in HTML 5 recently

<center>
<acronym>
<noframes>
<applet>
<big>
<dir>
<basefont>
<font>
<frame>
<frameset>
<s>
<strike>
<u>
<tt>
<xmp>


Get ready for new web experience

In near future all the major browser like Firefox, IE, Chrome, Safari, Opera will support these tags and we will get more interactive web pages over Internet which will change our web experience forever. Though some of the tags might be removed due to not being able to fulfill   the actual purpose they were meant for, but these changes will give a new turn to the era of web page development and design. I would request the readers to write any of their feedbacks or comments on this topic.

May 04

Too many CKeditor fields in jquery tabs makes IE freeze.



IE seems to freeze or take a long time to render a page if there are more than 2 or 3 CKeditor textareas in the page. This problem is specific to IE as Firefox, Chrome and Safari do not seem to have this problem.

The basic reason for this is that IE gets stuck in instantiating the ckeditor javascript object; maybe something in the ckeditor script creates this problem.

We had this particular problem we used a JQuery tab plugin with about 8 or more tabs and each tab had a textarea field wrapped in a ckeditor object.

The final solution that was used is simple: Dont instantiate all the ckeditor objects at page load time. Instantiate for each textarea when required. In other words, let the ckeditor object get created at page load for the default tab. For all the other tabs, convert the textarea in the target tab into a ckeditor when the tab is clicked. This was a simple solution which stopped IE from freezing and also sped up the page load time.

The code snippets are given below. It is assumed that jquery libraries and the ckeditor scripts are included in the page.

The HTML part is given below. The fields are using PHP code to obtain values, but that part can be ignored. Note that the default Homepage tab is already set to class=ckeditor so it becomes a ckeditor object at page load. The other textareas are set to a dummy class called “xckeditor”:

	<tr valign="top">
				<td colspan="2">
					<div id="tabs">
					<ul>
						<li><a href="#tabs-1">Homepage</a></li>
						<li><a href="#tabs-2">About Us</a></li>
						<li><a href="#tabs-3">Privacy</a></li>
						<li><a href="#tabs-4">Terms</a></li>
						<li><a href="#tabs-5">Advertise</a></li>
						<li><a href="#tabs-6">Partner</a></li>
						<li><a href="#tabs-7">Competition</a></li>
						<li><a href="#tabs-8">Bookmark</a></li>
						<li><a href="#tabs-9">Daily Deals Newsletter</a></li>
						<li><a href="#tabs-10">FAQ</a></li>
					</ul>

					<div id="tabs-1">
						<div class="editor_adjust">
							<textarea name="txtHomepageContent" id="txtHomepageContent"  rows="10" cols="40" class="ckeditor"><?php echo($sitecountry->getValue("homepage_content"));?>

The javascript is given below. Note that there is no code to make a textarea into a plain textarea by removing the ckeditor class. This was not required since once a textarea was made into a ckeditor object it was not affecting the page speed:

jQuery(document).ready(function($) {
	$("#tabs").tabs({
		event: 'click'
	}),
	$( "#tabs" ).tabs({
	   select: function(event, ui) {
		   var i = ui.index;

		   if (i == 1) {
			   $('#txtAboutUsContent').removeClass("xckeditor");
			   $('#txtAboutUsContent').ckeditor();
		   }
		   else if (i == 2) {
			   $('#txtPrivacyContent').removeClass("xckeditor");
			   $('#txtPrivacyContent').ckeditor();
		   }
		   else if (i == 3) {
			   $('#txtTermsContent').removeClass("xckeditor");
			   $('#txtTermsContent').ckeditor();
		   }
		   else if (i == 4) {
			   $('#txtAdvertiseContent').removeClass("xckeditor");
			   $('#txtAdvertiseContent').ckeditor();
		   }
		   else if (i == 5) {
			   $('#txtPartnerContent').removeClass("xckeditor");
			   $('#txtPartnerContent').ckeditor();
		   }
		   else if (i == 6) {
			   $('#txtCompetitionContent').removeClass("xckeditor");
			   $('#txtCompetitionContent').ckeditor();
		   }
		   else if (i == 7) {
			   $('#txtBookmarkContent').removeClass("xckeditor");
			   $('#txtBookmarkContent').ckeditor();
		   }
		   else if (i == 8) {
			   $('#txtNewsletterContent').removeClass("xckeditor");
			   $('#txtNewsletterContent').ckeditor();
		   }
		   else if (i == 9) {
			   $('#txtFaqContent').removeClass("xckeditor");
			   $('#txtFaqContent').ckeditor();
		   }
	   }
	});	

});

A good enhancement would have been to place a check if a textarea was already assigned the ckeditor class before running the