Need help to set X and Y codeinates using PHP and Javascript

Hii all I need your help to do the following ....

My problem : I cant set the possition of HTML Label to desied locations( Possitions fetch dynamically from Mysql table)

What I have : A simple program with Javascript to move the label locations;. The code is following



<html>
<head>
<title>Certificate Template Graphically</title>
<meta name="revisit-after" content="7 days">
<style>
<!--
.dragme{position:relative;}
-->
</style>

<script language="JavaScript1.2">
<!--

var ie=document.all;
var nn6=document.getElementById&&!document.all;

var isdrag=false;
var x,y;
var dobj;

function movemouse(e)
{
  if (isdrag)
  {
    dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
    dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
    
    return false;
  } 
}

function selectmouse(e) 
{
  var fobj       = nn6 ? e.target : event.srcElement;
  var topelement = nn6 ? "HTML" : "BODY";

  while (fobj.tagName != topelement && fobj.className != "dragme")
  {
    fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  }

  if (fobj.className=="dragme")
  {
    isdrag = true;
    dobj = fobj;
    tx = parseInt(dobj.style.left+0);
    ty = parseInt(dobj.style.top+0);
    x = nn6 ? e.clientX : event.clientX;
    y = nn6 ? e.clientY : event.clientY;    
    document.onmousemove=movemouse;
    return false;
  }
}

document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");

//-->
</script>
<link href="<?php echo base_url();?>/styles/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {
    font-family: "monotype corsiva";
    font-weight: bold;
    font-size:36px
}
.workArea{
    background-color:#F2FCFD;
    border:#000000;
    top:50px;
    left:255px;
    width:750px;
    position:absolute;
    /*FILTER: alpha(opacity=10);opacity:0.2;*/

}
-->
</style>

</head>
<body leftmargin=0 topmargin=0 rightmargin=0 onLoad="loadInitials();">
<div id="mainContainer">
<div class="style1" align="center">Certificate Template</div>
<div id="leftTools" style="float:left;background-color:#F5FEF3;border:#000000;top:50px;width:250px;position:absolute;height:auto;">
<?php 
echo form_open('certificate/certificate/save_certificate_template_drag/', array('id' => 'formCertificatedrag'));
if($certificate_template[0]['page_style']=='P'){
        $pcheck    =    'checked';
        $lcheck    =    '';
    }else if($certificate_template[0]['page_style']=='L'){
        $pcheck    =    '';
        $lcheck    =    'checked';
    }
if($certificate_template[0]['label_print']=='Y'){
        $lprintY    =    'checked';
        $lprintN    =    '';
        $displayN    =    'none';
        $displayY    =    'block';
        ?>
        <script language="javascript" type="text/javascript">
        /*var Yname    =    document.getElementById('lblname1');
        Yname.offsetLeft    =    <?php //echo $certificate_template[0]['name_x'];?>
        Yname.offsetTop        =    <?php //echo $certificate_template[0]['name_y'];?>
            */
        </script>
        <?php
    }else {
        $lprintN    =    'checked';
        $lprintY    =    '';
        $displayN    =    'block';
        $displayY    =    'none';
    }
//echo blue_box_top();
?>
<table width="100%" border="0" cellspacing="5" cellpadding="5">
  <tr>
    <td>Tool Box</td>
  </tr>
  <tr>
    <td>
        <fieldset>
        <legend>Oriantation</legend>            
        <p>
          <label>
            <input type="radio" name="radioOriantation" value="L" id="radioOriantation_0" onClick="selectOriantation(this.value)" <?php echo @$lcheck;?> >
            Landscape</label>
          <br>
          <label>
            <input type="radio" name="radioOriantation" value="P" id="radioOriantation_1" onClick="selectOriantation(this.value)" <?php echo @$pcheck;?>>
            Portrait</label>
          <br>
        </p>
        </fieldset>
    </td>
  </tr>
  <tr>
    <td>
    <fieldset>.
    <legend>Label</legend>    
    <p>
      <label>
        <input type="radio" name="radioLabel" value="Y" id="radioLabel_0" onClick="selectItems(this.value)" <?php echo @$lprintY;?>>
        Yes</label>
      <br>
      <label>
        <input type="radio" name="radioLabel" value="N" id="radioLabel_1" onClick="selectItems(this.value)" <?php echo @$lprintN;?>>
        No</label>
      <br>
    </p>
    </fieldset>
    </td>
  </tr>
  <tr id="withoutlabel" style="display:<?php echo @$displayN;?>">
    <td><fieldset>
    <legend>Items</legend>
    <label class="dragme" id="lblname">Name</label><br>
    <label class="dragme" id="lblitem">Item</label><br>
    <label class="dragme" id="lblcat">Category</label><br>
    <label class="dragme" id="iblgrade">Grade</label><br>
    <label class="dragme" id="lblclass">Class</label><br>
    <label class="dragme" id="lblschool">School</label><br>
    <label class="dragme" id="lblsubdist">Sub District</label><br>
    <label class="dragme" id="ibldate">Date</label><br>
    <label class="dragme" id="lablplace">Place</label><br>
    <label class="dragme" id="lblefh">Elegible for heigher level</label><br>
    </fieldset></td>
  </tr>
  <tr id="withlabel" style="display:<?php echo @$displayY;?>">
    <td><fieldset>
    <legend>Items</legend>
    <label class="dragme" id="lblname1">Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: Student Name</label><br>
    <label class="dragme" id="lblitem1">Item&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp: Item Name</label><br>
    <label class="dragme" id="lblcat1">Category&nbsp;&nbsp;&nbsp;&nbsp;&nbsp: Category</label><br>
    <label class="dragme" id="iblgrade1">Grade&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp: Grade</label><br>
    <label class="dragme" id="lblclass1">Class&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp: Class</label><br>
    <label class="dragme" id="lblschool1">School&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp: School Name</label><br>
    <label class="dragme" id="lblsubdist1">Sub District&nbsp: Sub district name</label><br>
    <label class="dragme" id="ibldate1">Date&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp: Date</label><br>
    <label class="dragme" id="lablplace1">Place&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp: Place</label><br>
    <label class="dragme" id="lblefh1">Elegible for heigher level</label><br>
    </fieldset></td>
  </tr>
</table>

</div><!-- end Left tools-->
<div id="workArea" class="workArea">
    <div align="center"><strong>Work Area</strong>
    <div align="right">
    <a href="<?php echo base_url();?>index.php/certificate/certificate/" title="Certificate - Template" >Back</a>
    </div>
    </div>
    <div id="displaydiv">Possition : </div>
   <?php //echo $certificate_template[0]['page_style'];
       //var_dump($certificate_template);
    if($certificate_template[0]['page_style']=='P'){
        $width    =    '350px';
        $height    =    '400px';
    }else if($certificate_template[0]['page_style']=='L'){
        $width    =    '450px';
        $height    =    '350px';
    }
   ?>
</div><!-- end Work Area-->
<br><br><br><br>
<table align="center" cellspacing="0" width="<?php echo @$width;?>" height="<?php echo @$height;?>" border="1" cellpadding="0" id="oriantationtable" style="left:255px;position:inherit">
<tr valign="top" align="center">
<td>&nbsp;</td>
</tr>
</table>
<div align="center">
<input name="btnSave" type="button" id="btnSave" value="Save" onClick="return findPos();">
</div>
</div><!-- end main container-->
<?php echo form_close();?>
</body>
</html>

Code (markup):

My Aim :
1 . Is to set the labels to a different Location of the screen and save that locations to a table.
2 . Retreve that locations from the table and show the Lables in that locations.

If any one know how to do this please help me ... please ....

Thank to all ..............

Log in or Sign up

Need help to set X and Y codeinates using PHP and Javascript

rthcupid Peon

rthcupid Peon

Log in or Sign up

Need help to set X and Y codeinates using PHP and Javascript

rthcupid Peon

rthcupid Peon

Useful Searches