PHP crossed the web limitations with PHP-GTK

If you are a PHP programmer and always thinks that PHP has the limitations to the web only, then you need to change your thinking. Soon..you are going to be able to create desktop applications without knowing any other language. Yes.. you hear the right. You can do it with just PHP.

Now you must be thinking that how can i do it ? :)
Answer is... with PHP-GTK.

PHP-GTK is an extension for the PHP programming language that implements language bindings for GTK+. It provides an object-oriented interface to GTK+ classes and functions and greatly simplifies writing client-side cross-platform GUI applications.

Just go to http://gtk.php.net to digg into it ;)

javascript code for tab functionality (jQuery)

Sometimes when designer provide the HTML for tabs, its simply a piece of HTML and writing the code of tabbing become the task of developer. Then developer try google to search for a readymade code of tabs and try to convert it to work with our HTML. Everyone knows that its a very tedious task. So, here is a simple solution for it:

Mostly desinger provide the following code for tabbing:
<div class="bgOTab">
    <ul id="olTab">
    <li class="open"><a href="#"><span>Tab 1</span></a></li>
    <li class=""><a href="#"><span>Tab 2</span></a></li>
    <li class=""><a href="#"><span>Tab 3</span></a></li>
    <li class=""><a href="#"><span>Tab 4</span></a></li>
    </ul>
</div>
<div class="clrAll spc20">&nbsp;</div>
<div id="olTxt">
</div>

The main working of this code should be that on clicking any <a> tag its corresponding div should be open, which should be in the '<div id="olTxt"></div>'. And after opening it, some changes of class name should happen. Like here active tab class name should be "open".

So, first we add some more HTML in this code. After adding this HTML code will be following:

<div class="bgOTab">
    <ul id="olTab">
    <li class="open"><a rel="tab1Div" href="#"><span>Tab 1</span></a></li>
    <li class=""><a rel="tab2Div" href="#"><span>Tab 2</span></a></li>
    <li class=""><a rel="tab3Div" href="#"><span>Tab 3</span></a></li>
    <li class=""><a rel="tab4Div" href="#"><span>Tab 4</span></a></li>
    </ul>
</div>
<div class="clrAll spc20">&nbsp;</div>
<div id="olTxt">
    <div id="tab1Div" style="display:none">
    </div>
    <div id="tab2Div" style="display:none">
    </div>
    <div id="tab3Div" style="display:none">
    </div>
    <div id="tab4Div" style="display:none">
    </div>
</div>

Here we have added a "rel" attribute in every anchor tag. The value it holds would be the ID of that <div> that should be open on clicking that <a> tag. For eg. first tab's rel value is "tab1Div". So after clicking this tab div with id="tab1Div" should be displya and other should get hidden. But how would this happen automatically? It would be because of following piece of javascript code:

function menuTabChanger(mainTab, activeClass, inactiveClass){
   $("#"+mainTab).find("a").each(function(i) {
     $(this).click(function(){
         $("#"+mainTab+" > li").removeClass(activeClass);
         $("#"+mainTab+" > li").addClass(inactiveClass);
         $(this).parents("li").removeClass(inactiveClass);
         $(this).parents("li").addClass(activeClass);
         var currRel = $(this).attr("rel");
           $("#"+mainTab).find("a").each(function(i) {
                   $('#'+$(this).attr("rel")).hide();
           });
         $('#'+currRel).show();
     });
   });
}

This function works with jQuery only. It takes 3 parameters. First is the id of main <ul> tag. Second one is the class name which should be apply on active tab and third one is the class name which should be apply on rest tabs. As in my code i don't need inactive class name so i have left it blank. You will call this function only once like following and rest it will take care automatically.

<script language="javascript">
menuTabChanger("olTab", "open", "");
</script>

Enjoy the tabbing :)
-Lalit

Tips for increasing website performance Part-1

When we open the website it loads mainly three things from the server to client (browser), HTML code, Javascript code and CSS code. So, how much time our site gonna take to load into browser mainly depends on the your broadband speed and the size of the two of these things (CSS and Javascript code). However we are living in 21st century and this century is not for those slow 56 Kbps modem..right? :)
So, how can se reduce the load time of the website? Of course, we can reduce the size of these things.
But, how we can we reduce the load size of our javascript file and CSS file?

Separation of files:-
Yes, you can make separate files for separate pages and load them dynamically. I've seen that some programmers start their coding with making mainly two files: suppose they are functions.js and style.css. And during the development of the site the size of these files increases accordingly the functionality and designs in the sites. Sometimes it reaches in 100 of KBs. If your both files reach above 100 of KBs then what will be the size of these two files? Above 200 KBs. And you know that it will take obviously some seconds to download only of your these 2 files.
Of course our browser will download them only once and then it will keep it in cache. But imagine what will be the load time of first page of your site. It will really give bad impression to your visitor.

So what is the solution?
The simple solution is that, make a common file which will load on every page and this file will contain the common code which you may need throughout the site. And one file for each page separately which will contain the code which you need only on that page.
E.g. one file is common.js and the other one for that page (like homepage.js for homepage).
One file is common.css and the other one for that page (like homepage.css for homepage).
It will reduce the size of these files.

If you use some framework which provides the functionality to include separate files in <head> tags of separate pages then you can do it easily. In other case you have to load these files dynamically.
You can create an autoload function and can pass the file name in that function and that function will load your second file (which is not common file) at runtime. Of course you can include your common file in your <head> tag of header. There is no need  to load common file through dynamic loading.

You can include following function in your common.js fie:
function loadfile(filename, filetype){
 if (filetype=="js"){
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

Now you can call this function to load the js or css file dynamically:
loadjscssfile("homepage.js", "js")
loadjscssfile("homepages.css", "css")

Write less text:-
I've seen that some programmers gives very big names to their js functions to express their functionality. Its ok for those files which process at server side, but this practice will increase the size of file. So, try to name them shortly and try to name your variable short also. It will automatically reduce the size of your javascript file. You can use jQuery to reduce the code size because its motto is "Write Less Do More" :)

Do not put long comments:-
Writing comments is a good practice but javascript file and CSS file download to browser to execute it so try to reduce the size of comments. It will definitely help to reduce the size.

And if you minify your files after applying above things than it will definitely help to reduce the load time of your website.

That's all for now...will come back with new tips.
Till then...Bye bye :)
Lalit

Did you use filter_var function in PHP?

If you are using php 5.2 or above for your development and haven't checked the function filter_var then you must check it.

With a greater functionality for filtering  and validating your variables.

For eg. till then you must have used the regular expression to validate the email address. Here is how you can do it with filter_var function with 10X faster :
var_dump(filter_var('bob@example.com', FILTER_VALIDATE_EMAIL));

So just check it out if you have not checked it yet:
http://in2.php.net/manual/en/function.filter-var.php

Lalit

Adding scrolling to div dynamically

Sometimes we need to add scrolling in a div element but we don't want to fix the height of the element initially.

That means...tag's height will be 0, but as soon as you fill the content of it through ajax etc. then you wish to add a scroll bar to it after reaching a specified height. How can we do that? Here is a simple solution:

You can made a Javascript function which will call after adding content to element.

function addScrollToDiv(){
var divHeight = document.getElementById("divid").offsetHeight;
if(divHeight > 250){
$('#divid').css({"height":"250px"});
$('#divid').css({"overflow":"auto"});
}else{
$('#divid').css({"height":""+divHeight+"px"});
}
}


That's it! How easy is it. Enjoy :)