Jump Menu show/hide layers

Hi Experts,

Looking through the forum I can see it's possible to attach a behaviour to show or hide a layer when an item is selected from a drop down box but I need to show and hide several layers each time an item is selected. For example if my drop down box contains 2 items; "north" and "south", when "north" is selected I want to show layers "mapnorth", "dirnorth" and "optnorth" whilst hiding "mapsouth", "dirsouth" and "optsouth"  and vice-versa when "south" is selected. Is this possible?
redpoppyAsked:
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.

Jason C. LevineNo oneCommented:
Yes, this is possible.  See this question for the principle:

http://www.experts-exchange.com/Web/WebDevSoftware/DreamWeaver/Q_21748899.html

The edit to the menu items would look something like this:

<select name="select">
      <option onClick="MM_showHideLayers('mapnorth','','show','dirnorth','','show','optnorth','','show','mapsouth','','hide','dirsouth','','hide','optsouth','','hide')" value="North">North</option>
      <option onClick="MM_showHideLayers('mapnorth','','hide','dirnorth','','hide','optnorth','','hide','mapsouth','','show','dirsouth','','show','optsouth','','show') value="South">South</option>
</select>
0
redpoppyAuthor Commented:
Hi Jason,

Thanks for reply. I tried putting in this code:
<form>
       <select name="select">
      <option onClick="MM_showHideLayers('mapnorth','','show','mapsouth','','hide')" value="North">North</option>
      <option onClick="MM_showHideLayers('mapsouth','','show','mapnorth','','hide')" value="South">South</option>

  </select></form>

and nothing happened when I clicked on either option. I've tried testing it with a straightforward link to make sure the MM_showHideLayers routine is working OK (v6 by the way)  and that was fine but it just doesn't seem to recognise the "onclick" when attached to the option. I'm using DW8 and XHTML 1.0 Strict, not sure if either of those would make a difference?

Any thoughts please?
0
Jason C. LevineNo oneCommented:
Post all the code please
0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

redpoppyAuthor Commented:
Hi Jason - here you go, thanks for your time.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Maps &amp; Itineraries</title>
<link type="text/css" rel="stylesheet" href="morocco_common.css" />
<link type="text/css" rel="stylesheet" title="default" href="morocco_norm.css" />
<link type="text/css" rel="alternate stylesheet" title="large text" href="morocco_large.css" />
<script type="text/javascript" src="common_js.js">
</script>
<style type="text/css" >
<!--
li#ln11 {background-color:#D9D9FF; border-top:#9966CC solid 2px; border-bottom:#9966CC solid 2px;}
-->
</style>
<script type="text/javascript">
<!--


function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>


</head>
<body >
<div id="wrapper"><!-- #BeginLibraryItem "/Library/top.lbi" -->
  <div id="header">
    <a href="#" class="mainlink" onclick="tmt_winOpen('popups/atolextra.htm','newWin','width=620,height=580,left=10,top=10,scrollbars=yes,copyhistory=yes',1)"><img src="images/atol_logo.gif" alt=
        "ATOL Protected 6228 - CLICK for more information on your ATOL Protection"
        width="75" height="75" class="imageright" /></a>
    <span class=
        "tel1">Tel:+44(0)1239 654 466<br />
    UK local rate: 0845 345 7195</span>
    <h1> Naturally Morocco </h1>
    <h3> Experience the Real Morocco </h3>
    <div id="topnavbar">
      <ul>
        <li id="tn1">
          <a href="index.htm" >Home</a>
        </li>
        <li id="tn2">
          <a href="unique-naturally-morocco.htm" >Why We're Unique</a>
        </li>
        <li id="tn3">
          <a href="book_now.htm" >Book Now</a>
        </li>
        <li id="tn4">
          <a href="javascript:addbookmark()">Bookmark</a>
        </li>
        <li id="tn5">
          <a href="request_quote.php">Request Quotation</a>
        </li>
        <li id="tn6">
          <a href="Brochures/Brochure_Index.htm">Brochures</a>
        </li>
        <li id="tn7">
          <a href="contact-details.htm">Contact</a>
        </li>
      </ul>
    </div>
  </div>
  <!-- #EndLibraryItem -->
 
  <div class="clear" >&nbsp;</div>
 
 
  <div  style="width:510px; height:500px; float:right;"   id="rightcont">
    <div  style="height:25px;" id="rightlinks">
     
    <form>
       <select name="select">
      <option onClick="MM_showHideLayers('mapnorth','','show','mapsouth','','hide')" value="North">North</option>
      <option onClick="MM_showHideLayers('mapsouth','','show','mapnorth','','hide')" value="South">South</option>

  </select></form>

<a href="#" onclick="MM_showHideLayers('mapnorth','','show','mapsouth','','hide')">north</a>
<a href="#" onclick="MM_showHideLayers('mapsouth','','show','mapnorth','','hide')">south</a><br />
<!-- north links -->
     
    </div>
    <div  id="maps" >
      <!-- South -->
      <div  style="position:absolute; visibility:visible;z-index:01; padding-top:75px;" id="mapsouth">
        <img src="images/maps/morocco_south.gif" width="508" height="303"  id="morocco_south" usemap="#m_morocco_south" alt="" />
        <p class="ftrlink" style="text-decoration:none; clear:both" >Microsoft &reg; Encarta &reg; 2006. &copy; 1993-2005 Microsoft Corporation. All rights reserved.</p>
      </div>
     
      <!-- North -->
      <div  style="position:absolute; visibility:hidden; "  id="mapnorth">
        <img src="images/maps/morocco_north.gif" width="424" height="481" id="morocco_north" usemap="#m_morocco_north" alt=""   style="display:block; margin-left:auto; margin-right:auto;z-index:01" />
        <p class="ftrlink" style="text-decoration:none; clear:both" >Microsoft &reg; Encarta &reg; 2006. &copy; 1993-2005 Microsoft Corporation. All rights reserved.</p>
      </div>
     
     
  </div></div>
  <p class="paraspacer">&nbsp;</p>
  <!-- #BeginLibraryItem "/Library/footer.lbi" -->
  <p class="paraspacer">&nbsp;</p>
  <p class="ftrtext">Naturally Morocco Limited - Experience the Real Morocco<br />
    <span class="tel1">Tel: +44 (0)1239 654 466 &nbsp;&nbsp;&nbsp;UK local rate: 0845 345 7195</span></p>
  <div class="imgblock">
    <a href="mailto:webenq@naturallymorocco.co.uk" class="ftrlink">Email Us</a>
    <a href="#" class="ftrlink"  onclick="tmt_winOpen('popups/privacy_copyright.htm','newWin','width=620,height=450,left=150,top=50,menubar=yes,scrollbars=yes,resizable=yes',1)">Privacy Policy</a>
    <a href="#" class="ftrlink"  onclick="tmt_winOpen('popups/privacy_copyright.htm','newWin','width=620,height=450,left=150,top=50,menubar=yes,scrollbars=yes,resizable=yes',1)">Copyright Policy</a>
    <a href="#" class="ftrlink"  onclick="tmt_winOpen('popups/booking_conditions.htm','newWin','width=620,height=450,left=150,top=50,menubar=yes,scrollbars=yes,resizable=yes',1)">Booking Conditions</a>
    <a href="#" class="ftrlink" onclick="tmt_winOpen('http://www.xe.com/ucc/','newWin','width=800,height=600,left=10,top=10,scrollbars=yes,copyhistory=yes',1)">Currency Converter</a>
    <br />
    <br />
    <a href="http://validator.w3.org/check?uri=referer"
     onclick="this.href='http://validator.w3.org/check?uri=' + document.URL"><img
      src="images/w3c_val.gif" alt="Valid XHTML 1.0 Strict" width="88" height="31" />    </a>
  </div>
<!-- #EndLibraryItem --></div>
</body>
</html>
0
Jason C. LevineNo oneCommented:
It does work on this end...but not on the first time you select each option in the pull down.  I think it is because of the initial visibility state combined with "North" coming up first.  I suggest doing the following:

1) Hiding Map North and Map South using body onLoad

2) Make a third option for the select box that has no event.

This works for me.  Modified code (minus Library items) attached:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Maps &amp; Itineraries</title>
<link type="text/css" rel="stylesheet" href="morocco_common.css" />
<link type="text/css" rel="stylesheet" title="default" href="morocco_norm.css" />
<link type="text/css" rel="alternate stylesheet" title="large text" href="morocco_large.css" />
<script type="text/javascript" src="common_js.js">
</script>
<style type="text/css" >
<!--
li#ln11 {background-color:#D9D9FF; border-top:#9966CC solid 2px; border-bottom:#9966CC solid 2px;}
-->
</style>
<script type="text/javascript">
<!--
function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
//-->
</script>


</head>
<body onload="MM_showHideLayers('mapsouth','','hide','mapnorth','','hide')" >
<div id="wrapper">
 
  <div class="clear" >&nbsp;</div>
 
 
  <div  style="width:510px; height:500px; float:right;"   id="rightcont">
    <div  style="height:25px;" id="rightlinks">
     
    <form>
       <select name="select">
      <option selected="selected">Please Select A Region</option>
      <option onClick="MM_showHideLayers('mapnorth','','show','mapsouth','','hide')" value="North">North</option>
      <option onClick="MM_showHideLayers('mapsouth','','show','mapnorth','','hide')" value="South">South</option>

                      </select>
  </form>

<!-- <a href="#" onclick="MM_showHideLayers('mapnorth','','show','mapsouth','','hide')">north</a>
<a href="#" onclick="MM_showHideLayers('mapsouth','','show','mapnorth','','hide')">south</a><br /> -->
<!-- north links -->
     
    </div>
    <div id="maps" >
      <!-- South -->
      <div  style="position:absolute; visibility:visible;z-index:01; padding-top:75px;" id="mapsouth">
        <img src="images/maps/morocco_south.gif" width="508" height="303"  id="morocco_south" usemap="#m_morocco_south" alt="" />
        <p class="ftrlink" style="text-decoration:none; clear:both" >Microsoft &reg; Encarta &reg; 2006. &copy; 1993-2005 Microsoft Corporation. All rights reserved.</p>
      </div>
     
      <!-- North -->
      <div  style="position:absolute; visibility:hidden; "  id="mapnorth">
        <img src="images/maps/morocco_north.gif" width="424" height="481" id="morocco_north" usemap="#m_morocco_north" alt=""   style="display:block; margin-left:auto; margin-right:auto;z-index:01" />
        <p class="ftrlink" style="text-decoration:none; clear:both" >Microsoft &reg; Encarta &reg; 2006. &copy; 1993-2005 Microsoft Corporation. All rights reserved.</p>
      </div>
     
     
  </div></div>
  <p class="paraspacer">&nbsp;</p>
</div>
</body>
</html>
0
redpoppyAuthor Commented:
Hi Jason,

Thanks again for looking at this. I've copied your code into my set up and found that it still doesn't work in IE6 but does work in Firefox 1.7  and Opera 8.52 - I hadn't previously checked the latter two.  I've also tried changing the DOCTYPE to xhtml transitional and html 4.01 but it didn't make any difference. Any ideas why it's not working in IE6?
0
Jason C. LevineNo oneCommented:
Because IE sucks little flat rocks?  I think that IE is choking on the inline event handler and you probably need to re-write the javascript so that it fires off differently.  I'm not the sharpest knife in the drawer when it comes to javascript, though.

0
redpoppyAuthor Commented:
OK Jason, I think maybe I should re-post on the Javascript board then. I'm not sure what to do about awarding points, I'd like to send some your way for getting me this far but not sure how to go about it - can you or a Moderator advise please?
P.S just checked out your profile - good luck with your new baby - any sign yet?
0
Jason C. LevineNo oneCommented:
Not yet.  End of April.

Three ways to handle this:

1) Close this question with a B to reflect a partial answer and start a new question in the JS board.  It isn't my fault that IE doesn't support JS correctly :)

2) Post a 20 pt Pointer Question in the JS board to this questions and if/when you get an answer, split the points here.

3) Ask Community Support to PAQ this and refund your points if you feel the answer is not worth the expenditure.
0
RouchieCommented:
redpoppy
IE doesn't support the OnClick event of the OPTION tag as Jason suggested, so I've re-written your javascript based on code snippets from the net.  Dreamweaver's version has also been removed as I find it totally confusing.  This new version has been tested on IE6 and FF1.5.
All you need to do is add your style div's back in.  I removed these to make the code faster to read...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Maps &amp; Itineraries</title>
<script language="javascript" type="text/javascript">
function hideAll() {
      document.getElementById("mapnorth").visibility = "hidden";
      document.getElementById("mapsouth").visibility = "hidden";
      }
      
function doChange() {
            document.getElementById("mapnorth").style.visibility = "hidden";
            document.getElementById("mapsouth").style.visibility = "hidden";
            var selectBox = document.forms[0].changer;
            var user_input = selectBox.options[selectBox.selectedIndex].value;
            document.getElementById(user_input).style.visibility = "visible";
      }
</script>
</head>
<body onload="hideAll()">

      <form id="form1" name="form1">
        <select name="changer" id="changer" onchange="doChange()">
          <option selected="selected">Please Select A Region</option>
          <option value="mapnorth" id="north" title="north">North</option>
          <option value="mapsouth" id="south" title="south">South</option>
        </select>
      </form>

      <div  style="position:absolute; z-index:01; padding-top:75px; visibility:hidden;" id="mapsouth">
            <img src="images/maps/morocco_south.gif" width="508" height="303"  id="morocco_south" usemap="#m_morocco_south" alt="" />
            <p class="ftrlink" style="text-decoration:none; clear:both" >
            Microsoft &reg; Encarta &reg; 2006. &copy; 1993-2005 Microsoft Corporation. All rights reserved.</p>
      </div>
        
      <div  style="position:absolute; visibility:hidden;"  id="mapnorth">
            <img src="images/maps/morocco_north.gif" width="424" height="481" id="morocco_north" usemap="#m_morocco_north" alt="" style="display:block; margin-left:auto; margin-right:auto;z-index:01" />
            <p class="ftrlink" style="text-decoration:none; clear:both" >
            Microsoft &reg; Encarta &reg; 2006. &copy; 1993-2005 Microsoft Corporation. All rights reserved.</p>
      </div>
</body>
</html>
0
redpoppyAuthor Commented:
Hi Rouchie,
Thanks a lot for having a look at this for me - using your code is it possble to show/hide more than 1 layer when an option is selected, eg: when "north" is selected to show layers"mapnorth", "dirnorth" and "optnorth" whilst hiding "mapsouth", "dirsouth" and "optsouth"  and vice-versa when "south" is selected?
0
RouchieCommented:
Yes it is but it will need expanding.  After some experimenting (Googling!) the following should do the trick.  Just expand the form options using the same pattern as I've started with in the first option.

What happens is that 3 values are now passed to javascript from the form options.  Javascript then breaks them up using the , symbol and then loops through the 3 choices and hides each one.

To hide everything to begin with, just add any new DIV ID's to the hideAll() function.

------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Maps &amp; Itineraries</title>
<script language="javascript" type="text/javascript">
function hideAll() {
      document.getElementById("mapnorth").style.visibility = "hidden";
      document.getElementById("dirnorth").style.visibility = "hidden";
      document.getElementById("optnorth").style.visibility = "hidden";
      document.getElementById("mapsouth").style.visibility = "hidden";
      }
      
function doChange() {
            // hide everything to begin with
            hideAll()
            
            // get values taken from form and seperate them with ,
            var selectBox = document.forms[0].changer;
            var user_input = selectBox.options[selectBox.selectedIndex].value;
            var myArray = user_input.split(",");
            // loop through and show each one in turn
            for (i=0;i<myArray.length;i++)
            {
                  document.getElementById(myArray[i]).style.visibility = "visible";
            }
      }
</script>
</head>
<body onload="hideAll()">


      <form id="form1" name="form1">
        <select name="changer" id="changer" onchange="doChange()">
          <option selected="selected">Please Select A Region</option>
          <option value="mapnorth,dirnorth,optnorth" id="north" title="north">North</option>
          <option value="mapsouth" id="south" title="south">South</option>
        </select>
      </form>

      <div  style="position:absolute; z-index:01; padding-top:75px; visibility:hidden;" id="mapsouth">
            <img src="images/maps/morocco_south.gif" width="508" height="303"  id="morocco_south" usemap="#m_morocco_south" alt="" />
            <p class="ftrlink" style="text-decoration:none; clear:both" >
            Microsoft &reg; Encarta &reg; 2006. &copy; 1993-2005 Microsoft Corporation. All rights reserved.</p>
      </div>
        
      <div  style="position:absolute; visibility:hidden;"  id="mapnorth">
            <img src="images/maps/morocco_north.gif" width="424" height="481" id="morocco_north" usemap="#m_morocco_north" alt="" style="display:block; margin-left:auto; margin-right:auto;z-index:01" />
            <p class="ftrlink" style="text-decoration:none; clear:both" >
            Microsoft &reg; Encarta &reg; 2006. &copy; 1993-2005 Microsoft Corporation. All rights reserved.</p>
      </div>

        <div id="dirnorth">DIRNORTH content goes here</div>
        <div id="optnorth">OPTNORTH content goes here</div>

</body>
</html>
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
redpoppyAuthor Commented:
Hi Rouchie,

I've now managed to put your code into my routines with a couple of changes and it works fine in all 3 browsers - thanks for all your efforts, much appreciated.

I don't know how I should allocate the points - you've given me the solution but Jason put me on the right track initially. Is this a situation where I split the points, say 200 to you and 50 to Jason? I want to be fair about it all, but I haven't come across this situation before.
0
RouchieCommented:
redpoppy,
Glad it worked for you.  Just split the points down the middle, 125 each.  I'm happy with that if Jason is?
...besides, eventually it will be nice to see a change of names at the top of that OVERALL list .... ;-)
0
redpoppyAuthor Commented:
I've taken your suggestion Rouchie, hope that's OK with you Jason- thanks again for all your help, much appreciated.
0
Jason C. LevineNo oneCommented:
Whoops, late back to the party...sorry guys.

Any split is fine.  Rouchie deserves more points for this because his solution is clearly better, but I won't argue with a 50/50 :)

I'll try to displace some people up there before I have to semi-retire...
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
Adobe Dreamweaver

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.