Solved

Customizing a script...

Posted on 2003-10-26
20
252 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 7
  • 4
20 Comments
 
LVL 17

Expert Comment

by:dorward
ID: 9622056
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
ID: 9623065
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
ID: 9623078
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
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9623199
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
ID: 9623223
"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
ID: 9623263
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
ID: 9623273
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
ID: 9623344
Agreed, but occasionally I like to say -- 'the devil made me do it' :)

Vinny

0
 

Author Comment

by:ImAStinkyToilet
ID: 9623369
Yours worked great Vinny.

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

Expert Comment

by:VincentPuglia
ID: 9623380
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
 

Author Comment

by:ImAStinkyToilet
ID: 9623878
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
ID: 9624030
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
ID: 9624042
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
ID: 9624045
Btw- this only happens with choise #1. The rest works fine.
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9624272
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
ID: 9624291
Thanks a lot:-)

Guess the Jets won:-P
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9624301
don't talk to me :( I'm considering suicide :(

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

Vinny
0
 

Author Comment

by:ImAStinkyToilet
ID: 9624326
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
ID: 9624338

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
ID: 9624349
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

726 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