For web developers and web designers who want to add their FONT to websites without using Standard Web Fonts and without making text as images.

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.

Read more »

Link: http://blog.freelancer-id.com/index.php/2009/05/24/jquery-animate

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 */
);


Read more »

Link: http://www.freelancer-id.com/files/jkey/

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.

Link: http://www.freelancer-id.com/files/map/

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.

Read more »

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.

Read more »