Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

tabs help

Status
Not open for further replies.
Bebe56

Bebe56

MIS
Jan 21, 2006
16
US
if anyone uses a mac or linux, can u test this:
===============================================

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tabs</title>
<style>
.hide {border:1px solid #000;overflow:auto;height:80px;}
</style>
<script type="text/javascript">
function initTabs() {
if(document.getElementById && document.createTextNode) {
var t=document.getElementById('elTabs');
var a=t.getElementsByTagName('a');
for (var i=0;i<a.length;i++) {
a.onclick=function(){show(this);return false}
a.onkeypress=function(){show(this);return false}
// a.on..whatever=function(){show(this);return false}
}
// Hide all.
hidem();
// Show first panel onload.
document.getElementById('panel1').style.display='block';
}
}
function show(l) { // Show a panel.
hidem();
var id=l.href.match(/#(\w.+)/)[1];
document.getElementById(id).style.display='block';
}
function hidem() {
var p = document.getElementsByTagName('div');
for (var i=0; i<p.length;i++)
if(p.className=="hide") {p.style.display = "none"}
}
// tab persistance can go here
window.onload=initTabs;
</script>
</head>
<body>
<br><br>
<div id="elTabs">
<a href="#panel1">Panel 1</a>
&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#panel2">Panel 2</a>
&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#panel3">Panel 3</a>
&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#panel4">Panel 4</a>
</div>
<div id="panel1" class="hide">...panel 1 data here...</div>
<div id="panel2" class="hide">
...panel 2 data here...<br />
...panel 2 data here...<br />
...panel 2 data here...<br />
...panel 2 data here...<br />
...panel 2 data here...<br />
...panel 2 data here...<br />
...panel 2 data here...<br />
...panel 2 data here...<br />
...panel 2 data here...<br />
...panel 2 data here...<br />
...panel 2 data here...<br />
...panel 2 data here...<br />
...panel 2 data here...<br />
...panel 2 data here...<br />
</div>
<div id="panel3" class="hide">...panel 3 data...</div>
<div id="panel4" class="hide">...panel 4 data...</div>
<div>...test...</div>
</body>
</html>

=========================

i'm trying to do a tab menu (or who knows what will come out of this)

Tks a bunch!
 
Sort by date Sort by votes
Perhaps you could give us a bit more information.

This isn't an on-demand service where you can simply say "here's some code - test it". This is a professional forum where people give their time to try and help you.

You have given us no idea of what it is you want us to test, how you want it tested, why you need it tested (looking to fix a specific issue, etc), or whether you just want to know if it "looks pretty" or not.

Perhaps you can write a follow-up, giving some detail to your post.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Well, sorry if I’ve offended anyone!
I don’t have a mac nor linux konqueror and all I wanted is to find out if the code works on those…. But, if asking for this kind of help is not proper, or too much, my bad…

(and,no, it doesnt look pretty at all :)
 
Upvote 0 Downvote
all I wanted is to find out if the code works on those
Click to expand...
That's what Dan was asking you to verify though - your definition of "works".

It may "work" as in the page might load, but what do you want to test? The colours, the layout, the javascript, the validation...


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
Upvote 0 Downvote
lol, just if the javascript does what is supposed to do ... clicking on a tab showing the right panel, hidding the others - that's what i meant by "works"... Besides that there nothing there worthy to look at, no colors, no layout to speak about....
 
Upvote 0 Downvote
There you go - that wasn't so hard, was it?

I've tested it on Mac OS X 10.4.5 under the following browsers:

Safari 2.0.3, IE 5.2.3, Fx 1.0.7, Fx 1.5.0.1

and the tab switching works as expected.

Dan




[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
thanks!!!!
as much as i dont like macs, i'll have to get one, someday...
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

rastaIT34
  • Locked
  • Question
CSS help in WordPress
Replies
3
Views
104
ChrisHirst
ChrisHirst
geneg28
  • Locked
  • Question
NEED HELP WITH CREATING LINKS
Replies
6
Views
148
geneg28
geneg28
csphard
  • Locked
  • Question
need help with footer h3 background-color. 2
Replies
8
Views
175
vacunita
vacunita
c0deM0nK424
  • Locked
  • Question
Help with modifying current navigation menu to add 'drop down' sub-menus ? 1
Replies
5
Views
110
navyfalcon
navyfalcon
southbeach
  • Locked
  • Question
Help with DIVs and CSS to render ROWS/COLS like grid
Replies
4
Views
123
southbeach
southbeach

Part and Inventory Search

Sponsor

Back
Top