Archives for 2009

Free AJAX GIF Preloaders

Last updated on March 31st, 2009 by Gabriel Livan

An AJAX image preloader will definitely give a professional look to your applications. Here are 2 online tools that can be used to generate the gif loaders:

Ajaxload is an awesome tool that can be used to generate AJAX Loader Icons. To create one, you just need to select the indicator type, its background and foreground. Also, you can specify if you want to use a transparent color.

Preloaders.net is an excellent tool useful to generate GIF loaders from different categories: 3 dimensional (3D), Rectangular, Circular, Horizontal.

– the background and foreground color can be specified. A transparent background can be used too.
– you can specify custom sizes of the preloader
– an animation speed of the preloader can be set

Good luck!

PHP: How to Create Mirror Images using GD

Last updated on December 30th, 2009 by Gabriel Livan

This class is useful to create mirror images using the GD Library. You just need to set the source path of the image (URL or local path) and the folder where the new image should be saved. If the latter is not specified the image will output without being saved. This is useful if you need to generate mirror images ‘on the fly’.

Read more from this entry…

Stylish JavaScript Dialog (Alert, Confirm, Prompt) Boxes

Last updated on March 9th, 2015 by Gabriel Livan

The following list is useful if you need to replace the classical JavaScript message boxes (alert, confirm, prompt) with new and CSS customizable ones. jQuery and MooTools are some of the libraries used to make these excellent dialog boxes.

SweetAlert is a beautiful responsive highly customisable replacement for JavaScript’s “Alert”. It automatically centres itself on the page and looks great no matter if you’re using a desktop computer, mobile or tablet.

Options include:

A basic message
A title with a text under
A success message!
A message with auto close timer
A warning message, with a function attached to the “Confirm”-button…
Specific actions are triggered whether “Confirm” or “Cancel” was clicked

Source & Demo: http://tristanedwards.me/sweetalert

jQuery Alert Dialogs Plugin is meant to replace the basic functionality provided by the standard JavaScript alert(), confirm() and prompt() functions. These custom methods are completely customizable via CSS, each dialog can have its own title, and also provide an advantage to the usage of prompt() in IE7, where users get an ugly warning and usually have to reload the page. This modal dialog box automatically positions itself if you resize the browser window. If the jQuery UI Draggable plugin is included, the box can be moved by dragging its title bar.

Here are a few code examples of how easy it is to setup an alert once you included the plugin:

Alert

jAlert('This is a custom alert box', 'Alert Dialog');

Confirm

jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
    jAlert('Confirmed: ' + r, 'Confirmation Results');
});

Confirm

jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
    if( r ) alert('You entered ' + r);
});

Confirm

jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
    if( r ) alert('You entered ' + r);
});

With HTML

jAlert('You can use HTML, such as bold, italics, and underline!');

Source: http://abeautifulsite.net/notebook/87
Demo: http://abeautifulsite.net/notebook_files/87/demo/
Download: http://www.bitrepository.com/download/jquery-alert-dialogs
License: Dual-Licensed under the GNU GPL and MIT License

Read more from this entry…

Image Reflection with jQuery, MooTools and script.aculo.us

Last updated on October 6th, 2009 by Gabriel Livan

Reflection.js for jQuery is an improved version of the reflexion.js script rewritten for the JQuery library. It’s easy to integrate, as you only need 2 files to call: the (latest) JQuery Library file and the Reflexion JS File. You can add instantaneous reflexion effects to your images in modern browsers in less then 2KB.

Some advantages of this new script:

* The reflection appear instantly under each image, after each image is loaded, without having to wait for all images to load and apply the reflection for all at the same time.
* The new code has a smaller size than the original reflection.js, being optimized for JQuery.
* The code has a few bug fixes that the original script doesn’t have. It usually works better.

[Go to Project Page | Download | View Demo]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">
<html>
 <head>
  <title>Image Reflexion with JQuery</title> 
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>

<script type="text/javascript" src="js/jquery.reflection.js"></script>
<script type="text/javascript">
<!--
// Code moves from jquery.reflection.js
jQuery(function($) {
$("img.reflect").reflect({/* Put custom options here */});
});
//-->
</script>
 </head>

<body>
<img alt='' src='images/js-logo.png' class='reflect'><br />
<img alt='' src='images/image-one.png' class='reflect'><br />
<img alt='' src='images/image-two.png' class='reflect'>
</body>
</html>

As you can notice a CSS class named ‘reflect’ is applied to the images. This uses the default reflection parameters:

$("img.reflect").reflect({/* Put custom options here */});

If you need to remove reflexion you can call the unreflect() method on a JQuery selector:

$("#photo_id_here").unreflect();

More information regarding the usage of this script can be found on the script’s page.

Reflection.js for MooTools is an improved version of the reflexion.js script rewritten for the MooTools JavaScript framework. The script has the same image reflection effect and features as the Reflection.js for JQuery.

[Go to Project Page | Compatibility | Usage | Download | View Demo]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">
<html>
 <head>
  <title>Image Reflection with MooTools</title> 
<script type="text/javascript" src="js/mootools.js"></script>

<script type="text/javascript" src="js/mootools.reflection.js"></script>

<script type="text/javascript">
<!--
// Code moved from mootools.reflection.js
window.addEvent("domready", function() {
	$$("img").filter(function(img) { 
return img.hasClass("reflect"); 
}).reflect({/* Put custom options here */});
});
//-->

</script>
 </head>
<body>

<img alt='' src='images/mootools.jpg' class='reflect'><br />
<img alt='' src='images/image-one.png' class='reflect'><br />
<img alt='' src='images/image-two.png' class='reflect'>

</body>
</html>

script.aculo.us Reflector is a script that uses opacity-based fades and works on any background, including image-based backgrounds.

Click here to view the script in action (check the source of the page to understand how it works).

PHP: Sanitize Data to Prevent SQL Injection Attacks

Last updated on March 24th, 2015 by Gabriel Livan

This is a simple function that sanitizes the data before sending it to MySQL. First it removes whitespaces from the beginning and ending of the string. If magic_quotes_gpc is enabled and the data has been already escaped we will apply stripslashes() to the data. This way the data won’t be escaped twice when mysql_real_escape_string() is called.

function sanitize($data)
{
// remove whitespaces (not a must though)
$data = trim($data); 

// apply stripslashes if magic_quotes_gpc is enabled
if(get_magic_quotes_gpc()) 
{
$data = stripslashes($data); 
}

// a mySQL connection is required before using this function
$data = mysql_real_escape_string($data);

return $data;
}

The function mysql_real_escape_string() escapes special characters in a string for use in a SQL Statement. Unlike the deprecated function mysql_escape_string(), which doesn’t take a connection argument and does not respect the current charset setting, mysql_real_escape_string() calls MySQL library’s function mysql_real_escape_string, which prepends backslashes() to the following characters: \x00, \n, \r, \, ‘, ” and \x1a. It’s strongly recommended to use this function before sending any query to the mySQL database.
[Read more…]

« Previous Page