SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2005
    Location
    Place d'Italie
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Help with the expand/collapse in a treeview.

    Hi, guys, I have encountered a problem to better my treeview.

    This treeview works. But I want to achieve that when one menu is expanded the others will collapse automaticly. Donn't know how, please help.

    The original code:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>A Simple Menu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <script language="javascript">
    //Function for expand/collapse of the treeview
    function expcolps(subobj, thisobj){
      var subobj= document.getElementById(subobj).style
      var thisobj = document.getElementById(thisobj)
      if(subobj.display=="none"){
        subobj.display="";
    	thisobj.style.backgroundImage="url(expanded.gif)"
      }else {
        subobj.display="none";
    	thisobj.style.backgroundImage="url(collapsed.gif)"
      }
    }
    
    //Function for expand/collapse the #left
    function expbar(){
      var tgobj= document.getElementById("left").style
      var thisobj = document.getElementById("expbar")
      if(tgobj.display=="none"){
        tgobj.display=""; 
        thisobj.style.backgroundImage="url(collapse0.gif)"  
      }else{
        tgobj.display="none"; 
        thisobj.style.backgroundImage="url(expand0.gif)"  
      }
    }
    //Function to change the #expbar backImg when mouseover 
    function msover(){
      var backimg= document.getElementById("expbar").style.backgroundImage
      var pos=backimg.indexOf("collapse")
      if(pos>=0){
        document.getElementById("expbar").style.backgroundImage = "url(collapse1.gif)"
      }else{
        document.getElementById("expbar").style.backgroundImage ="url(expand1.gif)"
      }
    }
    //Function to change the #expbar backImg when mouseout
    function msout(){
      var backimg= document.getElementById("expbar").style.backgroundImage
      var pos=backimg.indexOf("collapse")
      if(pos>=0){
        document.getElementById("expbar").style.backgroundImage ="url(collapse0.gif)"
      }else{
        document.getElementById("expbar").style.backgroundImage ="url(expand0.gif)"
      }
    }
    </script>
    <style type="text/css">
    <!--
    #left {
        width:195px;
    	height:496px; 
        padding:0 0 0 5px;
        background-color:#eeeeee; 
    	border:2px ridge #cccccc;
    	float:left;
    }
    a {text-decoration:none; font-size:80%; color:#333333;}
    a:hover {color:#0066ff}
    .holder {margin:0 0 0 15px;}
    .menutle {
    	margin:0;
    	padding:5px 0 0 5px;
    	font-size:80%;
    	font-weight:600;
    	background-image:url(expanded.gif);
    	background-position:left;
    	background-repeat:no-repeat;
    	cursor:hand;
    }
    .menu {
        margin:0;
    	padding:0;
    	list-style-type:none;
    }
    .file, .lastfile{
    	margin:0 0 0 5px;
    	text-indent:30px;
    	background-image:url(file.gif);
    	background-position:left top;
    	background-repeat:no-repeat;
    	display:block;
    	text-decoration:none;
    }
    .lastfile {background-image:url(lastfile.gif);}
    #expbar {
    	width:9px;
    	height:500px;
    	float:left;
    	background-image:url(collapse0.gif);
    	background-repeat:no-repeat;
     	background-position: center;
    	background-color:#556a7c;
    }
    #right {
        height:496px; 
    	width:auto; 
    	border:2px ridge #cccccc; 
    }
    -->
    </style>
    <base target="browserframe"/>
    </head>
    
    <body style="width:770px;">
    <div id="left">
      <br />     
      <p class="menutle" id="title01" onmouseup="expcolps('holder','title01')">&nbsp;&nbsp;&nbsp;Produits Céréales</p>
      <div class="holder" id="holder">
        <div class="menuholder">
          <p class="menutle" id="title11" onmouseup="expcolps('menu11','title11')">&nbsp;&nbsp;&nbsp;Nouilles et P&acirc;tes</p>
          <ul class="menu" id="menu11">
            <li class="file"><a href="#">Farines et P&acirc;tes</a></li>
            <li class="file"><a href="#">Nouilles</a></li>
            <li class="file"><a href="#">Vermicelle du riz</a></li>
    		<li class="file"><a href="#">Ravioli et Pain</a></li>
            <li class="lastfile" style="line-height:14px "><a href="#">Beignet en torsade<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Youtiao)</a></li>
          </ul>
        </div>
        <div class="menuholder">
          <p class="menutle" id="title12" onmouseup="expcolps('menu12','title12')">&nbsp;&nbsp;&nbsp;Produits de Soja</p>
    	  <ul class="menu" id="menu12">
            <li class="file"><a href="#">Tofu</a></li>
    		<li class="file"><a href="#">Variantes de Tofu</a></li>
    		<li class="file"><a href="#">Lait de soja</a></li>
            <li class="lastfile"><a href="#">P&acirc;te de soja</a></li>
          </ul>
        </div>
      </div><!--end of #blueidea-->
        
      <p class="menutle" id="title02" onmouseup="expcolps('menu02','title02')">&nbsp;&nbsp;&nbsp;Légumes et Fruits</p>
      <ul class="menu" id="menu02">
        <li class="file"><a href="#">Légumes frais</a></li>   
    	<li class="file"><a href="#">Champignons</a></li>
    	<li class="file"><a href="#">Fruits tropicaux</a></li>
    	<li class="file"><a href="#">Légumes en conserve</a></li>
    	<li class="file"><a href="#">Algues séchées</a></li>
        <li class="lastfile"><a href="#">Herbes culinaires</a></li>
      </ul>
      
      <p class="menutle" id="title03" onmouseup="expcolps('menu03','title03')">&nbsp;&nbsp;&nbsp;Viande, Volaille, Poisson</p>
      <ul class="menu" id="menu03">
        <li class="file"><a href="#">Produits Oeufs</a></li>   
    	<li class="file"><a href="#">Produits de Porc</a></li>
    	<li class="file"><a href="#">Produits de la Mer</a></li>
      </ul>
    </div><!--end of #left-->
    
    <div id="expbar" onclick="expbar()" onMouseOver="msover()" onMouseOut="msout()" style="background-image:url(collapse0.gif)"></div>
    
    <div id="right">
        <iframe name="browserframe" id="browserframe" width="100%" height="100%" scrolling="auto" frameborder="0"></iframe>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Enthusiast Gridlight's Avatar
    Join Date
    Apr 2005
    Location
    Oxford, UK
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One way would be to have an array that lists all of the elements (submenus) you want to hide, and loop through it, changeing them all to display: none before turning the required elemtent back on, for example:

    Code:
    var subMenus = new Array('sub1', 'sub2', 'sub3'...etc...);
    
    /*Hide all submenus*/
    for (i=0; i<=subMenus.length; i++)
    {
       document.getElementById(subMenus[i]).style.display = "none";
    }
    
    /*--- insert the code to turn on the element here ---*/
    Cheers,
    Gridlight

    BrowserCam for £30?! I'm in, are you?

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2005
    Location
    Place d'Italie
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Gridlight
    One way would be to have an array that lists all of the elements (submenus) you want to hide, and loop through it, changeing them all to display:none before turning the required elemtent back on
    That will make inoperative the conditional statement of
    Code:
    if(subobj.display=="none"){
        subobj.display="";
        thisobj.style.backgroundImage="url(expanded.gif)"
      }else {
        subobj.display="none";
        thisobj.style.backgroundImage="url(collapsed.gif)"
      }
    ??????

  4. #4
    SitePoint Enthusiast Gridlight's Avatar
    Join Date
    Apr 2005
    Location
    Oxford, UK
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Then use the if(subobj.display=="none") to set a 'showThis' variable:

    Code:
    var showThis = "";
    var img = "";
    if(subobj.display=="none")
    {
       showThis = "block";
       img = "expanded.gif";
    }
    else
    {
       showThis = "none";
       img = "collapsed.gif";
    }
    
    for (i=0; i<=subMenus.length; i++)
    {
       document.getElementById(subMenus[i]).style.display = "none";
    }
    
    subobj.display=showThis;
    thisobj.style.backgroundImage="url("+img+")";
    Any help?
    Cheers,
    Gridlight

    BrowserCam for £30?! I'm in, are you?

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2005
    Location
    Place d'Italie
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems logic

    But I still fail to make it functional.
    The modified codes:
    Code:
    function expcolps(subobj, thisobj){//Function for expand/collapse of the treeview
      var showThis = ""
      var img = ""
      var subobj= document.getElementById(subobj).style
      var thisobj = document.getElementById(thisobj)
      if(subobj.display=="none"){
        showThis="";
        img="expanded.gif";
      }else {
        showThis="none";
        img="collapsed.gif";
      }
      var subMenus = new Array('menu01', 'menu02', 'menu03');/*Hide all submenus*/
      for (i=0; i<=subMenus.length; i++){
       document.getElementById(subMenus[i]).style.display = "none";
      }
      subobj.display=showThis;
      thisobj.style.backgroundImage="url("+img+")";
    }

  6. #6
    SitePoint Enthusiast Gridlight's Avatar
    Join Date
    Apr 2005
    Location
    Oxford, UK
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're missing some ;

    Code:
    function expcolps(subobj, thisobj){//Function for expand/collapse of the treeview
      var showThis = "";
      var img = "";
      var subobj= document.getElementById(subobj).style;
      var thisobj = document.getElementById(thisobj);
      if(subobj.display=="none"){
        showThis="";
        img="expanded.gif";
      }else {
        showThis="none";
        img="collapsed.gif";
      }
      var subMenus = new Array('menu01', 'menu02', 'menu03');/*Hide all submenus*/
      for (i=0; i<=subMenus.length; i++){
       document.getElementById(subMenus[i]).style.display = "none";
      }
      subobj.display=showThis;
      thisobj.style.backgroundImage="url("+img+")";
    }
    What browser are you testing this on? If it's firefox, look at the Javascript debugger, and, if it still doesn't work, find out waht the errors are, and what line(s) they relate too. (you can see js errors in IE too, but it's not very accurate...)
    Cheers,
    Gridlight

    BrowserCam for £30?! I'm in, are you?

  7. #7
    SitePoint Zealot
    Join Date
    Mar 2005
    Location
    Place d'Italie
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Gridlight
    You're missing some ;
    The ; is only necessary when there are several statements in one line.

  8. #8
    SitePoint Enthusiast Gridlight's Avatar
    Join Date
    Apr 2005
    Location
    Oxford, UK
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know, but I swear I've had errors occur on occasion where they're not used.
    I can't see anything else immediately wrong with the script. What errors are occuring? Do you have the page online so I can take a look?
    Cheers,
    Gridlight

    BrowserCam for £30?! I'm in, are you?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •