In Thursday, July 29, I have published a new jQuery gallery plug-in named as Easy Gallery.
This gallery is easy to be used and has a simple code.

Not talking too much about it, i will provide you with all links available.
But let me tell you how does this gallery work:

The HTML code used for Easy Gallery as follow:

<div id="gallery">
    <ul>
        <li><img src="image1.jpg" border="0" alt="" /></li>
        <li><img src="image2.jpg" border="0" alt="" /></li>
        <li><img src="image3.jpg" border="0" alt="" /></li>
        <li><img src="image4.jpg" border="0" alt="" /></li>
        <li><img src="image5.jpg" border="0" alt="" /></li>
    </ul>
</div>
<div id="ssgThumbs"></div>

Google has create a Google Font API for public use to give web developers and web designers the ability to use extra fonts on the web, not only the standard web fonts.

 There is a lot of PHP classes for upload, resize and crop images. But I created this one for many reasons as mentioned below:

• Ease of use.
• Flexibility.
• PHP version: 5 or later.
• Can upload, resize and crop image.. All in one.

After knowing the reasons for making this class, let's know how it works.

Now let me explain what properties we can use in this function.

First, I would like to tell you what basic (standard) options for .ajax() as follow:
Properties:
- url: String /* The URL to send the request to */
- type: String /* The request type ("GET", "POST") */
- contentType: String /* default: "application/x-www-form-urlencoded" */
- data: Object, String /* Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key i.e. {foo:["bar1", "bar2"]} becomes '&foo=bar1&foo=bar2' */

Events:
- beforeSend: Function /* This function runs just before sending the request */
- success: Function /* This is an important part. Here we run the code because the request is done */
- complete: Function /* This function runs after the success is done and errors are shown */
- error: Function /* This function runs when error occurred
function(ajaxHnadler,eventHandler){
// ajaxHandler: xmlHTTP object
// eventHandler: handles the event as string
*/
- timeout: Function /* runs when request is timed out */

There are more options, you can check them on jQuery website.
Actually, I cannot create a demo to test all mentioned properties and methods... So, if you experienced a problem or need some help, please contact me.

For more information about jQuery AJAX Please visit: click here.
You can also read about .GET and .POST

• Code level.
• Server (host) level.

The rist for not securing these two levels are:

• Losing important data.
• Losing your database.
• New files and folders created on your server (hack).
• updating your current files by adding maleware script to the end of files.

PHP level security:

The PHP level will prevent injections to SQL datbase.

So, it will secure you from losing data having problem with your database.
The most thing you should know is: Don't trust any data sent from client.
So,
for numeric posts (POST or GET) use: "(int)" before the variable. This will change the type of it to integer (if you need it like that). See this code:
$id = (int)$_GET['id'];
// OR
$id = (int)$_POST['id'];

Also see the list of types below:

• (int) cast to integer.
• (bool) cast to boolean.
• (float) cast to float.
• (string) cast to string.
• (array) cast to array.
• (unset) cast to NULL (PHP 5).
• (binary) cast to binary (PHP 6).

When you have POST or GET data sent from client as String or TEXT, try to clean it to prevent SQL injections by using "mysql_real_escape_string($string)" function.
Example:
$text = mysql_real_escape_string($_POST['textfield']);

NOTE: don't forget to prevent access to inner files used in includes.

Server (Host) level:

Try to download the Security information test from PHP.net and upload it to your host to show your the host security levels. Download it from this link: http://phpsec.org/projects/phpsecinfo/

Here is the list of security issues and better values they should get:

• allow_url_fopen must be: 0 (disabled)
• allow_url_include must be: 0 (disabled)
• magic_quotes_gpc must be: 0 (disabled)
• register_globals must be: 0 (disabled)
• SAFE_MODE: you can turn off this feature, this feature is Deprecated in PHP 5.3 and Removed in PHP 6

 Don't forget to do the following:

• Add empty file named as "index.html" to any directoy doesn't have any "index.html" or "index.php" files.
• Remove any write permissions on any file or folder you don't want to change or modify.
• Add permissions to inner folders to prevent direct access.

In the last jQuery Animate article I wrote, I mentioned how to use the .animate() function with few tricks.

But here, I am going to write about jQuery Animate function in general and I will explain few things and some tricks.

The jQuery Animate is a smart object because could be used at any syntax.
I mean,
We can use the default syntax of this function as follow:

$().animate({
/* params */ },
/* integet time period in milliseconds */
);


Lot of jQuery projects relies on keyboard/mouse event like pressing "p" for previous and "n" for next also using the arrows.

Because this is important, I have managed a code to get the keyboard character on 3 events:
- Keypress
- Keyup
- Keydown

I have created a function to return the key as below:

function getKey(key){
if ( key == null ) {
keycode = event.keyCode;
// To Mozilla
} else {
keycode = key.keyCode;
}
// Return the key in lower case form
return String.fromCharCode(keycode).toLowerCase();
}


Now let's use the events:

/*Keypress*/
$(document).keypress(function (eh){
alert("Keypress: The key is: "+getKey(eh));
});

/*Keyup*/
$(document).keyup(function (eh){
alert("Keyup: The key is: "+getKey(eh));
});

/*keydown*/
$(document).keydown(function (eh){
alert("Keydown: The key is: "+getKey(eh));
});


To see an exaple of this code, please check the demo below:
jKey demo

Have fun.

Hi reader,
Today i have experienced something new with images.
I created HTML page contains image. This image was mapped by using <MAP tag.

Actually,
You can’t find these areas when are browsing this page.. Because these areas (dimensions) are hidden and have nothing to be identified.

So, I was looking for way to identify these areas with something till i had an idea of adding borders or creating a floating DIV with 0.3 opacity to tell the visitor that you are pointing to this area.

Here I will mention how to use the jquery animate function and the usability and flexibility of it.
The syntax of this function is:

$.animate(options, settings, callback);
/* you can replace setting with duration (in milliseconds) or words: 'slow', 'normal' or 'fast'.
callback is optional */

Below is a list of popular and most used animation:

• increasing/decreasing width and height
• moving or scrolling html element
• changing opacity
• scrolling window

Now let me explain each in an example.

I have collected some jQuery image galleries for you to choose your preferred one. Each one is working in different way than the other.
Here is the list of the top 5 jquery image galleries: