El Blog del Antonio » Javascript

Torrenova Rentacar

Antonio Ramirez — Wed, 31 Mar 2010 09:32:14 +0000

Torrenova Rentacar

I would like to show you one of the reasons of why I have been so busy lately: torrenovarentacar.com.

One of the most complete sites in terms of rentacar systems. Fully synchronized with one of the most used rent a car management programs in Spain, CarPlus (www.cargestion.es) and with a highly powerful control panel where the rent a car owner controls absolutely everything. Its web panel features:

Company details
Contacts
Offices and their Google locations
CarPlus Settings and Sync
Users
Extras
Cars
Car Groups
Car Models
Translations (It can set new languages at will)

If you have time, please check it out as I would love to get some feedback about it.
Thanks!

Visual Lightbox

Antonio Ramirez — Mon, 08 Feb 2010 15:38:19 +0000

This post is for those who wish to implement a beautiful Lightbox plugin on their site or blog and, unfortunately, do not have a clue about Javascript and/or jQuery and/or Html.

VisualLightBox is a free application that helps you easily generate online photo albums, lightbox gallery with a nice Lightbox-style overlay effect, in a few clicks without writing a single line of code.

Just drag&drop your photos to VisualLightBox wizard window, press “Publish” and your own css web site album with beautiful LightBox effects will open in the browser instantly!
No css, image editing, javascript, html coding, just a click to get your cool web page album ready.

It takes less than a minute to have your own image gallery.

For full documentation please go to http://lightbox2.com/

Newbies, now there is no excuse to have your featured lightbox on your site!

Get Latitude and Longitude with Google Maps V3

Antonio Ramirez — Fri, 22 Jan 2010 14:56:24 +0000

I would like to share with you a little piece of code that I find quite useful in my applications. I do create lots of guides that require a small utility to find out the latitude and longitude of a business location from a control panel in order to display the maps appropiately on the Web. Here I will do my best to explain a step procedure on how to do that -once you know the procedure, it is easy to create plugins or whatever you wish to do.

Step 1

First of all, lets make a reference to the new version of Google Maps. Check that we have to specify a parameter sensor=false. To find out more about this parameter please follow this link.

Step 2

Now we are going to write the HTML tags on the BODY of our document that will hold the map and the controls that will hold latitude, longitude and zoom level references. Also, see the CSS that control the size of the map holder.







lat: lon:

zoom level:

Step 3

Now, we are going to write the function that will display the map when the document loads. The function, that we will call ‘initialize’ has different parts that we will describe now:

Part 1

Setting the map zoom level and its position in the world:

var myLatlng = new google.maps.LatLng(38.971154274048345,1.415863037109375); // IBIZA 
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("gmap"), myOptions);

Part 2

Placing a marker on the map specifying its center position (please refer to above code for LatLon location).

// marker refers to a global variable
marker = new google.maps.Marker({
position: myLatlng,
map: map
});

Part 3

Now, the events that will take control of the marker center re-positioning and placing the information on the correspondent document objects (lat, lon, and zoom level).

// if center changed then update lat and lon document objects
google.maps.event.addListener(map, 'center_changed', function() {
var location = map.getCenter();
document.getElementById("lat").innerHTML = location.lat();
document.getElementById("lon").innerHTML = location.lng();
// call function to reposition marker location
placeMarker(location);
});
// if zoom changed, then update document object with new info
google.maps.event.addListener(map, 'zoom_changed', function() {
zoomLevel = map.getZoom();
document.getElementById("zoom_level").innerHTML = zoomLevel;
});
// double click on the marker changes zoom level
google.maps.event.addListener(marker, 'dblclick', function() {
zoomLevel = map.getZoom()+1;
if (zoomLevel == 20) {
zoomLevel = 10;
}
document.getElementById("zoom_level").innerHTML = zoomLevel;
map.setZoom(zoomLevel);
});

Part 4

Initialize the document objects with default information

document.getElementById("zoom_level").innerHTML = 16;
document.getElementById("lat").innerHTML = 38.971154274048345;
document.getElementById("lon").innerHTML = 1.415863037109375;

Step 4

Finally, we have to write the function that will reposition the marker on ‘zoom_changed’ map event and call the ‘initialize’ function on window load event.

function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
marker.setPosition(location);
}
window.onload = function(){initialize()};

And that’s it, we have a great utility to plug onto our projects in order to find out the latitude and longitude of an address.

DOWNLOAD

I have included the working version of this tutorial for you to download. If you make any changes on the code in order to improve/add more functionality to it (that is easy fellows), please share it here with us.

download: Get Lat Lon Finder (1.41KB)
added: 22/01/2010
clicks: 375
description:

jQuery 1.4 -Are you ready?

Antonio Ramirez — Thu, 14 Jan 2010 15:17:48 +0000

jQuery lovers, today, 14th of January, the programmers of jQuery celebrate its anniversary releasing a new version of this wonderful library. Better iFrame support, great new shorthands, I don’t know what to say fellows but I am eager to find out what its new features are capable of.

The jQuery programmers not happy with a new release has also created a new jQuery API site. Check what they have done on their API site here.

John Resig will announce 1.4 release details tomorrow but meanwhile, you can download it and see for yourself.

Also, if you want to learn more about what is new in jQuery 1.4 then you might find the following resources useful:

Check what is new or changed on this new release here.

Happy birthday jQuery! Thanks for the good work!

Build iPhone Web Apps with iWebKit

Antonio Ramirez — Wed, 06 Jan 2010 00:15:55 +0000

Iwebkit is the revolutionnairy open source development kit used to create high quality iPhone and iPod touch websites in a few minutes. In the first 4 months of it’s existance the pack has greatly evolved from a basic idea to a project that has reached worldwide fame!

This Open Source Free Development Kit is accessible to anyone even people without any html knowledge and is simple to understand. In a couple of minutes you will have created a full and profesional looking website.

Awesome new and advanced features offered by no pack in the world like a custom popup and iphone-style form elements.

Check out their website: http://iwebkit.net/

And their demo: http://demo.iwebkit.net/

SWFUpload_0_0. Error HTTP Status: 403 Solved

Antonio Ramirez — Tue, 05 Jan 2010 11:21:18 +0000

SWFUpload is a client-side file upload tool originally developed by Vinterwebb.se. It uses a combination of Flash and JavaScript to provide file upload functionality beyond what the basic browser provides with the tag.

The main features that SWFUpload provides are:

The ability to select multiple files in the file browser dialog.
AJAX-style uploading without a page refresh.
Upload progress events.
Namespaced classes compatible with other JavaScript libraries (i.e., jQuery, Prototype, etc.).
Flash 9 and Flash 10 support. (Flash 8 support dropped in version 2.2.0)

SWFUpload is different from other Flash based upload tools because of the philosophy behind its design. SWFUpload gives developers control by leaving the UI in the browser (as much as possible). Developers can use XHTML, CSS, and JavaScript to tailor the upload UI to the needs and style of their site. Upload status updates are made through a set of simple JavaScript events. The developer uses these events to update the webpage as the file upload progresses.

How to use it

I am not going to explain how to use it, if any of you are interested on it, SWFUpload guys have developed a very good site explaining its full functionality.

The problem

After successfully installing the component on one of my projects and working amazingly good on the local computer, when I uploaded the project to the server where I contracted the hosting, suddenly I had an error: SWFUpload_0_0. Error HTTP Status: 403.

I google to find a solution to my problem and found tons of people having the same issue and the answers where always the same. For example:

“You are getting a 403. Which means “forbidden”. This is something on the web server that you’ll have to figure out.SWFUpload doesn’t save the file. It just uploads it to your upload_url (upload.php). You need to add PHP code that saves the file. In PHP the uploaded file is found in $_FILE["Filedata"] by default.”

Say what? I looked at my server’s configuration, checked folder permissions, reviewed my JS and PHP code… NOTHING. Then I thought it was something wrong with server POST Payload checks. Normally, this security configuration is disabled by default on Apache Servers but my provider ‘could’ possibly had this security check on. I had to try and…

Solution

I solved the issue by creating an .htaccess file and writing the following in it:

SetEnvIfNoCase Content-Type “^multipart/form-data;” “MODSEC_NOPOSTBUFFERING=Do not buffer file uploads”

Hope this also works for those having the same issue.

Happy New Year BTW!

Cookie jQuery Plugin

Antonio Ramirez — Sat, 02 Jan 2010 12:18:29 +0000

As published on my last post, JSON gives us the great possibility to save objects on Cookies. I have already created a JSON Plugin for jQuery, then, why not create one Cookie Plugin that, in conjunction with the JSON plugin, allows us to save objects on cookies? Well, the challenge was simple and I decided to do it for those using jQuery.

The code

Remember than this plugin works in conjunction with my JSON jQuery Plugin, also on this blog.

jQuery.cookie = {

set : function(name,value,options){

options = $.extend({}, options);

if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString();
}

value = options.json ? encodeURIComponent($.JSON.encode(value)):encodeURIComponent(value);

var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';

document.cookie = [name, '=', value, expires, path, domain, secure].join('');
},
get : function(name,json){

var cookieValue = null;

if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = $.trim(cookies[i]);
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = json ? $.JSON.decode(decodeURIComponent(cookie.substring(name.length + 1))):decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}

return cookieValue;

},
unset: function(name){
this.set(name,'',-1);
}
};

How to use

Note that you have to insert the jquery library on your head section and also the JSON jQuery Plugin -they are all included into the zip file below. Please, also refer to the example provided on my last article ‘cookies on roids’ to view more cookie options.

var obj = {json:'this is a test json property',xml:'this is a test xml property'};
var arr = ['A','B of 2 index array','C','D'];
var str = 'This is a string test';
var num = 123;

$.cookie.set('testobject',obj,{json:true});
$.cookie.set('testarray',arr,{json:true});
$.cookie.set('teststring',str);
$.cookie.set('testnumber',num);

var a = $.cookie.get('testobject',true);
var b = $.cookie.get('testarray',true);
var c = $.cookie.get('teststring');
var d = $.cookie.get('testnumber');

$.cookie.unset('testobject');
$.cookie.unset('testarray');
$.cookie.unset('teststring');
$.cookie.unset('testnumber');

alert('object:'+a.xml);
alert('array:'+b[1]);
alert('string:'+c);
alert('number:'+d);

DOWNLOAD
The zip file includes the JSON jQuery Plugin and Cookie jQuery Plugin together with an example page on how to use them.

download: jQuery Cookie Plugin (23.84KB)
added: 02/01/2010
clicks: 426
description:

Cookies on Roids -JSON Based

Antonio Ramirez — Fri, 01 Jan 2010 21:13:25 +0000

Every Web programmer, one day or another, works with cookies. Some of us prefer to use server side cookies, others client cookies, and also both, client and server cookies. On my older blogspot blog, one that I even really care to update everyday as I do with this one, I post one class to work with cookies on the client side and one fellow programmer told me about json cookies. I thought it was a great script and that was because by using JSON (thanks David Crockford again!) encoding we could save objects and arrays of information into our good friends ‘cookies’.

Well, on my last post, I have included a JSON Plugin script to use with JQuery. By making a couple of modifications I have created a Cookie and JSON javascript objects to provide you with the possibility to save objects and arrays on cookies. Both of the objects do not require any other dependency library…

Here is the script:



var JSON = {

    useHasOwn : ({}.hasOwnProperty ? true : false),

  	pad : function(n) {

        return n < 10 ? "0" + n : n;

    },

    m : {

        "\b": '\\b',

        "\t": '\\t',

        "\n": '\\n',

        "\f": '\\f',

        "\r": '\\r',

        '"' : '\\"',

        "\\": '\\\\'

    },

    encodeString : function(s){

        if (/["\\\x00-\x1f]/.test(s)) {

            return '"' + s.replace(/([\x00-\x1f\\"])/g, function(a, b) {

                var c = m[b];

                if(c){

                    return c;

                }

                c = b.charCodeAt();

                return "\\u00" +

                    Math.floor(c / 16).toString(16) +

                    (c % 16).toString(16);

            }) + '"';

        }

        return '"' + s + '"';

    },

    encodeArray : function(o){

        var a = ["["], b, i, l = o.length, v;

            for (i = 0; i < l; i += 1) {

                v = o[i];

                switch (typeof v) {

                    case "undefined":

                    case "function":

                    case "unknown":

                        break;

                    default:

                        if (b) {

                            a.push(',');

                        }

                        a.push(v === null ? "null" : JSON.encode(v));

                        b = true;

                }

            }

            a.push("]");

            return a.join("");

    },

    encodeDate : function(o){

        return '"' + o.getFullYear() + "-" +

                pad(o.getMonth() + 1) + "-" +

                pad(o.getDate()) + "T" +

                pad(o.getHours()) + ":" +

                pad(o.getMinutes()) + ":" +

                pad(o.getSeconds()) + '"';

    },

    encode : function(o){

        if(typeof o == "undefined" || o === null){

            return "null";

        }else if(o instanceof Array){

            return JSON.encodeArray(o);

        }else if(o instanceof Date){

            return JSON.encodeDate(o);

        }else if(typeof o == "string"){

            return JSON.encodeString(o);

        }else if(typeof o == "number"){

            return isFinite(o) ? String(o) : "null";

        }else if(typeof o == "boolean"){

            return String(o);

        }else {

            var a = ["{"], b, i, v;

            for (i in o) {

                if(!JSON.useHasOwn || o.hasOwnProperty(i)) {

                    v = o[i];

                    switch (typeof v) {

                    case "undefined":

                    case "function":

                    case "unknown":

                        break;

                    default:

                        if(b){

                            a.push(',');

                        }

                        a.push(JSON.encode(i), ":",

                                v === null ? "null" : JSON.encode(v));

                        b = true;

                    }

                }

            }

            a.push("}");

            return a.join("");

        }

    },

    decode : function(json){

        return eval("(" + json + ')');

    }

};
var Cookie = {

	jsonencode : JSON.encode,

	jsondecode : JSON.decode,
   	set : function(name,value,options){
   		options = this.extend({}, options);
        if (value === null) {

            value = '';

            options.expires = -1;

        }

        var expires = '';

        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {

            var date;

            if (typeof options.expires == 'number') {

                date = new Date();

                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));

            } else {

                date = options.expires;

            }

            expires = '; expires=' + date.toUTCString();

        }
        var self = this;
  		value = options.json ? encodeURIComponent(Cookie.jsonencode(value)):encodeURIComponent(value);
        var path = options.path ? '; path=' + (options.path) : '';

        var domain = options.domain ? '; domain=' + (options.domain) : '';

        var secure = options.secure ? '; secure' : '';
        document.cookie = [name, '=', value, expires, path, domain, secure].join('');

	},

	get : function(name,json){
		var cookieValue = null;
        if (document.cookie && document.cookie != '') {

            var cookies = document.cookie.split(';');

            for (var i = 0; i < cookies.length; i++) {

                var cookie = this.trim(cookies[i]);

                // Does this cookie string begin with the name we want?

                if (cookie.substring(0, name.length + 1) == (name + '=')) {

                    cookieValue = json ? this.jsondecode(decodeURIComponent(cookie.substring(name.length + 1))):decodeURIComponent(cookie.substring(name.length + 1));

                    break;

                }

            }

        }
        return cookieValue;
	},

	unset: function(name){

		Cookie.set(name,'',-1);

	},

	trim: function( val ) {

		return (val || "").replace( /^\s+|\s+$/g, "" );

	},

	extend: function()

	{

		var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;

		if ( typeof target === "boolean" ) {

			deep = target;

			target = arguments[1] || {};

			i = 2;

		}

		if ( typeof target !== "object" && !isFunction(target) )

			target = {};

		if ( length == i ) {

			target = this;

			--i;

		}

		for ( ; i < length; i++ )

			if ( (options = arguments[ i ]) != null )

				for ( var name in options ) {

					var src = target[ name ], copy = options[ name ];
					if ( target === copy )

						continue;
					if ( deep && copy && typeof copy === "object" && !copy.nodeType )

						target[ name ] = this.extend( deep,

							src || ( copy.length != null ? [ ] : { } )

						, copy );
					else if ( copy !== undefined )

						target[ name ] = copy;
				}

		return target;

	},

	isFunction: function(obj){

		return toString.call(obj) === "[object Function]";

	}

};

As you can see above, I have included a couple of methods that allow me to extend the options of the object at will (thanks jQuery). I believe that you will find it quite useful to extend its functionality. Any ideas will be highly appreciated.

How to use it


// Create a cookie with the given name and value and other optional parameters.

//

// session cookie -no json

Cookie.set('the_cookie_name', 'the_value');
// get cookie (no json):

var cv = Cookie.get('the_cookie_name');
// session cookie -json, the value can be an object or an array too

Cookie.set('the_cookie_name', 'the_value', {json:true});
// get the cookie (json)

var cv = Cookie.get('the_cookie_name',true);
// Secured cookie, expiring in 14 days

Cookie.set('the_cookie_name', 'the_value', { expires: 14, path: '/', domain: 'yourdomain.com', secure: true });
// Deleting a cookie

Cookie.unset('the_cookie_name', null);

DOWNLOAD

download: Cookies on Roids (2.18KB)
added: 01/01/2010
clicks: 233
description:

JSON jQuery Plugin

Antonio Ramirez — Wed, 30 Dec 2009 10:53:42 +0000

I finally got a bit of time and I started playing around with the creation of jQuery plugins and did created a couple of them that I believe all of you will find useful, one of them is a JSON plugin.

As you all know jQuery do not have a JSON encode function. I truly do not know the reason why but to implement it was quite easy -maybe the guys from jQuery thought that it wasn’t really necessary and I agree with them. Most of us use JSON on the server side through PHP or whatever the server tech we use but sometimes, and I repeat, sometimes, we require to develop client applications that by using JSON (thanks David Crockford) we can reduce our server resources and the amount of data transmitted between client and server. But this is a subject that I will treat in the next posts.

Here is the plugin code:

jQuery.JSON = {
useHasOwn : ({}.hasOwnProperty ? true : false),
pad : function(n) {
return n < 10 ? "0" + n : n;
},
m : {
"\b": '\\b',
"\t": '\\t',
"\n": '\\n',
"\f": '\\f',
"\r": '\\r',
'"' : '\\"',
"\\": '\\\\'
},
encodeString : function(s){
if (/["\\\x00-\x1f]/.test(s)) {
return '"' + s.replace(/([\x00-\x1f\\"])/g, function(a, b) {
var c = m[b];
if(c){
return c;
}
c = b.charCodeAt();
return "\\u00" +
Math.floor(c / 16).toString(16) +
(c % 16).toString(16);
}) + '"';
}
return '"' + s + '"';
},
encodeArray : function(o){
var a = ["["], b, i, l = o.length, v;
for (i = 0; i < l; i += 1) {
v = o[i];
switch (typeof v) {
case "undefined":
case "function":
case "unknown":
break;
default:
if (b) {
a.push(',');
}
a.push(v === null ? "null" : this.encode(v));
b = true;
}
}
a.push("]");
return a.join("");
},
encodeDate : function(o){
return '"' + o.getFullYear() + "-" +
pad(o.getMonth() + 1) + "-" +
pad(o.getDate()) + "T" +
pad(o.getHours()) + ":" +
pad(o.getMinutes()) + ":" +
pad(o.getSeconds()) + '"';
},
encode : function(o){
if(typeof o == "undefined" || o === null){
return "null";
}else if(o instanceof Array){
return this.encodeArray(o);
}else if(o instanceof Date){
return this.encodeDate(o);
}else if(typeof o == "string"){
return this.encodeString(o);
}else if(typeof o == "number"){
return isFinite(o) ? String(o) : "null";
}else if(typeof o == "boolean"){
return String(o);
}else {
var self = this;

var a = ["{"], b, i, v;
for (i in o) {
if(!this.useHasOwn || o.hasOwnProperty(i)) {
v = o[i];
switch (typeof v) {
case "undefined":
case "function":
case "unknown":
break;
default:
if(b){
a.push(',');
}
a.push(self.encode(i), ":",
v === null ? "null" : self.encode(v));
b = true;
}
}
}
a.push("}");
return a.join("");
}
},
decode : function(json){
return eval("(" + json + ')');
}
};

How to use

Copy and paste the above code onto a file and name it whatever you like, for the sake of the example we will call it jquery.json.js. And then configure your head section like this:

That’s it, now we can call our plugin like this:

// test variables
var obj = {json:'this is a test json property',xml:'this is a test xml property'};
var arr = ['A','B of 2 index array','C','D'];

// encoding an object
var a = $.JSON.encode(obj);
alert('json encoded object:'+a);

// decoding an object
var b = $.JSON.decode(a);
alert('json decoded object property:'+b.json);

// encoding an array
a = $.JSON.encode(arr);
alert('json encoded array:'+a);

// decoding the array
b = $.JSON.decode(a);
alert('json decoded array:'+b[1]);

On future posts we will make use of this plugin to show what we can do with it.

Javascript Online Compression Tools

Antonio Ramirez — Mon, 21 Dec 2009 11:03:28 +0000

When a Web project is finished, it is time to think how to make it better, faster… how to improve user’s experience. One of the most important things is javascript code compression in order to speed up page downloads and there are a couple of tools around that allows us to do it.

I just include three references:

The Online YUI Compressor – by Mike
The Online YUI Compressor – by Rodolphe Stoclin
The Online Javascript Minifier - by Vance Lucas

The Online YUI Compressors

These tools allows us to make use of the famous Yahoo Javascript Compression algorithm. Both of the above references does the same results, there is only a major difference between both: whilst the one created by Mike allows you to paste your script or upload a file to compress, the one created by Rodolphe Stoclin only allows us to upload the file to compress.

The Online Javascript Minifier

This tool can reduce our code by using two different algorithms: the JSMin by David Crockford and the Packer method by Dean Edwards.

Which One to Use?

I personally like those algorithms that do not make any use of the eval function and doesn’t change much the code I program, test, and implement. I think that will only depend of the developer choice.

There is an online tool that help us compare the algorithms. If that helps you to decide which one to use: http://compressorrater.thruhere.net/