www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: Open & Close Div Layers - Big list

  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,036
    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,036
    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
    98
    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,667
    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
    Nov 2010
    Posts
    1,036
    just prettying up Vic's very nice code a little...

    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;
      margin-bottom:2px;
      border:solid 1px;
    }
    
    .title {
      width:200px;
      height:20px;
      background-Color:#FFCC66;
    }
    
    .arr{
      background:url(http://www.iconlet.com/icons/kensaunders/5/2/arrow%20down.png);
      background-size:20px 20px;
      background-repeat:no-repeat;
      background-position:175px 0px;
      cursor:pointer;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    
     <div id="tst" >
    
      <div class="content">
       <div class="title"><div class="arr">Alabama</div></div>
      </div>
    
      <div class="content" >
       <div class="title" ><div class="arr">Alaska</div></div>
      </div>
    
      <div class="content" >
       <div class="title" ><div class="arr">Arizona</div></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('DIV')[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.style.backgroundImage]);
          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].style.backgroundImage="url(http://www.iconlet.com/icons/kensaunders/5/2/arrow%20down.png)"
        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].style.backgroundImage=a[5]?"url(http://www.iconlet.com/icons/kensaunders/5/2/arrow%20up.png)":"url(http://www.iconlet.com/icons/kensaunders/5/2/arrow%20down.png)";
       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>

  8. #8
    Join Date
    Oct 2011
    Posts
    42
    Thanks so much Vic and Xelawho!
    I definitely will be using the drop down feature as an option for this page.
    As far as the list version that Vic sent - this is awesome and works beautifully, but is there a simplier method to getting this to work? I know this might sound crazy, I just don't like to use code that I don't understand or seems far to complex (for me). Just because if I want to update it/change things around I wouldnt know how to begin here.

    What I'm looking for is a straight list with each item on the list as a link, and when clicked on the link it opens up a div with details of that item.
    And within that div there is a hide link, when you click on it collapses the div. And the page should allow you to open up all the div's at once if you wanted too.

    Thanks again!

  9. #9
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,667
    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>
    <input type="button" name="" value="Open All" onmouseup="zxcAccordian.All('tst',true);"/>
    <input type="button" name="" value="Close All" onmouseup="zxcAccordian.All('tst',false);"/>
     <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
      }
     },
    
     Open:function(id,nu){
      var o=this['zxc'+id],f,t,a;
      if (o){
       this.All(id,nu);
       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];
      }
     },
    
    
     All:function(id,nu){
      var o=this['zxc'+id],f,t,a,z0=0;
      if (o){
       for (;z0<o.ary.length;z0++){
        if (z0!=nu||typeof(nu)=='boolean'){
         a=o.ary[z0];
         clearTimeout(o[a[4]]);
         f=a[1];
         t=a[nu===true?3:2]
         this.animate(o,a,f,t,new Date(),o.ms*Math.abs((t-f)/a[6])+10);
         a[7].innerHTML=a[nu===true?8:9];
         a[5]=nu!==true;
        }
       }
      }
     },
    
     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)
    // OpenHeight:100,     //(optional) force the 'open' height of the content DIVs. (number, default = the offset height of the content DIV)
     SlideDuration:500   //(optional) the slide duration in milli seconds.         (number, default = 1000)
    });
    
    /*]]>*/
    </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/

  10. #10
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,667
    or

    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">
    .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 getLists() {
     var ds=document.getElementsByTagName('DIV'),cls,ary=[],ary1=[],a,z0=0,z1=0;
     for (var z0=0;z0<ds.length;z0++){
      cls=ds[z0].className;
      a=ds[z0].getElementsByTagName('A')[0];
      if (cls){
       if ((' '+cls+' ').match(' state ')&&a){
        ary.push([a,a.innerHTML,a.rel]);
       }
       if ((' '+cls+' ').match(' list ')){
        ary1.push(ds[z0]);
       }
      }
     }
     getLists.ary=[];
     for (;z1<ary.length;z1++){
      if (ary1[z1]){
       ary[z1][0].onclick=function(){ Open(this); return false; }
       ary[z1].push(ary1[z1]);
       getLists.ary.push(ary[z1])
      }
     }
     return getLists.ary;
    }
    
    function Open(obj) {
     var ary=getLists.ary,z0=0;
     for (;z0<ary.length;z0++){
      ary[z0][3].style.display=obj==ary[z0][0]||obj===true?'block':'none'
      ary[z0][0].innerHTML=ary[z0][(obj==ary[z0][0]||obj===true)&&ary[z0][2]?2:1];
     }
    
    }
    </script>
    </head>
    
    <body onload="getLists();" >
    
    <input type="button" name="" value="Open All" onmouseup="Open(true);"/>
    <input type="button" name="" value="Close All" onmouseup="Open(false);"/>
    
    <div  class="state"><a href="#" rel="Close" >Alabama</a></div>
    <div  class="list"><a href="http://www.amazon.com" target="_blank">Food Services</a><br \><br \></div>
    <div  class="state"><a href="#" rel="Close" >Arizona</a></div>
    <div  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>
    
    </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/

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

  12. #12
    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>

  13. #13
    Join Date
    Nov 2010
    Posts
    1,036
    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.

  14. #14
    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?

  15. #15
    Join Date
    Nov 2010
    Posts
    1,036
    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.

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