By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,454 Members | 3,209 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,454 IT Pros & Developers. It's quick & easy.

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

P: 9
Does anybody know a simple way to toggle between buttons.

The functions I have used:

Expand|Select|Wrap|Line Numbers
  1. function setClass(objectID,newClass){
  2. var dom = findDOM(objectID,0);
  3. dom.className = newClass;
  4. }
  5.  
  6. function setVisibility(objectID,state){
  7. var dom = findDOM(objectID,1);
  8. dom.visibility = state;
  9. }
  10.  
Plus this monster to build a cross browser dom:

Expand|Select|Wrap|Line Numbers
  1. var isDHTML = 0;
  2. var isLayers = 0;
  3. var isAll = 0;
  4. var isID = 0;
  5.  
  6. if (document.getElementById) {isID = 1; isDHTML = 1;}
  7. else {
  8.     if (document.all) {isAll = 1; isDHTML = 1;}
  9.     else {
  10.         browserVersion = parseInt(navigator.appVersion);
  11.     if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) {isLayers = 1; isDHTML = 1;}
  12. }}
  13.  
  14. function findDOM(objectID,withStyle) {
  15.     if (withStyle == 1) {
  16.     if (isID) { return (document.getElementById(objectID).style) ; }
  17.     else {
  18.       if (isAll) { return (document.all[objectID].style); }
  19.     else {
  20.       if (isLayers) { return (document.layers[objectID]); }
  21.     };}
  22.   }
  23.   else {
  24.     if (isID) { return (document.getElementById(objectID)) ; }
  25.     else {
  26.       if (isAll) { return (document.all[objectID]); }
  27.     else {
  28.       if (isLayers) { return (document.layers[objectID]); }
  29.     };}
  30.      }
  31. }
  32.  
  33.  
The code I have produced - an insult to every decent programmer (there must be an easier way):

Expand|Select|Wrap|Line Numbers
  1. <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>
  2.     <td><img src="img/Orange1x1.gif" width="2" height="22"></td>
  3.     <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>
  4.     <td><img src="img/Orange1x1.gif" width="2" height="22"></td>
  5.     <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>
  6.     <td><img src="img/Orange1x1.gif" width="2" height="22"></td>
  7.     <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>
  8.  
Jan 14 '08 #1
Share this Question
Share on Google+
13 Replies


acoder
Expert Mod 15k+
P: 16,027
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?
Jan 14 '08 #2

P: 9
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.
Jan 15 '08 #3

acoder
Expert Mod 15k+
P: 16,027
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.
Jan 15 '08 #4

P: 9
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

Expand|Select|Wrap|Line Numbers
  1. document.elem.getElementeByTagName(tagName).
which I woul need to address:

Expand|Select|Wrap|Line Numbers
  1. 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?

Expand|Select|Wrap|Line Numbers
  1. buttonIDs = new Array("'insp','berat','plan','real'")
  2. numberButtons = buttonIDs.length
  3. ButtonCounter = 0
  4. function toggleButtons() {
  5. ButtonCounter++
  6. if (buttonClicked == 'yes')
  7. document.getElementById(buttonIDs).className='naviNA';
  8. buttonClicked = 'no';
  9. else {
  10. document.getElementById(buttonIDs).className='navi';
  11. buttonClicked = 'no';
  12. }
  13.  
and:

Expand|Select|Wrap|Line Numbers
  1. <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.
Jan 15 '08 #5

acoder
Expert Mod 15k+
P: 16,027
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:
Expand|Select|Wrap|Line Numbers
  1. var buttonIDs = new Array('insp','berat','plan','real');
  2. function toggleButtons(button) {
  3.   var id = button.id;
  4.   for (i = 0; i < buttonIDs.length; i++) {
  5.     if (buttonIDs[i] == id) {
  6.       document.getElementById(buttonIDs[i]).className='naviNA';
  7.     } else {
  8.         document.getElementById(buttonIDs[i]).className='navi';
  9.     }
  10.   }
  11. }
and:
Expand|Select|Wrap|Line Numbers
  1. <a href="..." class="navi" id="licht" onmouseup="toggleButtons(this);">
Jan 16 '08 #6

P: 9
'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:
Expand|Select|Wrap|Line Numbers
  1. var buttonIDs = new Array('insp','berat','plan','real');
  2. function toggleButtons(button) {
  3.   var id = button.id;
  4.   for (i = 0; i < buttonIDs.length; i++) {
  5.     if (buttonIDs[i] == id) {
  6.       document.getElementById(buttonIDs[i]).className='naviNA';
  7.     } else {
  8.         document.getElementById(buttonIDs[i]).className='navi';
  9.     }
  10.   }
  11. }
and:
Expand|Select|Wrap|Line Numbers
  1. <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:

Expand|Select|Wrap|Line Numbers
  1.  
  2. var textButtonIDs = new Array('insp','berat','plan','real');
  3.  function changeTextButtons(textButton) {
  4.   var id = textButton.id;
  5.   for (i = 0; i < textButtonIDs.length; i++) {
  6.     if (textButtonIDs[i] == id) {
  7.       document.getElementById(textButtonIDs[i]).className='naviNA';
  8.  
  9.       var ButtonText = eval(textButtonIDs[i] + Text);
  10.       document.getElementById(ButtonText).visibility = 'visible';
  11.  
  12.  
  13.     } else {
  14.        document.getElementById(textButtonIDs[i]).className='navi';
  15.         document.getElementById(ButtonText).visibility = 'hidden';
  16.     }
  17.   }
  18. }
  19.  
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?
Jan 17 '08 #7

acoder
Expert Mod 15k+
P: 16,027
Try this:
Expand|Select|Wrap|Line Numbers
  1. var textButtonIDs = new Array('insp','berat','plan','real');
  2. function changeTextButtons(textButton) {
  3.   var id = textButton.id;
  4.   for (i = 0; i < textButtonIDs.length; i++) {
  5.     var ButtonText = textButtonIDs[i] + "Text";
  6.     if (textButtonIDs[i] == id) {
  7.       document.getElementById(textButtonIDs[i]).className='naviNA';
  8.       document.getElementById(ButtonText).visibility = 'visible';
  9.     } else {
  10.        document.getElementById(textButtonIDs[i]).className='navi';
  11.        document.getElementById(ButtonText).visibility = 'hidden';
  12.     }
  13.   }
  14. }
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]
Jan 17 '08 #8

P: 9
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:

Expand|Select|Wrap|Line Numbers
  1.  
  2. function chgCompImg(imgField,newImg,ImgNr) {document[imgField].src = eval(newImg + ImgNr + ".src")}
  3.  
  4.  
It is called like this:

Expand|Select|Wrap|Line Numbers
  1. <a href="javascript:void('')" class="navi" id="stoffe" onMouseUp="toggleButtons(this);ImgKap='s';chgCompImg('sqImg',ImgKap,'01')">
  2.  
Well, it is probably not possible to call that function from within a function like so:

Expand|Select|Wrap|Line Numbers
  1. var buttonIDs = new Array('atHome','kitchen','checkl','rezept','moebel','licht','stoffe','real','kontakt','anfahrt','impressum');
  2. function toggleButtons(button) {
  3.   var id = button.id;
  4.   for (i = 0; i < buttonIDs.length; i++) {
  5.     if (buttonIDs[i] == id) {
  6.       document.getElementById(buttonIDs[i]).className='naviNA';
  7.       chgCompImg('sqImg',ImgKap,'01');
  8.     } else {
  9.       document.getElementById(buttonIDs[i]).className='navi';
  10.     }
  11.   }
  12. }
  13.  
Or is it better just to write?

Expand|Select|Wrap|Line Numbers
  1. document.sqImg.src = eval(ImgKap+ "01" + ".src");
  2.  
Jan 17 '08 #9

acoder
Expert Mod 15k+
P: 16,027
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.
Jan 18 '08 #10

P: 9
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

Expand|Select|Wrap|Line Numbers
  1. document.sqImg.src = ImgKap+ "01.src";
  2.  
be the right thing to write into the function above?
Jan 20 '08 #11

acoder
Expert Mod 15k+
P: 16,027
Expand|Select|Wrap|Line Numbers
  1. document.images[imgField].src = document.images[newImg + ImgNr].src;
  2.  
should be fine.
Jan 20 '08 #12

P: 9
Expand|Select|Wrap|Line Numbers
  1. document.images[imgField].src = document.images[newImg + ImgNr].src;
  2.  
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
Jan 21 '08 #13

acoder
Expert Mod 15k+
P: 16,027
No problem, you're welcome. Glad I could help as part of the learning process.
Jan 21 '08 #14

Post your reply

Sign in to post your reply or Sign up for a free account.