CODEWITHSUNDEEP
javascriptjavahtmlcssjsp
Geek
Geek

Reputation: 3329

JSP : positioning DIV at specific coordinates not working

I am trying to position a Div on the coordinate of the input boxes. OnClick of the input box, DIV is enabled and loaded with values and any selection on the DIV has to set the valueto the input box. Everything is working fine except that the input box is not positioned on the coordinate but to the top of the page. 

<div class="mRow">
<label for="SS">Special Subjects:</label>
<span class="numLbls">1. </span><input type="text" name="ade" value="<%=ade[0]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')"/>
<span class="numLbls">2. </span><input type="text" name="ade" value="<%=ade[1]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')"/>
<span class="numLbls">3. </span><input type="text" name="ade" value="<%=ade[2]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')"/>
</div>

divSpec is:

<div id="divSpec" class="lookupTable" onClick="hideThis(this.id)">
    <table>
        <%
        for (int i = 0; i < luSpec.size(); i++)
        {
            lu = (LookupTableBean) luSpec.get(i);
            %>
            <tr>
                <td><%=lu.getCode()%>.</td>
                <td><a href="javascript: setCode('divSpec', '<%=lu.getCode()%>')" ><%=lu.getDescr()%></a></td>
            </tr>
        <%
        }%>
    </table>
</div>

css for lookup is:

.lookupTable
{
  display:none;
  padding:5px;
  z-index:10;
  font-size: 10px; 
  position: absolute;
  border: 2px solid #933; 
  background-color:white; 
  width: 220px; 
  height:180px; 
  overflow:auto;
}

Javascript

// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false

var codeEl;

// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)

// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;

// Temporary variables to hold mouse x-y pos.s
var tempX = 0;
var tempY = 0;

//var frm = document.dashboardSearchForm;

function getMouseXY(e) {
  if (IE) { // grab the x-y pos.s if browser is IE
    tempX = event.clientX + document.body.scrollLeft
    tempY = event.clientY + document.body.scrollTop
  } else {  // grab the x-y pos.s if browser is NS
    tempX = e.pageX
    tempY = e.pageY
  }  
  // catch possible negative values in NS4
  if (tempX < 0){tempX = 0}
  if (tempY < 0){tempY = 0}  
  // show the position values in the form named Show
  // in the text fields named MouseX and MouseY
  //document.Show.MouseX.value = tempX
  //document.Show.MouseY.value = tempY
  return true
}

function showCodeLookup(el, divName)
{
  //Hide any lookup tables that are displayed first
  document.getElementById("divSpec").style.display="none";

  var divCodes = document.getElementById(divName);

  computeCoordinates();

  codeEl = el;
  alert(" Iam here");
  alert("document.Show.sMouseY.value:"+document.Show.sMouseY.value);  
  alert("document.Show.sMouseX.value:"+document.Show.sMouseX.value);
  divCodes.style.display="block";
  divCodes.style.top=document.Show.sMouseY.value;
  divCodes.style.left=document.Show.sMouseX.value;

}

function setCode(divName, code)
{

  var divEl = document.getElementById(divName);
  codeEl.value = code;
  divEl.style.display="none";
}

function computeCoordinates()
{
  var isIE = document.all ? true : false;  
  var ScrollTop = document.body.scrollTop;
  var _x = tempX;
  var _y = tempY;
  if (ScrollTop == 0)
  {
    if (window.pageYOffset)
      ScrollTop = window.pageYOffset;
    else
      ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
  }

  if (isIE) 
  {
    _x = tempX + document.body.scrollLeft;
    _y = tempY + ScrollTop;
  }  


  document.Show.sMouseX.value = _x;
  document.Show.sMouseY.value = _y;
}

function hideThis(id)
{
  document.getElementById(id).style.display="none";
}

Any suggestions please. I have added alert showCodeLookup() and it gives me proper coordinates like 1036 for Y, 536 for X.

Upvotes: 1

Views: 154

Answers (1)

Swati
Swati

Reputation: 28522

I have test your code on Chrome and found that in your js code document.Show.sMouseY.value and document.Show.sMouseX.value are null or undefined .So, when you assigned these value to your div divSpec it was not positioning it to required coordinate.Instead i have make certain changes in your js code as you can see below :

var IE = document.all ? true : false

var codeEl;

// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)

// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;

// Temporary variables to hold mouse x-y pos.s
var tempX = 0;//declare 
var tempY = 0;//declare
var mouseX = 0;
var mouseY = 0;
//var frm = document.dashboardSearchForm;

function getMouseXY(e) {
  if (IE) { // grab the x-y pos.s if browser is IE
    tempX = event.clientX + document.body.scrollLeft
    tempY = event.clientY + document.body.scrollTop
  } else { // grab the x-y pos.s if browser is NS
    tempX = e.pageX
    tempY = e.pageY

  }
  // catch possible negative values in NS4
  if (tempX < 0) {
    tempX = 0
  }
  if (tempY < 0) {
    tempY = 0
  }

  return true;
}

function showCodeLookup(el, divName) {
  //Hide any lookup tables that are displayed first
  document.getElementById("divSpec").style.display = "none";

  var divCodes = document.getElementById(divName);

  codeEl = el;
  computeCoordinates();
  divCodes.style.display = "block";
  divCodes.style.left = tempX; //(change here)assigning coordinate found
  divCodes.style.top = tempY; //(change here)

}

function setCode(divName, code) {

  var divEl = document.getElementById(divName);
  codeEl.value = code;
  divEl.style.display = "none";
}

function computeCoordinates() {
  var isIE = document.all ? true : false;
  var ScrollTop = document.body.scrollTop;
  var _x = tempX;
  var _y = tempY;

  if (ScrollTop == 0) {
    if (window.pageYOffset)
      ScrollTop = window.pageYOffset;
    else
      ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
  }

  if (isIE) {
    _x = tempX + document.body.scrollLeft;
    _y = tempY + ScrollTop;
  }


  tempX = _x;//change here 
  tempY = _y;//change here
}

function hideThis(id) {
  document.getElementById(id).style.display = "none";
}

(Also above code is already tested on chrome and working as accepted)

Working code :

var IE = document.all ? true : false

var codeEl;

// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)

// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;

// Temporary variables to hold mouse x-y pos.s
var tempX = 0; //declare 
var tempY = 0; //declare
var mouseX = 0;
var mouseY = 0;
//var frm = document.dashboardSearchForm;

function getMouseXY(e) {
  if (IE) { // grab the x-y pos.s if browser is IE
    tempX = event.clientX + document.body.scrollLeft
    tempY = event.clientY + document.body.scrollTop
  } else { // grab the x-y pos.s if browser is NS
    tempX = e.pageX
    tempY = e.pageY

  }
  // catch possible negative values in NS4
  if (tempX < 0) {
    tempX = 0
  }
  if (tempY < 0) {
    tempY = 0
  }

  return true;
}

function showCodeLookup(el, divName) {
  //Hide any lookup tables that are displayed first
  document.getElementById("divSpec").style.display = "none";

  var divCodes = document.getElementById(divName);

  codeEl = el;
  computeCoordinates();
  divCodes.style.display = "block";
  divCodes.style.top = tempX +'px'; //(change here)assigning coordinate found
  divCodes.style.left = tempY +'px'; //(change here)
}

function setCode(divName, code) {

  var divEl = document.getElementById(divName);
  codeEl.value = code;
  divEl.style.display = "none";
}

function computeCoordinates() {
  var isIE = document.all ? true : false;
  var ScrollTop = document.body.scrollTop;
  var _x = tempX;
  var _y = tempY;

  if (ScrollTop == 0) {
    if (window.pageYOffset)
      ScrollTop = window.pageYOffset;
    else
      ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
  }

  if (isIE) {
    _x = tempX + document.body.scrollLeft;
    _y = tempY + ScrollTop;
  }


  tempX = _x; //change here 
  tempY = _y; //change here
}

function hideThis(id) {
  document.getElementById(id).style.display = "none";
}
.lookupTable
{
  display:none;
  padding:5px;
  z-index:10;
  font-size: 10px; 
  position: absolute;
  border: 2px solid #933; 
  background-color:white; 
  width: 220px; 
  height:180px; 
  
}
<html>
<body>
<div class="mRow">
  <label for="SS">Special Subjects:</label>
  <span class="numLbls">1. </span><input type="text" name="ade" value="<%=ade[0]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')" />
  <span class="numLbls">2. </span><input type="text" name="ade" value="<%=ade[1]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')" />
  <span class="numLbls">3. </span><input type="text" name="ade" value="<%=ade[2]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')" />
</div>
<div id="divSpec" class="lookupTable" onClick="hideThis(this.id)">
  <table>
   ddddddddd
  </table>
</div>
</body>
</html>

Upvotes: 1

Related Questions