VIEW DEMO

First of let me start, with the images which i’ve used in the background to create the first two menus.

and

Please note that the please keep the left image as big as possible if you’re menu text can be long.

Now, let’s look at the html code

Html code for the animated jquery menu

<ul class="nav" id="nav1">
   <li class="first"><a href="#">Home</a></li>
   <li><a href="#">Portfolio</a></li>
   <li><a href="#">About us</a></li>
   <li><a href="#">Contact Us</a></li>
   <li><a href="#">Blog</a></li>
   <li class="last"><a href="#">Tutorials</a></li>
   <li class="bg"><div class="left"></div></li>
</ul>

All the list elements are fairly simple and the list with class “bg” is the one which holds the background image for the menu. The code is same for the first and second example but for the third example we use list with class ybg instead of bg.

 <li class="ybg"></li>

CSS code for the smooth jQuery menu

ul.nav { list-style:none;  overflow:hidden;  }

ul.nav li { float:left; height:39px; background-color:#000;  padding:0 5px;  }

ul.nav li.first {
  -moz-border-radius-topleft:9px; -webkit-border-top-left-radius:9px;
  -moz-border-radius-bottomleft:9px;  -webkit-border-bottom-left-radius:9px;
}

ul.nav li.last {
-moz-border-radius-topright:9px; -webkit-border-top-right-radius:9px;
-moz-border-radius-bottomright:9px; -webkit-border-bottom-right-radius:9px;
}

ul.nav li.bg {
   margin:7px 0px 0px 3px; padding-right:8px; position:absolute;
   z-index:50; left:155px; width:60px; background:url(bg-right.png) no-repeat right top;
}

ul.nav li .left { background:url(bg.png) no-repeat left top; height:39px;  }

ul.nav li a {
  padding:8px 20px;  color:#FFF; font-size:18px; font-weight:bold; display:block;
  text-decoration:none; z-index:100; position:relative;
}

ul.nav li.ybg {
  background-color:#FB0; position:absolute; z-index:50;
  left:165px; width:55px; height:4px; margin-top:6px;
}

As you can see there, I’ve used CSS3 rounded corners for the first and last elements of list(obviously doesn’t work IE). Furthermore, the list with class bg is used for the first and second menu examples where the image is used in the background and which moves around on mouse hover on menu with sleek effect. Please note that this list must be positioned absolutely.

The ybg class is used for the background effect for the third menu in the example, which first moves to the menu which has current mouse position and then starts sliding down.
After this, let’s get into jQuery code for providing the sleek effect for the hover menu.

jQuery code for animation in the  on menu

$('#nav1 li a').hover(function()
{
  var offset=$(this).offset();
  var thiswidth =$(this).width()+13;
  $('#nav1 li.bg').stop().animate({left:offset.left+"px",width:thiswidth+"px"},600);
},
function()
{
  $('#nav1 li.bg').stop().animate({left:"155px",width:"60px"},600);
});

The above is the code for the first menu. You can see that on the hover effect of anchor, first we’ve calculated the offset of menu and also width of the anchor element. Then, finally used animate function of jQuery to move the menu and increse the width of the background to create the nice and sleek effect.

As you can see the second function of hover menu, which is called when mouse is released from the anchor, just reset back the menu to it’s original position.

The code is exactly same for the second menu except the following line,

$('#nav3 li.bg').stop().animate({left:"155px",width:"60px"},600,'easeOutBounce');

You can see the difference easily where I’ve used easeOutBounce easing effect for the bounce out effect when mouse is released form the menu.

$('#nav2 li a').hover(function()
{
  var offset=$(this).offset();
  var thiswidth =$(this).width()+13;
  $('#nav2 li.ybg').stop().animate({left:offset.left+9+"px",width:thiswidth+"px"},400,function(){
     $(this).animate({height:"28px"},150);
  });
},
function()
{
   $('#nav2 li.ybg').stop().animate({height:"4px"},150,function(){
      $(this).animate({left:"165px",width:"55px"},600,'easeOutBounce');
   });
});

And you can see in the above code of the third menu, first of all the menu gets slided to the current position of menu and then the height of the background gets increased to 28px, giving a nice effect. And when mouse is released from the menu, the same things happens but in the reverse order.

DOWNLOAD SOURCE CODE

What I’ve been doing??

First of all, let me tell you one thing, I’ve been a married man now so there are a lot of responsibilities ahead for me. On the other hand, I’d been in Bangalore for last six months working for a start-up company there. And Finally, I’ve moved back to Kathmandu  and started a joint venture with Haico Duisters called Proshore Nepal. It is a Dutch-Nepali company, which has a head office in the Netherlands and  development office in Kathmandu.

Apart from personal stuffs,  let’s talk about technical stuffs.
I’ve written 5 series of articles about web widgets, how to create them and use them on Packt Publishing . You can check those articles here.

1. Development of Web Widget - Introductory article
2. Developing a wiki-seek Widget (a widget to search in wikipedia.org)
3. Pop-up Image Widget – a widget to show the pop-up image on mouse over event
4. RSS Web Widget -  A widget to display the titles with link from specified RSS feed
5. Delicious Tagometer Widget – A widget to display Tagometer from delicious.com

Furthermore, this blog has also been considered as a 10 Interesting PHP blogs by AjaxLine.A great thank to them for considering this blog to that level.

What’s Next??

Well in the last six months, I’ve been contacted by many people asking what happened to you,  when you’ll start updating your blog etc. First of all, I would like to thanks those people who has much interest to this blog.  My plan will be to post 2 or 3 articles a week and I’ll be focusing more on the quality than quantity in upcoming days.

If you really want to be in touch with me then you can follow me on twitter where I post useful web development related stuffs which I find on the web. Believe me, I don’t post stuffs like what I’m eating now, what i had for breakfast and what I’ll be having for dinner and when I’ll be heading for the dinner.

1. If Fed Ex and UPS were to merge, would they call it Fed UP?

2. Do Lipton Tea employees take coffee breaks?

3. If olive oil comes from olives, where does baby oil come from?

4. If people from Poland are called Poles, why aren’t people from Holland called Holes?

5. Do infants enjoy infancy as much as adults enjoy adultery?

6. Why the man who invests all your money called a broker?

7. If horrific means to make horrible, does terrific mean to make terrible?

8. Why is it called building when it is already built?

9. If a book about failures doesn’t sell, is it a success?

10. If you’re not supposed to drink and drive, then why do bars have parking lots?

11. If you take an Oriental person and spin him around several times, does he become disoriented?

12. If vegetarians eat vegetables, what do humanitarians eat?? Human ??

Why I recommend PHP Programmers to use CodeIgniter?

Yes I’ve decided to use it along with this I’ve asked my programmer friends out there in office to use it. You’re wondering why I choose CodeIgniter rather than using Zend Framework, which add more values in PHP programmer’s career.Let’ me answer them all in the reasons below.

1. The main issue which I got attracted with CodeIgniter is its performance. CodeIgniter is faster than other popular PHP MVC frameworks. Take a look at these Benchmark test done by Rasmus Lerdorf(creator of PHP programming), here , here in here. And also take a look at another benchmark test . So it’s clear that CI is faster than other Framework. Rasmus also told that he liked CodeIgniter because it is faster, lighter and the least like a framework.
2. Another main reason behind recommendation, it has very low learning curve. CodeIgniter Downloads come with a tremendous user guide which is a great documentation like PHP Manual to begin with. And from my personal experience, CodeIgniter has very low learning curve compared to CakePHP and Zend Framework. If you’re a beginner for PHP frameworks then I recommend to go with CodeIgniter at begining.
3. The coding conventions are flexible and simple. Ironically, CakePHP has very strict coding conventions so you must be very careful about cases of characters while coding.
4. Why not Zend Framework and why CodeIgniter? Ok, one question goes here what is so good about Zend Framwork ? Eventual answer is ZF contain huge set of libraries and classes compared to any other framework. OK I agree, but another great news is that You can use Zend Framework’s classes in the CodeIgniter using hooks in CI. So you can use huge amount of Zend’s libraried in CI as well.

These are the main reason why I recommend for using CodeIgniter for PHP programmers.But I still believe that I’ll be using CakePHP for once I get final version of 1.2.0 because I still believe that it is robust,  has a  great design patters and great tool for group development .

If you recommend any other PHP framework, please let us know why you recomment that framework.

Problem of CPU Overhead with MySql

Let me explain the problem clearly first,

We’re working on a website which was similar to http://www.swoopo.co.uk/ and as you can see clearly in that website the most recent data should be fetched form MySql database in each second. in the PHP page, which was being called from Ajax every second, had around 5 SQL queries to retrieve data from server.

First of all, I optimized that page reducing the 5 queries into single query by using left outer joins among 3 tables. And then, I did benchmark test by using Apache benchmark tool(ab) 50 request with concurrency of 50 with the following command.

ab -n 50 -c 50 http://xyz.com/ajax_page.php

And then in another SSH shell prompt, I run the top command to view the CPU usages parallelly.

I was still horrified that the CPU usages by mysql after 50 concurrent user was going out of control(100%) despite of optimized query. But many joins have been used in that single query and lots of data were there in those tables so the database overhead was high even though it was a single query.

How did I reduced the CPU overload drastically caused by MySql?

Now, the first challenge was to reduce the database access. It was clear that it was caused by concurrent database overhead in the PHP page which was being called in every second. Here is the simple steps what I did to reduce the database overhead.

1. I created another PHP file in which I’ve transferred the mysql query causing CPU overhead and called it from Cronjob.
2. Created a temporary table for storing the output given by PHP page called from CronJob.
3. Then, I scheduled the CronJob in every second, don’t tell me that CronJob can’t be run less than a minute, take a look at this post before saying this.And from each call, the output data was stored in the temporary table.
4. And, finally from the Ajax the a new PHP page was called which was only accessing the data from temporary table with single row.

I did the same benchmarking again to the newly made page(which is accessing data only from temporary table) and saw that CPU usages after the this process reduced drastically.

I know I can further reduce the CPU overhead by storing the temporary data in a text file. You guyz know that I’m lazy so that part is left for another day.

If you are not a programmer or tech savvy person, and worried about possible damage to upgrade of files then don’t worry there is a great plugin of wordpress for doing this which is developed by techiebuzz.  This wordpress automatic upgrade plugin is damn good and I’m using it for updating the version of this blog. I upgraded the wordpress in just two minutes just following few instruction given by this plugin.

So friends don’t be late before somebody started exploiting your wordpress blog , upgrade it now.

I would like to hear the honest response from you guyz and let me know any feedback and Improvement I’ve to do if there is any. Here is the some of the feeback from my twitter friend quickly after changing the theme.

Hope to hear some honest comment from you.

HEIGHT OF HELPLESSNESS:
Receiving no emails for a week.

HEIGHT OF COWARDICE:
Two persons fighting through emails.

HEIGHT OF CARELESSNESS:
Writing a love mail and doing a ‘Send All.’

HEIGHT OF FRUSTRATION:
The email server being down.

HEIGHT OF TIMEPASS:
A person sending email to himself

HEIGHT OF REPETITION:
Forwarding an email to someone and receiving the same email forwarded back to you By some one in the receiving chain.

HEIGHT OF BROWSING:
U r swimming in the water tank and shout ‘F1 F1 F1 ‘ instead of shouting ‘HELP’ when u are unable to swim…

1) Follow sitepointdotcom at twitter and they will send you the direct message to you at twitter.

OR

2) If  you don’t have twitter account the, go here  http://twitaway..com/ and enter your email address. They will send you the download link of that book in your email address.

If you have twitter account then follow me on twitter @roshanbh. We can stay in touch to share our experiences.Believe me twitter is great place for sharing messages.

What are the benefits of using MVC PHP frameworks ?

Well there are many benefits of using PHP frameworks, let’s see some of the main benefits of using them.

1. They PHP frameworks follows some design pattern, so when you use these framework you’ve to follow their coding convention which makes your code clean and extensible for future purpose.
2. The Popular PHP frameworks like CakePHP, CodeIgniter, Zend Framework , Symfony follows Model View Controller(MVC) design pattern which separates business logic from user interface making the code cleaner and extensible.
3. As everybody can guess, these frameworks contains a lot of libraries to make your job easier. For example, to validate a from you don’t have write much code as you’ve to in normal coding scenario, just few lines of code calling the library might be enough for it.
4. While working on a large project in a team, these MVC PHP framework will be a great tool for development as you can assign a developer to develop MVC part of a module for a developer and integration will be quite easy of these developed module at final level.
5. These MVC framework will really helps you to develop the project rapidly, if you know one framework well then you’ll never worry about the project deadline.
6. Most of these MVC frameworks uses clear url approach making your web project SEO friendly.

Furthermore, if you want charge money to visitors who download or access content of your website then this software is highly useful.

What are disadvantage of using MVC PHP frameworks?

A coin has two parts similarly a bright stuff always have dark part as well .

1. Different framework have different coding convention, Depending upon the the framework, you’ll have to learn coding convention for the framework you want to follow. So depending upon the framework, it might to struggle at the beginning.
2. While coding using these framework, sometime you’ll not find any library or helpers which might be useful for you so you’ll have to struggle bit at that time.
3. If you don’t have OOP experience then PHP MVC framework are not you. First build a solid knowledge of OOP with PHP then only think about choosing any framework.
4. PHP frameworks are not for the small projects from my point of view, because in a very simple project custom coding will work faster than setting up a framework.

Which framework should I choose?

This is the one of the most discussed question about the PHP framworks. So it depends upon particular person and project which framework will best suit for you. But depending upon my experience, I can show you some way to choose the framework.

1. If you’re just want to use MVC framework for your next project, then I suggest you to go for CodeIgniter. It is very easy to learn and well-documented.Furthermore, it’s very flexible because it is not so strict on naming conventions etc. Furthermore, Model is optional while coding in codeIgniter so it is not necessary to use model for each controllers.
2. If you’re coding architecture savvy, then I suggest you to go with CakePHP, probably the most popular PHP framework but I must admit. This framework’s coding style is similar to Ruby on Rails and naming conventions are strict in this framework.So if you’re working on a huge project in a team then this project will be the right choice for you.
3. If you’ve to use a lot web services external APIs in your project then Zend Framework will be right choice for you, it contains huge libraries for external APIs compared to any other PHP MVC framework. The main benefits of this framework is that you can use them as components(without using MVC) in your project or you can follow Zend framework’s MVC architecture to develop your project. The other benefits of this framework is that you can use it inside any of the above two MVC frameworks. And, this framework one of the most favourite of people when I conducted the poll for the best PHP framework ?

1. I am currently out at a job interview and will reply to you if I fail to get the position. Be prepared for my mood.

2. You are receiving this automatic notification because I am out of the office.

If I was in, chances are you wouldn’t have received anything at all.

3. I will be unable to delete all the unread, worthless emails you send me until I return From holiday on 4 April. Please be patient and your mail will be deleted in the order It was received .

4. Thank you for your email. Your credit card has been charged £5.99 for the first ten Words and £1.99 for each additional word in your message.

5. The e-mail server is unable to verify your server connection and is unable to deliver This message. Please restart your computer and try sending again.

6. Thank you for your message, which has been added to a queuing system…

You are Currently in 352nd place, and can expect to receive a reply in approximately 13 weeks.

7. I’ve run away to join a different circus.

But this the way tech people survives a day in office!!!!

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

Why membership software is needed?

As the name specifies, if you are building a website which may have different members like free members, paid members (such as monthly subscription) etc. Furthermore, if you want to allow access to certain content to paid members and block access for free members to these areas then this software is very useful for security and flexibility.

Furthermore, if you want charge money to visitors who download or access your website content then this software is highly useful.

Features of OpenCrypt

Here are some of the main features of the OpenCrypt membership software:

1) Manage membership subscriptions and member’s areas

2) Automated membership renewal and billing system

3) Intregrated shopping cart

4) In built point system and download manager for allowing you to charge for accessing your content and downloads.

5) Template based front-end for easy customization.

6) Helpdesk, article management and affiliate systems.

These are the main feature of this software. For full feature detail you can check their membership software features page.

But one small suggestion, when I logged in inside the user management area there was still the link for login which I think should not have been there if a user is logged in. Please take this as my suggestion part.

But overall, this software has impressed me a lot while looking at their online demonstration and I’ll suggest you to give this software a try if your website is mainly focused on the membership subscriptions.

Jquery plugin: Word-count code

jQuery.fn.wordCount = function(params)
{
   var p =  {
   counterElement:"display_count"
   };
   var total_words;

  if(params) {
      jQuery.extend(p, params);
   }

  //for each keypress function on text areas
  this.keypress(function()
  {
    total_words=this.value.split(/[\s\.\?]+/).length;
    jQuery('#'+p.counterElement).html(total_words);
   });
};

VIEW PLUGIN’S CODE

As you can in the above code, I assume that each words of a paragraph are separated by the either spaces or dots(.) . Please have your suggestion if i can more characters to improve this plugin.

How to use this plugin?

Well, you can guess that a Textarea is needed of whose words are counted and another element like div or span needed to display the word count.

For example, the below HTML code contains Textarea (whose total word is counted) and span (for displaying counted word).

<textarea name="word_count" id="word_count" cols="30" rows="6"></textarea>
Total word Count : <span id="display_count">0</span>

Remember that the id of text area is “word_count” and “display_count“.

Now, let look at the jQuery code for displaying word count of text area , note that we are calling the function wordCount() which we’ve just developed in the plugin of jQuery.

$('#word_count').wordCount();

Note: display_count  is default id of element which is already defined in the plugin if you want to use the different id of elment then you’ve to override the value of variable counterElement which contains the id of element displaying word count.

$('#word_count').wordCount({counterElement:"word_counter"});

DOWNLOAD EXAMPLE CODE