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>

Change div content with jQuery

This is a quick tutorial for understanding the basics of jQuery.

Create a new HTML file with this code:

<html>
<head>
<title>jQuery test page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// javascript here (jQuery)
</script>
</head>
<body>
<--- HTML content here -->
</body>
</html>

Right now, the page will just load the jQuery library.

Lets get some HTML content first

<a id="changeText">Change my text</a>
<br />
<div id="textBox">This text will be changed to something else</div>

jQuery code
Now we will add some javascript so that the content of 'textBox' element changes to something else once you click on 'Change my text' link.

$(document).ready(function() {
$("#changeText").click(function() {
$("#textBox").html("My text is changed!");
});
});

As soon as your page is loaded in your browser, a function is declared so that whenever you click on the link (with 'changeText' id), the content of the 'textBox' element will be changed to 'My text is changed!'.

Final output:

<html>
<head>
<title>jQuery test page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#changeText").click(function() {
$("#textBox").html("My text is changed!");
});
});
</script>
</head>
<body>
<a id="changeText">Change my text</a>
<br />
<div id="textBox">This text will be changed to something else</div>
</body>
</html>

Simple task management with Google Spreadsheets

I personally find Google Docs very useful for managing all my projects. It really makes it easy to exchange the project updates among other project members. You can also use it for managing your tasks (usually a To Do list).

Take a look at the spreadsheet here
Its better if you save a copy of this spreadsheet for future use.

Columns
Task ID: the ID if your task
Description: describe your task
Percentage: percentage of the task completed
Start Date: the date you started (mm/dd/yyyy)
End Date: the date you finished your task (mm/dd/yyy)

Scaffolding in CakePHP

What is scaffolding?
Its something that you will find very useful in production apps. When you begin, you may want to throw up stuff real quick in order to get started. Ultimately, its a built in system for adding, editing, viewing and deleting your database records quickly.

Database table
Suppose we want to work with a table named users, and here is its SQL structure

CREATE TABLE `users` (
`id` bigint(20) NOT NULL auto_increment,
`username` varchar(50) NOT NULL,
`name` varchar(50) NOT NULL,
`email` varchar(96) NOT NULL,
`password` varchar(50) NOT NULL,
`updated` int(11) NOT NULL,
`created` int(11) NOT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `username` (`username`)
)

Model
Now lets create a model file first. It should be placed here: /app/models/user.php

<?
class User extends AppModel
{
var $name = "User";
var $uses = "users" // table name
}
?>

Controller
Create a controller file here: /app/controllers/users_controller.php

<?
class UsersController extends AppController
{
var $name = 'Users';
var $scaffold;
}
?>

View
Not required since the views for scaffolding are generated by CakePHP automatically.

Visit http://yoursite.com/users/ and start scaffolding.
Note: Always visit yoursite.com/controllerName/ to see the visual output of your controller.

I will show you a user registration and logging system in CakePHP soon.

Installing CakePHP

Download
Get the latest version of CakePHP (current version is 1.2)

Requirements
A HTTP server (better if Apache) with session and mod_rewrite enabled.
PHP 4.3.2 or higher
A MySQL database (PostgreSQL is supported too)

If you want to install it in your PC (Windows), then read this article: http://frinity.blogspot.com/2008/05/installing-apache-php-mysql-in-windows.html

Upload the files
Unpack the downloaded file, and upload its content to your server. Make sure that it looks like this from your root.

/wwwroot

/cake

/app

/cake
/vendors
.htaccess
index.php

Configure your database
Rename app/config/database.php.default to database.php. Open it and edit the details.

var $default = array('driver' => 'mysql',
'connect' => 'mysql_connect',
'host' => 'localhost',
'login' => 'user',
'password' => 'password',
'database' => 'database_name',
'prefix' => '');

CakePHP installed!
Now we can move to another article for creating your first controller!