UI Blog

CSS3 My Favorite Tricks

2011-11-23T08:15:00.000-08:00

CSS3 is cool. It's animation and 3D stuff are amazing. But things like rounded corner and gradients are the most useful. I am listing down few tricks that I use often for my own quick reference.

Gradient

No more slicing.. and repeating images to make shaded backgrounds.


  background-image: -webkit-gradient(linear, left top, left bottom, from(#6f6f6f), to(#000000)); /* mozilla - FF3.6+ */
    background-image: -moz-linear-gradient(top, #6f6f6f 0%, #000000 100%); /* IE 5.5 - 7 */
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#6f6f6f',EndColorStr='#000000'); /* IE8 */
    -ms-filter: progid: DXImageTransform . Microsoft . gradient(gradientType = 0, startColor = '#CCCCCC', endColoStr = '#000000'); /*Transparent back */

Shadows. Rounded Corner, and Transparent Layers.

I like to give a div a transparent background and put some kind of a background image under it. Drop the shadow from that box make it look much nice..


  /*Transparent back */
    opacity:0.4;

    /*Rounded corners */
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: solid 1px #888888;

    /*The shadow */
    -moz-box-shadow: 3px 3px 2px #ddd;
    -webkit-box-shadow: 3px 3px 2px #ddd;
    box-shadow: 3px 3px 2px #ddd;

Styling a table with CSS3

Interesting thing to note here is the table.tableStyle tr:nth-child(even) selector. This is to color two rows with different colors, which we had to write javascript earlier.


table, td, div, span, a {
    font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
    font-size: 12px;
}

table.tableStyle {
    border-left: solid 1px #468aa6;
    border-top: solid 1px #468aa6;
    border-collapse: collapse;
}

table.tableStyle th {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#56aed2), to(#417f98));
    background-image: -moz-linear-gradient(top, #56aed2 0%, #417f98 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType = 0, startColor = 0, endColorStr = #417f98); 
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(gradientType = 0, startColor = 0, endColoStr = #417f98);
    color: #fff;
    font-size: 11px;
    text-align: left;
    padding: 3px;

    border-right: solid 1px #468aa6;
    border-bottom: solid 1px #468aa6;
}

table.tableStyle td {
    border-right: solid 1px #468aa6;
    border-bottom: solid 1px #468aa6;
    margin: 0px;
    padding: 3px;
}
table.tableStyle tr:nth-child(even) {background: #ccdde1}
table.tableStyle tr:nth-child(odd) {background: #FFF}

Happy 2011 WSO2 wallpaper

2010-12-29T19:31:00.001-08:00

WSO2Con 2010 -- Colombo ,Sri Lanka September 14 & 15

2010-08-31T09:06:00.000-07:00

type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="315">

Designed to help prepare you for the future enterprise, WSO2Con features some of the most renowned technical thought leaders and focuses on the unique convergence of SOA and Cloud. For more information or to register visit http://wso2.com/event

Keynotes

Imagining the Future and Making it Happen
Prof. Rohan Samarajiva
Chairman & CEO, LIRNEasia

Enterprise Computing in 2020
Paul Fremantle
Co-Founder & CTO, WSO2 Inc.

A Walk Down Memory Lane: XML, Web Services & SOA from 1990 to 2010

James Clark
Father of XML & Founder, Thai Open Source Software Center

Sanjiva Weerawarana, Ph. D
Founder, Chairman & CEO, WSO2 Inc.

Jonathan Marsh
VP, Business Development & Marketing, WSO2 Inc.

Worst fruit in the world

2010-08-09T19:07:00.000-07:00

This is kiwi fruit. If you want to catch a diarrhea, eat a small piece.

Google analytics style Hour/Day/Month range picker

2010-08-05T20:16:00.000-07:00

Download Date Picker

I was searching for a Google analytics date picker style control to put on WSO2 BAM. All the date pickers out there are just selecting a date range. They don't support the ability to select an hour range or a month range. So I rote a one.

I use YUI to handle Dom. Plus the date rage picker is YUI date picker. This control is used in "The WSO2 Business Activity Monitor (WSO2 BAM)".

How to randomly displaying images on page refresh

2010-07-25T22:22:00.000-07:00

This script display images in "imageRot" div randomly on every page load.

Replace "quote-xx.gif" with your image name.


<div id="imageRot"></div>
<script type="text/javascript">
    var images = new Array();
    images.push("quote-01.gif");
    images.push("quote-02.gif");
    images.push("quote-03.gif");
    images.push("quote-04.gif");
    images.push("quote-05.gif");
    images.push("quote-06.gif");
    images.push("quote-07.gif");
    var random = Math.floor(Math.random() * 7);
    var imageRot = document.getElementById("imageRot");
    imageRot.innerHTML = '<img src="images/' + images[random] + '" alt="">';
</script>

Simple tree control

2010-06-10T19:10:00.000-07:00

download

HTML tree controls are often bit complicated than it should be. But the above tree control is very simple. It also has some animated effect. If you have simple tree to display in your user interface this tree will be a good starting point. Basically the tree is a structured list nested in to layers.


<div class="treeControl">
        <ul>
            <li><a class="nodata" onclick="treeColapse(this)"> </a> <a class="treeNode" onclick="treeColapse(this)">lev1-one</a></li>
            <li><a class="minus" onclick="treeColapse(this)"> </a> <a class="treeNode" onclick="treeColapse(this)">lev1-two</a>
            <ul>
                <li><a class="nodata" onclick="treeColapse(this)"> </a> <a class="treeNode" onclick="treeColapse(this)">lev2-one</a></li>
                <li><a class="nodata" onclick="treeColapse(this)"> </a> <a class="treeNode" onclick="treeColapse(this)">lev2-two</a></li>
                <li><a class="nodata" onclick="treeColapse(this)"> </a> <a class="treeNode" onclick="treeColapse(this)">lev2-three</a></li>
            </ul>
            </li>
            <li><a class="nodata" onclick="treeColapse(this)"> </a> <a class="treeNode" onclick="treeColapse(this)">level-three</a></li>
        </ul>
   </div>

The code above will display a tree looks like following.

Getting Flexy - Flex quick start project with Ant build script

2010-03-07T08:04:00.000-08:00

download

Flex has open up endless possibilities to web designers and developers around the world. Since Flex has been around for a while now ,there are tremendous amount of resources available on the subject. Most of these guides and tutorials are base on Flex builder.

The above code is a starting point to your Flex project. It contains an Ant build file which will compile the source files to a swf file and create html wrappers for you. You have to edit the build.xml file inside the extracted "flexy" directory.

This is how the project is structured. The following image will give you a guild lines to edit the build files.

If you setup Ant, Flex Sdk and change the build.xml file you will be able to generate something like this.

Drawing a cartoon character

2010-02-14T05:36:00.000-08:00

I am using Inkscape to draw cartoon characters. You can easily draw cartoons even if you are not a born artist. It is not necessary to draw from start to end. You can using Bezier curve tool to draw layer by layer. One in top of the other one. Finally color them. Following is scren shots I got from a drawing sequence step by step until the final art.

New Lost Season Rocks !!!!!

2010-02-04T03:12:00.000-08:00

New Lost season started on ABC network last Tuesday. In last two seasons they introduced time travel. Now it seems they are talking about parallel universe theory. They say this is going to be there last season of the long running amazing TV show.
"The aftermath from the detonation of the hydrogen bomb is revealed."

Sql queries result table column selecting javascript function

2010-02-04T02:57:00.000-08:00

I was looking for a script which do the above. I couldn't find any. So I wrote a one. The following function takes a sql query string such as
"SELECT Persons.LastName, Persons.FirstName, Orders.OrderNo FROM Persons INNER JOIN Orders ON Persons.P_Id=Orders.P_Id ORDER BY Persons.LastName SELECT AVG(OrderPrice) AS OrderAverage FROM Orders" and returns a string array containing LastName,FirstName,OrderNo.


function brakeColumns(query) {
  var columnList = new Array();
  var patten1 = /^[\w\$][\w]*/i;
  var patten2 = /^[\w\$][\w]*\.[\w\$][\w]*$/i;
  var numEnd = query.search(/\sfrom\s/i);
   var elems = (query.substring(6, numEnd)).split(",");
   for (var i = 0; i < elems.length; i++) {
       var elem = elems[i].toString();
       elem = trim(elem);
       var stPoint = "";
       var wanted = "";
       if (elem.search(/\sas\s/i) != -1) {
           stPoint = elem.search(/\sas\s/i);
           wanted = elem.substring(stPoint + 4);
           wanted = trim(wanted);
           if (patten1.test(wanted)) {
               columnList.push(wanted);
           }
       } else if (patten2.test(elem)) {   //check for tablename.column name pattern
           stPoint = elem.search(/\./);
           wanted = elem.substring(stPoint + 1);
           wanted = trim(wanted);
           if (patten1.test(wanted)) {
               columnList.push(wanted);
           }
       } else {   //check for straight column name like username,passsword etc
           if (patten1.test(elem)) {
               columnList.push(elem);
           }
       }
   }
   return(columnList);
}


function trim(stringToTrim) {
   return stringToTrim.replace(/^\s+|\s+$/g, "");
}

Legal identifier matching regex pattern

2010-02-02T21:59:00.000-08:00

The following will match any legal identifier — an unlimited-length sequence of Unicode letters and digits, beginning with a letter, the dollar sign "$", or the underscore character

/^[a-zA-Z\$_][a-zA-Z0-9]*/

The following is a example in Javascript


alert(/^[a-zA-Z\$_][a-zA-Z0-9]*/.test("testVar"));

Simple way to converting html tags to display in web pages

2010-02-02T10:42:00.000-08:00

I think every one has tried at least ones to put some html code in your blog post. I tried several ways but finally I ended up replacing special characters like "<" and ">" with < and >

Following is a solution that you can easily integrate in to your web page. Include this javascript method in your header section.

function putInsidePre(txt,toPre){
var preText = document.createTextNode(txt);
document.getElementById(toPre).appendChild(preText);
}

and put the following style class in your css or just include them in a new >style< tag.

.codeStyle {
background-color:#EAEFF1;
border:1px solid #88BFCE;
color:#325669;
display:block;
font-size:11px;
height:200px;
line-height:1.5em;
overflow:auto;
}

Then you can create a

 tag and give it a id and call "putInsidePre" method to populate it.

Here is a full working example.

<html>
<head>
<style>
.codeStyle {
background-color:#EAEFF1;
border:1px solid #88BFCE;
color:#325669;
display:block;
font-size:11px;
height:200px;
line-height:1.5em;
overflow:auto;
}
</style>
<script>
function putInsidePre(txt,toPre){
var preText = document.createTextNode(txt);
document.getElementById(toPre).appendChild(preText);
}
</script>
</head>
<body>

<pre class="codeStyle" id="codeBlock"></pre>
<script>
putInsidePre('<html><head></head><body>Content</body></html>',"codeBlock");
</script>
</body>
</html>

Best of TV in 2009

2010-01-09T09:29:00.000-08:00

FlashForward

(Sci-Fi | Mystery | Thriller)

For me this is the best TV serious came out in 2009. A mysterious event causes nearly everyone on the planet to simultaneously lose consciousness for 137 seconds, during which people see what appear to be visions of their lives approximately six months in the future—a global “flashforward”. A team of Los Angeles FBI agents, led by Stanford Wedeck (Vance) and spearheaded by Mark Benford (Fiennes), begin the process of determining what happened, why, and whether it will happen again.

Dollhouse

(Sci-Fi | Mystery | Thriller)

The show revolves around a corporation running numerous underground establishments (known as "Dollhouses") across the globe which program individuals referred to as Actives (or Dolls) with temporary personalities and skills. Wealthy clients hire Actives from Dollhouses at great expense for various purposes. The series primarily follows the Active known as Echo, played by Eliza Dushku, on her journey towards self-awareness.

Sadly Fox announced that the show had been canceled. Final episode will airing January 22, 2010.

V

(Sci-Fi | Mystery | Thriller)

I remember watching the old TV serious when we were kids. The remake seems to be very good.

The Vampire Diaries

(Horror | Romance)

The story centers around Elena Gilbert, a high school girl torn between two vampire brothers.

Vote

2010-01-07T08:56:00.000-08:00

"Do you believe if the person you are voting for will not hesitate to kill you if you are the only thing that is keeping him/her from winning an election?"

WSO2 Data Services v2.2.0 released

2010-01-07T08:07:00.000-08:00

WSO2 Data Services Server team has recently announce the release of version 2.2.0 of the WSO2 Data Services Server.

The WSO2 Data Services Server is an extremely simple and elegant mechanism to take data and make it available as a set of WS-* style Web services or as a set of REST style Web resources. It augments SOA development efforts by providing an easy to use platform for creating and hosting data services. This enables easy integration of data into business processes, mashups, gadgets, BI applications and any service in general.

Why should you use the new version?

Support for large XML outputs - http://wso2.org/library/knowledge-base/large-scale-data-transfer-data-services-streaming
Google Spreadsheets as a data source - http://wso2.org/project/solutions/data-services/java/2.2.0/docs/google_spread_sheet.html
Content filtering based on user roles - http://wso2.org/library/articles/content-filtering-data-services-user-roles
Support for named parameters
Ability to configure schema type for output elements
Mixing multiple data source types in nested queries
Excel 2007 support
Support for Oracle Ref Cursor - http://wso2.org/library/tutorials/use-oracle-ref-cursors-wso2-data-services-server

Open Source Business Activity Monitoring Tool

2010-01-06T17:40:00.000-08:00

WSO2 Business Activity Monitor

View more
presentations
from
WSO2
.

Laying out elements - Flex vs HTML

2009-09-14T04:20:00.000-07:00

I recently developed a Flex application.

Before everything else I wanted to layout things. I had a trial version of Flex Builder with me. Designing the layout with Flex Builder is very easy. I can simply drag and drop components and create the layout. But I wanted to use IntelliJ IDEA as my IED. The main draw back for using Idea was been not able to preview the layout in design time. The solution to this problem came in two parts.

1 Design the site in relative layout

2 Use Flex component explorer as a reference (http://www.adobe.com/devnet/flex/tourdeflex/web/)

All most all the tutorials out there explains how to create absolute layouts. This is ok when we have Flex builder. But when we are not with this tool, it's not easy to visualize the layout when we create absolute layouts.

So I experimented with relative layouts in “mxml”. It is almost the same as html/css relative layouts. You simply have to make sure layout=”horizontal” or layout=“vertical” is set in the Application tag in the main mxml file. Then we can use “HBox” components to float content horizontally and “VBox” components to float content vertically. And also you can have an external css file linked to this main mxml application and control the look and feel from there by assigning style classes to components. But I must say that we don't have complete control over each components through the style sheet. There are limitations. “http://www.loscavio.com/downloads/blog/flex3_css_list/flex3_css_list.htm” is a good reference on what styles can be use on which components. Of cause you can always refer to the API documentation as well.


<div>

<div style=”float:right”>column 01</div><div style=”float:right”> column 02</div>

</div> 

<div>

next row test content

</div>

The above code displays a layout with two columns with “column 01” and “column 02” in one row and “next row test content” in the second row. We can achive the same in mxml as follows.


<mx:vbox>

   <mx:hbox><mx:text>column 01</mx:text><mx:text>column 02</mx:text></mx:hbox>

   <mx:text>next row test content</mx:text>

</mx:vbox>

When you grab the experience on how to layout content relatively you can use what ever IDE you prefer to develop your Flex application. Also you can use Flex Ant tasks and write an Ant build script to build the application and wrap it in in a html wrapper. I will be able to explain how to do these later with several other blog posts.

Vertical and horizontal drag/drop node tree

2009-03-20T09:37:00.000-07:00

I was recently experimenting with a html tree which can manipulate it's nodes by drag and drop. I wanted to make it horizontally and vertically growable. When I was almost done, I had to rush for a much simpler version of this without the drag/drop part. I think the code I have written so far might be a good starting point to someone who is trying to do the same thing.

Download Code

The above code use script.aculo.us Prototype and YUI javascript libraries together. Now I am realizing that, using YUI alone might be a better solution for this since YUI also comes with the drag/drop support.

Are You Adapting Your architecture TO suit a vendor??? Learn how to find a vendor who adapts to your architecture?

2009-02-02T21:57:00.000-08:00

Countless vendors, including proprietary middleware industry giants like IBM and Oracle, and open source platform companies like WSO2, have built products that enable SOA to varying extents.

But no middleware product has taken a componentized approach to their own middleware “silos”. The features and functions of each middleware product have been predetermined by the vendor’s software designers, not built to each individual customer’s specification.

WSO2 is presenting this nice little article and explaining how we can benefit by using there all new componentized Carbon as a solution for this problem.
http://wso2.org/project/carbon/making_good_soa_great.pdf

Content

Componentization reaches enterprise it

The need for modular middleware

Use case base explanation

Painless service creation & integration

Set the pace of your SOA adoptions

WSO2 Carbon: the evolution of middleware

Using javascript to Include a html file inside another html file

2009-01-31T05:00:00.000-08:00

When there is no server side functionality needed we create the whole site in plain html. Usually these sites have left/right side menu, top header, footer etc.. If the site grows in to 20, 30 pages, it will be a headache to do a simple change like changing footer text. We will have to change each page. If we were using a server side technology like PHP, JSP, etc.., we will have the chance to keep the common areas in the site in different pages and include these parts in each page using a “include” statements.

We can do the same thing with the plain old html and javascript.

But how?

First you need to create the site main layout using divs and give them unique ids.


<html>
<title>HTML Includes</title>
<script language="javascript" src="js/main.js"></script>
<script src="js/prototype.js" type="text/javascript"></script>
<script language="javascript" xml:space="preserve">
    // <![CDATA[
    Event.observe(window, 'load', loadCalls);
    // ]]>
</script>
<link type="text/css" href="css/main.css" rel="stylesheet"/>
<body>
<div class="page-sizer">
    <div class="header" id="header"></div>
    <div><div class="leftMenu" id="leftMenu"></div><div class="content" id="content"></div></div>
    <span style="clear:both;" />
    <div class="footer" id="footer"></div>
</div>
</body>
</html>

Also you'r gonna need a javascript library like prototype, Jquary, YUI. You don't have to have the whole library to do this. You only needs to have the files to make an ajax call. I am going to use prototype for my example but using other libraries wouldn't make much difference. So what I simply do is to access each div element and fetch it's content from a separate file and fill them.


function loadCalls() {
    //Load the pages one by one to the divs
    loadPages('common-pages/footer.html','footer');
    loadPages('common-pages/header.html','header');
    loadPages('common-pages/leftMenu.html','leftMenu');
    loadPages('content/default.html','content');

}
function loadPages(path,loadToId){
     //IE cache the response when the request parameters are the same
    //So We send a random parameter weith the request
    var random = Math.floor(Math.random() * 2000);

    new Ajax.Request(path+'?rand=' + random,
    {
        method:'get',
        evalScripts: true,
        parameters:{random:random},
        onSuccess: function(transport) {
            document.getElementById(loadToId).innerHTML = transport.responseText;
        },
        onFailure: function() {
            setError('Problem with loading the file');
        }
    });
}

And from the menu file I am loading each page to the “content” div as follows.

You can download the complete source code from here http://sites.google.com/site/chanaka3d/Home/html-include.zip?attredirects=0

Note: This method will not work in IE if you are not hosting it in a sever. But in Firefox it doesn't necessarily need a sever to work.

Useful method to find the next list node in an unordered list from javascript

2009-01-08T07:39:00.000-08:00

If we try to use object.nextSibling to get the next list object of an unordered list, it is not always returning a list object. The following method can be use to get the next list object of an unordered list.


function getNextLi(the_li) {

    var next_li = false;
    if (the_li.nextSibling != null && the_li.nextSibling.nodeName == "LI") next_li = the_li.nextSibling;
    return next_li;

}

WSO2 is giving control back to software architects and developers to build and manage an SOA

2009-01-07T10:02:00.000-08:00

SOA is a popular approach to enterprise architecture because it can improve IT flexibility, allowing a business to quickly adapt to changes. However, many specifications and implementations of "SOA solutions" are available making it somewhat difficult to figure what you really need (and what you don't) to build and manage an SOA. WSO2 is giving control back to software architects and developers, with a unified SOA middleware platform that allows you to seamlessly add product capabilities as your implementation grows.

This modular platform is WSO2 Carbon. The design of WSO2 Carbon focuses on separating key functionality of the SOA platform into separate components that can be mixed and matched, like customizable building blocks.

http://wso2.org/projects/carbon

Essential steps for cross browser compatible Javascript

2009-01-02T05:49:00.000-08:00

Working with javascript opens up a whole set of possibilities for web developers. But at the same time, web developers have to deal with bunch of new issues when dealing with several browsers. The main reason behind this is because, each vendor has implemented the DOM in each browser differently. Some follows W3C standard while others don't. MS IE is the big bully in the block. IE usually doesn't respect W3C standards. So developers must put little extra effort from the very beginning of there development.

Always use a cross browser compatible javascript library for your DOM methods.
- YUI (http://developer.yahoo.com/yui/event/)
- JQuery (http://jquery.com/)
Separate the view of the application (HTML) from its behavior (JavaScript).

Always be extra careful when dealing with dynamic event handlers.
Ex:(YUI is used in the following example and it outlines a practice example of the above three)
The html file (test.html)


<html>

<head>

    <!-- Uncomment these lines if you want to keep YUI localy 

    <script type="text/javascript" src="yui/build/yahoo/yahoo-min.js"></script>

    <script type="text/javascript" src="yui/build/event/event-min.js"></script>

    <script type="text/javascript" src="yui/build/connection/connection-min.js"></script>

    -->

 

    <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo-min.js"></script>

    <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/event/event-min.js"></script>

    <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script>



    <!-- Source File -->

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



    <script type="text/javascript">

        //when the DOM is ready execute the methord

        YAHOO.util.Event.onDOMReady(init);

    </script>

    <title>Page Title</title>

</head>

<body>

<div id="messageOut" style="display:none;"></div>

<br /><br />

<form>

	<input type="text" id="messageIn" />

	<input type="button" id="messageButton" value="Test Me" />

</form>

</body>

</html>

ext.js


function init(){

	YAHOO.util.Event.addListener("messageButton", "click", showMessage);

}

function showMessage(){



	var messageButton = document.getElementById('messageButton');

	var messageIn = document.getElementById('messageIn');

	var messageOut = document.getElementById('messageOut');

	messageOut.style.display = "";

	messageOut.innerHTML = messageIn.value;

}

Note:To run the above example, you only need to save the two files “test.html” and “ext.js”. The YUI library files will be picked from the online sever.

Converting Javascript XML Object to String

2008-11-18T16:12:00.000-08:00

I recently ran through a problem of XMLSerializer object. This is not working with IE. Fortunately IE support this simple method to convert an XML Objet to a String."XMLObject.xml". The following function will convert an XML Object in both browsers.


function xmlToString(xmlObj) {
    if (navigator.appName == "Netscape")
    {
       return (new XMLSerializer()).serializeToString(xmlObj);
    }
    if (navigator.appName == "Microsoft Internet Explorer")
    {
        return xmlObj.xml;
    }
}

Projecting HTML Elements on a circle using Javascript

2008-09-18T22:53:00.001-07:00

Recently I wonted to create a tree control with a different approach. The requirement was to represent a node tree with main node on the circle center and it's child nodes projected on a circle around it. This is what i wanted.

My solution has 5 files

prototype.js

This is a handy javascript framework. You can download the latest version from there website (www.prototypejs.org/download). I am using this to simply handle the onload event in the page.

circle.html

script.js

node-main-left.gif

node-sub-left.gif

The circle.html, prototype.js and the script.js files are in the root folder and the two images are inside a folder named “images”.

This is how the html file looks(circle.html).


<html>

<head>

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

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

<script language="javascript" xml:space="preserve">

   // <![CDATA[

   Event.observe(window, 'load', showTree);

   // ]]>

</script>

<style type="text/css">

   .asso-content {

       margin-left: 10px;

       height: 200px;

       overflow: auto;

   }



   .node-main div, .node-sub div {

       float: left;

   }



   .node-content {

       line-height: 29px;

       text-indent: 5px;

       border: solid 1px #cccccc;

       border-left: none;

       background-color: #ffffff;

       padding-right: 3px;

   }



   .node-sub {

       position: absolute;

   }

</style>



<title>Association Tree</title>

</head>

<body>

<div id="assoContent" class="asso-content">

</div>

</body>

</html>

The script.js file contain the logic to create the nodes in circle. The whole logic is base on the following principle.

This is the script.js file


function showTree() {

  var assoContent = document.getElementById('assoContent');

  //Define the center of the circle (cs,cy)

  var cx = 100;

  var cy = 100;



  //Place the main node on the center of the circle (cx,cy)

  var main_node = "
/foo/bar";

  assoContent.innerHTML = main_node;



  //This has to be get from the server side

  var n = 6;                                //Number of child nodes

  var r = 100;                              //The radious of the circle



  //Calculate n if the number of child nodes are grater than 10

  if (n > 10) r = r + r * n;

  var cone = 2 * (22 / 7) / n;



  //Finding the cordinates of the points and show them

  var x,y,new_node;

  for (var i = 0; i < x =" cx" y =" cy" x =" Math.round(x);" y =" Math.round(y);" new_node =" document.createElement('DIV');" csstext = "margin-left:" classname = "node-sub" innerhtml =" ">/foo/bar"

      assoContent.appendChild(new_node);

  }



}

Please read the in-line comments in the script.js file.

The two images (node-main-left.gif, node-sub-left.gif) are here respectively.

Download code from
http://sites.google.com/site/chanaka3d/Home/code.zip?attredirects=0

How to design a website - layout using free tools

2008-08-22T03:55:00.001-07:00

There are many web development tools available on the market. Some of them ships with basic features and some contains very advanced features. What if you are unable to use any commercial tool available and still you want to design a pretty complex design, slice it, and convert it to html/css.

How do I know this? I know this since once I ran in to this situation by myself.

What I did first was to download Inkscape, which is a free vector graphic program. Creating a design in Inkscape is same as other vector graphic applications. But unfortunately there is no straight forward way of slicing the design and exporting. This is what I did as a workaround.

I simply add a new layer to the project and named it as “slicing”. I made sure to keep the “slicing” layer above from the rest of the layers and locked all the other layers below it.

I drew a rectangle surrounding the area I wanted to export. If the rectangle has stroke or fill it was critical to disable them since I wanted to export only the background. I have done this to each and every slice I wanted to export.

Since the slicing layers have no stroke or fill, it seems very difficult to select them if I accidentally deselected them. But “xml tree” is a handy solution to this. The “xml tree” can be located from the top tool bar of the Inkscape UI.

The exported slices are in png format. You can't export to jpeg or gif files directly from Inkscape. But you can use some other programs like Gimp to convert png files to jpeg or gif files.