Tuesday, October 13, 2009

Toggle DIV Buttons / Tabs in HTML


     Here i am going to show you how to implement Tabs functionality in a webpage.
From below screenshots, we can see that the webpage contains 4 DIV tags:

  1. Heading

  2. Left Tab

  3. Right Tab

  4. Content Container
The Main container's content will be changed, whenever Tab Buttons clicked.
Below is the screenshot from IE:

Below is the screenshot from Firefox:

Some style properties work good in IE, But not get rendered as expected in other browsers. Here i will explain, how to solve 'float' style property for DIV boxes in firefox (and chrome). when we modify the style properties for these 3 DIV's, [ 2 buttons, 1 container], one among these 2 browsers seems to render incorrectly when other does render correctly.

To make them show correctly in both browsers and
For solving these Bugs, iam going to use, 'Conditional comments' which are IE specific. For details check here.

Below is the CSS and JavaScript for the layout:

<style type="text/css">
body{ padding:0px; margin:0px; }
<script type="text/javascript">
var stmt1="line one, line two, line three<br />line four<br />line five<br />line six";
var stmt2="<br/> TEXT CHANGED !<br/>";
var tgl=false;
function toggle(me)
var al=document.getElementsByTagName("BUTTON");
for(var i=0;i<al.length;i++)

document.getElementById("divMain").innerHTML=(tgl)? stmt1 : stmt2;

Below is the markup for the layout:

<div style="background-color:blue;text-align:center;margin-bottom:5px;font-weight:bold;color:white;">heading</div>

<div style="background-color:pink;width:70px;height:30px;float:left;">
<button style="background-color:pink;width:70px;height:30px;text-align:center;border-width:0px;font-weight:bold;color:white;" onclick="toggle(this);">clickMe</button>
<div style="width:70px;height:30px;float:left;margin-left:10px;">
<button style="background-color:red;width:70px;height:30px;text-align:center;border-width:0px;font-weight:bold;color:white;" onclick="toggle(this);">clickMe</button>
<!-- tweak for IE, otherwise gap will appear.-->
<!--[if IE]>
<div style="clear:right;"> </div>
<![endif] -->
<div id="divMain" style="background-color:pink;clear:both;"> <!-- div clear style-property tweak for firefox,chrome-->
line one, line two, line three
<br />line four<br />line five<br />line six

If you know any other solution, fixes, share with me.

Check the Demo here!

Thursday, October 8, 2009

JavaScript Prototype Object

Before proceeding any further, you should know how to create custom Objects in javascript. If u don't know, read this post.
Prototype Object allows us to add new member to already created/existing Object.
prototype object can be used on any object type:
  • js built-in objects - String, Image etc.
  • custom Objects ( template type).

Now here we will discuss applying prototypes on custom objects:

prototype can be used only on template type objects. which means, objects which allows instance creation by 'new' keyword.

function person(firstname,lastname,age){this.firstname=firstname;this.lastname=lastname;this.age=age; }
var obj=new person("rozy","rojz",24);


function Obj(){};
Obj.prototype = new Array();
Obj.prototype.fn = function(){alert('new method fn of Obj');};
var o = new Obj(); // o is a instance of Obj
o.push(one); alert(o.length);

Prototypes can't be appled on singleton types, since, any new member can be added to it any time directly.
ex: var personObj=new Object();

for further reading/reference: click here.

Tuesday, October 6, 2009

JavaScript Object Creation

What i observed is, we can create custom Objects in JavaScript in 3 ways:
  1. singleton
  2. singleton compact (used in json)
  3. template (class).

Now i will show examples for each:

1. Singleton - once created, no further independent instances are possible from it.

var personObj=new Object();



personObj.eat= function(val){ txt.value+=val; };

2. Singleton Compact - similar to above, but useful in JSON format.

var newObj={name:'rozy',age:5,eat:function(){txt.value+='eat';}};

3. Template / Class - It enables multiple instances can be created.

function person(firstname,lastname,age,eyecolor){


this.age=age;this.eyecolor=eyecolor;this.newlastname=newlastname; }

function newlastname(new_lastname){ this.lastname=new_lastname; }

Rounded Corner Box Model and +

This is my first blog post. :)
Here i will discuss about the corners styling for the box models or div tags used in HTML.
I have created a javascript template class (js library called CBox.js), which easily creates the rounded-cornered colored Box. Using it we can create 3 types of corners: convex, concave and strike.
This library creates the Table layout and uses graphics code take from here .
It works only on colored Boxes and allows greater extending of corners.
It has pros and cons, check below and it works on all major browsers.

Please Note: that it creates style-corner colored Box model, not simple corner Border.

Usage Example:
<script type="text/javascript" src="Demo\CBox.js"></script>
var content="Few Lines: Line one, line two, line three etc.";
var obj=new CBox("div1",content,100,150,null,"#ffccdd",1,20);
obj.Draw();  }
<div id="div1"></div>

API documentation of library:
Container ->Box holder
Content ->content to be displayed in Box (usually text).
Box_height ->height of the Box
Box_width ->width of the Box
Page_color ->background color used for WebPage or Container, if any, otherwise set to null.
Box_color -> color compulsory. should not be null.
Corner_Type -> corner style, should be one of these: 1 (convex) or 2 (concave) or 3 (strike).
Corner_Extent ->area of corner-style, should be greater than or equal to 20.
- colors can be Hexa or NamedColors.
- Box should be colored.

Pros and Cons:
-Javascript browser detection and huge code for graphics.
- Box must be Colored.
- for Opera browser Corner_Extent will always be 25. may not suit for all webpages. (If (div) Container is floating, then reinvoke CBox() under window.onresize event)
- 3 Corner styles to choose from.
- Corners area can be extended.
- works on all major (known) browsers. (as of this date).

Download and Demo:
Check the demo here!
Download the Zip file here!

Corner/Curve bordered Box:
We can easily create rounded-corner bordered box model for firefox, chrome etc. browsers using this simple CSS:

.curved {-moz-border-radius:10px;


But it will not work in IE, and neither IE has any simple CSS option.

for work around solution, try below simple HTML:
Store 1 <fieldset>
<legend>Store 1</legend>
<label for="data">Data:</label>
<textarea id="data"> some data here </textarea>

ofcourse we don't get greater extent of rounded corner with it.
Another solution for simple Round-corner Border, which works in IE, check this.