Customizing a script...

Im using this script:

<HEAD>

<script type="text/javascript">

/*
Combo-Box Viewer script- Created by and © Dynamicdrive.com
Visit http://www.dynamicdrive.com/ for this script and more
This notice MUST stay intact for legal use
*/

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.dropcontent{display:none;}\n')
document.write('</style>\n')
}

function contractall(){
if (document.getElementById){
var inc=0
while (document.getElementById("dropmsg"+inc)){
document.getElementById("dropmsg"+inc).style.display="none"
inc++
}
}
}

function expandone(){
if (document.getElementById){
var selectedItem=document.dropmsgform.dropmsgoption.selectedIndex
contractall()
document.getElementById("dropmsg"+selectedItem).style.display="block"
}
}

if (window.addEventListener)
window.addEventListener("load", expandone, false)
else if (window.attachEvent)
window.attachEvent("onload", expandone)

</script>
</HEAD>
<BODY>
<form name="dropmsgform">
<select name="dropmsgoption" size="1" style="width:300" onChange="expandone()">
<option selected>choise1</option>
<option>choise2</option>
<option>choise3</option>
</select>
<br>

<div id="dropmsg0">
exampletext1
</div>

<div id="dropmsg1">
exampletext2
</div>

<div id="dropmsg2">
exampletext3
</div>

</form>
</BODY>

Its a "pull down menu", that dynamicaly changes some text on the page depending on what you choose in the menu. My problem is that I need it to change ceveral things on the same page. So when I choose "choise1"(f.i).- it must effect all items on the page with <div id="drop...etc

As the script is now this wont work:
<div id="dropmsg0">
exampletext1
</div>

<div id="dropmsg1">
exampletext2
</div>

<div id="dropmsg2">
exampletext3
</div>


<div id="dropmsg0">
another thing that should change
</div>

<div id="dropmsg1">
exampletext2
</div>

<div id="dropmsg2">
exampletext3
</div>
</form>


----
only the first one will be changed.

Any sugestions on how I can change the script so it works like I want it to? To sum up- I need only 1 pull down menu, but it must effect the whole page.

ImAStinkyToiletAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

dorwardCommented:
This is becuase HTML only allows an id to be used once. id is a unique identifier, i.e. id="foo" means this element is the one and only 'foo'. You can't reuse them.

What you can do is make use of, for instance classes...

<div class="dropmsg1">

and then do something along the lines of:

function expandone(){
    if (document.getElementsByTagName) {
      var an = document.getElementsByTagName('div');
      for (i=0; i<an.length; i++) {
          if (an.item(i).getAttribute('class') == "dropmsg"+selectedItem ) {
var selectedItem=document.dropmsgform.dropmsgoption.selectedIndex
contractall()
                   an.item(i).style.display='block'
      }
    }
}
0
VincentPugliaCommented:
Hi,

Here's another version -- that uses only 1 function for both expanding/contracting and doesn't require a class declaration, so you can use your original HTML.

<html>
<HEAD>
<script type="text/javascript">

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.dropcontent{display:none;}\n')
document.write('</style>\n')
}

function toggle(selNdx)
{
  divID = 'dropmsg' + selNdx;
  allDivs = document.getElementsByTagName('div')
  for (var i = 0; i < allDivs.length; i++)
  {
    outHTML = allDivs[i].outerHTML;
    if (outHTML.indexOf(divID) != -1)
     allDivs[i].style.display = "block"
    else
     allDivs[i].style.display = "none"
  }

}
</script>
</HEAD>
<BODY onload=toggle(-1)>
<form name="dropmsgform">
<select name="dropmsgoption" size="1" style="width:300" onChange="toggle(this.selectedIndex-1)">
<option selected>Select</option>
<option>choise1</option>
<option>choise2</option>
<option>choise3</option>
</select>
<br>

<div id="dropmsg0">
exampletext1
</div>

<div id="dropmsg1">
exampletext2
</div>

<div id="dropmsg2">
exampletext3
</div>
<div id="dropmsg0">
another thing that should change
</div>
<div id="dropmsg1">
exampletext2
</div>
<div id="dropmsg2">
exampletext3
</div>
</form>
</body>
</html>

Vinny
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dorwardCommented:
The origional HTML isn't HTML. HTML doesn't allow multiple nodes with the same ID... and most browsers don't either. MSIE is an exception which presents duplicate ids as an array, I believe its unique in this.

Do not duplicate ids!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

VincentPugliaCommented:
Hi dorward,

  I suspect you are correct insofar as the ids as an array thing (it is also my assumption for most of IE's object) , & the only other browser I know of that does the same is AOL (an IE-cripple)

 Insofar as not duplicating ids:  As a general rule, I agree.  I, however, do not know StinkyToilet's situation/environment -- if the environment is a M$ house intranet -- why shouldn't s/he use duplicate ids?  (Especially since most M$ houses also use FP extensions, which probably do the same thing)

btw: all of the above is offered simply as a point for general/theoritical discussion

Vinny
0
dorwardCommented:
"Why follow standards when its an in house system?" is quite a common question. There are two good reasons.

(1) Microsoft might fix their browser one day
(2) Policy might change and the in house browser might change to something better then MSIE
0
VincentPugliaCommented:
Hi dorward,

1)  That's as likely as everyone else changing their browsers to match IE -- amusing thought, though :D

2) Better reason, but also something that doesn't happen that often and when it does it usually means a revamping of virtually all code anyway.

The way I see it: if the functionality exists and its usage doesn't cause any ripples, then use it.  I'm not saying that I'm right, only that I enjoy leaving options open (except within in select tags :)

Vinny
0
dorwardCommented:
I'd rather place my bets on code that conforms to standards and works on all modern browsers, then code which doesn't conform to standards and only works in MSIE.

The extra work in following standards is minimal, and it offers protection against any possibility of change in the browser.
0
VincentPugliaCommented:
Agreed, but occasionally I like to say -- 'the devil made me do it' :)

Vinny

0
ImAStinkyToiletAuthor Commented:
Yours worked great Vinny.

Im not that concerned about browser compability in this case.
0
VincentPugliaCommented:
Well, just for future reference -- I do agree with dorward.  You should attempt to code by the rules -- break them only when you know what the effects will be.

Vinny
0
ImAStinkyToiletAuthor Commented:
Well- im out of points, but im gonna try and ask even though.

It seems that it only work now with max 9 option choises. How do I make it accept more choises? I need around 15+-
0
VincentPugliaCommented:
Hi,

  I don't see what difference 1, 9, or 15 would make.  So, post the actual code you are using -- and if the Jets win in the next few minutes :)  Else wait until tomorrow -- cause I'll be depressed :(

Vinny

0
ImAStinkyToiletAuthor Commented:
Actually the only problem is with +10 choises- when you choose choise #1- it shows both #1,#10,#11,#12, etc- it shows all the choises that starts with 1. Im using the script you made:-)

I dont think I can show you the actual code. It really is no different from what you made- except it has more choises
0
ImAStinkyToiletAuthor Commented:
Btw- this only happens with choise #1. The rest works fine.
0
VincentPugliaCommented:
Hi,

it will happen with 20->29, 30->39, etc.  The problem is in how I'm locating the divID (indexOf).  To fix it change the following line:

  divID = 'dropmsg' + selNdx;
to:
  divID = 'dropmsg' + selNdx +" ";

that's an empty space between the double quotes

Vinny
0
ImAStinkyToiletAuthor Commented:
Thanks a lot:-)

Guess the Jets won:-P
0
VincentPugliaCommented:
don't talk to me :( I'm considering suicide :(

they lost 24-17 to the stinking eagles. :(

Vinny
0
ImAStinkyToiletAuthor Commented:
Heh, that actually created a new minor problem. When it loads the page it dont show any of the DIVS at all. Just empty fields. The content comes when I use the menu.
0
VincentPugliaCommented:

they are all turned off with the onload event handler:
<BODY onload=toggle(-1)>

if you want them to appear, simply remove it. <body>

Vinny
0
ImAStinkyToiletAuthor Commented:
ok, now it works just like I want it to:-)

Thanks for all your help Vinny. Apreciate it a lot. To bad about the Jets:-(

Btw- in case you care- I fixed this by changing all "dropmsg0" to "dropmsg0 "
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.