Solved

Customizing a script...

Posted on 2003-10-26
20
244 Views
Last Modified: 2012-06-21
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.

0
Comment
Question by:ImAStinkyToilet
  • 9
  • 7
  • 4
20 Comments
 
LVL 17

Expert Comment

by:dorward
Comment Utility
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
 
LVL 15

Accepted Solution

by:
VincentPuglia earned 125 total points
Comment Utility
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
 
LVL 17

Expert Comment

by:dorward
Comment Utility
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
 
LVL 15

Expert Comment

by:VincentPuglia
Comment Utility
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
 
LVL 17

Expert Comment

by:dorward
Comment Utility
"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
 
LVL 15

Expert Comment

by:VincentPuglia
Comment Utility
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
 
LVL 17

Expert Comment

by:dorward
Comment Utility
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
 
LVL 15

Expert Comment

by:VincentPuglia
Comment Utility
Agreed, but occasionally I like to say -- 'the devil made me do it' :)

Vinny

0
 

Author Comment

by:ImAStinkyToilet
Comment Utility
Yours worked great Vinny.

Im not that concerned about browser compability in this case.
0
 
LVL 15

Expert Comment

by:VincentPuglia
Comment Utility
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

Author Comment

by:ImAStinkyToilet
Comment Utility
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
 
LVL 15

Expert Comment

by:VincentPuglia
Comment Utility
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
 

Author Comment

by:ImAStinkyToilet
Comment Utility
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
 

Author Comment

by:ImAStinkyToilet
Comment Utility
Btw- this only happens with choise #1. The rest works fine.
0
 
LVL 15

Expert Comment

by:VincentPuglia
Comment Utility
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
 

Author Comment

by:ImAStinkyToilet
Comment Utility
Thanks a lot:-)

Guess the Jets won:-P
0
 
LVL 15

Expert Comment

by:VincentPuglia
Comment Utility
don't talk to me :( I'm considering suicide :(

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

Vinny
0
 

Author Comment

by:ImAStinkyToilet
Comment Utility
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
 
LVL 15

Expert Comment

by:VincentPuglia
Comment Utility

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
 

Author Comment

by:ImAStinkyToilet
Comment Utility
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

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now