Tuesday, October 13, 2009

Toggle DIV Buttons / Tabs in HTML

Hi,

     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:

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.

Check the Demo here!

No comments:

Post a Comment