Devirtuoso

Get Users Location With JQuery and Ajax

Shawn — Thu, 02 Sep 2010 18:29:15 +0000

Ever needed to know where your user is from? Ever needed to do it with jQuery / Ajax? Today my friend you are in luck. This article will show you how to get the user’s location using jQuery, Ajax and the users IP.

What are we building?

Our application here isn’t overly complicated. We’re just going to tell our users where they’re from…incase they didn’t know

Download Example

How to do it

We’ll be using a service from ipinfodb.com to get this bad boy off the ground. They offer an api that allows you to pass in an IP and it spits out all the information we need. So all we have to do is tap into this via jQuery and Ajax.

Step 1: Getting the user’s ip address

First thing we need to do is pull in the user’s ip address. We’re just going to use some PHP for this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/**

 * Get users IP address.

 *

 * @return string ip address

 */

function visitorIP()

{ 

    if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])){

        $TheIp=$_SERVER['HTTP_X_FORWARDED_FOR'];

    }else{

        $TheIp=$_SERVER['REMOTE_ADDR'];  

    } 

    return trim($TheIp);

}

$ip = visitorIP();

?>

Step 2: The Ajax

Now that we have the users ip, we can use it in ipinfodb’s api. We’ll just use jquery’s ajax to get the information.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// Build the URL to query...notice the php ip address at the end.

var url = "http://ipinfodb.com/ip_query2.php?output=json&callback=?&ip=";

// Utilize the JQuery's JSON function

$.getJSON(url, function(data){

    //Make sure it processed it okay.

    if(data.Locations[0].Status == "OK"){

        //Parse the JSON

        var location = data.Locations[0]

        var city = location.City;

        var country = location.CountryName;

        var region = location.RegionName

        var output = "Your location is: "+ city+ ", "+region+ " "+ country;

        //OUTPUT

        $('body').append(output);

    }

});

The magic lies in the GET variables passed with the ipinfodb’s url.

output = json – specifies which format we want…in this case JSON

callback=? – this is for a javascript callback. Since we’re using jquery’s callback we gave this a value of ?. Alternatively you could pass in a javascript function name and it would call the function for you.

ip = (ip address) – is the user’s ip that you want to look up the location.

The JSON it returns will look something like:

1
2
3
4
5
6
7
8
9
10
11
12

{

  "Ip" : "74.125.45.100",

  "Status" : "OK",

  "CountryCode" : "US",

  "CountryName" : "United States",

  "RegionCode" : "06",

  "RegionName" : "California",

  "City" : "Mountain View",

  "ZipPostalCode" : "94043",

  "Latitude" : "37.4192",

  "Longitude" : "-122.057"

}

Notice that it include the latitude and longitude. This is particularly handy with google maps

Hopefully this will help you out. I know I’ve used it numerous times. It’s a simple way to personalize your site. Enjoy.

Download Example

Quick Tip: Validate Email Addresses with PHP

Shawn — Mon, 30 Aug 2010 13:20:27 +0000

Email validation is a common task that most developers have to deal with on a regular basis. Far too often the complex approach is taken (regular expressions), when PHP 5 has a super simple way to validate / sanitize your email string.

Filtering Variables the PHP 5 Way

So what is the quick method to validating emails? The function called filter_var(). This function allows you to run your variable through a filter that you specify, and can either validate the variable, or return a sanitized string depending on the filter you choose.

What does this look like…

1
2
3
4
5
6
7
8
9
10
11
12
13

//Bad Email...

$badEmail = "bad@email";

//Run the email through an email validation filter.

if( !filter_var($badEmail, FILTER_VALIDATE_EMAIL) ){

  echo "Email is no good.";

}else{

  echo "Nice email.";

}

//Result - Email is no good.

?>

Alternatively you can use the sanitize filter, and it will remove any characters that aren’t valid.

1
2
3
4
5
6
7
8
9

//Crappy email.

$var="bad%%@em\#ail.com";

//Runs email through a sanitize filter

print filter_var($var, FILTER_SANITIZE_EMAIL);

//Result - bad@email.com

?>

As you can see these are super easy. You no longer have to worry about your regular expressions sucking. Php has you covered.

How to Make a Jquery Back to Top Link

Shawn — Fri, 27 Aug 2010 13:39:35 +0000

It’s the small things in a website that makes your clients go OOOHhhhh… Things like animating the scroll when someone clicks a back to top link can give you some serious brownie points. Considering it’s online a couple of extra lines of code it’s well worth it.

What We are Building

Simply put, we’re going to create a looooong HTML page that has back to top links through out. When you click on one of these links it will scroll to the top in an awesome animated fashion.

Download Example

Step 1: The Content

This should be pretty straight forward, you’re site should already have content, but in the case of an example we have to get some, and there has to be enough to scroll. I just took mine from the w3 standards website…as it should be already HTML compliant Now throughout you just need to add some back to top links with anchor tags to some element at the top of the page. In our case we have a div with an id of top. So our anchor tag should look something like…

1	<a href="#top" class="backToTop">Back to top</a>

Step 2: The jQuery

At the bottom of your html just add the following code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">

    //Click event handler for any anchor that has an href that ends in top

      $('a[href]$="top"').click(function() {

        //Animates scroll to the top of the page...and take 1 second to do it.

          $('html, body').animate({ scrollTop:0 }, '1000');

        //return false to prevent the default action of the anchor tag when clicked.

          return false;

      });

</script>

Nothing too special here. Just a click event for the back to top links that animates the scroll.

That’s all there is to it. Enjoy making your site that much cooler.

Download Example

Adding a Twitter Tweet Box to your site.

Shawn — Wed, 25 Aug 2010 13:15:01 +0000

It’s always good practice to make things easy for your users. So why not make it easier for them to update their tweet while visiting your site. This article will show you how to implrement Twitter’s tweet box on your site.

What we’re making

Twitter’s @Anywhere allows you to integrate twitter into your site with little to no trouble. So we’re going to take advantage of that and integrate a tweet box for our users to tweet to their tweeps. (Everything is cooler when you put a “tw” in front of it)

Here is an example of what we are making….WARNING THIS WILL POST TO YOUR TWITTER PAGE…so keep love notes about Justin Bieber to a minimum.

Download Example

Step 1: Get the Key

The first thing we need to do is grab an application key from Twitter…same sort of idea as Facebook, you need it to add any widgets onto your site.

You can get your key at Twitter @Anywhere Dev site, just click on start using it now.

This will ask you to login if you’re not already. After that you’ll have a form to fill out…fun. For what we’re doing you don’t have to fill out much. Give an name to the application, your website url, and be sure to give READ WRITE access.

At the point in writing this I got an error message after I submitted. If you did too, not to worry it still created your application. If you click on the “View Your Applications” you’ll see your newly created application right there. YAY. Click on the app and you’ll see your API Key right at the top.

Step 2: The JavaScript

This is the easy part. All you have to do is cut and paste. Head to the Twitter documentation page. At the top of the page you’ll find the javascript you’ll need to include in your html document. Be sure to put your brand spankin’ new API key in there.

1	<script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1" type="text/javascript"></script>

On the same documentation page, about half way down you’ll also find the code for the tweet box, copy and paste that code into your html doc and you’re ready to go.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="tbox"></div>

    <script type="text/javascript">

      twttr.anywhere(function (T) {

        T("#tbox").tweetBox({

          height: 100,

          width: 400,

          defaultContent: "CONTENT HERE>"

        });

      });

    </script>

That’s it! As far as API’s go I’ve always loved Twitter. Facebook has always been a pain up until recently. So enjoy, and be sure to experiment with all the Twitter goodness that @Anywhere has to offer.

Download Example

20 Mobile Device Emulators

Shawn — Wed, 18 Aug 2010 15:52:21 +0000

Mobile websites are becoming more popular, and you need a way to test everything on different phones. Here is a list of emulators that will get you started.

The Emulators

I know I am always looking for emulators, so hopefully this list will help you out.

Six Revisions has a great article on best practices for mobile. Be sure to check it out, that is where I got this list from. Super helpful. Thanks!

Quick Tip: Using Google Fonts for your website

Shawn — Tue, 17 Aug 2010 17:08:15 +0000

Google has offered yet another fantastic service that allows you to add new free fonts to your web pages. This article will give you a quick run down on how to do this.

Google Font Directory

Tired of using the same ol’ fonts for every web page? I know I am. Google offers a directory of fonts that you can quickly add to your website with 2 lines of code. Doesn’t get much easier.

Step 1: Select a Font

Visit the Google Font Directory and pick out a font. There isn’t a huge list, but what they do have is nice and clean.

Step 2: Get the Code

After you click on the font you want, just click on “Get the code”. Google offers up 2 lines of code. One a CSS include for the font you selected, and the CSS to implement it.

Step 3: Use the Code

Copy and paste the code into your document. El finito. This is the code I used for the headers in this article.

1
2
3
4
5

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>

    <style type="text/css" media="screen">

        h2 { font-family: 'Reenie Beanie', arial, serif; }

    </style>

Reading Excel Documents with PHP and Ajax

Shawn — Mon, 16 Aug 2010 20:00:42 +0000

Every wanted to display information from an excel document on a website? Ever wanted to do it asynchronously? Today is your lucky day. This article will show you how to load in an excel document using php, jquery and ajax.

What are we building?

We are going to build a page that pulls in each row from you excel document and styles it to our liking. We’ll be doing this by building a php page that spits out json. Then with the magic of jQuery we’ll pull that information in and parse it to our liking.

Download Example

Required Tools

We’ll be using a pre-made php class to handle reading of our excel file. The one I used is call php-excel-reader. You’ll also need an excel document to read from. I’ll be using a list of hair salons in Canada….don’t ask, it was for a project I was working on. It has all the contact info for each business. Besides that you should be good to go.

Extending Class to Meet Our Requirements

The php excel reader class isn’t prefect for our needs. We need some sort of method to take each cell and dump it into an array. Also, the class doesn’t handle phone number formatting very well. So what are we going to do? Create our own class and extend the excel reader class with our new methods…fun! Why not just edit the original class? It’s generally bad practice to hack the core. Any mistakes we’ll be making will be contained within our new file.

First thing is first. We need to create our class.

Our Class -> ExcelReader.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

        //Load in original excel reader class

        require_once 'excel_reader2.php';

        /**

        * Adds Function to excel reader class

        */

        class ExcelReader extends Spreadsheet_Excel_Reader

        {

            /*

                This method will spit out an array

                of all our excel document rows.

            */

            function dumptoarray($sheet=0) {

                # code...

            }

            /*

                This method will overwrite a method in

                the Spreadsheet_Excel_Reader.  We will

                add the functionality to handle phone

                number formatting.

            */

            function _format_value($format,$num,$f) {

                # code...

            }

        }

    ?>

Now on to the method to convert each of the rows into an array.

The dumptoarray method

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    function dumptoarray($sheet=0) {

        $array = array();

        //Step through each row.

        for($row=1;$row<=$this->rowcount($sheet);$row++) {

            //Step through each column

            for($col=1;$col<=$this->colcount($sheet);$col++){

                //Add each cell value into the array.

                $array[$row][$col] = htmlentities($this->val($row,$col,$sheet));

            }

        }

        return $array;

    }

    ?>

If you don’t have a phone number formatting in your excel document feel free to skip this. All we’ll be doing is copying the method from the original class, and place in some new code that handles formatting for phone numbers.

Here is the extra code we’ll be placing in the code from the original class.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

  //Handle Phone Numbers

  //Check to see if formatting fits (###) ###-####

  $phone_regex = "/\((\d{3})\) (\d{3})-(\d{4})/";

  if (preg_match($phone_regex,$pattern,$matches)) {

    //Puts the number in the cell into the formatting we require.

    $formatted = "(".substr($num,0,3).") ".substr($num,3,3)."-".substr($num,6,4);

    //sets pattern for use in class.

    $pattern = preg_replace($phone_regex, $formatted, $pattern);

  }

  //set values and exits method.

  return array(

    'string'=>$pattern,

    'formatColor'=>$color

  );

?>

So now our method looks something like…

_format_value method

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

  function _format_value($format,$num,$f) {

      // 49==TEXT format

      // http://code.google.com/p/php-excel-reader/issues/detail?id=7

      if ( (!$f && $format=="%s") || ($f==49) || ($format=="GENERAL") ) { 

        return array('string'=>$num, 'formatColor'=>null); 

      }

      // Custom pattern can be POSITIVE;NEGATIVE;ZERO

      // The "text" option as 4th parameter is not handled

      $parts = split(";",$format);

      $pattern = $parts[0];

      // Negative pattern

      if (count($parts)>2 && $num==0) {

        $pattern = $parts[2];

      }

      // Zero pattern

      if (count($parts)>1 && $num<0) {

        $pattern = $parts[1];

        $num = abs($num);

      }

      $color = "";

      $matches = array();

      $color_regex = "/^\[(BLACK|BLUE|CYAN|GREEN|MAGENTA|RED|WHITE|YELLOW)\]/i";

      if (preg_match($color_regex,$pattern,$matches)) {

        $color = strtolower($matches[1]);

        $pattern = preg_replace($color_regex,"",$pattern);

      }

      // In Excel formats, "_" is used to add spacing, which we can't do in HTML

      $pattern = preg_replace("/_./","",$pattern);

      // Some non-number characters are escaped with \, which we don't need

      $pattern = preg_replace("/\\\/","",$pattern);

      // Some non-number strings are quoted, so we'll get rid of the quotes

      $pattern = preg_replace("/\"/","",$pattern);

      // TEMPORARY - Convert # to 0

      $pattern = preg_replace("/\#/","0",$pattern);

      // Find out if we need comma formatting

      $has_commas = preg_match("/,/",$pattern);

      if ($has_commas) {

        $pattern = preg_replace("/,/","",$pattern);

      }

      // Handle Percentages

      if (preg_match("/\d(\%)([^\%]|$)/",$pattern,$matches)) {

        $num = $num * 100;

        $pattern = preg_replace("/(\d)(\%)([^\%]|$)/","$1%$3",$pattern);

      }

      //Handle Phone Numbers

      $phone_regex = "/\((\d{3})\) (\d{3})-(\d{4})/";

      if (preg_match($phone_regex,$pattern,$matches)) {

        $formatted = "(".substr($num,0,3).") ".substr($num,3,3)."-".substr($num,6,4);

        $pattern = preg_replace($phone_regex, $formatted, $pattern);

      }

      return array(

        'string'=>$pattern,

        'formatColor'=>$color

      );

      // Handle the number itself

      $number_regex = "/(\d+)(\.?)(\d*)/";

      if (preg_match($number_regex,$pattern,$matches)) {

        $left = $matches[1];

        $dec = $matches[2];

        $right = $matches[3];

        if ($has_commas) {

          $formatted = number_format($num,strlen($right));

        }

        else {

          $sprintf_pattern = "%1.".strlen($right)."f";

          $formatted = sprintf($sprintf_pattern, $num);

        }

        $pattern = preg_replace($number_regex, $formatted, $pattern);

      }

      return array(

        'string'=>$pattern,

        'formatColor'=>$color

      );

  }

?>

JSON Our Entries

Now it’s as simple as pulling in our excel file, calling our dumptoarray method and convert it to JSON. The JSON will be read by jQuery and parsed accordingly.

To do all of this, we’ll create the file list.php and place everything in there.

list.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    //load in our class we created.

    require_once 'ExcelReader.php';

    //Reads our excel document.

    $data = new ExcelReader("entries.xls",false);

    //Put our rows into an array.

    $ary = $data->dumptoarray();

    //Convert the array in json.

    $json = json_encode($ary);

    //display the json.

    print $json;

    ?>

Load in Our JSON via Ajax

Our HTML is going to be pretty simple. We’re just going to have one div with an id=”content” and a title.

Here is the HTML

1
2
3
4
5
6
7
8
9
10
11
12
13

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">

<head>

    <title>Excel Reader</title>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

</head>

<body>

    <div id="content">

        <h1 id="excelEntries">Hair Salons in Canada</h1>

    </div>  

</body>

</html>

Our jQuery isn’t overly complicated. We load in the JSON via Ajax, and we just step through each entry and format it accordingly.

The jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

$.getJSON("list.php",

      function(data){

                var item = data;

                var content = "";

                //Loop through each entry.

                for (var i in data) {

                        // data[row][column] references cell from excel document.

                        var name = data[i][1];

                        var address = data[i][2];

                        var city = data[i][3];

                        var province = data[i][4];

                        var postal = data[i][5];

                        var phone = data[i][6];

                    //First row is column headers.

                    if (i > 1){

                        //Format Entry

                        content += ""+

                        " "+name+ ""+

                        "Address: "+address+"
"+

                        "City: "+city+"
"+

                        "Province: "+province+"
"+

                        "Postal Code: "+postal+"
"+

                        "Phone Number: "+phone+

                        "
";

                    }

                  };

                //Add entry to page.

                $('#content').append(content);

    });

After adding some css, your HTML page should look something like…

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">

<head>

    <title>Excel Reader</title>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

    <style type="text/css" media="screen">

        body{

            font-family: Arial, "MS Trebuchet", sans-serif;

            font-size:.8em;

            color:#333;

        }

        /* Styling Entries */

        .entry{

            background:#efefef;

            padding:10px;

            border:1px solid #ddd;

            line-height:1.5em;

            margin:0 5px 5px 0px;

            width:400px;

            float:left;

            /* Rounded Corners */

            -moz-border-radius:10px;

            -webkit-border-radius:10px;

            -khtml-border-radius:10px;

            border-radius:10px;

            /*Inner shadow */

            -moz-box-shadow: 2px 2px 3px #ddd; /* FF3.5 */

            -webkit-box-shadow: 2px 2px 3px #ddd; /* Saf3.0 , Chrome */

            box-shadow: 2px 2px 3px #ddd; /* Opera 10.5, IE 9.0 */

            /* Gradient */

            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#dedede'); /* for IE */

            background: -webkit-gradient(linear, left top, left bottom, from(#efefef), to(#dedede)); /* for webkit browsers */

            background: -moz-linear-gradient(top,  #efefef,  #dedede); /* for firefox 3.6+ */

        }

        h4{

            margin:3px 0px;

            font-size:1.5em;

            color:#014A8D;

            text-shadow:0 1px 1px #fff;

        }

    </style>

</head>

<body>

<div id="content">

    <h1 id="excelEntries">Hair Salons in Canada</h1>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">

    $.getJSON("list.php",

      function(data){

                var item = data;

                var content = "";

                for (var i in data) {

                        // data[row][column] references cell from excel document.

                        var name = data[i][1];

                        var address = data[i][2];

                        var city = data[i][3];

                        var province = data[i][4];

                        var postal = data[i][5];

                        var phone = data[i][6];

                    if (i > 1){

                        content += "<div class='entry'>"+

                        "<h4> "+name+ "</h4>"+

                        "<strong>Address:</strong> "+address+"<br />"+

                        "<strong>City:</strong> "+city+"<br />"+

                        "<strong>Province:</strong> "+province+"<br />"+

                        "<strong>Postal Code:</strong> "+postal+"<br />"+

                        "<strong>Phone Number:</strong> "+phone+

                        "</div>";

                    }

                  };

                $('#content').append(content);

       });

</script>

</body>

</html>

That should be it. Be sure to download all the files and fiddle around with it yourself. Also be sure to read up on the documentation that comes with the excel reader class.

Download Example

Development Tool: Zen Coding

Shawn — Fri, 13 Aug 2010 13:25:11 +0000

Zen Coding is by far my favorite development tool. It makes website development quick and easy, and like the name suggests it instills a state of calm

So What is Zen Coding?

Zen Coding is a variety of snippets to make your life easier. Their demo video explains it all too well.

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

The best part about all of this is how many IDEs it’s available for. There is 21 versions of it in the downloads. Check them out, there is probably one for your favorite IDE.

Be sure to get your copy at Zen Coding’s website. I guarantee you’ll love it. Haven’t met a developer who hasn’t.

Enjoy!

Development Tool: CSS3 PIE for Internet Explorer

Shawn — Thu, 12 Aug 2010 14:12:06 +0000

Gone are the days of using images for rounded corners. With CSS3 PIE internet explorer can now use CSS3 awesomeness.

What is it?

Quite simply CSS3 PIE is a file that you include in your CSS definitions to enable CSS3 styling (rounded corners, shadows, etc.) Internet Explorer is one of the last browsers that doesn’t support it natively, either by browser specific hack or proper CSS3.

Creating Rounded Corners

Here is a quick demo to show how simple it is to implement the htc file.

HTML

1	<div class="sampleBox"></div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

.sampleBox{

        /* Initial Layout */

        display:block;

        background:#014A8D;

        color:#fff;

        width:200px;

        height:200px;

        border:1px solid #000;

        /*Rounded Corners for Firefox*/

        -moz-border-radius:10px;

        /*Rounded Corners for Safari / Chrome*/

        -webkit-border-radius:10px;

        /*Standard CSS3*/

        border-radius:10px;

        /*THE MAGIC...includes htc file for IE*/

        behavior: url(PIE.htc);

    }

    .sampleBox:hover{

        -moz-box-shadow: 5px 5px 5px #666; /* FF3.5 */

        -webkit-box-shadow: 5px 5px 5px #666; /* Saf3.0 , Chrome */

        box-shadow: 5px 5px 5px #666; /* Opera 10.5, IE 9.0 */

        /* Don't need to include PIE here because it's inherited.*/

    }

Download Example

There is a bit of a delay as the script is run, so it’s not completely seamless. Beggers can’t be choosers though. Also one thing I noticed while working with it, your element needs to be a block element. So if you’re have problems just throw up a display:block to fix any problems. Otherwise a great tool.

For more examples visit CSS3 PIE’s demo page

Be sure to check out the main site as well.

Google Sphere

Shawn — Tue, 29 Sep 2009 01:29:51 +0000

Once again Google is broken in this fantastic experiment. From the maker of Google Gravity, this experiment takes Google and forms it into a sphere.

Google Sphere

I love Mr.doob’s work. Big points for creativity. The best part about it is that the image search still works.

Again this one requires Chrome to view it, he uses the webkit to transform his Actionscript 3 3d engine into JavaScript.