Creating a Tab Panel
What is a tab panel?
It is a panel of content, often bordered, with tabs above
it (or on the side of it). When tabs are clicked, different
content is displayed for each tab.
If you can code with HTML div tags and CSS, and customize
one line of JavaScript, you can do this.
Note: A tab panel generator is now available.
If you don't yet have those skills, you can still copy and
paste the working example and play with it and see what
happens when you change this or that.
Here is all the code for duplicating the working example for your web page.
Here is the working example tab panel that the above code is for:
|
Introduction
Introduction
| |
Anti-Hijack
Anti-Hijack
| |
About
About
| |
|
Form hijacking can get accounts closed down.
Just last week, another client was informed by the hosting company that a
script is being compromised and to fix it.
If left unfixed, the hosting account would be shut down.
Such draconian attitudes are not nice. But what is a hosting
company to do? A script is being hijacked to send thousands and
thousands of messages from one of their accounts. Not only is
it using server resources, but their IP addresses are in danger
of being put on black lists.
Something must be done.
Something has been done.
Master Form V4
blocks form hijacking.
This software is one of the most sophisticated form handlers available
on the Internet. Yet, it is easy to implement.
And it has anti-hijacking code built right in.
The software also helps spam-proof your web site so email
harvesting robots find nothing when they crawl your site.
With
Master Form V4,
you can put your full attention on running your business, and sleep well at night,
without worrying about some cracker/spammer hijacking your forms and using your
server to spam thousands and thousands of unwilling recipients.
The anti-hijacking code built into
Master Form V4
was developed while a hijacking was in full progress.
I noticed unusual activity on the server and determined a script
was being used to send spam. Quickly, I replaced that script with one that would
record everything sent to it but would not send email.
During the hijacking, which continued for hours, I developed and tweaked code to
block that very thing.
Get some peace of mind. Get Master Form V4.
Will Bontrager, Programmer
Willmaster.com
|
When you're ready to make your own, make the div tabs and
content first. Then add the JavaScript.
Making DIV Tabs and Content
Each tab has two displays, one when it's ready to be
clicked and the other when it has been clicked and is
in focus. And there is a content panel for each tab.
Here is an example tab div:
<div id="tab1a" class="tabclass">
Me
</div>
And here is an example content panel div:
<div id="content1" class="contentclass">
Content here
</div>
Later on, the JavaScript will use the id's to display/hide
certain tabs and content panels. Each div's id is unique.
Change the style in the CSS class to suit your purposes
with this exception:
The class (or inline style) must have either
display:block; or display:none;
The first causes the div to be displayed and the latter
hides the div.
What To Do First
The first thing to do is to create the tabs and content
panel the way you want them to appear when the web page
is first loaded. These we'll refer to as the immediately
visible tabs and panel. Each tab and the panel need to be
in their own div tag. Each would
have display:block; in their CSS style.
Doing it this way, you can concentrate on position and
style without paying much attention to elements not
immediately visible.
A note about borders: Where borders touch, the border may
appear wider than intended. To fix this, omit one of the
touching borders.
The tabs' bottom border of the working example touch the
top border of the content panel. Therefore, the CSS style
for the tabs specifies a bottom border size of 0px, letting
the panel border draw the line.
What To Do Second
After the immediately visible tabs and content panel are
created, the next step is to create the invisible ones.
Immediately following each visible tab div, put a div
for the invisible tab. These would
have display:none; in their CSS style.
Then do similar with the content panels. You should end up
with as many content panels as there are tabs, with only
one immediately visible.
Because you already have design and size for the immediately
visible tabs and panel, some of that can be copied for the
invisible ones.
Adding the JavaScript
Two steps are involved when adding the JavaScript. One is to
add the link to the tab content. And the other is to put the
JavaScript function on the page.
Before doing step one, verify that each tab and panel div
has an id and that the value of each id is unique.
JavaScript Step One
The first thing in the tab's div tag should be this:
<span onclick="ManageTabPanelDisplay(_______)">
The underline is replaced with the id's that shall be
visible when the tab div is clicked. In the working
example, this is the focus div of the clicked tab, the
ready div of each of the other tabs, and the content
panel relating to the tab that was clicked.
The id's are between single quotes (apostrophes) and
separated with a comma. (See the working example for how
it's done.)
And the last thing in the tab's div tag should be this:
</span>
The above span tag will launch the JavaScript function
ManageTabPanelDisplay() when the content in the tab is
clicked. The function will make visible all the id's in
the list and make invisible any id's that are not in the
list.
Give each tab div a span tag like the above, both the
immediately visible and the not immediately visible. Each
div tag would have a different list of id's that shall be
visible when the tab is clicked.
JavaScript Step Two
Copy the JavaScript with the ManageTabPanelDisplay()
function from the working example and paste it into your
web page somewhere above the tab panel.
In the JavaScript, you'll see a line like this:
var idlist = new Array(_______);
Replace the underline with the id's of each tab and content
panel your tab panel uses. The id's are between single
quotes (apostrophes) and separated with a comma.
Testing
You can test your tab panel by loading it into your browser
from your computer's hard drive or from your web site. Do
whichever is best for you.
If it doesn't work, there may be JavaScript errors. The
best JavaScript debugger I've used is available to
everyone, the Firefox browser.
If you suspect a JavaScript error, click the Firefox
"Tools" menu item, then click "JavaScript Console." Its
error and warning reports are usually accurate. This is
a great tool.
Should you get stuck, take everything else off the web page
but your tab panel. Try it now. If it works now, something
else was interfering.
Should you still be stuck, start over with the working
example. Change one thing at a time, testing between each.
In that way, you will surely find what the problem is.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©2006 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
