My Notes

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

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.

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

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

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>

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