AndrewSellick.com features: JavaScript, XHTML, CSS, SEO and PHP

Well Christmas has been and gone (I hope you all had a fantastic Christmas/New Year), and now it’s time to get back down to some work.

I have developed a simple little class to highlight table rows using Mootools and I thought I would share it with the world.

code

As you can see below the HTML code is very basic and uses an ID to define the region which requires highlightling.  In this example an ID of "highlight" has been applied to the tbody.

Finally all that is left is to instantiate the "tableHighlighter" class using the ID of "highlight" to reference the table (or part of) required.

class options

The Hightlighter class comes with several options built in to allow for easy customisation.  These include:

• rowColourClass - Can be named as you wish and referenced through css to produce your desired results.
• rowHoverColourClass - Can be named as you wish and referenced through css to produce your desired results.
• highlightRow - odd or even

An example of how this could be used is as follows:

mootools modules

The modules required for this class is as follows:

Core

• Core

Class

• Class

Native

• Array
• String
• Function
• Number
• Element

Element

• Element.Event

download

Please feel free to download the JavaScript Table Row Highlighter code.

demo

Have a look for yourself at the JavaScript Table Row Highlighter demo.

Well it’s finally happened…  The BBC have released a new version of their now famous homepage in beta and guess what??  They’ve jumped on the Web 2.0 bandwagon.

The home page is fully customisable and even includes some snazzy JavaScript effects.  The page options are editable including font size link colour etc, modules can be dragged and dropped in to your desired position and there is even the option to edit modules on an individual basis allowing you to really see your perfect BBC homepage.  I think one of the biggest points to note is the BBC are using jQuery (which is quite a compliment for the jQuery developers) for their new homepage.

This looks like a step in the right direction for the BBC and could become as popular as iGoogle did for Google.  It will be interesting to see any future enhancements that are made as lets face it the BBC are only just catching up with the times and should really be leading the charge, not lurking in the middle of the pack.

Anyway go and have a look at the BBC Homepage Beta yourself.

I am always looking at ways I can further customise AndrewSellick.com to best meet it’s audience needs and after finding Software 77’s free IP to Location database I knew that I had found another string to my bow.

Software 77 do not only offer a free IP to Location Database, they also offer code free to download enabling you to request their CSV download and import it in to your database.  Further more they offer code (in a multitude of languages) to return the country location of the user making this database extremely easy to use.

The only downside is the lack of regional location data as only country specific IPs are supported.

site

Have a look for yourself at Software 77’s Free IP to Location Database.

code download

View the download page to get your hands on the IP to Location code.

After searching for some time for a good request querystring solution, for JavaScript, I believe I have finally found it.

Netlobo.com have developed a very useful function that breaks the querystring up into parameters using regular expressions.  This enables you to request the individual parameter you require and with very little added weight on the the load time of the page as the code is only 11 lines in total.

Check ou the JavaScript Request Quesrystring function for yourself.

download the facebook client library 

Once you have download the Facebook Client Library and extracted the contents you will be presented with a facebook-platform folder and within this a client folder (The PHP 5 client and the code base we will be using for this tutorial), footprints (A Facebook demo application) and a php4client folder (The PHP 4 client). 

To start off with we will create a folder called “tutorial” within the root “facebook-platform” folder.

Next we need to create to PHP files; index.php and config.inc.php. The contents of these files are displayed below: 

The index.php provides the foundation for the entire application. This is where the initial add page is created along with the embedded application.

1. First of all we need to include the facebook client library and the config.inc.php.

2. Next we instantiate an instance of the facebook class and force the user authentication before logging in.

3. Now we create an add application screen to be initially displayed when a user clicks to see your applications hompage. This code includes two simple facebook variables to display the users facebook username and to add the facebook add url for the application.

4. Finally we create the FBML code. This is the code that will be displayed for the embedded application. The code is very simple and is added using a Facebook Client API call $facebook->api_client->profile_setFBML(); This set the FBML when the Facebook application is added.

In this tutorial the config.inc.php will remain very simple and only includes two variables for the Facebook API key and a secret key. These are provided when you create your Facebook application in within the Facebook developer area (Detailed later in this tutorial).

download the tutorial code 

Download the facebook application development tutorial code.

integrating the application with facebook 

To actually add the application to Facebook you will need to go through the follwing procedures.

1. Upload the code within the facebook-platform folder to a PHP5 hosting environment.
2. Log in to Facebook and navigate to the Facebook developer page (http://www.facebook.com/developers/).
3. Click the “Set Up a New Application” button on the top right of the page.
4. Insert your desired application name and submit.
5. On setting up the application you will presented with an overview which displays basic application information including the API key and Secret required in your config.inc.php. Copy these two keys and insert them in your config file and then re-upload the file.
6. Next on the overview page click to edit your newly created application.
7. Next we need to insert the application details as follows:
   • The Callback Url – Add the URL to the root of the tutorial application folder you created and uploaded as above. I.E. http://www.yourdomain.com/facebook-platfom/tutorial/
   • The Canvas Page URL – Add your desired canvas page URL. This has to be unique to Facebook, although there is automatic validation to prompt you if it is not, so choose wisely. An example could be “andrewsellicktutorial” making the URL http://apps.facebook.com/andrewsellicktutorial/
   • Select the option to allow your application be added on Facebook.
   • The select users to be able to add your application on all pages.
   • Add your Canvas Page URL to the Side Nav URL. I.e. http://apps.facebook.com/andrewsellicktutorial/
   • Now save the application and that’s it.

To test it out navigate to the Canvas Page URL in your browser. You should then be able to go through the process of adding the application and finally seeing it displayed on your profile page.

This is a very basic example so I wouldn’t recommend users start to advertise their applications off the back of this tutorial. There will be more tutorials to come introducing more features and discussions on the Facebook Cache, its potential pitfalls and how to overcome them.

Feel free to play with the code and adapt it for your requirements and let me know how you get on…

I hope this has helped.