tnhoe wrote:
Ivo,
Each tab will become active focus/display when mouseover.
How do I set focus to a field when the tab is active ?
You are using an A element with hover to change the colour of your tabs
to show which is 'active'.
Presumably you wish to add a mouseover event to make the body associated
with the tab visible when the mouse is over the tab. I prefer an
onclick event, but that's your choice - mouseover in this case is much
to 'busy' for my liking. Since you need a mouseover for the bodies to
be hidden and shown, you may as well ditch the A and hover and just use
plain divs. It also means you won't get any hover behaviour if
JavaScript is disabled (a good thing I think).
The script below adds a mouseover event to each tab to make the tab
'highlighted', set all the other tabs to 'not highlighted', hide all the
other bodies and show the body associated with the 'mouseover' tab.
Finally, set focus on the first text input of the first form in the
currently displayed body - this produces a non-critical error in
Firefox, there is no workaround that I am aware of - it isn't fatal,
just annoying if the JavaScript console is visible and set to display
errors.
For extra speed, an array is created and kept of references to the tabs
and associated bodies based on ids.
You need to make sure that if JavaScript is not enabled, the body of
each tab still shows (as per the example). Note that my CSS is pretty
ordinary, it's just there for the demo.
[...]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><ti tle>Show random matrix</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var aTabs = []; // Array of tab div element references
var aBods = []; // Array of body div element references
function initTabs() {
// Check required features are supported
if ( ! document.getEle mentsByTagName ) return;
// Get a collection of all divs
var divs = document.getEle mentsByTagName( 'div');
var d, i=0, j=divs.length;
// Add divs to body div or tab div array depending on id
while ( i<j ) {
d = divs[i];
i++;
if ( d.id ) {
if ( d.id.match( 'body_' ) ){
aBods.push(d);
d.className += ( i < 2 )? ' activeB':' inactiveB';
} else if ( d.id.match( 'tab_' ) ){
aTabs.push(d);
d.onmouseover = showBod;
d.className += ( i < 2 )? ' activeT':' inactiveT';
}
}
}
// Set 0 tab to shown
showBod( aTabs[0] );
}
function showBod( el ) {
var b, n, t;
if ( !el || !el.nodeName ) el = this;
var n = 'body_' + el.id.split('_' )[1];
var i = aBods.length;
while ( i-- ) {
b = aBods[i];
t = aTabs[i];
if ( n == b.id ) {
b.className = b.className.rep lace(/\binactiveB\b/,' activeB');
t.className = t.className.rep lace(/\binactiveT\b/,' activeT');
fieldFocus( b );
} else {
b.className = b.className.rep lace(/\bactiveB\b/,' inactiveB');
t.className = t.className.rep lace(/\bactiveT\b/,' inactiveT');
}
}
}
function fieldFocus( f ) {
f = f.getElementsBy TagName('form')[0];
var el, els = f.elements;
for ( var i=0, j=els.length; i<j; i++ ) {
el = els[i];
if ( 'text' == el.type && el.focus ) {
el.focus();
return;
}
}
}
</script>
<style type="text/css">
body { margin-top: 10px; padding: 0;}
..tabDiv {
position: relative;
float: left;
top: 0px;
height: 5ex;
width: 5em;
border-top: 2px solid #77777B;
border-left: 2px solid #77777B;
border-right: 2px solid #77777B;
margin: 0; padding: 0;
text-align: center;
line-height: 5ex;
}
..bodyDiv {
position: relative;
margin-top: 2px;
top: 5ex;
left: 0;
background-color: #ffffff;
border: 2px solid #77777B;
color: #000000;
z-index: 0;
}
..activeB { position: relative; display: block; }
..inactiveB { position: relative; display: none; }
..activeT {
background-color: #FFFFFF; z-index: 20;
border-bottom: 2px solid #ffffff;
}
..inactiveT {
background-color: #C0C0C0; z-index: 10;
border-bottom: 2px solid #77777B;
}
</style>
</head><body onload="initTab s();">
<div id="tab_0" class="tabDiv">
Tab 0
</div>
<div id="tab_1" class="tabDiv">
Tab 1
</div>
<div id="tab_2" class="tabDiv">
Tab 2
</div>
<!-- content for body 0 -->
<div id="body_0" class="bodyDiv" >
<h1>Here is the content for body 0</h1>
<form name="body_0_fo rm" action="">
<input type="text" name="input_0_1 "><br>
<select>
<option>opt 0
<option>opt 1
<option>opt 2
</select>
<input type="reset">&n bsp;
<input type="submit">
</form>
</div>
<!-- content for body 1 -->
<div id="body_1" class="bodyDiv" >
<h1>Here is the content for body 1</h1>
<form name="body_1_fo rm" action="">
<input type="text" name="input_1_1 "><br>
<input type="text" name="input_1_2 "><br>
<input type="text" name="input_1_3 "><br>
<input type="reset">&n bsp;
<input type="submit">
</form>
</div>
<!-- content for body 2 -->
<div id="body_2" class="bodyDiv" >
<h1>Here is the content for body 2</h1>
<form name="body_2_fo rm" action="">
<input type="text" name="input_2_1 "><br>
<input type="text" name="input_2_2 "><br>
<select>
<option>opt 0
<option>opt 1
<option>opt 2
</select>
<input type="text" name="input_2_3 "><br>
<input type="reset">&n bsp;
<input type="submit">
</form>
</div>
</body></html>
--
Rob
