Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Getting perfect mouse clicks is slightly tricky, I'll share the most bulletproof mouse code that I have created thus far. It works on all browsers will all manner of padding, margin, border, and add-ons (like the stumbleupon top bar).</p> <pre><code>// Creates an object with x and y defined, // set to the mouse position relative to the state's canvas // If you wanna be super-correct this can be tricky, // we have to worry about padding and borders // takes an event and a reference to the canvas function getMouse(e, canvas) { var element = canvas, offsetX = 0, offsetY = 0, mx, my; // Compute the total offset. It's possible to cache this if you want if (element.offsetParent !== undefined) { do { offsetX += element.offsetLeft; offsetY += element.offsetTop; } while ((element = element.offsetParent)); } // Add padding and border style widths to offset // Also add the &lt;html&gt; offsets in case there's a position:fixed bar (like the stumbleupon bar) // This part is not strictly necessary, it depends on your styling offsetX += stylePaddingLeft + styleBorderLeft + htmlLeft; offsetY += stylePaddingTop + styleBorderTop + htmlTop; mx = e.pageX - offsetX; my = e.pageY - offsetY; // We return a simple javascript object with x and y defined return {x: mx, y: my}; } </code></pre> <p>You'll notice that I use some (optional) variables that are undefined in the function. They are:</p> <pre><code> stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingLeft'], 10) || 0; stylePaddingTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingTop'], 10) || 0; styleBorderLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderLeftWidth'], 10) || 0; styleBorderTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderTopWidth'], 10) || 0; // Some pages have fixed-position bars (like the stumbleupon bar) at the top or left of the page // They will mess up mouse coordinates and this fixes that var html = document.body.parentNode; htmlTop = html.offsetTop; htmlLeft = html.offsetLeft; </code></pre> <p>I'd recommend only computing those once, which is why they are not in the <code>getMouse</code> function.</p> <hr> <p>You should really have a single function hat handles mouse clicks, calls <code>getMouse</code> once, and then goes though a list of objects, checking against each one with the x and y. Pseudocode:</p> <pre><code>function onMouseDown(e) { var mouse = getMouse(e, canvas) var l = myObjects.length; var found = false; // Maybe "deselect" them all right here for (var i = 0; i &lt; l; i++) { if (distance sqrt to myObjects[i]) { found = true; myObjects[i].ManageClickOrWhateverYouWantHere() } break; } // And now we can know if we clicked on empty space or not! if (!found) { // No objects found at the click, so nothing has been clicked on // do some relevant things here because of that // I presume from your question this may be part of what you want } } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. PODetect mouse click location within canvas
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USSimon Sarris
    1. USSimon Sarris
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PODetect mouse click location within canvas
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COOk, I have managed to get it so that if the last object in the array has 'found=true' something happens, but now I need to make it so that if any of the objects in the array has 'found=true' something happens as at the moment, the !found function is overwriting everything...
      singulars
      1. PO
      1. USJon_091
    2. COthe `!found` part shouldn't ever fire if `found` is true. Can you put your code on jsfiddle.net ?
      singulars
      1. PO
      1. USSimon Sarris
    3. COyou'll have to excuse the poor coding... had to take quite a big chunk out so it would n't be too confusing :) http://jsfiddle.net/fpVL4/
      singulars
      1. PO
      1. USJon_091
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload