Syed Abdul Baqi

jQuery is a JavaScript framework library, which makes the life of the web developer easier. In this tutorial I will focus on the implementation and uses of jQuery selectors. jQuery follows CSS style of referring to an element. Now I will try to give some list of examples below, which illustrates jQuery referring different kinds of elements.

HTML Code:

<div id="myDiv">Hello-1</div>
<div class="myDiv">Hello-2</div>
<div id="parentDiv"><div id="childDiv">Hello-3</div></div>
<div class="myDiv">Hello-4</div>
<div></div>

jQuery Code:

1. $("#myDiv")[0].innerHTML; returns "Hello-1"
2. $(".myDiv")[0].innerHTML; returns "Hello-2"
3. $("#childDiv")[0].innerHTML; returns "Hello-3"
4. $("#parentDiv > div")[0].innerHTML; returns "Hello-3"
5. $(".myDiv")[1].innerHTML; returns "Hello-4"
6. $("div")[0].innerHTML; returns "Hello-1"

These are just few basics examples for jQuery selector. There are many more ways in which the selectors can be used for accessing HTML elements. I will try to add more as I get time.

Comments are welcomed….

Advertisements

Hello Everybody,

Recently I have written new Image Thumb Generator class for PHP for one of my project. The class is having very small footprint and easy to use, just wanna share with all of you. It is available for download here. This class uses GD Library for generating thumb images, so make sure you have GD Library Extension enabled before use it.

Usage:

include 'image.class.php';
$image = new Imagethumb(<source file path>, <Maintain Aspect Ratio(TRUE|FALSE)>[DEFAULT: FALSE]);   
$image->getThumb('thumb file path to save', (int)<width>, (int)<height>);

Example:

include 'image.class.php';
$image = new Imagethumb('Blue hills.jpg', true);   
$image->getThumb('thumb.jpg', 125, 125);

Comments are welcomed….

Hello Everybody,

Today I will show you a simple approach to achieve Multilingual functionality in the website powered by PHP. This approach is so simple that I believe we can use it in small and medium scale projects without any hesitations :).

Before going into more details, if you want to check the code you can download it from here (rename extension “doc” to “zip”).

My approach towards this requirement is simple. First create different Language Files (example: english.lng, dutch.lng, etc) which will hold language vocabulary defined in a constants. After this we will have to replace the text (in our PHP files) with constant defined in file, where ever neccessary. Now depending upon the language selected load the particular language file. Best way to this approach is by passing language name using query string like,

http://localhost/multilingual/index.php?language=en

So based upon the query string parameter language file will be loaded and hence the text in the website will change as per the language file. To make things more better we can also make use of Apache Mod Rewrite to make URL more user friendly.

.htaccess

<IfModule mod_rewrite.c>
 RewriteEngine on
 RewriteRule    ^(en|du|EN|DU)/(.*) $2?language=$1 [NC,L,QSA]
 RewriteRule    ^(en|du|EN|DU)$ http://localhost/multilingual/$1/index.php [R=301,L]
</IfModule>

This code will convert the URL

http://localhost/multilingual/index.php?language=en

to

http://localhost/multilingual/en/index.php

You can download the complete code from here (rename extension “doc” to “zip”). Let me know how I can make this code more better and robust.

Comments are welcomed….

Hello Everybody,

Recently I have coded one dynamic graph-code for PHP using GD Library. Just want to share the code with all of you guys. Feel free to make any modifications and use it in your projects. You can find the code below:

graphcode.php

<?php

$data1 = $_GET['tot'];
$data2 = $_GET['correct'];

$im = imagecreate(100,20); // width , height px

$lightblue = imagecolorallocate($im,226,224,224); 

if($data2 > 0 && $data2 <= 10)
{
 $darkblue = imagecolorallocate($im,255,0,1);
}
elseif($data2 > 10 && $data2 <= 20)
{
 $darkblue = imagecolorallocate($im,243,80,1);
}
elseif($data2 > 20 && $data2 <= 30)
{
 $darkblue = imagecolorallocate($im,244,116,1);
}
elseif($data2 > 30 && $data2 <= 40)
{
 $darkblue = imagecolorallocate($im,243,147,1);
}
elseif($data2 > 40 && $data2 <= 50)
{
 $darkblue = imagecolorallocate($im,243,189,1);
}
elseif($data2 > 50 && $data2 <= 60)
{
 $darkblue = imagecolorallocate($im,243,225,1);
}
elseif($data2 > 60 && $data2 <= 70)
{
 $darkblue = imagecolorallocate($im,214,243,1);
}
elseif($data2 > 70 && $data2 <= 80)
{
 $darkblue = imagecolorallocate($im,189,243,1);
}
elseif($data2 > 80 && $data2 <= 90)
{
 $darkblue = imagecolorallocate($im,140,243,1);
}
elseif($data2 > 90)
{
 $darkblue = imagecolorallocate($im,92,243,1);
}

$x = 0;         // bar x1 position
$y = 20;         // bar $y1 position
$x_width = 0;     // width of bars
$y_ht = 20;     // height of bars, will be calculated later

for ($i=1;$i<$data1;$i++)
{
 $x_width = $i * 1;
 imagerectangle($im,$x,$y,$x+$x_width,($y-$y_ht),$lightblue);
}

$y = 20;
$y_ht = 20;

for ($i=1;$i<$data2;$i++)
{
 $x_width = $i * 1;
 imagerectangle($im,$x,$y,$x+$x_width,($y-$y_ht),$darkblue);
}

imagejpeg($im);

?>

You can use the above file as shown below:

<img src=graphcode.php?tot=100&correct=75 />

You will have to pass 2 query string variables to file as shown above. The first variable (tot) represents total percentage, and second variable (correct) represents correct percentage. Also make sure you have GD library enabled in PHP.ini

Let me know, how I can make the script more flexible.

Comments are welcomed…

JavaScript function for converting string into Indian currency format

    //function for converting string into indian currency format
    function intToFormat(nStr)
    {
     nStr += '';
     x = nStr.split('.');
     x1 = x[0];
     x2 = x.length > 1 ? '.' + x[1] : '';
     var rgx = /(\d+)(\d{3})/;
     var z = 0;
     var len = String(x1).length;
     var num = parseInt((len/2)-1);
 
      while (rgx.test(x1))
      {
        if(z > 0)
        {
          x1 = x1.replace(rgx, '$1' + ',' + '$2');
        }
        else
        {
          x1 = x1.replace(rgx, '$1' + ',' + '$2');
          rgx = /(\d+)(\d{2})/;
        }
        z++;
        num--;
        if(num == 0)
        {
          break;
        }
      }
     return x1 + x2;
    }

Hope this helps someone…..

Comments are welcomed….

AJAX(Asynchronous Javascript and XML). With AJAX you can create better, faster, and more user-friendly web applications. AJAX is based on JavaScript and HTTP requests. In other words there is no AJAX, if there is no Javascript.

The best way to learn AJAX is to directly dive into code, analyze the code below

var ajaxRequest;
try
{
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange = function()
{
if(ajaxRequest.readyState == 4)
{
var str = ajaxRequest.responseText;
document.getElementById('result').innerHTML = str;
}
else
{
document.getElementById('status').innerHTML = 'Loading.....';
}
}
query = id;
ajaxRequest.open("GET", "url.php?query="+query, true);
ajaxRequest.send(null);

So have you understood anything, if yes thats very good, if no then you will understand within few minutes 🙂

OK lets analyze the code step by step:var ajaxRequest;just creating a variable to hold XMLHttpRequest object, which we are going to use to make Asynchronous calls to server.
further,

try
{
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser broke!");return false;
}
}
}

in the above code snippet we are creating a XMLHttpRequest object and assigning it to, javascript variable ajaxRequest which we have created earlier.

ajaxRequest=new XMLHttpRequest() this is for the Firefox, Opera, and Safari browsers. If that fails, try ajaxRequest=new ActiveXObject(”Msxml2.XMLHTTP”) which is for Internet Explorer 6.0+, if that also fails, try ajaxRequest=new ActiveXObject(”Microsoft.XMLHTTP”) which is for Internet Explorer 5.5+

further,

ajaxRequest.onreadystatechange = function()
{
if(ajaxRequest.readyState == 4)
{
var str = ajaxRequest.responseText;
document.getElementById('status').innerHTML = '';
document.getElementById('result').innerHTML = str;
}
else{document.getElementById('status').innerHTML = 'Loading.....';
}
}

ok so what do we have here, some bunch of blah blah code, not exactly
onreadystatechange property stores the function that will process the response from a server. And once the server side processing is done, readyState is SET to 4 means data is available from server. This data can be used from ajaxRequest.responseText

aren’t we forgetting something,before receiving response from server, we should first send request to the server 😀

ajaxRequest.open("GET", "view_user.php?query="+query, true);
ajaxRequest.send(null);

The open() method takes three arguments. The first argument defines which method to use when sending the request (GET or POST). The second argument specifies the URL of the server-side script. The third argument specifies that the request should be handled asynchronously. The send() method sends the request off to the server.

Frankly speaking I don’t prefer writing all this code every time an Ajax request is to be made, any professional developer would mind. I would suggest newbies to start looking into some javascirpt framework, like prototype, jQuery, YUI, etc for using Ajax. Personally I prefer using jQuery.

Comments are welcomed….

Hello every,

If you are a web developer, who is looking to make your life a little bit easier. Then these add-ons will definitely help you out.

Today I am going to discuss few of the Firefox’s Mozilla Browser add-ons, which is used for web development. I will go in reverse chronological order.

6. JSView

All browsers include a “View Source” option, but none of them offer the ability to view the source code of external files. Most websites store their javascripts and style sheets in external files and then link to them within a web page’s source code. Previously if you wanted to view the source code of an external javascript/stylesheet you would have to manually look through the source code to find the url and then type that into your browser.rnrnWell now there’s a much easier way. You can use the JSView extension to solve the problem.

5. IE Tab

This is a great tool for web developers, since you can easily see how your web page displayed in IE with just one click and then switch back to Firefox.

4. DejaClick

DejaClick is a web recorder and Super Bookmark utility designed exclusively for Firefox. You can record and bookmark your browser activities, then with a single click, replay the entire sequence all over again.

3. YSlow

YSlow analyzes web pages and tells you why they’re slow based on Yahoo’s rules for high performance web sites. It is also a good practice to run your website against YSlow, to find out all the parameters which is making your website slow. Once the result is out, YSlow will also give suggestion to improve the performance of the website.

2. Web Developer

I guess most of the web developer already knew this add-on. Adds a menu and a toolbar with various web developer tools. Web Developer toolbar really comes handy, when you want to work on Cookies, Sessions, CSS, HTML Forms, Images, Window resizing, HTML validators, viewing Intepreted HTML code in case of Ajax, etc.

1. Firebug

This is the best add-on for any web developer. Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page that too in real time. Use of firebug is really simple. Anyhow I am planning to write some notes on use of firebug if I get time.

So these are the most impressive add-ons that I came across. There are many more add-ons available under development catgory.

Comments are welcomed……