New and Easy Gallery for jQuery

Posted by Alaa Badran in Uncategorized. 1 Comment

1st August

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>


Apply a custom font to your website, Works on all Browsers

Posted by Alaa Badran in Browsers, CSS, Design, Free Stuff, HTML, Web Browsers, XHTML. 11 comments

2nd June

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.


PHP image class (upload, resize, crop)

Posted by Alaa Badran in Uncategorized. 7 comments

21st March

 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.


Must know to secure your web host

Posted by Alaa Badran in Uncategorized. No Comments

23rd December

I would like to talk about hacks and how to secure your code in 2 levels. The 2 levels are:

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 … Read More »


More about jQuery AJAX

Posted by Alaa Badran in Uncategorized. 8 comments

13th October

jQuery made AJAX simple by using .ajax() function.
The syntax for this function is:

$.ajax( /* properties */);

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 */
– … Read More »


jQuery Animate – Advanced

24th September

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


jQuery: Catch Keyboard Events

18th June

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 … Read More »


jQuery Image Map

Posted by Alaa Badran in Uncategorized. 10 comments

3rd June

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.


jQuery Animate

19th May

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.


Top 5 jQuery image galleries

Posted by Alaa Badran in Uncategorized. 10 comments

3rd May

This article is old. Please view 10 top jQuery plugins for images in 2011

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: