www.webdeveloper.com
Results 1 to 15 of 16

Thread: Open & Close Div Layers - Big list

Hybrid View

  1. #1
    Join Date
    Oct 2011
    Posts
    42

    Open & Close Div Layers - Big list

    Hi there,
    I need to create a page that has a list of all 50 states, and when clicked on each state, a div layer opens up to show information about that state.
    I am new to web development, and am running to problems with getting this to work.

    I played around with the code listed here: http://www.brenz.net/snippets/open_close_div.asp
    Which worked perfectly, but I can't seem to change the code around, so when the state is open, the text changes to "close" and when I click "close" it reverts back to the state.
    Any help would be great. Any suggestions on a better way to do this is welcomed as well.
    I also thought about putting a little arrow icon next to each state to show an open/close state? But not sure how this would work when I'm dealing with a huge list like I am.

    Thanks again,
    Elliott

  2. #2
    Join Date
    Nov 2010
    Posts
    1,084
    maybe you can post your code - or a sample of it if there is lots of repetition. Your list is going to be insanely long - have you considered a drop down list that will show a div with the correct info when clicked on?

  3. #3
    Join Date
    Oct 2011
    Posts
    42
    Xelawho, great idea about the drop down list. How would that look coded? Would it be easier than what I have suggested above?
    Here is my code for what I was talking about (well part of it). As you can see it's not exactly what I wanted it to be.

    Code:
    <style type="text/css">
    .state {
    	text-align:left;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    .list {
    	display:none;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    </style>
    <script>
    function listOpen(listID) {
    document.getElementById('list_' + listID).style.display = "block";
    document.getElementById('state_' + listID).innerHTML="<a href=\"javascript:listClose('" + listID + "');\">Close " + listID + "...</a>";
    }
    function listClose(listID) {
    document.getElementById('list_' + listID).style.display = "none";
    document.getElementById('state_' + listID).innerHTML="<a href=\"javascript:listOpen('" + listID + "');\">Open " + listID + "...</a>";
    }
    </script>
    <div id="state_1" class="state"><a href="javascript:listOpen('1');">Alabama</a></div>
    <div id="list_1" class="list"><a href="http://www.amazon.com" target="_blank">Food Services</a><br \><br \></div>
    <div id="state_2" class="state"><a href="javascript:listOpen('2');">Arizona</a></div>
    <div id="list_2" class="list"><a href="http://www.amazon.com" target="_blank">Food Services</a><br \><a href="http://www.amazon.com" target="_blank">Restroom Services</a><br \><br \>
    <br \></div>
    Also to note, I don't want the numbers/IDs in the text. See how the IDs are showing?? Is there anyway around this?

    Thanks again.

  4. #4
    Join Date
    Nov 2010
    Posts
    1,084
    this would be one way to do it...

    Code:
    <html>
    <head>
    <style type="text/css">
    .state {
    	text-align:left;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	display:none;
    }
    .list {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    </style>
    </head>
    <body>
    <select onchange="showState(this.value)">
    <option value="0">Please select a state</option>
    <option value="1">Alabama</option>
    <option value="2">Arizona</option>
    </select>
    <div id="state_1" class="state">Alabama
    <div id="list_1" class="list"><a href="http://www.amazon.com" target="_blank">Food Services</a><br \><br \></div>
    </div>
    <div id="state_2" class="state">Arizona
    <div id="list_2" class="list"><a href="http://www.amazon.com" target="_blank">Food Services</a><br \><a href="http://www.amazon.com" target="_blank">Restroom Services</a><br \><br \>
    <br \></div>
    <script>
    var shown;
    function showState(num) {
    if (shown){document.getElementById("state_"+shown).style.display="none";
    if(num==0){return; }
    }
    document.getElementById("state_"+num).style.display="block";
    shown=num;
    }
    </script>
    </body>
    </html>

  5. #5
    Join Date
    Mar 2011
    Location
    Rome, Italy
    Posts
    101
    Take a look here:

    http://highslide.com/

    could be an interesting alternative solution for you. Highslide JS works both with images and HTML content, giving a pleasing zooming effect to page layers.

  6. #6
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,682
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .content {
      width:200px;height:200px;background-Color:#FFFFCC;
    }
    
    .title {
      width:200px;height:20px;background-Color:#FFCC66;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
     <div id="tst" >
    
      <div class="content" >
       <div class="title" ><a rel="close" >open</a></div>
      </div>
    
      <div class="content" >
       <div class="title" ><a rel="close" >open</a></div>
      </div>
    
      <div class="content" >
       <div class="title" ><a rel="close" >open</a></div>
      </div>
    
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Simple Accordian (21-September-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcAccordian={
    
     init:function(o){
      var id=o.ID,h=o.OpenHeight,ms=o.SlideDuration,obj=document.getElementById(id),clds=obj.childNodes,t,lk,h=typeof(h)=='number'?h:false,uh,ary=[],z0=0;
      for (;z0<clds.length;z0++){
       if (clds[z0].nodeType==1){
        t=clds[z0].getElementsByTagName('DIV')[0];
        if (t){
         lk=t.getElementsByTagName('A')[0];
         if (lk){
          this.addevt(lk,'mouseup','open',id,ary.length);
          t=t.offsetHeight;
          uh=h&&h>t?h:clds[z0].offsetHeight;
          ary.push([clds[z0],t,t,uh,'dly'+z0,true,uh-t,lk,lk.rel,lk.innerHTML]);
          clds[z0].style.height=t+'px';
         }
        }
       }
      }
      this['zxc'+id]={
       ary:ary,
       ms:typeof(ms)=='number'&&ms>=0?ms:1000,
       lst:-1
      }
     },
    
     open:function(id,nu){
      var o=this['zxc'+id],f,t,a;
      if (o){
       a=o.ary[o.lst];
       if (a&&o.lst!=nu){
        a[7].innerHTML=a[9];
        clearTimeout(o[a[4]]);
        f=a[1];
        t=a[2]
        this.animate(o,a,f,t,new Date(),o.ms*Math.abs((t-f)/a[6])+10);
        a[5]=true;
       }
       a=o.ary[nu];
       a[7].innerHTML=a[a[5]?8:9];
       clearTimeout(o[a[4]]);
       f=a[1];
       t=a[a[5]?3:2]
       this.animate(o,a,f,t,new Date(),o.ms*Math.abs((t-f)/a[6])+10);
       a[5]=!a[5];
       o.lst=nu;
      }
     },
    
     animate:function(o,ary,f,t,srt,mS){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       ary[1]=Math.max(now,f<0||t<0?now:0);
       ary[0].style.height=ary[1]+'px';
      }
      if (ms<mS){
       o[ary[4]]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS); },10);
      }
      else {
       ary[1]=t;
       ary[0].style.height=t+'px';
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
      }
     }
    
    }
    
    zxcAccordian.init({
     ID:'tst',           // the unique ID name of the parent DIV.                  (string)
     SlideDuration:500,  //(optional) the slide duration in milli seconds.         (number, default = 1000)
     OpenHeight:100      //(optional) force the 'open' height of the content DIVs. (number, default = the offset height of the content DIV)
    });
    
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. #7
    Join Date
    Oct 2011
    Posts
    42
    Thanks guys so much for your help! This is great.

  8. #8
    Join Date
    Oct 2011
    Posts
    42

    Drop down list to long

    Hi guys,

    I actually ended up using the drop down list coding that Xelawho provided.
    This works great, but my list is so long (it contains a list of all 50 states), that when using a smaller monitor the drop down list points up vs. down.
    Is there a way I can make this drop down list a fixed height so this doesn't happen? And still make it scrollable?

    Thanks so much.

    This is the code that Xelawho provided to me to use:

    Code:
    <html>
    <head>
    <style type="text/css">
    .state {
    	text-align:left;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	display:none;
    }
    .list {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    </style>
    </head>
    <body>
    <select onchange="showState(this.value)">
    <option value="0">Please select a state</option>
    <option value="1">Alabama</option>
    <option value="2">Arizona</option>
    </select>
    <div id="state_1" class="state">Alabama
    <div id="list_1" class="list"><a href="http://www.amazon.com" target="_blank">Food Services</a><br \><br \></div>
    </div>
    <div id="state_2" class="state">Arizona
    <div id="list_2" class="list"><a href="http://www.amazon.com" target="_blank">Food Services</a><br \><a href="http://www.amazon.com" target="_blank">Restroom Services</a><br \><br \>
    <br \></div>
    <script>
    var shown;
    function showState(num) {
    if (shown){document.getElementById("state_"+shown).style.display="none";
    if(num==0){return; }
    }
    document.getElementById("state_"+num).style.display="block";
    shown=num;
    }
    </script>
    </body>
    </html>

  9. #9
    Join Date
    Nov 2010
    Posts
    1,084
    you could use a select multiple, although you may want to disable the default click+ctrl which selects multiple options...

    Code:
    <select multiple onclick="showState(this.value)">
    <option value="0">Please select a state</option>
    <option value="1">Alabama</option>
    <option value="2">Arizona</option>
    <option value="2">Brazil</option>
    <option value="2">Canada</option>
    <option value="2">Devon</option>
    <option value="2">Ethiopia</option>
    <option value="2">France</option>
    </select>
    (and apologies that my US geography may not be up to scratch)
    Last edited by xelawho; 10-11-2012 at 03:24 PM.

  10. #10
    Join Date
    Oct 2011
    Posts
    42
    Thanks Xelawho,
    I actually tried that method already but my manager doesn't like the look.
    Is there a way when the user clicks "Select a state" that the drop down box is fixed at a certain height (or number of states), and then he/she is able to use the scroll bar to view the rest? I have been looking around online, and some people have stated that this isn't possible?

  11. #11
    Join Date
    Nov 2010
    Posts
    1,084
    not that I can think of. You could always build your own - when you think about it, all a select is is a div that you click on which makes another box appear that holds a whole lot of other divs (the options) and when you click on one of those, the option text fills the holder div. Getting keyboard functionality (which is important with form elements) would be a little bit boring. I bet someone has done it already in jQuery, if you're up for a google.

  12. #12
    Join Date
    Oct 2011
    Posts
    42
    Ok, thanks for your help Xelawho!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles