Forum Moderators: not2easy
However, I'd like the active tab to be taller than the other tabs. But adding padding just makes all of them taller. Does anyone have a method to make only the active tab taller?
<script type='javascript/text'><!--
function initAllTamingTabs()
for (var C = document.getElementsByName('tamingTab'), i = C.length; i;) C[--i].style.paddingTop = '0px';
}
//--></script>
<style>
#tamingTab{bottom:0;...}
</head>
<body onload="document.getElementsByName('tamingTab')[0].style.paddingTop='10px'">
<div id='tamingTabs'>
<div name='tamingTab' onclick="initAllTamingTabs();this.style.paddingTop='10px'">...</div>
<div name='tamingTab' onclick="initAllTamingTabs();this.style.paddingTop='10px'">...</div>
<div name='tamingTab' onclick="initAllTamingTabs();this.style.paddingTop='10px'">...</div>
</div>
</body>
Maybe a mod can fix the title?
Thanks.
Lookie!
<style type="text/css">
body *{background-color:pink}
*.bigger{width:200px}
*.smaller{width:100px}
</style>
<body>
<div class='smaller' onclick="this.className=this.className=='bigger'?'smaller':'bigger';">Hello Clark!</div>
</body>
I see something new every so often (when I open my eyes!). Never occurred to me to dynamically change an element's class and, thereby, change its style all in one go.
I know how to add padding to an element. But in this case, sliding doors is a seminal technique made popular at A List Apart. It uses background images, list-display tricks and such to get cool tabs. However, they don't tell you how to make the active tab taller. Adding padding-top:px; doesn't work. At least not in the elements I tried it on.
You could add space to the top of the small tabs with a margin, and then take away this margin and add it as padding to display the larger active tab. Here's some rough code to try, this is just for the nav-news tab to show bigger, ie a page with <body id="news"> (example 10, Sliding Doors 2 at ALA):
#header li {
margin: 5px 0 0 0; /* add 5px extra top space to all tab li's here */
...
}
#news #nav-news{
margin-top: 0; /* on the active tab's li, take away the top margin space for the big tab */
}
#news #nav-news a {
padding-top: 10px; /* and on the active tab's a, double the top padding from 5px to 10px to take up the freed space and display a big tab */
}
Needs testing but I think you can get the idea. HTH.
My example was something I cobbled together quickly. It uses width instead of padding because that was the first thing I thought of. My point was to find out whether I could dynamically change className -- this allows the larger width vs. smaller width to be resolved in simply one place: the style definitions, instead of being hardcoded in the javascript in several places. I succeeded. What you want to do is use the same technique (as illustrated by mattur) to switch padding. I'm sorry if my example confused you.
Mark, I'm not big on javascript...use it only sparingly, although because of the DOM which is a wonderful idea, I plan to learn more in the future.
Edit, ok I see what's happening. If I use your values of 5px and 10px, it works, but I tried to make it a bit smaller,4px and 8px so it wouldn't stand out as much. So I have to figure out what else has to be changed to be able to fiddle with the px'es
[edited by: Clark at 11:36 am (utc) on Mar. 11, 2008]
If you set the top margin space for normal tabs to 4px it should work ok with your normal 4px and big 8px top padding:
#header li {
margin: 4px 0 0 0; /* extra top space required: 8px - 4px = 4px */
...
}
You just need to make sure the extra top padding for the larger active tab is also added as a top margin to all the normal sized tabs.
