Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Selecting areas on grid

    I want to build a grid to select parts, and submit the selected results to the server via POST/jQuery.

    I want to be able to click each mini block individually, or click the yellow circle and it selects all 16 mini blocks around it, or click a blue circle and it selects the 4 mini blocks around it.

    Any ideas on how to go about building this? The first thing to mind is checkboxes and just using jQuery/classes to select boxes within a particular div. I really don't want to use checkboxes, but it seems the simplest.
    Attached Thumbnails Attached Thumbnails Selecting areas on grid-grid2.jpg  

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,696
    Thanks
    25
    Thanked 658 Times in 657 Posts
    You can use the html <map> tag. You can use javascript to give you mouse location when clicked. You can use <div>s and onclick js.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    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[*/
    
    .grid {
      position:absolute;left:100px;top:100px;width:212px;height:212px;border:solid red 1px;
    }
    
    .gridbox {
      position:relative;left:0px;top:0px;width:104px;height:104px;border:solid red 1px;float:left;
    }
    
    .box {
      position:relative;left:0px;top:0px;width:50px;height:50px;border:solid red 1px;float:left;border-Left-Width:1px;border-Top-Width:1px;background-Color:#FFFFCC;
    }
    
    .boxactive {
      background-Color:#FFCC66;
    }
    
    .center {
      position:absolute;left:48px;top:48px;width:10px;height:10px;background-Color:blue;
    }
    
    /*]]>*/
    </style>
    </head>
    <body>
     <div id="grid" class="grid" >
      <div class="gridbox" >
       <div class="box" ></div>
       <div class="box" ></div>
       <div class="box" ></div>
       <div class="box" ></div>
      </div>
      <div class="gridbox" >
       <div class="box" ></div>
       <div class="box" ></div>
       <div class="box" ></div>
       <div class="box" ></div>
      </div>
      <div class="gridbox" >
       <div class="box" ></div>
       <div class="box" ></div>
       <div class="box" ></div>
       <div class="box" ></div>
      </div>
      <div class="gridbox" >
       <div class="box" ></div>
       <div class="box" ></div>
       <div class="box" ></div>
       <div class="box" ></div>
      </div>
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcGrid={
    
     init:function(o){
      var id=o.GridID,ccls=o.CenterClass,obj=document.getElementById(id),clds=obj.childNodes,ary=[],c,cnt=0,bcnt,bclds,cls,z0=0,z0a;
      for (;z0<clds.length;z0++){
       if (clds[z0].nodeType==1){
        ary[cnt]=[];
        bclds=clds[z0].childNodes;
        for (z0a=0;z0a<4;z0a++){
         if (bclds[z0]&&bclds[z0].nodeType==1){
          cls=bclds[z0].className;
          ary[cnt].push([bclds[z0a],cls+' '+o.SelectedClass]);
          this.addevt(bclds[z0a],'mouseup','SelectBox',id,cnt);
         }
        }
        c=document.createElement('DIV');
        c.className=o.CenterClass;
        this.addevt(c,'mouseup','SelectAll',id);
        clds[z0].appendChild(c);
        cnt++;
       }
      }
      this['zxc'+id]={
       ary:ary,
       rtn:o.Results
      }
     },
    
     SelectAll:function(id){
      var o=this['zxc'+id];
      if (o){
       for (var z0=0,z0a;z0<o.ary.length;z0++){
        for (z0a=0;z0a<o.ary[z0].length;z0a++){
         o.ary[z0][z0a][0].className=o.ary[z0][z0a][1];
        }
       }
       if (typeof(o.rtn)=='function'){
        o.rtn();
       }
      }
     },
    
     SelectBox:function(id,nu){
      var o=this['zxc'+id];
      if (o&&o.ary[nu]){
       for (var z0=0;z0<o.ary[nu].length;z0++){
        o.ary[nu][z0][0].className=o.ary[nu][z0][1];
       }
       if (typeof(o.rtn)=='function'){
        o.rtn();
       }
      }
     },
    
     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); });
     }
    
    
    }
    
    zxcGrid.init({
     GridID:'grid',
     CenterClass:'center',
     SelectedClass:'boxactive',
     Results:function(){
       for (var o=this,rtn='',z0=0,z0a;z0<o.ary.length;z0++){
        for (z0a=0;z0a<o.ary[z0].length;z0a++){
         if (o.ary[z0][z0a][0].className==o.ary[z0][z0a][1]){
          rtn+=z0+':'+z0a+'#';
         }
        }
       }
       alert(rtn);
     }
    });
    /*]]>*/
    </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/


  •  

    Posting Permissions

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