How to Use JQuery UI Progress Bar

Hi! As you know, we wrote something about JQuery before. We'd talked about where and how to use it. 


In this article, we're going to learn using progress bar we all know. For using it, have to include the library about this. Like i said, this article is about showing load progress using JQuery UI.


I guess that we all need to load progress while our pages was loading on. All of expert of software think about that is the best way ever. For that reason, this is indispensable for us :)


Well, we'd talked about the libraries. If you learn how to use those, you can visit Jquery web site. 


Your Html Page should be like:

<div id="progressbar"></div>

When the script stars and loads, progress bar will work on the div layer which's id is progressbar.

This is my jquery document:

$(document).ready(function() {
 var count = 0;
 setInterval(function() {
  count = count + 0.5;
  $('#progressbar').progressbar({
   value : count         
  });
 }, 10);
});

As you see, setInterval function is counting our count and then load the page. I used to 0.5 value. If you want to load faster or slower, can change the 0.5 value, namely value of count.

If you want to see how the demo works, you can visit this page.

Just remember that is an open source project and if you see the code, you can see the code, if you want to get the code, you can get to code also. And libraries we used on the script are here.

We'll see you guys next article!

Facebook Like Button Example With JQuery

Hi! We all got a Facebook account. As you remember, Facebook's got so much options that we can use, Like button, Chat, TimeLine etc.

In last article, I made mention of Jquery used within Facebook. Today, I'll show you one of'em. That is "like button".

As you know, when our friends share something, we can like it easily. When clicked the like button, data is saved without refresh. Because of this is JQuery&Ajax. Actually this example is not going to be like Facebook Like Button Module exactly, but, may be a good idea to do it for some of us. This things're so easy to do. We all need a database, a PHP page and a coding ajax page with ajax library, where is that complex?

Let's start it!

First, create your MYSQL Table;

CREATE TABLE `jquery_app`.`LikeButton` (
`ID` INT( 11 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`data` VARCHAR( 255 ) NOT NULL
)

You shall need this files:

1. settings.php //database configurations
2. jquery.js //your jquery code
3. jquery library //you must include this file on index.php page
4. match.php //your php code that you do like something and write database
5. index.php //default page

index.php

This is facebook like button example. This is what i share! :)
< a href="#" id="like">Like < div id="whathappened"> //We see total clicked like button
< /div>
< div id="whathappening"> //We see what happening now
< /div>

When click the link, sending query to jquery.js page. After that jquery starts ajax method and searchs match.php page for adding +1.

jquery.js

// JavaScript Document
$(document).ready(function() {
 $('#like').click(function() {
  $('#whathappening').fadeIn(1000);
  var wait="Adding..";
  $.ajax({
   cache:false,
   async:false,
   url:'match.php',
   success:function(inc) {
    $('#whathappened').html(inc);
    $('#whathappening').html(wait);
    $('#whathappening').fadeOut(1000);
   }
  });
 });
});

When id=like click, data'll been added to database. If you ask how to add this, you should analyze the page is shown below.

match.php

 include("settings.php");
 //adding data
 $random=rand(0,99999999);
 $ekle=mysql_query("INSERT INTO LikeButton(data) values('$random')");
 //how many data we got
 //with the data we've just added
 $show=mysql_query("select * from LikeButton");
 $total=mysql_num_rows($show); //Getting total liked
 echo "Total: ".$total; //Print total liked.

What you see here, all php code. We include settings.php page for connection database. We get total and add +1 to this.

settings.php

 $conn=mysql_connect("localhost", "username", "password") or die("error1");
 mysql_query("SET NAMES 'utf8'") or die("error2");
 mysql_select_db("jquery_applications",$conn);
 error_reporting(0);
 ini_set('display_errors','Off');
 error_reporting(E_ALL); 

That's it! You've just done Facebook like module. If you want to see how to work this, you can visit the web site for demo.

Module view

When "Like" link click

Web 2.0 Tech and a Jquery Auto Search Complete Application!

Hi! Today I want to talk about web 2.0 technology. As you know, web 2.0 is being used by many of us. Especially frameworks developed with javascript and ajax, used by everyone. Well, we can say that huge companies which are google, yahoo, facebook and twitter etc. use web 2.0 too.

I would like to make an application on Jquery and share with you guys. So, in 2006, Jquery's started to be developed as an open source project. When you see "The write less, do more", you should understand that is Jquery! There is a powerful library of javascript, that's why we can do good jobs with the less code on Jquery.

If you want to see more information, you can visit the official web site of jquery. You can also find documentation and examples on it. That is here!

You must call as include jquery library on your web site, for the successful operation of your jquery code. You can find the library on Jquery Web Site easily.

The point I wanted to show you here is an ajax application on jquery. However, I am thinkin' that I should show you couple simple examples, before starting to applicaton.

$('#divID').slideUp(1000); //Sliding the div up
$('#divID').slideDown(1000); //Sliding the div down
$('#divID').slideToggle(1000); //Sliding the div up and down
$('#divID').FadeToggle(1000); //Displaying or hiding the div
$('#divID').html(“Hello World!”); //Printing something as HTML tags

$(‘a’).click(function() {
 $("#divID").animate({left:'+=100px'}, 2000); //when you click the mouse, do something
});

As you have seen, when you code jquery, you can control the web site all the way.
The application I'll show you, is an AUTO SEARCH COMPLETE!

This is the text field we'll use when searching.

This is the div layer will open during our php script works.

// JavaScript Document
$(document).ready(function() {
 $('#TextBox').keyup(function() {
  document.getElementById("result").style.display="block";
  var variable=$('#TextBox').val();
  $.ajax({
      url:"data.php",
      data:"TextBox="+variable,
      cache:false,
      async:false,
      method:'post',
      success:function(kitchen) {
          var message="Loading..";
          $('#result').html(message).load();
      }
  });
 });       
});

As you have seen, when keyup() function works, the system is getting data from data.php page. data.php page is shown below

 include("database.php");
 $data=$_REQUEST["TextBox"];
 if(!$data==0) { 
  $MyData=mysql_query("select * from names where name like '%$data%'");
  if(mysql_num_rows($MyData)<"1") {
   echo "There is nothing about it!"; 
  } else {
   echo "Languages!
";
   while($MyList=mysql_fetch_array($MyData)) {
    echo $MyList["name"]."\n";
   }
  }
 } else {
  echo "Please, start to write something.."; 
 }

Today, we made a jquery search auto complete application. If you visit and see this application, just click demo page!

See you guys next article!