New Address - fahad19.com

Hey folks!
I have moved my blog to a top level domain now. From now on, you will see my posts at:

http://fahad19.com

I will be posting more about my open source CMS Croogo and the CakePHP MVC framework.

Thanks for everyone's support.

Create charts with Google Charts API on the fly

Google is always very well equipped when it comes to APIs. I found out about their Charts API today and want to let you all know how to use it. Its not very difficult - just like placing an image tag in your HTML document.

3D pie chart
For example, you want to have a 3D pie chart with two segments (one is 30% and the other is 70%). So, this will be the url for that graph: http://chart.apis.google.com/chart?cht=p3&chd=t:70,30&chs=300x100&chl=Segment1|Segment2

And here comes the image output (generated by Google Charts!):


You can find out more about it here: http://code.google.com/apis/chart/

Parsing XML file using CakePHP

After spending one whole evening, I found out CakePHP has its own XML class for handling xml files. In the meantime, i tried SimplePie (for RSS only, not XML), SimpleXML, and XMLize. But still they werent of any great help compared to cakephp's core XML class.

How to parse it then?
First of all, you need to import the XML class in your controller class using App::import(). Here is the controller class parsing a particular xml file and printing out (like print_r) the returned array.

Controller class:

<?

class ParseController extends AppController {
var $name = "Parse";
var $uses = array('MyModel');

function xml() {
// import XML class
App::import('Xml');

// your XML file's location
$file = "my_xml_file_location.xml";

// now parse it
$parsed_xml =& new XML($file);
$parsed_xml = Set::reverse($parsed_xml);

// see the returned array
debug($parsed_xml);
}
}

?>

Vertical CSS menu with dashes

I have been really very busy this month. Hardly had time to post anything on my blog. So thought I better post a short quick tutorial of a dashed vertical css menu.

Preview (it will look like this at the end)

(Link 1 is hovered in the image)

HTML (the ever popular unordered list!):

<div id="menu">
<h1>My menu</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>

Now you will require some css.

CSS code:

#menu {
font-family: Arial;
width: 150px;
padding: 0px;
margin: 0px;
}

#menu h1 {
display: block;
background-color:#666666;
font-size: 16px;
padding: 5px 0px 5px 5px;
border: 1px solid #000000;
color: #ffffff;
margin: 0px;
width:147px;
}

#menu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}

#menu ul li {
margin: 0px;
padding: 0px;
}

#menu ul li a {
font-size: 14px;
display: block;
border-bottom: 1px dashed #bbbbbb;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:150px;
}

#menu ul li a:hover, #vertmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;
}

Search Engine Friendly URLs with CakePHP

This helper will let you create search engine friendly urls without having you to change the controller logic.

Lets assume we have an 'articles' controller (/app/controllers/articles_controller.php) in our website. And the database table looks like this:
id, category_id, title, content, updated, created

The current url structure:
yoursite.com/articles/category/[category-id]/
yoursite.com/articles/view/[article-id]/

So, it means we dont have the 'title' of our articles included in the url. Only ID is present. This helper will let you add the title as well in the url.

Helper class

<?
class SefHelper extends Helper {

var $helpers = array('Html');

function clean($string) {
return r(" ", "-", strtolower($string));
}

function article($array) {
$link = "/articles/view/";
$link .= $array['Article']['id'] . "/";
$link .= $this->clean($array['Article']['content_title']) . "/";

return $link;
}

function category($array) {
$link = "/articles/category/";
$link .= $array['Category']['id'] . "/";
$link .= $this->clean($array['Category']['title']) . "/";

return $link;
}
?>

View

<? echo $html->link("Article Title here", $sef->article($articles_result)); ?>

The return of this helper function will be: /articles/view/[id]/[title-of-the-article]

Tabbed navigation using jQuery

Someone asked me to show how I created the tabbed navigation thing in my blog (right column). Just to let you know, I am just using an existing template for my blog, but wish to design one myself in future.

In this tutorial, I am going to show you how to create a simple tabbed navigation using jQuery (as you know, its a javascript library).

Requirements
You will require two javascript files for doing this.
jQuery library - Download here
jQuery UI (user interface) tabs - Download here

HTML code
Suppose we have three div elements in our webpage (box-1, box-2, and box-3), and we want them in tabs.

<div id="container-1">
<ul>
<li><a href="#box-1"><span>One</span></a></li>
<li><a href="#box-2"><span>Two</span></a></li>
<li><a href="#box-3"><span>Three</span></a></li>
</ul>

<br />

<div id="box-1">
Box 1 content here
</div>

<div id="box-2">
Box 2 here...
</div>

<div id="box-3">
Do you really need Box #3?
</div>
</div>

CSS - some floats for ul and li

.ui-tabs-hide {
display: none;
}

ul {
margin: 0px;
padding: 0px;
}

ul li {
float: left;
padding-right: 10px;
list-style: none;
}

br {
clear: both;
}

a {
font-weight: bold;
text-decoration: none;
}

jQuery
Add this code at the end of your webpage (right before the closing body tag)

<script type="text/javascript">
$(window).bind('load', function() {
$('#container-1 > ul').tabs();
});
</script>

I assume you havent forgotten to add the two javascript files I mentioned earlier inside the HEAD tag. Have fun.

CSS form design without tables

In this tutorial, I am going to show you how to simulate a table-like interface for designing a form using css. Since tables are not involved, we will require the label element for each and every field in our form.

Preview
This is what we will be doing.


here goes the css code:

body {
font-family: Arial, Verdana, sans-serif;
}

form p {
clear: both;
}

fieldset {
width: 350px;
border: 1px solid #ccc;
}

legend {
font-weight: bold;
font-size:1.2em;
}

label {
font-weight: bold;
width: 120px;
float: left;
}

input[type=text] {
width: 200px;
}

textarea {
width: 200px;
height: 100px;
}

input[type=submit], input[type=reset] {
font-size: 18px;
}

HTML (the form itself)
We are using the html p tag only for the css clear property. This is necessary for the css float property to work properly.

<form id="myform">
<fieldset>
<legend>Sample form</legend>

<p>
<label for="text1">Text input</label>
<input type="text" name="text1" value="text field">
</p>

<p>
<label for="text2">Text input 2</label>
<input type="text" name="text2" value="another text field">
</p>

<p>
<label for="text3">Textarea</label>
<textarea name="text3" rows="5" cols="20"></textarea>
</p>

<p>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</p>

</fieldset>
</form>

Google - the future of monopolized internet?

The GIANT of the internet! Whats left that they dont have yet? Its obvious that search engine is their most powerful tool. But they are constantly introducing us with new products and innovative ideas, and also acquiring anything that has the potential to be large.

Assume you are a normal internet user
What do you normally do at home or office?
- You search the internet (search engine),
- Read latest news (News),
- Send emails (Gmail),
- Manage Documents and Spreadsheets (Docs),
- Schedule your appointments (Calendar),
- Chat online (Talk),
- Make new friends (Orkut),
- Share videos (YouTube),
- Upload photos (Picasa),
- Create blogs (Blogger),
- Publish blog feeds (FeedBurner),
- Get location info (Maps and Earth),
- Read feeds from your favourite sites (Reader),
- Advertise your product (Adwords ),
- Earn money from ads (Adsense),
- Get stock info (Finance),
the list will never end!

They are also coming with a much awaited product (still a rumour) - your online hard disk (often called gDrive or Google Drive). There are already a few free storage services online including xDrive (by AOL ), and Box.net. Google has always introduced us with rich web applications with a very easy to use interface - and this too is going to be one of their top products undoubtedly.

Acquisitions
Whenever it comes to acquisitions, they are the first you could possibly think of. They bought YouTube (video sharing site), Blogger (the one I am using for my blog), Feedburner (publishing feeds), DoubleClick (online advertisement), GrandCentral (one phone number for all your phones), and hundreds more that we dont even know yet. They are also spending millions of dollars on Mozilla (Firefox) Foundation for the default homepage spot.

Opponents
There was a time when we thought Yahoo! or MSN will probably go ahead of Google - but no more. May be it was possible if Yahoo accpeted Microsoft's offer - but instead Yahoo teamed up with Google for an advertisement deal! If there is anyone existing in the market that can fight Google - its Facebook (Microsoft is one of the shareholders of this popular social network). I dont see any other website that has the potential to be as large as Google.

Facebook's main weapon is its platform for web developers. They allowed third-party developers to create applications that let the users experience thousands of applications right from facebook. And Google then came up with the idea of OpenSocial (Myspace, Hi5, and other popular social networks are already using this platform) - a common api for developing applications for multiple social networks - to let third-parties develop applications for them. This is a good news for developers since they now dont have to code in different mark-up languages for different social networks.

Monopoly?
I am not saying that having a larger share of the market is bad, especially when you are providing such quality services for free. But the question is how much secure is it to have all our information hosted by Google? Is the future of internet going to be monopolized by Google?

Switch CSS stylesheets using jQuery

CSS Stylesheet Switcher - what does it mean?
A stylesheet switcher allows your visitors to choose from a number of stylesheets they would like to view your website with. For example, you may have three pre-made stylesheets (say red, blue and green) and you want your visitors to choose and apply any one of them in your webpage without redirecting them to a new page or refreshing the page.

This tutorial will show you how to create such a client side css stylesheet switcher using jQuery javascript library.

Default Stylesheet
I assume you already have a default stylesheet implemented in your webpage

<link rel="stylesheet" href="default.css" type="text/css">

The list of options available to your visitors
List your available stylesheets here (follow the format)

<ul>
<li><a id="css-red" href="#red">Red</a></li>
<li><a id="css-blue" href="#blue">Blue</a></li>
<li><a id="css-green" href="#green">Green</a></li>
</ul>

Time for some JavaScript
This is the jQuery code that switches your stylesheets instantly once the visitor clicks on any of the links (listed above in ul tag)

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// red
$("#css-red").click(function() {
$("link[rel=stylesheet]").attr({href : "red.css"});
});

// blue
$("#css-blue").click(function() {
$("link[rel=stylesheet]").attr({href : "blue.css"});
});

// green
$("#css-green").click(function() {
$("link[rel=stylesheet]").attr({href : "green.css"});
});
});
</script>

Change or set HTML tag attribute using jQuery

It is sometimes necessary to change the attributes of a particular HTML tag of your webpage using javascript, especially when you are coding rich web applications. Let it be the class of an element, or the href attribute of an anchor tag.

In this tutorial, I am going to show you how to do it utilising jQuery javascript library quickly.

HTML code (inside BODY tag)
First, we will place a sample image and a link in our webpage.

<a id="clickMe" href="#">Change the image below</a>
<br />
<img id="myimage" src="current_image_file.jpg" />

Now we want the src attribute to change from current_image_file.jpg to new_image_file.jpg (a click event will be required).

jQuery code (place this JavaScript inside HEAD tag)

<script type="text/javascript" src=".jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#clickMe").click(function() {
$("#myimage").attr({src : "new_image.gif"});
});
});
</script>

Rounded corner navigation bar without images using CSS and jQuery

In this tutorial, we will create a navigation bar with rounded corners (without any image) using css and jQuery (a javascript library). If you dont have any experience with jQuery yet, I would recommend you to read these two tutorials first:
Change div content with jQuery
Toggle div element using jQuery

Requirements
jQuery library: Download here (packed version is 30kb)
jQuery Corner plugin: Download here (8kb).

This is what we will have at the end of this tutorial


Include jQuery library and the jQuery.corner plugin

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>

jQuery code
This is the important part of this tutorial. Apply corner() function on your desired element to make its corners rounded.

<script type="text/javascript">
$(document).ready(function() {
$("#nav ul").corner("8px");
});
</script>

CSS (you can change the colour values yourself)

#nav {
width: auto;
}
#nav ul, #nav ul li {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
#nav li {
background-color: #e9e9e9;
}
#nav li a {
display: block;
text-decoration: none;
font-weight: bold;
color: #919191;
padding: 10px;
}
#nav li a:hover {
text-decoration: underline;
}
#nav .active {
text-decoration: underline;
}

HTML code
Finally, its time for an unordered list (ul tag) of your menu

<div id="nav">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Feed</a></li>
</ul>
</div>

Generate favicon online and implement it in your webpage

What is a favicon?
A favicon is an icon associated to a website (or a particular section of a website) - also called as the website icon. There are a few options available to implement a favicon in your webpage, but the most traditional one is by placing a favicon.ico file.

- favicon establishes your brand
- it helps users identify your site from browser tabs
- also, helps visually identifying your site from bookmarks

Generate favicon.ico files online
favicon.cc is a great tool (favicon generator) for creating customized favicons quickly.

Some cool features by favicon.cc:
draw your favicon in MS Paint like interface (colour picker available)
upload images directly (for converting image files into .ico file)
animations (animate your favicon)
share your icon with others

How to implement it in your webpage?
Just add this code in the HEAD tag of your webpage:

<link rel="shortcut icon" href="http://yoursite.com/favicon.ico">

Placing text over image using CSS position property

There are a few techniques available to perform this task using css. But I am going to show you the most effective one in this tutorial - this involves css position property.

I will be using this image (a cow) in this tutorial.

In our html code, there needs to be three div elements
1. container (for both image and text)
2. image (the cow)
3. text (Moooooo...)

Here is the code

<html>
<head>
<title>frinity.blogspot.com</title>
</head>
<body>
<div id="container">
<div><img src="cow.jpg" /></div>
<div style="position: absolute; left: 20px; top: 160px;">
<span style="font-weight: bold; color: #fff;">Moooooo...</span>
</div>
</div>
</body>
</html>

Its the CSS positioning that makes it happen.

Output (screenshot):

Load remote content into div element using jQuery

If you are building rich web applications, then you will obviously require some ajax to give your users a smooth browsing experience. And jQuery makes it easier for you to do that without any trouble.

In my previous articles, I have shown you how to toggle a div element and also changing its content. Now I will show you how to load content from an external file into a div element.

loadContent() function
Though most of the jQuery code is placed inside head tag, I prefer that you create an additional javascript function for managing inline anchor links quickly.

function loadContent(elementSelector, sourceUrl) {
$(""+elementSelector+"").load("http://yoursite.com/"+sourceURL+"");
}

This is the main jQuery code for loading remote content inside an element
$("#content").load("http://yoursite.com/source.php");

Usage

<a href="javascript:loadContent('#content', 'source_page.php');">Link 1</a>
<div id="content">content will be loaded here</div>

Final code

<html>
<head>
<title>jQuery test page</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function loadContent(elementSelector, sourceUrl) {
$(""+elementSelector+"").load("http://yoursite.com/"+sourceURL+"");
}
</script>
</head>
<body>
<a href="javascript:loadContent('#content', 'source_page.php');">Link 1</a>
<div id="content">content will be loaded here</div>
</body>
</html>

Toggle div element using jQuery

What is Toggling?
Basically a show/hide feature for your webpage elements. For example, you may have a login box in your webpage, and you want your visitors to click on a button for showing or hiding the element.

This tutorial will show you how to implement a simple toggle effect in your webpage using jQuery.

As always, we will require some HTML content first

<a id="clickMe">Toggle my text</a>
<br />
<div id="textBox">This text will be toggled</div>

jQuery code
This is the code that makes the 'textBox' element toggle

$("#textBox").toggle();

But we want to toggle the element only when you click on 'Toggle my text' link. And this code will make it happen:

$(document).ready(function() {
$("#clickMe").click(function() {
$("#textBox").toggle();
});
});

Final Code:

<html>
<head>
<title>jQuery test page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#clickMe").click(function() {
$("#textBox").toggle();
});
});
</script>
</head>
<body>
<a id="clickMe">Toggle my text</a>
<br />
<div id="textBox">This text will be toggled</div>
</body>
</html>