/    Sign up×
Community /Pin to ProfileBookmark

Drag table not working in mozilla

I have a problem with drag table in mozilla php (smarty) using javascript functions.
The code used is :

{foreach from=$heading_array item=hdng key=col_name name=headng_loop}
<td width=”40px;” id=’column{$col_name}’ name= {$col_name} sort=”” {if $align_view.$col_name.CWDTH neq ‘0’ or $align_view.$col_name.CWDTH neq ”} style=”padding-left:3px;word-wrap:break-word;{*$align_view.$col_name.CWDTH*};”{/if} {if $wrapflag neq ” or $wrapflag neq 0}style=’vertical-align:top;'{/if}>{if $drag_flg eq 1}
<table height=100% cellSpacing=0 cellPadding=0 border=0 style=””>
<thead>
<tr>
<td>{/if}{if $align_view.$col_name.CWDTH eq ‘0’ or $align_view.$col_name.CWDTH eq ”}
<nobr {if $drag_flg eq 1} id=’columnTitle{$col_name}’
STYLE=” overflow: hidden; text-overflow: ellipsis;” {/if}

>

{/if}
<a href=”#” onClick=”javascript:sortByCol(‘{$col_name}’);”>{$hdng}</a>
<a href=”#” onclick=”javascriptpenFilterRow(this,’sort_clm{$col_name}’);fltr_sz(this);” id=’anchor_{$col_name}’>&raquo;</a>
<input type=”hidden” name=”sort_cl[{$col_name}]” id=”sort_clm{$col_name}” value=”{$sortcl.$col_name}”/>
<input type=”hidden” name=”sort_ad[{$col_name}]” id=”sort_
{$col_name}” value=”{$sortad.$col_name}”/>{if $align_view.$col_name.CWDTH eq ‘0’ or $align_view.$col_name.CWDTH eq ”}
</nobr>
{/if}{if $drag_flg eq 1}
</td>
</tr>
</table>{/if}
</td>
{if $smarty.session.BROWSER.NAME eq ‘IE’}
<td {if not $smarty.foreach.headng_loop.last}style=”width:1px”{/if} >
<img src=”{$smarty.const._IMAGE_PATH}/spacer.gif” height=100% border=0 style=”position: relative; left: 2px” {if $drag_flg eq 1} title=”Drag To Resize” onMouseOver=”this.style.cursor=’E-resize’;” onMouseDown=”javascript:ResizeColumnOnMouseDownEvent(‘flexibleTable’, ‘{$col_name}’, ‘document’)”{/if}>
</td>
{else}
<TD STYLE=’width:0px;TEXT-ALIGN:RIGHT;CURSOR:E-RESIZE;’ >
<img src=”{$smarty.const._
IMAGE_PATH}/spacer.gif” height=100% border=0 style=”position: relative; left: 2px” {if $drag_flg eq 1} title=”Drag To Resize” onMouseOver=”this.style.cursor=’E-resize’;” onMouseDown=”javascript:MozillaOnMouseDownEvent(this,event,’column{$col_name}’)” onmousemove=”javascript:MozillaOnMouseUpEvent(event);”{/if}>
</TD>
{/if}
{/foreach}
<input type=’hidden’ name=’tableMove’ id=’tableMove’ value=”>
<input type=’hidden’ name=’tdMove’ id=’tdMove’ value=”>
<input type=’hidden’ name=’tdDrag’ id=’tdDrag’ value=”>

My javascript functions are :

function MozillaOnMouseDownEvent(obj,event,obj1){
// alert(obj1);
document.getElementById(‘tableMove’).value=obj1;
document.getElementById(‘tdMove’).value=event.clientX;
document.getElementById(‘tdDrag’).value=1;
}
function MozillaOnMouseUpEvent(event){
//alert(event);
//alert(document.getElementById(‘tdDrag’).value);
if(document.getElementById(‘tdDrag’).value==1){
newPos = event.clientX;
prevPos = document.getElementById(‘tdMove’).value;
tdCol = document.getElementById(‘tableMove’).value;
alert(tdCol)
prevWidth = document.getElementById(tdCol).style.width;
alert(prevWidth);
if(parseInt(newPos)>parseInt(prevPos)){
presPos = parseInt(newPos)-parseInt(prevPos);
if(parseInt(prevWidth)){
document.getElementById(tdCol).style.width = parseInt(prevWidth)+parseInt(presPos)+’px’;
}
else{
document.getElementById(tdCol).style.width = parseInt(presPos)+’px’;
}
alert(prevWidth+’*******’+tdCol+’——‘+presPos+’if—‘+document.getElementById(tdCol).style.width);
}
else{
presPos = parseInt(prevPos)-parseInt(newPos);
if(parseInt(prevWidth)){
document.getElementById(tdCol).style.width = parseInt(prevWidth)-parseInt(presPos)+’px’;
}
else{
document.getElementById(tdCol).style.width = parseInt(presPos)+’px’;
}
//alert(tdCol+’——‘+presPos+’else—‘+document.getElementById(tdCol).style.width);
}
document.getElementById(‘tdDrag’).value=”;
}
}

Any suggestions from experts..
Thanks in Adv

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@justinbarneskinJun 08.2009 — That looks like PHP

here's my xBrowser drag script...
[code=php]
var z=0; var x=0; var y=0; var offsetx=null; var offsety=null; var targetobj=null; var dragapproved=0;

function drag(e){ var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if(this.targetobj.className=='drag'){
this.dragapproved=1
if(isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if(isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if(evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=moveit
}
}
function moveit(e){ var evtobj=window.event? window.event : e
if(this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+'px'
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+'px'
return false
}
}
document.onmousedown=drag;
document.onmouseup=function(){this.dragapproved=0}
[/code]
Copy linkTweet thisAlerts:
@pradeepg459authorJun 09.2009 — Ya that is for the Body Of the page i want for the td drag And to change td width for the table...my code is working but width is not setting for TD...

Any suggestions...

Thanks in Adv.
Copy linkTweet thisAlerts:
@justinbarneskinJun 09.2009 — Sorry but I just don't recognize the code you gave. See if you can work with this, but use the xBrowser code I gave earlier.
[code=php]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>DragH&W</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE type=text/CSS>
.drag{position:relative;cursor:hand}
</STYLE>
<SCRIPT type="text/javascript">
var dragapproved=false
var z,x,y
function move(){
if (event.button==1&&dragapproved){z.style.pixelLeft=temp1+event.clientX-x; z.style.pixelTop=temp2+event.clientY-y;
document.getElementById('abc').style.width=event.clientX;
document.getElementById('abc').style.height=z.style.pixelTop;
return false;}
}
function drags(){
if (event.srcElement.className=="drag"){
dragapproved=true;z=event.srcElement;
temp1=z.style.pixelLeft; temp2=z.style.pixelTop;
x=event.clientX; y=event.clientY;

document.onmousemove=move}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")

</SCRIPT>
<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<BODY>
<span style="position:absolute;top:110px;left:110px;"><span class="drag"> drag me </span></span>
<TABLE BORDER=1 style="position:absolute;top:10px;left:10px;">
<TBODY>
<TR>
<TD id="abc"> a </TD>
<TD> b </TD>
</TR>
<TR>
<TD> c </TD>
<TD> d </TD>
</TR>
</TBODY>
</TABLE>

</BODY></HTML>
[/code]
×

Success!

Help @pradeepg459 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...