hide show layers and working tabindex? - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

hide show layers and working tabindex?

how to show layers with tabindex

pri3st

6:12 am on Sep 4, 2004 (gmt 0)

10+ Year Member

Hello, my first post here and I would like to know if someone knew of a way to get tabindex working with the hide/show script bellow or if there´s another script that could do what I want. The thing is when you use tabindex for my menu I want it to open the underlying submenus and tab through them and when they´re done close the submenu and jump on the next mainmenu item.
this is the script I´m using right now:

var state = 'none';

function showhide(layer_ref) {

if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}

and this is the menu:
<div id="klick"><a tabindex="01" href="index.html">presentation</a><br />
<a tabindex="02" href="#" onclick="showhide('gallery');this.blur()">galleries</a><br />
<div id="gallery" style="display:none; margin-left:8px;"><span class="text">¬ <a tabindex="03" href="create.html">created pictures</a><br />
¬ <a tabindex="04" href="photos.html">photos</a></span></div>
<a tabindex="05" href="online.html">life online</a><br />
<a tabindex="06" href="links.html">links</a></div>

Anyone got any idea? :)

Cochrane

4:06 pm on Sep 4, 2004 (gmt 0)

10+ Year Member

pri3st:
The truth is I doubt that I understand your question. But, from looking at the code you provided, it seems that you want to "toggle" certain associated sub-menu items, by using the ID assigned to the Div in which they are contained.
So, for what it's worth, take a look at this:

<HTML>
<Head>
<Script Language=JavaScript>

var state = 'none';

function toggle(ID) {

if (state == 'block'){state = 'none'}
else {state = 'block'}
document.getElementById(ID).style.display = state;
}
</Script>
</Head>
<Body>

<a href="index.html">presentation</a><br>
<a href=javascript:toggle('gallery')>galleries</a><br>

<div id="gallery" style="display:none; margin-left:8px;">
<a href="create.html"> created pictures </a><br>
<a href="photos.html"> photos </a>
</div>

<a href="online.html"> life online </a><br>
<a href="links.html"> links </a>

</Body>
</HTML>

pri3st

4:42 pm on Sep 4, 2004 (gmt 0)

10+ Year Member

Your script does what "my script" (someone here posted it) does but here´s a better explanation maybe:

Press tab: Go to presentation
Press tab again: Go to galleries
Press tab again: Open layer (submenu) gallery, go to created pictures
Press tab again: Go to photos
Press tab again: Close layer (submenu) gallery, go to life online
Press tab again: Go to links

Thanks for the better looking code though :)

Cochrane

5:14 pm on Sep 4, 2004 (gmt 0)

10+ Year Member

pri3st:
Forgive me again, but are you saying that you want the contents of a new window to change, according to your predetermined order, each time the user presses the Tab key?
The tabindex attribute is normally used to assist a user in navigating the input boxes of a form.
If you want it to start with "presentation," is/should the other items be displayed at all?
Would a "Start" button, be acceptable? And then a "Next" button, in each page that is displayed in the reused, new window?

Cochrane

5:42 pm on Sep 4, 2004 (gmt 0)

10+ Year Member

pri3st:
This is what I had in mind:

--------- Main page ------------
<HTML>
<Head>
<Script Language=JavaScript>

var tourWindow = "";

function startTour(nextPg){

window.opener = self;
tourWindow = window.open(nextPg);
}

function getNextPg(nextPg){

tourWindow.location.replace(nextPg);
}

</Script>
</Head>
<Body>
<br><br><br>
<center>
This is the main page
<br><br>
<input type=button value='Start' onClick="startTour('index.html')">
</center>
</Body>
</HTML>
-------------- Index.html -------------
<HTML>
<Head>
<Script Language=JavaScript></Script>
</Head>
<Body>
<center>
This is the content in the Index page
<br>
<br>
<input type=button value='Next' onClick="opener.getNextPg('create.html')"
</center>
</Body>
</HTML>
-------------- Create.html -------------
<HTML>
<Head>
<Script Language=JavaScript></Script>
</Head>
<Body>
<center>
This is the content in the Create page
<br>
<br>
<input type=button value='Next' onClick="opener.getNextPg('photos.html')"
</center>
</Body>
</HTML>

pri3st

5:55 am on Sep 5, 2004 (gmt 0)

10+ Year Member

Got it working almost exactly as i wanted, the only downside is you can´t close the gallery submenu right away but it´s working with the tabs.

<a href="index.html">presentation</a><br>
<a tabindex="02" href="#" onfocus="toggle('gallery')">galleries</a><br>

<div id="gallery" style="display:none; margin-left:8px;">
<a href="create.html"> created pictures </a><br>
<a href="photos.html"> photos </a>
</div>

<a href="online.html"> life online </a><br>
<a href="links.html"> links </a>

Thanks forthe help! :)

Cochrane

4:50 pm on Sep 5, 2004 (gmt 0)

10+ Year Member

Pri3st:
Does this help?

<HTML>
<Head>
<Script Language=JavaScript>

function toggle(tab){

if (tab == 'gallery'){gallery.style.display = ''}
if (tab == 'life'){gallery.style.display = 'none'}
}

function setFocus(){

present.focus();
}

window.onload=setFocus;

</Script>
</Head>
<Body>
<a href="index.html" tabindex=1 id=present> presentation </a><br>
<a tabindex=2 href="#" onfocus="toggle('gallery')"> galleries </a><br>

<div id=gallery style="display:none; margin-left:8px;">
<a href="create.html" tabindex=3> created pictures </a><br>
<a href="photos.html" tabindex=4> photos </a>
</div>

<a href="online.html" tabindex=5 onfocus="toggle('life')"> life online </a><br>
<a href="links.html" tablindex=6> links </a>

</Body>
</HTML>

Cochrane

6:09 pm on Sep 5, 2004 (gmt 0)

10+ Year Member

Pri3st:
Again, for some reason, it won't let me edit my previous post. So, here's the edited version.

<HTML>
<Head>
<Script Language=JavaScript>

function toggle(tab){

if (tab == 'gallery'){gallery.style.display = ''}
if (tab == 'life'){gallery.style.display = 'none'}
}

function setFocus(){

present.focus();
}

window.onload=setFocus;

</Script>
</Head>
<Body>
<a href="index.html" tabindex=1 id=present> presentation </a><br>
<a tabindex=2 href="#" onfocus="toggle('gallery')"> galleries </a><br>

<div id=gallery style="display:none; margin-left:8px;">
<a href="create.html" tabindex=3> created pictures </a><br>
<a href="photos.html" tabindex=4> photos </a>
</div>

<a href="online.html" tabindex=5 onfocus="toggle('life')"> life online </a><br>
<a href="links.html" tablindex=6 onblur="setFocus()"> links </a>

</Body>
</HTML>

oztinks

10:09 am on Sep 9, 2004 (gmt 0)

dont know if this is of any help but I made a function for a menu it uses element id instead of tabindex you would need to give your tabs an id.

The function contains an array of all the elements that need to be toggled you can have as many as you like just put them in the menu_items array, between quotes seperated by commas.

function menu(the_element)
{
var menu_items = ["links","online","photos","gallery","index"];
for (var i=0;i<menu_items.length;i++) {
a = document.getElementById(menu_items[i]).style
if (menu_items[i] == the_element) {
a.display = ''
} else {
a.display = 'none'
}
}
}

and use a anchor tag like this for your menu
<a href="#"
onClick="menu('photos');">Create Photos</a>

Hope someone finds this useful