Toggle DIV Buttons / Tabs in HTML

Here iam 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:

Explanation:

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; }
</style>
<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++)
al[i].style.backgroundColor="Red";

me.style.backgroundColor="Pink";
document.getElementById("divMain").innerHTML=(tgl)? stmt1 : stmt2;
tgl=!tgl;
}
</script>

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>
<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>
</div>
<!-- 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
</div>

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

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

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

ex:2:

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);
o.fn();

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();
personObj.firstname="xxx";
personObj.lastname="yyy";

for further reading/reference: click here.

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.firstname="rozy";personObj.lastname="rojz";

personObj.age=50;personObj.eyecolor="blue";

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.firstname=firstname;this.lastname=lastname;

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, 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.
For Examples, Downloads, samples, pros and cons, check this .

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;

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

Data:
<br /><fieldset><br /><br /> <legend>Store 1</legend><br /><br /> <label for="data">Data:</label><br /><br /> <textarea id="data">

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.