[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 636
  • Last Modified:

Highlighting using OnMouseMove: Problem with flickering etc

I'm working on a project where a client's employee will upload an image or a product that has several parts on the image (i.e. a phish or Cadd drawing) and then the page will redirect to a webpage where they can set hotspots "on the image" (hotspots are for linking product information).  I recently started working on how they would highlight the areas they want to hotspot (mouse points will be recorded in a database later).  Right now the page sets an invisible div to visible and moves it to where the user moused down (onMouseDown used in body tag) and then an onMouseMove (in body tag) that is supposed to continuously change the div width and height (using offsetX, offsetY).  OnMouseUp, div disappears.

My problem, as you can see on the test site at http://www.weblcs.com/test/ , is that while my solution mostly works, it seems to flicker or change between 2 different boxes... as if there was another div set up who's size was dependant on the clientX, clientY positioning.

Here's the code:
==========
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT>
var dragging = false;
function makeHighlight() {
      if (dragging) {
            document.getElementById("frgdLayer").style.width = event.offsetX;
            document.getElementById("frgdLayer").style.height = event.offsetY;
            status = event.clientX+', '+event.clientY+'  -  Width: '+event.offsetX+', Height: '+event.offsetY;
      } else {
            status = event.clientX+', '+event.clientY;
      }
}

function moveFrgdLayer() {
      document.getElementById("frgdLayer").style.visibility = "visible";
      document.getElementById("frgdLayer").style.left = event.clientX;
      document.getElementById("frgdLayer").style.top = event.clientY;
      dragging = true;
}

function onMouseRelease() {
      document.getElementById("frgdLayer").style.visibility = "hidden";
      document.getElementById("frgdLayer").style.width = 0;
      document.getElementById("frgdLayer").style.height = 0;
      dragging = false;
}
</SCRIPT>
</head>

<body onMouseMove="makeHighlight();" onMouseDown="moveFrgdLayer();" onMouseUp="onMouseRelease();">
<!-- Start Foreground Layer -->
<DIV id="frgdLayer" style="visibility:hidden; position:absolute; height: 0px; width: 0px; background-color:blue; z-index: 4100;"></DIV>
<!-- End Foreground Layer -->
</body>
</html>
0
drdarby
Asked:
drdarby
  • 4
  • 4
1 Solution
 
COBOLdinosaurCommented:
lol... that one almost stumped me.

event.offsetX and event.offsetY refer to the offset from the top left of the element that has focus when the event is fired when the mouse is move the scripting engine cannot keep up with it and so for some of the redraws it is in the body and so the width and height get calculated from the top left of the body.  That puts the mouse back in to the div and the next re-draw is fine.

That is the cause now all that is necessry is figuring out how to get rid of the effect.

Cd&
0
 
drdarbyAuthor Commented:
I fixed the problem by cheating a little - instead of placing the mouse events in the body tag, I made another div that was behind the foreground div (lower z-index) that had the mouse events (the foreground div has the events as well).  Then set both of them at the same top/left points and make the background 150 pixels wider and higher (or lower depending how you look at it) to ensure that when the mouse is moved quickly, it is almost always over one of these 2 divs.  Therefore, if the mouse event fires and instead of hitting the foreground div, it hits the one behind it and uses its clientX and clientY dimensions, which now are the same as the foreground dimensions.

Here's the code:
==========
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT>
var dragging = false;

function statusReport() {
      
}
function makeHighlight(statusOnly) {
      if (dragging) {
            if ((parseInt(event.clientY) >= parseInt(document.getElementById("frgdLayer").style.top)) && (parseInt(event.clientX) >= parseInt(document.getElementById("frgdLayer").style.left))) {
                  // Change background dimensions
                  if (statusOnly != "statusOnly") {
                        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() {
      // Make foreground layer visible
      document.getElementById("frgdLayer").style.visibility = "visible";
      // Set foreground and background layers according to OnMouseDown
      document.getElementById("frgdLayer").style.left = parseInt(event.clientX);
      document.getElementById("frgdLayer").style.top = parseInt(event.clientY);
      document.getElementById("bkgdLayer").style.left = parseInt(event.clientX);
      document.getElementById("bkgdLayer").style.top = parseInt(event.clientY);
      // Set flag to allow dragging
      dragging = true;
}

function onMouseRelease() {
      // 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;
      // Reinitiate background attributes
      document.getElementById("bkgdLayer").style.top = 0;
      document.getElementById("bkgdLayer").style.left = 0;
      document.getElementById("bkgdLayer").style.width = "100%";
      document.getElementById("bkgdLayer").style.height = "97%";
      
      // Set flag to not allow dragging
      dragging = false;
}
</SCRIPT>
</head>

<body onMouseMove="makeHighlight('statusOnly');" onMouseUp="onMouseRelease();">
<!-- Start Background Layer -->
<DIV id="bkgdLayer" onMouseMove="makeHighlight();" onMouseDown="moveLayers();" onMouseUp="onMouseRelease();" style="visibility:visible; position:absolute; height: 97%; width: 100%; z-index: 1;"></DIV>
<!-- End Background Layer -->

<!-- Start Foreground Layer -->
<DIV id="frgdLayer" onMouseMove="makeHighlight();" onMouseDown="moveLayers();" onMouseUp="onMouseRelease();" style="visibility:hidden; position:absolute; height: 0px; width: 0px; background-color:blue; z-index: 4100;"></DIV>
<!-- End Foreground Layer -->
</body>
</html>
0
 
COBOLdinosaurCommented:
Glad you got it sorted out.  

Cd&
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.

 
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
 
COBOLdinosaurCommented:
The issue is not one of the actual grade but of communication and understanding.  Cgrade are a sign of failure.  It is the lowest grade that can be given; and indicates failur on the part of the expert.  B indicates that the expert helped but did not necessarily solve the problem. A indicates a number of possibilities. Good reasons for an A. The problem is solved by the expert; there is no solution but the expert found a workaround; there is no solution, but the expert expended great effor t to try and solve it anyway.  The expert gave a definitive answer, even though it is not what the questioner wanted to hear.  Bad reasons for an A.  The questioner is too lazy to do proper evaluation; the user is intimidated by the experts; the questioner does not want to post a comment to indicate the reason for less than an A.

BTW,

AS and editor with responsibility to insure that grade reflect content, I modified it to B. If you do not feel it has value; I will delete it for you , but The C grade would be incorrect.

Cd&
 
0
 
drdarbyAuthor Commented:
Thank-you for the clarification on the grading criteria.  I do not want to insult anyone or give grades in inappropriate ways and I now see with that grading criteria that I would have incorrectly marked the question that was given a C grade.  Again, my appologies, I did not mean to mark it as a failure grade.

I must ask for clarification concerning being on this forum... I believe I was asked to remove myself from the forum - this does upset me because I have found no better forum to get help from.

drd
0
 
COBOLdinosaurCommented:
>>>I believe I was asked to remove myself from the forum
Where? and by whom?

Cd&
0
 
drdarbyAuthor Commented:
Maybe I was mistaken, I now think I was just asked to get a refund for the specific question I asked.  I didn't understand what was being asked of me and that's the only thing that made sense.

My appologies for all of the problems.  I believe we can make this a closed issue - seems everythings the way it was before.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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