14
How do I in IE prevent the onclick action from being fired when I am done dragging?
have tried "window.event.c ancelBubble = true", for onmouseup , onmousedown, and onmousemove handlers. The onclick sort action always seems to get fired. Any help would be greatly appeciated.
The following demo is sortable and resizable. I basically don't want the onclick action to be fired if I am resizing a column.
Steve
[HTML]<HTML>
<HEAD>
<style>
h1, h2{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
}
.move
{
width:100%;
background-color:#99CCFF;
border-bottom:1px solid blue;
font-size:14px;
font-family:vardana;
font-color:"#33CCAA" ;
text-align:center;
}
.info
{
width:100%;
background-color:#99CCFF;
border-top:1px solid blue;
font-size:13px;
font-family:vardana;
font-color:"#33CCAA" ;
}
.panel2{
width:150; position:absolu te; border:1px solid blue; left:500; top:200; font-size:13px; font-family:vardana; }
.panel{
width:150; position:absolu te; border:1px solid blue; left:350; top:200; font-size:13px; font-family:vardana; }
.panel a:visited{color :blue;}
.panel a{text-decoration:none ;color:blue}
.panel a:hover{text-decoration:none ;}
#panel a.visited{
text-decoration:none ;
}
.menu
{
width:100%;
background-color:lightyell ow;
font-size:13px;
font-family:vardana;
}
</style>
<!--[if IE]>
<style type="text/css">
div.scrollable {
/* shrink the window, adjust for the 2 border pixels */
height:expressi on( this.getElement sByTagName('TAB LE')[0].clientHeight >= 80 ? "80px": "auto" );
overflow-x: visible;
overflow-y: auto;
}
div.scrollable table {
/* adjust for the 17 pixels for the scrollbar */
width: expression(this .parentNode.off setWidth-17);
}
/* set the table row */
div.scrollable table thead tr {
position: relative;
/* this fixes IE header jumping bug */
top: expression( this.parentNode .parentNode.par entNode.scrollT op + 'px' );
}
</style>
<![endif]-->
<!-- if mozilla -->
<style type="text/css">
html>body div.TableContai ner table tbody {
height: 20px;
overflow: auto;
}
/* add 17 for the scrollbar */
html>body div.TableContai ner div.scrollbarCo l {
width:17px;
}
</style>
<script type="text/javascript" src="http://www.kryogenix.o rg/code/browser/sorttable/sorttable.js" >
</script>
<SCRIPT LANGUAGE="JavaS cript">
N = (document.all) ? 0 : 1;
var ob;
var over = false;
var over_id ="";
var iEdgeThreshold = 10;
function TableResize_fin dPos(obj) {
var curleft = curtop = 0;
if (obj.offsetPare nt) {
curleft = obj.offsetLeft;
curtop = obj.offsetTop;
while (obj = obj.offsetParen t) {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
}
return [curleft,curtop];
}
/* Function that tells me if on the border or not */
function TableResize_isO nBorderLeft( objTable, objTh,event){
var left = objTh.offsetLef t;
var pos = TableResize_fin dPos(objTable);
var absLeft = pos[0] + left;
if( event.clientX < (absLeft + iEdgeThreshold) ){
return 1;
}
return 0;
}
function TableResize_isO nBorderRight( objTable, objTh,event){
var width = objTh.offsetWid th;
var left = objTh.offsetLef t;
var pos = TableResize_fin dPos(objTable);
var absRight = pos[0] + left + width;
if( event.clientX > (absRight - iEdgeThreshold) ){
return 1;
}
return 0;
}
function TableResize_get NodeName(objRef erence,nodeName )
{
var oElement = objReference;
while (oElement != null && oElement.tagNam e != null && oElement.tagNam e != "BODY") {
if (oElement.tagNa me.toUpperCase( ) == nodeName) {
return oElement;
}
oElement = oElement.parent Node;
}
return null;
}
function do_resize(objTh ,event){
if(event == null){
event = window.event;
}
var objTable = TableResize_get NodeName(objTh, "TABLE");
if( TableResize_isO nBorderLeft( objTable, objTh,event) ){
objTh.style.cur sor="e-resize";
return true;
}
else if( TableResize_isO nBorderRight( objTable, objTh,event) ){
objTh.style.cur sor="e-resize";
return true;
}
objTh.style.cur sor="";
return false;
}
function MD(e) {
MOUSTSTART_X=ev ent.clientX;
MOUSTSTART_Y=ev ent.clientY;
if (over){
if (N) {
ob = document.getEle mentById(over_i d);
X=e.layerX;
Y=e.layerY;
return false;
}
else{
ob = document.getEle mentById(over_i d);
ob2 = document.getEle mentById("MAINT ABLE");
obwidth=parseIn t(ob.style.widt h);
obwidth2=parseI nt(ob2.style.wi dth);
X=event.offsetX ;
Y=event.offsetY ;
}
}
}
function MM(e) {
if (ob) {
if (N) {
ob.style.top = e.pageY-Y;
ob.style.left = e.pageX-X;
}
else{
st=event.client X-MOUSTSTART_X+ob width;
st2=event.clien tX-MOUSTSTART_X+ob width2;
if(st>=30){
ob.style.width= st;
ob2.style.width =st2;
document.getEle mentById("statu s").innerHTML=s t;
}
document.select ion.empty();
}
}
}
function MU(e) {
if(ob != null){
document.select ion.empty();
ob = null;
}
}
if (N) {
document.captur eEvents(Event.M OUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmous edown = MD;
document.onmous emove = MM;
document.onmous eup = MU;
</script>
</HEAD>
<BODY>
<!--
YOU MUST HAVE TO DEFINE WIDTH ON STYLE TAB.. if you leave NULL
IT RETURNS .. ERROR..
-->
<H1>RESIZABLE TABLE COLUMN</H1>
<table style="border: 1px gray solid">
<tr>
<td>
<div class="scrollab le">
<TABLE border="1" STYLE="width:50 0px; overflow:hidden ; table-layout:fixed" ID="MAINTABLE" class="sortable ">
<THEAD>
<TR>
<TH id="panel0" class='move' onmousemove="ov er=do_resize(th is);over_id='pa nel0'" onmouseover="ov er=do_resize(th is);over_id='pa nel0'" onmouseout='ove r=false;' style='width:10 0px; overflow:hidden '>CO0</TH>
<TH id="panel1" class='move' onmousemove="ov er=do_resize(th is);over_id='pa nel1'" onmouseover="ov er=do_resize(th is);over_id='pa nel1'" onmouseout='ove r=false;' style='width:10 0px; overflow:hidden '>CO1</TH>
<TH id="panel2" class='move' onmousemove="ov er=do_resize(th is);over_id='pa nel2'" onmouseover="ov er=do_resize(th is);over_id='pa nel2'" onmouseout='ove r=false;' style='width:10 0px; overflow:hidden '>CO2</TH>
<TH id="panel3" class='move' onmousemove="ov er=do_resize(th is);over_id='pa nel3'" onmouseover="ov er=do_resize(th is);over_id='pa nel3'" onmouseout='ove r=false;' style='width:10 0px; overflow:hidden '>CO3</TH>
<TH id="panel4" class='move' onmousemove="ov er=do_resize(th is);over_id='pa nel4'" onmouseover="ov er=do_resize(th is);over_id='pa nel4'" onmouseout='ove r=false;' style='width:10 0px; overflow:hidden '>CO4</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>1_0</TD>
<TD><input type="text" value="this is a very long text string" style="width:10 0%" ></TD>
<TD>1_2</TD>
<TD>1_3</TD>
<TD>1_4</TD>
</TR>
<TR>
<TD>2_0</TD>
<TD>2_1</TD>
<TD>2_2</TD>
<TD>2_3</TD>
<TD>2_4</TD>
</TR>
<TR>
<TD>3_0</TD>
<TD>3_1</TD>
<TD>3_2</TD>
<TD>3_3</TD>
<TD>3_4</TD>
</TR>
<TR>
<TD>4_0</TD>
<TD>4_1</TD>
<TD>4_2</TD>
<TD>4_3</TD>
<TD>4_4</TD>
</TR>
</TBODY>
</table>
</div>
</td>
</tr>
</table>
<div id="status"></div>
</HTML>[/HTML]
