simple text based menu - toggeling between buttons (DHTML, javascript)

[youssou]

Does anybody know a simple way to toggle between buttons.

The functions I have used:

function setClass(objectID,newClass){
var dom = findDOM(objectID,0);
dom.className = newClass;
}
 
function setVisibility(objectID,state){
var dom = findDOM(objectID,1);
dom.visibility = state;
}
 

Plus this monster to build a cross browser dom:

var isDHTML = 0;
var isLayers = 0;
var isAll = 0;
var isID = 0;
 
if (document.getElementById) {isID = 1; isDHTML = 1;}
else {
    if (document.all) {isAll = 1; isDHTML = 1;}
    else {
        browserVersion = parseInt(navigator.appVersion);
    if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) {isLayers = 1; isDHTML = 1;}
}}
 
function findDOM(objectID,withStyle) {
    if (withStyle == 1) {
    if (isID) { return (document.getElementById(objectID).style) ; }
    else {
      if (isAll) { return (document.all[objectID].style); }
    else {
      if (isLayers) { return (document.layers[objectID]); }
    };}
  }
  else {
    if (isID) { return (document.getElementById(objectID)) ; }
    else {
      if (isAll) { return (document.all[objectID]); }
    else {
      if (isLayers) { return (document.layers[objectID]); }
    };}
     }
}
 
 

The code I have produced - an insult to every decent programmer (there must be an easier way):

<td> <a href="javascript:void('')" class="navi" id="insp" onMouseUp="setClass('insp','naviNA');setClass('berat','navi');setClass('plan','navi');setClass('real','navi');setVisibility('inspText','visible');setVisibility('beratText','hidden');setVisibility('planText','hidden');setVisibility('realText','hidden');textIsVisible='yes'"><b>Inspirieren</b></a></td>
    <td><img src="img/Orange1x1.gif" width="2" height="22"></td>
    <td><a href="javascript:void('')" class="navi" id="berat" onMouseUp="setClass('insp','navi');setClass('berat','naviNA');setClass('plan','navi');setClass('real','navi');setVisibility('inspText','hidden');setVisibility('beratText','visible');setVisibility('planText','hidden');setVisibility('realText','hidden');textIsVisible='yes'"><b>Beraten</b></a></td>
    <td><img src="img/Orange1x1.gif" width="2" height="22"></td>
    <td><a href="javascript:void('')" class="navi" id="plan" onMouseUp="setClass('insp','navi');setClass('berat','navi');setClass('plan','naviNA');setClass('real','navi');setVisibility('inspText','hidden');setVisibility('beratText','hidden');setVisibility('planText','visible');setVisibility('realText','hidden');textIsVisible='yes'"><b>Planen</b></a></td>
    <td><img src="img/Orange1x1.gif" width="2" height="22"></td>
    <td><a href="javascript:void('')" class="navi" id="real" onMouseUp="setClass('insp','navi');setClass('berat','navi');setClass('plan','navi');setClass('real','naviNA');setVisibility('inspText','hidden');setVisibility('beratText','hidden');setVisibility('planText','hidden');setVisibility('realText','visible');textIsVisible='yes'"><b>Realisieren</b></a></td>
 

[acoder]

You only need document.getElementById(), the standard method, unless you want to support IE4 and Netscape 4, two old buggy browsers that are over 10 years old. All modern browsers support document.getElementById().

An easier way to toggle buttons is to have one function which takes the button name/id as an argument and hides the rest or changes their class except the one to be shown/set.

Use document.getElementsByTagName(tagName) to get all the tags (where tagName is the name of the tag). Are the buttons input (type=button) tags? What about the text?

[youssou]

Thanks for getting back to me.

You only need document.getElementById(), the standard method, unless you want to support IE4 and Netscape 4, two old buggy browsers that are over 10 years old. All modern browsers support document.getElementById().

Ah, yes. Good point. Guess I should have read a newer book when trying to teach myself. ;-\

An easier way to toggle buttons is to have one function which takes the button name/id as an argument and hides the rest or changes their class except the one to be shown/set.

Use document.getElementsByTagName(tagName) to get all the tags (where tagName is the name of the tag). Are the buttons input (type=button) tags? What about the text.

The buttons are just text links. I don't want to change the class of all the <a> tags in that document only of certain IDs. Perhaps building an array with the IDs that I would want to set to a different class would be a start. Flagging the clicked button with a variable and then letting that array run setting a new class for all the button layers but the flagged one.

To be honest I haven't worked it out yet. Part of the problem is to figure Javascript out. I have not used it before.

[acoder]

The buttons are just text links. I don't want to change the class of all the <a> tags in that document only of certain IDs. Perhaps building an array with the IDs that I would want to set to a different class would be a start. Flagging the clicked button with a variable and then letting that array run setting a new class for all the button layers but the flagged one.

That's a possibility or by using elem.getElementsByTagName(tagName) where elem is the parent element containing the links required only and no other links, e.g. the table row.

[youssou]

That's a possibility or by using elem.getElementsByTagName(tagName) where elem is the parent element containing the links required only and no other links, e.g. the table row.

Ah, that is confusing me. I guess "elem" is another object like

document.elem.getElementeByTagName(tagName).

which I woul need to address:

document.getElementByID(elem).getElementeByTagName(tagName).

Of course not, but how is it posssible for the browser to find that particular element (in my case a table).

Does the following code make any sense to you?

buttonIDs = new Array("'insp','berat','plan','real'")
numberButtons = buttonIDs.length
ButtonCounter = 0
function toggleButtons() {
ButtonCounter++
if (buttonClicked == 'yes')
document.getElementById(buttonIDs).className='naviNA';
buttonClicked = 'no';
else {
document.getElementById(buttonIDs).className='navi';
buttonClicked = 'no';
}
 

and:

<td><a href="javascript:void('')" class="navi" id="licht" onMouseUp="buttonClicked='yes';toggleButtons(); ImgKap='l';document.sqImg.src= eval(ImgKap + '01.src')"><b>Licht</b></a></td>

It doesn't work, but unfortunately I have to rush off to work now.

[acoder]

how is it posssible for the browser to find that particular element (in my case a table).

'elem' was just a reference to the parent element containing the links. You would obviously have to reference the element. The advantage of this approach is that if you add another link, you don't need to change the rest of the code.

Does the following code make any sense to you?

Use something like:

var buttonIDs = new Array('insp','berat','plan','real');
function toggleButtons(button) {
  var id = button.id;
  for (i = 0; i < buttonIDs.length; i++) {
    if (buttonIDs[i] == id) {
      document.getElementById(buttonIDs[i]).className='naviNA';
    } else {
        document.getElementById(buttonIDs[i]).className='navi';
    }
  }
}

and:

<a href="..." class="navi" id="licht" onmouseup="toggleButtons(this);">

[youssou]

'elem' was just a reference to the parent element containing the links. You would obviously have to reference the element. The advantage of this approach is that if you add another link, you don't need to change the rest of the code.

Hm, it is slowly sinking in.

Use something like:

var buttonIDs = new Array('insp','berat','plan','real');
function toggleButtons(button) {
  var id = button.id;
  for (i = 0; i < buttonIDs.length; i++) {
    if (buttonIDs[i] == id) {
      document.getElementById(buttonIDs[i]).className='naviNA';
    } else {
        document.getElementById(buttonIDs[i]).className='navi';
    }
  }
}

and:

<a href="..." class="navi" id="licht" onmouseup="toggleButtons(this);">

Slick. I can see that you are acoder and I am not. ;-)

Anyway some of my buttons make text visible and invisible. I think you were asking about it above. The textID is like the buttonID plus the word "text".

I thought perhaps one could write something like:

 
var textButtonIDs = new Array('insp','berat','plan','real');
 function changeTextButtons(textButton) {
  var id = textButton.id;
  for (i = 0; i < textButtonIDs.length; i++) {
    if (textButtonIDs[i] == id) {
      document.getElementById(textButtonIDs[i]).className='naviNA';
 
      var ButtonText = eval(textButtonIDs[i] + Text);
      document.getElementById(ButtonText).visibility = 'visible';
 
 
    } else {
       document.getElementById(textButtonIDs[i]).className='navi';
        document.getElementById(ButtonText).visibility = 'hidden';
    }
  }
}
 

It doesn't work and my problem is I have not really understood how to use variables in functions.

I did write a second version of my first attempt and posted it as a reply to myself, but the system did not take it.

Why is your code in colour and mine black and white?

[acoder]

Try this:

var textButtonIDs = new Array('insp','berat','plan','real');
function changeTextButtons(textButton) {
  var id = textButton.id;
  for (i = 0; i < textButtonIDs.length; i++) {
    var ButtonText = textButtonIDs[i] + "Text";
    if (textButtonIDs[i] == id) {
      document.getElementById(textButtonIDs[i]).className='naviNA';
      document.getElementById(ButtonText).visibility = 'visible';
    } else {
       document.getElementById(textButtonIDs[i]).className='navi';
       document.getElementById(ButtonText).visibility = 'hidden';
    }
  }
}

Note the changes. No need for eval. It's just a string that you pass to getElementById(). I've moved the declaration out of the if statement because it would not be available in the else part otherwise.

Why is your code in colour and mine black and white?

Add the language to the code tag, e.g. [code=javascript], [code=html]

[youssou]

I see. Excellent. Thank you!

I have got a similar situation with another set of buttons. Only now if you click on the button it calls a function that changes an image according to the chapter you are in.

I wrote the following function:

 
function chgCompImg(imgField,newImg,ImgNr) {document[imgField].src = eval(newImg + ImgNr + ".src")}
 
 

It is called like this:

<a href="javascript:void('')" class="navi" id="stoffe" onMouseUp="toggleButtons(this);ImgKap='s';chgCompImg('sqImg',ImgKap,'01')">
 

Well, it is probably not possible to call that function from within a function like so:

var buttonIDs = new Array('atHome','kitchen','checkl','rezept','moebel','licht','stoffe','real','kontakt','anfahrt','impressum');
function toggleButtons(button) {
  var id = button.id;
  for (i = 0; i < buttonIDs.length; i++) {
    if (buttonIDs[i] == id) {
      document.getElementById(buttonIDs[i]).className='naviNA';
      chgCompImg('sqImg',ImgKap,'01');
    } else {
      document.getElementById(buttonIDs[i]).className='navi';
    }
  }
}
 

Or is it better just to write?

document.sqImg.src = eval(ImgKap+ "01" + ".src");
 

[acoder]

I have got a similar situation with another set of buttons. Only now if you click on the button it calls a function that changes an image according to the chapter you are in.

What does the img tag look like? Is it named "sqImg"? Note that there's no need to use eval since all you need is a string.

[youssou]

What does the img tag look like? Is it named "sqImg"? Note that there's no need to use eval since all you need is a string.

Yes that's right "sqImg" is the image tag.

Okay, "eval" is "evil" so I have read.

Would

document.sqImg.src = ImgKap+ "01.src";
 

be the right thing to write into the function above?

[acoder]

document.images[imgField].src = document.images[newImg + ImgNr].src;
 

should be fine.

[youssou]

document.images[imgField].src = document.images[newImg + ImgNr].src;
 

should be fine.

Well thank you, acoder!

I am going to abandon this thread now. There is really not much more to ask regarding that subject (for now). And it's getting "too much scrolling" anyway.

But your input was invaluable. I feel I learned an awful lot (beginners have a steep learning curve).

;-) youssou

[acoder]

No problem, you're welcome. Glad I could help as part of the learning process.