jQgrid Heighlight Column while Resize

gistfile1.txt

Index: themes/blue/jquery-ui-1.8.2.custom.css
===================================================================
--- themes/blue/jquery-ui-1.8.2.custom.css	(revision 69684)
+++ themes/blue/jquery-ui-1.8.2.custom.css	(working copy)
@@ -615,7 +615,7 @@
 #tabContainer .ui-jqgrid-hbox{ padding-right:0 !important;}
 #tabContainer .ui-jqgrid-hbox table, #tabContainer .ui-jqgrid-bdiv table{ width:100% !important;}
 #tabContainer .loading{ width:60px !important;}
-#tabContainer .ui-jqgrid .ui-jqgrid-resize-mark{ width:1px !important;}
+#tabContainer .ui-jqgrid .ui-jqgrid-resize-mark{ /*width:6px;*/}
 
 #gview_gv_account .ui-state-default, #gview_gv_account .ui-widget-header, #gview_gv_campaign .ui-state-default, #gview_gv_campaign .ui-widget-header, #gview_gv_adgroup .ui-state-default, #gview_gv_adgroup .ui-widget-header, #gview_gv_keyword .ui-state-default, #gview_gv_keyword .ui-widget-header, #gview_gv_placement .ui-state-default, #gview_gv_placement .ui-widget-header{ background:none !important;}
 
Index: themes/blue/ui.jqgrid.css
===================================================================
--- themes/blue/ui.jqgrid.css	(revision 69684)
+++ themes/blue/ui.jqgrid.css	(working copy)
@@ -39,7 +39,7 @@
 .ui-jqgrid tr.ui-row-ltr td {text-align:left;border-top: 1px solid #E6E6E8;}
 .ui-jqgrid tr.ui-row-rtl td {text-align:right;border-left-width: 1px; border-left-color: inherit; border-left-style: solid;}
 .ui-jqgrid td.jqgrid-rownum { padding: 0 2px 0 2px; margin: 0px; border: 0px none;}
-.ui-jqgrid .ui-jqgrid-resize-mark { width:1px;right:0; background-color:#B5B5BD; cursor: e-resize; cursor: col-resize; position:absolute; top:0; height:100px; overflow:hidden; display:none;	border:0 none; z-index:2;}
+.ui-jqgrid .ui-jqgrid-resize-mark { width:1px;background-color:#EEEEEE; opacity:0.5;cursor: e-resize; cursor: col-resize; position:absolute; top:0; left:0; height:100px; overflow:hidden; display:none;	border:0 none; z-index:2; border:2px solid #B5B5BD; }
 #gbox_dataGridTable Div.ui-jqgrid-resize-mark{ width:1px !important;}
 
 /* footer */
Index: widgets/jQGrid/grid/js/jquery.jqGrid.src.js
===================================================================
--- widgets/jQGrid/grid/js/jquery.jqGrid.src.js	(revision 69684)
+++ widgets/jQGrid/grid/js/jquery.jqGrid.src.js	(working copy)
@@ -700,7 +700,19 @@
                     this.resizing = { idx: i, startX: x.clientX, sOL: y[0] };
                     this.hDiv.style.cursor = "col-resize";
                     this.curGbox = $("#rs_m" + $.jgrid.jqID(p.id), "#gbox_" + $.jgrid.jqID(p.id));
-                    this.curGbox.css({ display: "block", left: y[0], top: y[1], height: y[2] });
+                    this.curGbox.css({ display: "block", left: y[0], top: y[1], height: y[2]-4 });
+					var idx = this.resizing.idx,
+					nw = this.headers[idx].newWidth || this.headers[idx].width;
+					var diff = x.clientX - this.resizing.startX;
+					if ($.browser.webkit) {
+					this.curGbox.css({ left: this.resizing.sOL + diff -  parseInt(nw, 10)  });
+					this.curGbox.css({ width: nw - 4  });
+					}else{
+					this.curGbox.css({ left: this.resizing.sOL + diff -  parseInt(nw, 10) - 5 });
+					this.curGbox.css({ width: nw  });
+					}
+					
+					
                     if ($.isFunction(p.resizeStart)) { p.resizeStart.call(this, x, i); }
                     document.onselectstart = function() { return false; };
                 },
@@ -709,12 +721,22 @@
                         var diff = x.clientX - this.resizing.startX,
 					h = this.headers[this.resizing.idx],
 					newWidth = p.direction === "ltr" ? h.width + diff : h.width - diff, hn, nWn;
-                        if (newWidth > 33) {
-                            this.curGbox.css({ left: this.resizing.sOL + diff });
-                            if (p.forceFit === true) {
+                        if (newWidth > 20) {
+                            
+							var idx = this.resizing.idx,
+							nw = this.headers[idx].newWidth || this.headers[idx].width;
+							//nw = parseInt(nw, 10);
+							//this.curGbox.css({ left: this.resizing.sOL + diff -  parseInt(nw, 10) - 5 });
+							if ($.browser.webkit) {
+							this.curGbox.css({ width: nw - 4   });
+							}else{
+							this.curGbox.css({ width: nw  });
+							}
+							
+							if (p.forceFit === true) {
                                 hn = this.headers[this.resizing.idx + p.nv];
                                 nWn = p.direction === "ltr" ? hn.width - diff : hn.width + diff;
-                                if (nWn > 33) {
+                                if (nWn > 20) {
                                     h.newWidth = newWidth;
                                     hn.newWidth = nWn;
                                 }
@@ -732,7 +754,8 @@
 					nw = this.headers[idx].newWidth || this.headers[idx].width;
                         nw = parseInt(nw, 10);
                         this.resizing = false;
-                        $("#rs_m" + $.jgrid.jqID(p.id)).css("display", "none");
+                        this.curGbox.css({ width: 0  });
+						$("#rs_m" + $.jgrid.jqID(p.id)).css("display", "none");
                         p.colModel[idx].width = nw;
                         this.headers[idx].width = nw;
                         this.headers[idx].el.style.width = nw + "px";
@@ -2395,13 +2418,24 @@
                     if (hg) { ts.p.datatype = "local"; $(".ui-jqgrid-titlebar-close", grid.cDiv).trigger("click"); }
                 }
             } else { $(grid.cDiv).hide(); }
-            $(grid.hDiv).after(grid.bDiv)
-		.mousemove(function(e) {
-		    if (grid.resizing) { grid.dragMove(e); return false; }
-		});
+            $(grid.hDiv).after(grid.bDiv).mousemove(function(e) {
+		    	if (grid.resizing) { 
+					grid.dragMove(e); return false; 
+				}
+			});
+		
+			$(".ui-jqgrid-resize-mark").mousemove(function(e) {
+		    	if (grid.resizing) { 
+					grid.dragMove(e); return false; 
+				}
+			});
+		
+		
             $(".ui-jqgrid-labels", grid.hDiv).bind("selectstart", function() { return false; });
             $(document).mouseup(function(e) {
-                if (grid.resizing) { grid.dragEnd(); return false; }
+                if (grid.resizing) { 
+				grid.dragEnd(); return false;
+				}
                 return true;
             });
             ts.formatCol = formatCol;