• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 625
  • Last Modified:

Highlighting issue: depending on scrolling, highlight (div style:top) is positioning differently (i.e.) the more

Depending on how much a user scrolls down (or up), the div (or the highlight) positions differently (the more it is scrolled down, the higher the div positions itself).  Does anyone have any ideas?  Also, in this code, the page is throwing an error, somewhat radomly on this code:
=============
document.getElementById("bkgdLayer").style.width = parseInt(event.offsetX)+150;
document.getElementById("bkgdLayer").style.height = parseInt(event.offsetY)+150;
// Change foreground dimensions
document.getElementById("frgdLayer").style.width = parseInt(event.offsetX);
document.getElementById("frgdLayer").style.height = parseInt(event.offsetY);
=============
Not sure why this is happening either.  The page can be viewed here:
http://www.weblcs.com/test/index.asp?image=AquaBug.jpg

Thanks.

Here's the full page code:
================
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<%
response.write "<style type=""text/css"">" + Chr(13)
response.write Chr(9) + "body  {" + Chr(13)
response.write  Chr(9) + Chr(9) + "background-image: url(images/"
response.write Request.QueryString("image")
response.write ");" + Chr(13)
response.write  Chr(9) + Chr(9) + "background-repeat: no-repeat;" + Chr(13)
response.write Chr(9) + Chr(9) + "background-position: top left;" + Chr(13)
response.write Chr(9) + "}" + Chr(13)
response.write "</style>"
%>
<style type="text/css">
td {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 12px;"
}
</style>
<SCRIPT>
<!--
var dragging = false;

function makeHighlight(statusOnly) {
      if ((dragging) && (!isNaN(parseInt(event.offsetX))) && (!isNaN(parseInt(event.offsetY)))) {
            if ((parseInt(event.clientY) >= parseInt(document.getElementById("frgdLayer").style.top)) && (parseInt(event.clientX) >= parseInt(document.getElementById("frgdLayer").style.left))) {
                  if (statusOnly != "statusOnly") {
                        // Change background dimensions
                        document.getElementById("bkgdLayer").style.width = parseInt(event.offsetX)+150;
                        document.getElementById("bkgdLayer").style.height = parseInt(event.offsetY)+150;
                        // Change foreground dimensions
                        document.getElementById("frgdLayer").style.width = parseInt(event.offsetX);
                        document.getElementById("frgdLayer").style.height = parseInt(event.offsetY);
                  }
                  // Set status bar message
                  status = event.clientX+', '+event.clientY+'  -  Width: '+event.offsetX+', Height: '+event.offsetY;
            } else {
                  // Set status bar message
                  status = event.clientX+', '+event.clientY+'  -  Width: 0, Height: 0';
            }
      } else {
            // Set status bar message
            status = event.clientX+', '+event.clientY;
      }
}

function moveLayers() {
      // Set foreground and background layers according to OnMouseDown
      document.getElementById("frgdLayer").style.left = parseInt(event.clientX)-2;
      document.getElementById("frgdLayer").style.top = parseInt(event.clientY)-3;
      document.getElementById("bkgdLayer").style.left = parseInt(event.clientX)-2;
      document.getElementById("bkgdLayer").style.top = parseInt(event.clientY)-3;
      
      // Make foreground layer visible
      document.getElementById("frgdLayer").style.visibility = "visible";
      
      // Set flag to allow dragging
      dragging = true;
}

function showADmenu() {
      // Reposition menu
      if (parseInt(document.getElementById("frgdLayer").style.top) >= (45 - parseInt(document.getElementById("frgdLayer").style.height))) {
            document.getElementById("acceptDeny").style.top = parseInt(parseInt(document.getElementById("frgdLayer").style.height) + parseInt(document.getElementById("frgdLayer").style.top) - 56);
      } else {
            document.getElementById("acceptDeny").style.top = 0;
      }
      if (parseInt(document.getElementById("frgdLayer").style.left) >= 0) {
            document.getElementById("acceptDeny").style.left = parseInt(parseInt(document.getElementById("frgdLayer").style.width) + parseInt(document.getElementById("frgdLayer").style.left) + 3);
      } else {
            document.getElementById("acceptDeny").style.left = 0;
      }
      document.getElementById("secureLayer").style.zIndex = 4400;
      document.getElementById("secureLayer").style.visibility = "visible";
      document.getElementById("acceptDeny").style.visibility = "visible";
}

function onMouseRelease() {
      // Reinitiate background attributes
      document.getElementById("bkgdLayer").style.top = 0;
      document.getElementById("bkgdLayer").style.left = 0;
      document.getElementById("bkgdLayer").style.width = document.images['diagram'].width+150;;
      document.getElementById("bkgdLayer").style.height = document.images['diagram'].height+150;;
      
      // Reset and show Accept or Deny Menu
      showADmenu();
      
      // Set flag to not allow dragging
      dragging = false;
}

function cancelHotspot() {
      // Reinitiate foreground attributes
      document.getElementById("frgdLayer").style.visibility = "hidden";
      document.getElementById("frgdLayer").style.width = 0;
      document.getElementById("frgdLayer").style.height = 0;
      document.getElementById("frgdLayer").style.top = 0;
      document.getElementById("frgdLayer").style.left = 0;
      document.getElementById("acceptDeny").style.visibility = "hidden";
      document.getElementById("secureLayer").style.zIndex = 1;
      document.getElementById("secureLayer").style.visibility = "hidden";
}

function initiatePage() {
      // Resize Background Layer
      document.getElementById("bkgdLayer").style.width = document.images['diagram'].width+150;
      document.getElementById("bkgdLayer").style.height = document.images['diagram'].height+150;
      
      // Resize Secure Layer
      document.getElementById("secureLayer").style.width = document.images['diagram'].width+150;
      document.getElementById("secureLayer").style.height = document.images['diagram'].height+150;
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</SCRIPT>
</head>

<body onMouseMove="makeHighlight('statusOnly');" onMouseUp="onMouseRelease();" onLoad="initiatePage();">
<!-- Start Image Layer -->
<DIV id="imageLayer" style="top: 0px; left: 0px; visibility:hidden; position:absolute; z-index: 1;">
<table>
  <tr>
        <td><img src="images/<%=(Request.QueryString("image"))%>" id="diagram"></td>
  </tr>
</table>
</DIV>
<!-- End Image Layer -->

<!-- Start Security Layer -->
<DIV id="secureLayer" ondragstart="return false" onselectstart="return false" oncontextmenu="return false" style="top: 0px; left: 0px; visibility:hidden; position:absolute; height: 97%; width: 100%; filter: alpha(opacity=35); -moz-opacity: 0.35; opacity: 0.35; z-index: 3; background-color: #cccccc; padding-left: 7px;">
<table>
  <tr>
        <td>Press "Accept Hotspot" to accept the current position of the hotspot box<br/>OR press "Cancel Hotspot" to try again.</td>
  </tr>
  <tr>
        <td height="4"></td>
  </tr>
  <tr>
        <td style="font-size: 10px;">If the accept/deny menu is not visible,<br/>use the backup menu below:</td>
  </tr>
  <tr>
        <td style="font-size: 10px;"><a href="javascript:;" onClick="MM_openBrWindow('acceptPart.asp','acceptPart','status=yes,menubar=yes,scrollbars=yes,resizable=yes,width=575,height=600')">Accept Hotspot</a></td>
  </tr>
  <tr>
      <td style="font-size: 10px;"><a href="javascript:;" onClick="cancelHotspot();">Cancel Hotspot</a></td>
  </tr>
</table>
</DIV>
<!-- End Security Layer -->

<!-- Start Background Layer -->
<DIV id="bkgdLayer" onselectstart="return false" oncontextmenu="return false" onMouseMove="makeHighlight();" onMouseDown="moveLayers();" onMouseUp="onMouseRelease();" style="top: 0px; left: 0px; visibility:visible; position:absolute; height: 97%; width: 100%; z-index: 5;"></DIV>
<!-- End Background Layer -->

<!-- Start Foreground Layer -->
<DIV id="frgdLayer" onselectstart="return false" oncontextmenu="return false" onMouseMove="makeHighlight();" onMouseDown="moveLayers();" onMouseUp="onMouseRelease();" style="visibility:hidden; position:absolute; height: 0px; width: 0px; background-color: #cc0000; filter: alpha(opacity=35); -moz-opacity: 0.35; opacity: 0.35; z-index: 4100; border: 1px solid #cc0000;"></DIV>
<!-- End Foreground Layer -->
</body>

<!-- Start Menu Accept/Deny Layer -->
<DIV id="acceptDeny" onselectstart="return false" oncontextmenu="return false" style="visibility:hidden; position:absolute; height: 45px; width: 112px; padding: .2em; background-color:#ffffff; z-index: 4500; border: 1px solid #ffffff;">
<table>
  <tr>
        <td><a href="javascript:;" onClick="MM_openBrWindow('acceptPart.asp','acceptPart','status=yes,menubar=yes,scrollbars=yes,resizable=yes,width=575,height=600')">Accept Hotspot</a></td>
  </tr>
  <tr>
      <td><a href="javascript:;" onClick="cancelHotspot();">Cancel Hotspot</a></td>
  </tr>
</table>
</DIV>
<!-- End Menu Accept/Deny Layer -->
</body>
</html>
0
drdarby
Asked:
drdarby
1 Solution
 
Michel PlungjanIT ExpertCommented:
even is IE  window.innerHeight is Netscape/Mozilla.

You need to decide which
0
 
drdarbyAuthor Commented:
sorry, the page was not correct if you went to it recently, the correct page is now uploaded.
0
 
drdarbyAuthor Commented:
Why is this line of code throwing an "Invalid Argument" error?

document.getElementById("frgdLayer").style.width = event.offsetX+0; (line 35)
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Michel PlungjanIT ExpertCommented:
Seems to work now but I would change

<a href="javascript:;" onClick="MM_openBrWindow('acceptPart.asp','acceptPart','status=yes,menubar=yes,scrollbars=yes,resizable=yes,width=575,height=600')">Accept Hotspot</a>


<a href="javascript:;" onClick="cancelHotspot();">Cancel Hotspot</a></td>

to

<a href="javascript:;" onClick="MM_openBrWindow('acceptPart.asp','acceptPart','status=yes,menubar=yes,scrollbars=yes,resizable=yes,width=575,height=600');
return false">Accept Hotspot</a>


<a href="javascript:;" onClick="cancelHotspot(); return false">Cancel Hotspot</a></td>

0
 
danataylorCommented:
My understanding of the problem is as follows.

You are using the cursor position to place the DIV element (event.clientX & event.clientY).  The cusor position is measured relative to the window but when the DIV is created it places it using the document coordinates.  As you scsroll the page these drift apart from one another.  See ARCHRAJAN's post here:

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21400206.html

She uses the coordinates of the element that was clicked on to determine the position of the new element that appears.  That way everything uses the same coordinates.
0
 
drdarbyAuthor Commented:
thanks for all your help everyone, but I have figured out both of my problems I was having.

When I scrolled down and then used offsetX/offsetY, the highlight was still using the top and left from the clientX and clientY - I fixed it by adding the document.body.scrollTop or scrollLeft to the Top and Left.  This fixed the highlighting error.

The other unknown javascript error was being thrown (and I still really don't know why) due to trying to change the div's height and width to a negative number ... i don't know how or why a negative number was being used, but it was.  Basic error checking solved this problem.
0
 
Michel PlungjanIT ExpertCommented:
A "C" grade is not acceptable to me. Then I'd rather you get this paq'd and refunded.

Please post a question in the Community Support and ask them for a PAQ and refund
0
 
drdarbyAuthor Commented:
Maybe under the grading "system" currently in place there should be a greater definition of how the grading SHOULD be used, because I didn't realize that a C was a bad grade.  Maybe a section on "What Grading Criterion That You Have To Use To Use The Forum".  My word, it is absolutely rediculous that this is even an issue - and it only happened once!  No note saying that that isn't a very excepted practice on this web site... which would have been much more appreciated and understood.
0
 
drdarbyAuthor Commented:
p.s.  I just wanted to add another thing.  The reason I gave a "C" grade was not because anything you or anyone else inputted, it was because I had a very specific problem that didn't/couldn't be solved or communicated well enough for someone to help me solve my problem.  If that is not how I should be grading, that's fine, it's not a big issue for me.  If everyone wants "A"s all the time, great, all I wanted was some help.

I would very much like it if this matter could be forgiven and I could continue to recieve help.

My appologies for the mishap and thanks for helping me when you did,
drdarby
0
 
Michel PlungjanIT ExpertCommented:
0
 
Michel PlungjanIT ExpertCommented:
Ohh, just noticed you accepted it again.. THAT was not the idea...
I was not fishing for an "A" I was asking you to not give "C" and since you figured it out you did not have to award points.

I will ask CS to paq and refund your points.

Michel
0
 
PAQ_ManCommented:
Question Closed, 500 points refunded.
PAQ_Man
Community Support Moderator
0
 
drdarbyAuthor Commented:
Sorry about the confusion, I believe I understand the grading now and more about the logistics surrounding this forum.
0
 
Michel PlungjanIT ExpertCommented:
No problem...
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now