El Blog del Antonio » How To

Speed Up Your Pages With Lazy Load JQuery Plugin

Antonio Ramirez — Tue, 15 Jun 2010 15:06:54 +0000

I would like to introduce you this simple but very efficient plugin that will help us speed up the downloading time of our web pages. I am talking about mr Mika Tuupola’s Lazy Load JQuery Plugin.

This plugin loads the images of a web page as the user scrolls to their position, that is, images wont load until they are not within the visible viewport margins of the window.

How to use

First we need to insert the following references into our code

And now this few lines of code in our document.ready function

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:

Fixing 500 Internal Error on Xampp

Antonio Ramirez — Wed, 13 Jan 2010 01:05:50 +0000

First of all, let’s talk about XAMPP a bit. XAMPP is an easy to install Apache distribution containing MySQL, PHP and Perl. XAMPP is really very easy to install and to use – just download, extract and start.

There are three types of distribution (Windows, Linux and Mac). I am not going to discuss anything about XAMPP, I think that with a visit to their site you will all the info required to install and run this wonderful package.

What I want to concentrate on is that when trying to use a regular .htaccess in a specific folder, Apache fires a beautiful and really annoying (it is not very well explained why this error happens when it happens) 500 Internal Error.

Finding the problem

Well, I went to the httpd.conf file to see what was going on and found the problem. The problem is that XAMPP Apache version has a very strict security on allowing users to modify its default settings -and its default settings are AllowOverride None:

AllowOverride AuthConfig

Solution

Just go to the Directory directive and change AllowOverride AuthConfig to AllowOverride All and thats it.



Options Indexes FollowSymLinks ExecCGI Includes

#
# AllowOverride controls what directives may be placed in .htaccess files.
# It can be "All", "None", or any combination of the keywords:
#   Options FileInfo AuthConfig Limit
#
# AllowOverride AuthConfig
AllowOverride All

Order allow,deny
Allow from all

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!

How to change Paypal’s front page language

Antonio Ramirez — Tue, 22 Dec 2009 11:57:24 +0000

I am currently developing an application and I wanted to use PayPal’s checkout method as now it allows us, mere mortals, to use our credit cards without the need of being paypal’s user. But, I had a huge problem, I explain:

My Web project has multiple language support, that means, that a guy can choose the language he wants to see or experience my site, that a guy can be in Australia and be Spanish and choose to view my site in Spanish. You may wonder why I am explaining so much this, well, it seems that the guys from PayPal didn’t have that into account as if you do not tweak the form variables correctly, the front page of your checkout process will be displayed in the ASSUMED language by your location: if you are a Spanish in Australia and clicks the button to checkout in my site, PayPal will display their front page in Australian English, no matter who you are Spanish, Italian, or Japanese -can you imagine if you are in Japan and you are not Japanese?. And what does means? YOU LOOSE A SALE!

So, I look around the Web and found nothing at all. Just bits and pieces here and there, nobody gave me any solution at all just the one given by, even, the guys from PayPal:

Include a hidden field type named ‘lc’ and set it to the language you wish the page to view displayed (ie for Spanish language):

But that didn’t work, it just displayed a small dropdown box at the top right corner of the page… I kept searching the web… very frustrated I read an article from a guy that said that it was a problem with direct payments as we do not include the shipping information in it, there was nothing to do about it. So after a bit of studying the variables of PayPal’s Web Integration Manual I decided to give a try to the following set:

I will tell PayPal not to ask for shipping, there is no shipping
I will tell PayPal the language I want to use
I will tell PayPal the character set I use for that language
I will tell PayPal also the currency code I want to use (This is extra )

The resulting form was like this and believe me… IT WORKS: