Boris Ding

I’ve just added two additional PHP files into this latest version of Agotcha! - v1.3.1. Basically, it’s all about Object-oriented programming, as I’m considering most of the PHP Developers are usually coding in OO method, so this is the reason why I come out with these files.

There are two newly added files:
1) connect_db_class.php
2) retrieve_chat_class.php

For those who codes in OO, you may alternatively use both of these files for running Agotcha!, and even to modify it in order to meet your needs. By default, this web-chat application is still using procedural method. However, the result is still the same for using OO programming. So, if you wanted to dive into OO, just rename these two files by removing “_class” from the file’s name will do.

Should you have any questions, feel free to contact me. Thanks for downloading and hope you will enjoy with it!

If you have been on Facebook for some while, I am sure you are getting used to experience those fancy popup boxes on the site. Doesn’t it look cool? I believe most of the web programmers have shown their jealousy when seeing this cool effect for fetching data on Facebook. I could say that I am the one of them, too. But now, I can do it and even apply to my works and of course, it is the same to you!

Well, here I am using jQuery’s Facebox - a facebook style lightbox. Try out this DEMO, and then take a look at these source code I have written:
JavaScript/jQuery:

<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="facebox.js"></script>
<script type="text/javascript">
//<![CDATA[
var boris = (function(){
    var borisImage = {
	    image: function(){
		$("#loading").show("fast",function(){
		 var i = 3;
		 $("#loading").html("<b>Loading... " + i +"</b>");
		 var firsInterval = setTimeout(function(){boris.countDown(i);}, 1000);
		});
	  },// end image function
 
	  countDown: function(i){
	   if(i != 1){
	    i--;
		$("#loading").html("<b>Loading... " + i +"</b>");
		var secondInterval = setTimeout(function(){boris.countDown(i);}, 1000); // call itself, recursively after one second
	   }else if(i == 1){
	     // clear ajax loader, and then load facebox
		 $("#loading").hide("fast", function(){
		  boris.showImage();	 
		 });
        }// end if	  
	  },// end countDown
 
	  showImage: function(){
		var input = "action=view&sid=" + Math.random();
		    $.ajax({  // load page via jquery ajax, 
            type: "POST",
   			url: "boris-image.php",
   			data: input,
   			success: function(result){ 
   	          $.facebox(result);  //and get the fetched data and load into facebox
           }//end success
          });// end $.ajax
	  }// end showImage	  	  
	};
   return borisImage;
})();
//]]>
</script>

As you have seen from the DEMO, actually the idea of the behind is quite simple:
1) Show the Ajax’s loader
2) Counting down by starting with 3 and minus 1 after every second (call the function recursively)
3) Hide the Ajax’s loader again once reached the first
4) Trigger jQuery $.ajax() function
5) Load data (image for this case) from server-side (php file)
6) Display fetched data (image) into facebox

I have fully written the JavaScript in closures method, so it is important to get yourself familiar with JavaScript’s closures concept before you dive into it.

The CSS for the Ajax’s loader is as follows:

<style type="text/css">
<!--
/* loader */
.loader {
display: none;
position: fixed;
top: 18px;
left: 0%;
width: auto;
height: auto;
padding: 4px;
border: 0px solid #CCCCCC;
background-color:#FF9900;
z-index:1002;
overflow: auto;
text-align:center;
}
-->
</style>

It is actually similar with the one I have shown in my previous post, just with slight changes inside.

And the last, is very basic PHP code here:

<?php
$action = $_POST["action"];
if($action == "view"){
echo "<h3>Hi! There, thanks for trying out this demo ^^</h3>";
echo "<img src=\"boris.jpg\" title=\"Boris Ding Poh Hing\">";
}
?>

Feel free to contact me for all files if you need it. Enjoy!

Note:
Not only for static text, yet you can also display any pages into this cool lightbox as well as the form, etc.