Hi,
I have used curvey redraw library from google code(http://code.google.com/p/curvycorners/) & it has solved my purpose, though now as per new req i am struggling with IE. I want to have two tab rows each containing 2 tabs.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>curvyCorners - Tab demo</title>
<style type="text/css">/*<![CDATA[*/
/* tab styles */
#tabrow {
margin:0;
padding-left:1ex;
min-width:800px;
font-size:small;
letter-spacing:0.3pt;
line-height:1;
height:24px;
}
#tabrow ul {
margin:0;
padding:0;
list-style:none;
position:absolute;
z-index:2;
}
#tabrow
li {
float:left;
background-color:#E0DFE3;
color:#000;
margin-right:5px;
padding:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
border-top:solid #9B9B9B 1px;
border-left:solid #9B9B9B 1px;
border-right:solid #9B9B9B 1px;
border-bottom-width:0;
border-bottom-color:transparent;
cursor:pointer;
font-family:verdana;font-weight:bold;font-style:italic
}
#tabrow
li.select {
background-color:#ffffff;
color:#2470c4;
height:14px;
}
/* page styles */
#midbox {
width:220px;
height:305px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#midbox {
border: solid #9b9b9b 1px;
background-color:#ffffff;
}
#midbox p {
margin:0;
padding-bottom:1ex;
}
h1, #topbox h2 {
margin:0 15pt;
padding: 5pt 0;
}
div.subpage {
padding:1em;
}
/*]]>*/
</style>
<script type="text/javascript" src="curvs.js"> </script>
<script type="text/javascript">//<![CDATA[
var selectedTab = 0;
function tabclick(n) {
if (n === selectedTab) return; // nothing to do.
var
li = document.getElementById('tab' + selectedTab);
curvyCorners.adjust(li, 'className', ''); // Remove the 'select' style
li = document.getElementById('page' + selectedTab);
li.style.display = 'none'; // hide the currently selected sub-page
li = document.getElementById('page' + n);
li.style.display = 'block'; // show the new sub-page
li = document.getElementById('tab' + n); // get the new (clicked) tab
curvyCorners.adjust(li, 'className', 'select'); // and update its style
curvyCorners.redraw(); // Redraw all elements with className curvyRedraw
selectedTab = n; // store for future reference
}
var selectedTab1 = 2;
function tabclick1(n) {
if (n === selectedTab1) return; // nothing to do.
var
li = document.getElementById('tab' + selectedTab1);
curvyCorners.adjust(li, 'className', ''); // Remove the 'select' style
li = document.getElementById('page' + selectedTab1);
li.style.display = 'none'; // hide the currently selected sub-page
li = document.getElementById('page' + n);
li.style.display = 'block'; // show the new sub-page
li = document.getElementById('tab' + n); // get the new (clicked) tab
curvyCorners.adjust(li, 'className', 'select'); // and update its style
curvyCorners.redraw(); // Redraw all elements with className curvyRedraw
selectedTab1 = n; // store for future reference
}
//]]>
</script>
</head>
<body>
<div id="tabrow">
<ul>
<li id="tab0" onclick="tabclick(0);" class="select curvyRedraw">Categories</li>
<li id="tab1" onclick="tabclick(1);" class="curvyRedraw">Services</li>
</ul>
</div>
<div id="midbox" class="curvyRedraw">
<div id="page0" class="subpage">
Category details
</div>
<div id="page1" class="subpage" style="display:none">
Service details
</div>
</div>
<br/><br/>
<div id="tabrow">
<ul>
<li id="tab2" onclick="tabclick1(2);" class="select curvyRedraw">Recent Activiites</li>
<li id="tab3" onclick="tabclick1(3);" class="curvyRedraw">News</li>
</ul>
</div>
<div id="midbox" class="curvyRedraw">
<div id="page2" class="subpage">
Activities
</div>
<div id="page3" class="subpage" style="display:none">
News
</div>
</div>
</body>
</html>
Can you please help me out in this?
Thanks,
Rohit.
