Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Jump Menu show/hide layers

Posted on 2006-03-22
16
Medium Priority
?
5,831 Views
Last Modified: 2008-01-09
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?
0
Comment
Question by:redpoppy
  • 7
  • 6
  • 3
16 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16260299
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
 

Author Comment

by:redpoppy
ID: 16272125
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
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16272272
Post all the code please
0
Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

 

Author Comment

by:redpoppy
ID: 16274183
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
 
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 500 total points
ID: 16274389
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
 

Author Comment

by:redpoppy
ID: 16275049
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
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16275222
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
 

Author Comment

by:redpoppy
ID: 16275461
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
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16275504
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
 
LVL 25

Expert Comment

by:Rouchie
ID: 16278916
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
 

Author Comment

by:redpoppy
ID: 16279639
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
 
LVL 25

Accepted Solution

by:
Rouchie earned 500 total points
ID: 16280150
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
 

Author Comment

by:redpoppy
ID: 16289578
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
 
LVL 25

Expert Comment

by:Rouchie
ID: 16298295
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
 

Author Comment

by:redpoppy
ID: 16302543
I've taken your suggestion Rouchie, hope that's OK with you Jason- thanks again for all your help, much appreciated.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16302601
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

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
Exchange organizations may use the Journaling Agent of the Transport Service to archive messages going through Exchange. However, if the Transport Service is integrated with some email content management application (such as an anti-spam), the admin…
The Relationships Diagram is a good way to get an overall view of what a database is keeping track of. It is also where relationships are defined. A relationship specifies how two tables connect to each other. As you build tables in Microsoft Ac…
Suggested Courses
Course of the Month14 days, 5 hours left to enroll

581 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