xml maniac

This post explains how to implement, in the simpler way (using only CSS and HTML), a tabbed interface without add javascript function to show/hide layers.

Download this tutorial

The result is something like this:

How you can see in the previous picture, we have four tabs and when an user clicks over a tab, the layer below the tab-bar displays a new content, related to the clicked tab. For example if you click over About tag, it will display the following content:



Step 1: HTML code
HTML code is very simple: we have a top bar (<div id="bar">) with some tabs, and a main layer which contains all other layers (hidden) with the content related to each tag:


Step 2: CSS code
This is the css code which use target pseudo class to show/hide content layers:


For other infos about target pseudo class, take a look here.

Download this tutorial

A simple solution is to define four layers, each ones with the CSS attribute background which contains a rounded corner image:


The result is something like this:


Download this tutorial


Step 1: CSS code
Copy and paste this code in your CSS file:


How you can see, layer w1 is the main container container with the rounded left-top border in the attribute background.
Layer w2 is contained into layer w1 and it have in the background attribute the rounded right-top border. So, for all others.
Layer w4 will contain your text or other html elements. I added a padding attribute to add 10px space from external borders.


Step 2: HTML code
Now, copy and paste this HTML code into your page:



So, add all HMLT elements you want inside w4 layer and your liquid layer with rounded corners is ready to use!

Some time ago, I started to deploy mydugg a free, open source platform written in PHP and MySQL to create digg-like site just with a click.


I think digg paradigm can be applied to deploy personal site, wiki site, community site and forum, so I decided to create mydugg and distribute it for free in order to simplify the work to people who have to deploy similar sites in easy way. The package also contains a simple istaller which configures the environment and creates a MySQL database, just with a click. After the install, in the administration area, you can define a site's administrator, add the site's description, manage users and posts:

Admin can also defines a set of categories where users can add posts in specific topics (categories are in the top bar):


In the next week, I'm going to deploy a function to design new themes for sites created with mydugg changing css source. Actually I am testing the application and I hope to distribute the first beta version in January 2008. Stay tuned :)

This post explains how to use GoogleFinancial() and GoogleLookUp formulas to get financial informations about a list of companies in Google Spreadsheets.

Take a look at this spreadsheet

Spreadsheet structure
My spreadhseet's structure is very simple. It contains a column (column A) with company's name and other columns (B:L) with the financial data I want to get - using GoogleFinancial() formula - for each company (price open, current price, highest price of the day, erning-per -share...).



To get these informations, take a mind GoogleFinancial() formula take two parameter: symbol (the company code used to identify the company in the market) and an attribute (kind of data you want to display). So, first step, we have to get the symbol (company code) using another useful formula, GoogleLookUp().

Use GoogleLookUp() formula to retrieve company code
To find the Company Code (column B) I used GoogleLookUp() formula, a very useful function which use the web to retrieve information about a serie of questions you have (for example about countries and territories, planets, companies, ecc...).
In my example I want to retrieve the company code for each company in the column A. I used this formula:

=GoogleLookup(A6, "ticker")

...where A6 is the reference to the cell which contains the company name, and "ticker" is the attribute you have to use with GoogleLookUp() formula to get the company name.

In my example the previous formula is like:


and the result is:

You can find a detailed guide about GoogleLookUp() formula, with an explanation about all attributes you can use, here.

Get Financial Data using GoogleFinancial() formula
So, for each company, we have the company code (column B) and now we can use GoogleFinancial() formula to get financial informations about our companies. In my example, column C display the currency in which the stock is traded, simply using this formula:

...and the result is:

In my spreadsheet I used the following formulas:

Currency: =GoogleFinance($B6, "currency")
Price Open: =GoogleFinance($B6, "priceopen")
Price: =GoogleFinance($B6, "price")
Price-to-Earnings: =GoogleFinance($B6, "pe")
Erning-per-share: =GoogleFinance($B6, "eps")
Beta: =GoogleFinance($B6, "beta")
Volume AVG =GoogleFinance($B6, "volumeavg")
High (highest price the stock traded at for the current day) =GoogleFinance($B6, "Hig")
Low (lowesest price the stock traded at for the current day) =GoogleFinance($B6, "low")

Take a look at this spreadsheet

You can find a full guide aboutGoogleFinancial() formula here.

This tutorial explains how to add a reddit button with a counter in your Blogger template. I already wrote other posts about integration between Blogger and the most famous social networks (digg, delicious, stumbleupon). To add a reddit button, open HTML view of your Blogger template and add the code below. In reddit, you can choose three different styles:



Style 1

How you can see, the code is very simple. You have to add the blogger post url:


...and the blogger post title



Style 2


Style 3

After my previous post about this topic (but with PHP instead of Coldfusion) I received some requests about how to implement "Edit in place" Scriptaculous effect using Coldfusion. The structure of this tutorial is the same seen in the previous post with PHP.

Step 1: index.cfm
Create a new blank page, index.cfm. The file's structure is the following:

It contains a link to prototype.js and to scriptaculous framework. The will contains just some lines of code with a layer which contains the text you want to modify with "Edit in Place". So, open index.cfmand add this code into tag:


DIV layer (with ID myText) contains text you want to modify using edit in place effect using Scriptaculous. You can also use other tags like <span>, <h1>, to contain the text to modify with edit in place. The code into <script> tag enables Edit in Place function for the content of the layer with ID myText. You can apply the same code to other HTML elements just changing the ID reference "myText" (in bold).

Step 2: ajax_framework.js
In the Step 2 of the PHP tutorial change this code's line into the function saveText():


... with:



Step 3: save_text.cfm
Create a new file called save_text.cfm and copy and paste this code inside itself:


If new value is blank, you have a message error, otherwise the new value will be saved into our database.

Take a look at this spreadsheet or copy this spreadsheet in your Google Apps Account

Implement the gantt chart
For explain the topic of this post I prepared a spreadsheet whit a simple work breakdown structure, with only four columns (WBS, activity, start date, finish date).

The question is: how do you do to change a date and update automatically the gantt chart?

You can think to solve the problem in this way, using a simple IF statement: for each activity, if the date's value, contained into the row 2 (in gray), is equal or grater than the activity's start date or the same date's value (row 2) is equal or less then the activity's finish date, add an "X" into the cell. Otherwise leave the cell blank. Formula for the cell C4 is:

You can copy and paste this formula into the other cells.

So, if a cell satisfies the previous rule, you can use conditional formatting, to change the cell's background from the default color (white) to another color.

Click on cell background color icon and select Change with rules.



Select the following rules:


... then, select the background color you want to apply to the cell.

How you can see in the first image, I used two color: yellow for activities and green for activities'tasks. You can repeat the previous rule changing the color from yellow to green for your tasks.

Take a look at this spreadsheet here.

Similar posts

Social Netoworks are a good resources to generate a costant traffic on your site. Personally I receive a good quantity of visits on this site from Digg (45% of total traffic). I already spoke about hou to add digg button in your blogger template in this post, and now I explains how to add a StumbleUpon button in each Blogger's post.

Select a button
You can select various StumbleUpon buttons like these:

After my previous post about how to implement a Project Plan and manage activities with Google Spreadsheets, I received some emails which asked to me to explain some useful formulas used frequently into spreadsheets. I published an example's spreadsheet which you can see here whith an example about these functions:

- Count If
- Vertical Look Up
- Sum If
- Count Blank

You can use these functions, with the same syntax, using Excel (remember only to use ";" to separate functions' attributes and not ",").


Download this tutorial for Excel

Take a look at Google Spreadsheet file

On-line presentation

If you want you can also take a look at this presentation:




Count If
countif() is a very useful function which you can use to count an element in an interval. In the following example I'm looking foor how many times is repeated the name "Lara" into the interval. The result is 2.

Formula is:


...we can "traslate" this formula in this way: count how many times the value contained in the cell B8 is repeated in the interval B13:B17.


Vertical Look Up
vlookup() is another useful function which I use frequently to manage data in a spreadsheet. You can use it to find a value (not repeated) in an interval and return a value contained ina column in the same row of the found value. In the following example I found City and Age for "Jason". The result is Dublin and 34:

Formula is:


... search for the value in the cell F8 (Jason), in the interval F13:G17, and return the value contained into the interval column with index 2 (Column G).


Sum If
sumif() executes a conditional sum of values contained in an interval based on some criteria:

Formula is:


...sum in the range J11:K11 the values contained in the column Points (interval K11:K15) where the value in the interval J11:J15 is equal to J6.


Count Blank
countblank() count how many blank (empty) cells there are in an interval:


Formula is:


Count blank cells in interval N11:N15.

I suggest you to download the spreadsheet in .xls format or take a look at the Google Spreadsheets file here.

Today's lesson explains how to implement a simple Edit in Place effect (Flickr-like) using Scriptaculous and PHP (you have to download Scriptaculous framework here).

Step 1: index.php
Create a new blank page, index.php. The file's structure is the following:

It contains a link to prototype.js and to scriptaculous framework. The <body> will contains just some lines of code with a layer which contains the text you want to modify with "Edit in Place". So, open index.php and add this code into <head> tag:

...and add the following code into the <body> tag:


DIV layer (with ID myText) contains text you want to modify using edit in place effect using Scriptaculous. You can also use other tags like <span>, <h1>, to contain the text to modify with edit in place. The code into <script> tag enables Edit in Place function for the content of the layer with ID myText. You can apply the same code to other HTML elements just changing the ID reference "myText" (in bold).


Step 2: ajax_framework.js
ajax_framework.js contains XMLHTTPRequest to use Ajax functionalities and saveText(): function, to save the new value into the database.



Step 3: save_text.php
save_text.php contains PHP code to save the new value into our database's table (MYTABLE). Copy and paste the following code into the page save_text.php:


If new value is blank, you have a message error, otherwise the new value will be saved into our database.

I found immediatly a clear interface, simple and more similar then Google Spreadsheets to Excel and, moreover, I found a more fast and better response then Google Spreadsheets during the use and a full and more complete control for cells' formatting (border, background, number format...).

Take a look at the spreadsheet

My Gantt chart is a simple list of activities with a start date and a finish date.


Activity's Start Date is calculated like the minimum value of all Start Dates of tasks that compose it.


Activity's Finish Date is calculated like the maximum value of all Finish Dates of tasks that compose it.



Task's Duration is calculated using datediff() function:


Unfortunately what it lacks is conditional fromatting to apply to cells (present in Google Spreadsheets), so you have to rapresent the Gantt Chart manually.

In general, I think EditGrid has many points to its favor respect its more famous adversary in terms of usability and funcionalities and it can be a real alternative to Excel more than Google Spreadseets.

Related Posts

If you have a website it can be useful to mantain contacts with your users and send periodically some news from your site. Image you have a database with a table USER and some fileds like name and email. This lesson explains how to implement a simple newsletter system using Coldfusion and <cfmail> tag.

Download Tutorial


Step 1: Add form fields
Create a coldfusion blank page and add the following code to the new page:



This code adds a field to insert the object and a textarea to insert the text for your message.

Step 2: Coldfusion code to send the message to all users
Add the following code before the <form> tag seen in the previous step:


When you submit the form in the step 1, the code execute a query which gets all email address and names of the users stored in your database and execute a loop to send, to each of them, your message. Remember, you have to change datasource name with your datasource name and <cfmail> parameters from nad replyto with your email address.