Simple tabbed interface using CSS

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:

<div id="bar">
<a href="#tab1">Home</a>
<a href="#tab2">About</a>
<a href="#tab3">Contact</a>
<a href="#tab4">Credits</a>
</div>

<div id="container">
<div class="main">
<div id="tab1">First tab element (HOME)...</div>
<div id="tab2">... the second tab element (ABOUT)... </div>
<div id="tab3">... third tab element (CONTACT)... </div>
<div id="tab4">... fourth tag element (CREDITS) </div>
</div>
</div>

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

/* Tab Bar */
#bar a{padding:4px 6px; background:#E0E9FE; text-decoration:none; font-weight:bold;}
#bar a:hover{color:#003366;}
/* Content Layers */
#container{background:#E0E9FE; padding:10px;}
div.main div {display: none}
div.main div:target {display: block}

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

Download this tutorial

Read More

Liquid layer with rounded corners using css

This tutorial explains how to design a liquid layer with rounded corners, using CSS and few line of code in HTML.

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:

div.w1{background:#DFDFDF url(pic/w_left_top.gif) no-repeat; width:100%;}
div.w2{background:url(pic/w_right_top.gif) no-repeat top right;}
div.w3{background:url(pic/w_left_bottom.gif) no-repeat left bottom;}
div.w4{background:url(pic/w_right_bottom.gif) no-repeat right bottom; padding:10px;}

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:

<div class="w1">
<div class="w2">
<div class="w3">
<div class="w4">
Welcome on my site
</div>
</div>
</div>
</div>

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

Read More

Mydugg preview, an open source platform (php+mysql) to deploy your digg-like site

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 :)

Read More

Use Google Spreadsheets to get financial informations about companies

In the past days I wrote some posts about Google Spreadsheets and how to use some common formulas like countIf(), vlookup(), sumIf().

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:

=GoogleLookup("Apple Inc", "ticker")

and the result is:

AAPL

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:

=GoogleFinance($B6, "currency")

...and the result is:

USD

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.

Read More

Add reddit button with counter in your Blogger Template

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

<script>reddit_url='<data:post.url/>'</script>
<script>reddit_title='<data:post.title/>'</script>
<script language="javascript" src="http://reddit.com/button.js?t=1"></script>

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

<data:post.url/>

...and the blogger post title

<data:post.title/>

Style 2

<script>reddit_url='<data:post.url/>'</script>
<script>reddit_title='<data:post.title/>'</script>
<script language="javascript" src="http://reddit.com/button.js?t=2"></script>

Style 3

<script>reddit_url='<data:post.url/>'</script>
<script>reddit_title='<data:post.title/>'</script>
<script language="javascript" src="http://reddit.com/button.js?t=3"></script>

Read More

Edit in place with Scriptaculous and Coldfusion

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 id="myText">This is my text to modify with edit in place</div>
<script>
new Ajax.InPlaceEditor($('myText'), 'javascript:saveText("myText")', {
ajaxOptions: {method: 'get'}
});
</script>

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():

http.open('get', 'save_text.php?newText='+textId_n+'&nocache = '+nocache);

... with:

http.open('get', 'save_text.cfm?newText='+textId_n+'&nocache = '+nocache);

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

<cfif isDefined('URL.newText')>
<cfquery datasource="mydatasource">
INSERT INTO MYTABLE (newText)
VALUES(#URL.newText#)
</cfquery>
<cfoutput>#URL.newText#</cfoutput>
<cfelse>
Error, please fills all fields!
<cfif>

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

Read More

Gantt Chart using Google Spreadsheets and conditional formatting

Today's lesson explains how to implement a dynamic Gantt Chart using Google Spreadsheets and conditional formatting (change with rules option).

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:

=if(AND((E$2>=$C4),(E$2<=$D4)),"X","")

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:

Text is exactly = X

... 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

Implement a Project Plan and manage activities with Google Spreadsheets
Project Management: a project plan with Excel (template) Google Spreadsheets: formulas tutorial

Read More

Add StumbleUpon button in your Blogger's 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:

<img alt="StumbleUpon" src="http://www.stumbleupon.com/images/stumble7.gif" border="0" />

<img border="0" src="http://www.stumbleupon.com/images/small_su_logo.png" alt="StumbleUpon">

How you can see, I used the first button on this site, but, if you don't like these images you can find other StumbleUpon icons here.

Add StumbleUpon code into your Blogger Template

First, save a copy of your Blogger template and after, in Modify Template switch into HTML view. Look for this code:

<p class='post-footer-line post-footer-line-3'>

... so, copy and paste the following code below the previous line of code:

<a expr:href='"http://www.stumbleupon.com/submit?url="
+data:post.url'><img alt='StumbleUpon' border='0' src='http://www.stumbleupon.com/images/stumble7.gif'/>
</a>

... and save your template.

Your StumbleUpon button is ready to work! Simple, and useful to attract more traffic on your site :)

Read More

Google Spreadsheets: formulas tutorial

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:

=countif(B13:B17,B8)

...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:

=vlookup(F8,F13:G17,2,)

... 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:

=sumif(J11:K15,J6,K11:K15)

...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:

=countblank(N11:N15)

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.

Read More

Edit in place with Scriptaculous and PHP

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:

<script language="javascript" src="scriptaculous/lib/prototype.js"></script>
<script language="javascript" src="scriptaculous/src/scriptaculous.js"></script>

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

<div id="myText">This is my text to modify with edit in place</div>
<script>
new Ajax.InPlaceEditor($('myText'), 'javascript:saveText("myText")', {
ajaxOptions: {method: 'get'}
});
</script>

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.

/* XMLHTTPRequest Enable */
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
} else {
request_type = new XMLHttpRequest();
}
return request_type;
}
var http = createObject();

/* -------------------------- */
/* SAVE TEXT */

var nocache = 0;
var text = '';
function saveText(textId){
textId_n = encodeURI(document.getElementById('textId').value);
textIDGlobal = textId_n;
nocache = Math.random();
http.open('get', 'save_text.php?newText='+textId_n+'&nocache = '+nocache);
http.onreadystatechange = saveTextReply;
http.send(null);
}
function saveTextReply(){
if(http.readyState == 4){
var response = http.responseText;
document.getElementById(textIDGlobal).innerHTML = response;
}

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:

<!-- Include Database connections info. -->
<?php include('config.php'); ?>
<?php
if(isset($_GET['newText'])){
$newText= $_GET['newText'];
$insertText_sql = 'INSERT INTO MYTABLE (newText) VALUES('. $newText .')';
$insertText= mysql_query($insertText_sql) or die(mysql_error());
echo $newText;
} else {
echo 'Error! Please fill all fileds!';
}
?>

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

Read More

Gantt Chart with EditGrid online spreadsheets

Today I tried EditGrid to implement a simple Gantt Chart. EditGrid is a free and very powerful on-line application, which you can use to create and manage your spreadsheets.

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.

=min(C6:C9)

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

=max(D6:D9)

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

=datedif(C7,D7,"d")

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

Project Management: organize a project plan
Implement a Project Plan and manage activities with Google Spreadsheets
Project Management: a project plan with Excel (template)

Read More

Simple newsletter system using Coldfusion

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:

<form name="insert" id="insert" method="post" action="newsletter.cfm">
<input name="mailObject" type="text" id="title" size="60">
<textarea name="mailText" cols="60" rows="10" wrap="soft" ></textarea>
<input name="submit" type="submit" value="Submit">
</form>

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:

<cfif isDefined('FORM.submit')>
<!---Set error = 1 if object field and text field are empty--->
<cfif FORM.mailObject EQ ' ' OR FORM.mailText EQ ' '>
<cfset error = 1>
<cfelse>
<cfquery name="getEmail" datasource="myDatasource">
SELECT *
FROM USER
</cfquery>
<!---If error is not = 1, send the message to all users --->
<cfloop query="getEmail">
<cfmail
to="#getEmail.email#"
from="myemail@mysite.com"
subject="#FORM.mailObject#"
replyto="myemail@mysite.com">

Hello #getEmail.name#,

#FORM.mailText#

*********************

Add other infos here like site address, email to contact you...

</cfmail>
</cfloop>
<!---Set error = 0 if object field and text field are not empty--->
<cfset error = 0>
</cfif>
</cfif>

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.

Read More