StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Maybe i don't understand your idea completely, but i wrote some code.</p> <p>It works very simple. We bind two events "click mouseover" on #mypointer and also on h1 (or any other selector). When the event fires on #mypointer we check every h1 element to match it's position with position of #mypointer and if match -- trigger the event on matched element.</p> <pre> <code> "use strict"; /*global $*/ function getElementCoordinates(el) { return { left: el.offsetLeft, right: el.offsetLeft + el.offsetWidth, top: el.offsetTop, bottom: el.offsetTop + el.offsetHeight }; } </code> </pre> <pre> function checkIntersection($el) { var pointer = getElementCoordinates($('#mypointer')[0]); var element = getElementCoordinates($el[0]); if ((pointer.left >= element.left && pointer.left = element.left && pointer.right = element.bottom && pointer.bottom = element.bottom && pointer.top <code> $(function () { $('#mypointer').live('click mouseover', function (e) { //here write selectors you want to check for collision $('h1').each(function () { if (checkIntersection($(this))) { $(this).trigger(e.type); return false; } }); }); $('h1').live('click mouseover', function (e) { $("#output").html(e.type + ' fired on ' + e.target.nodeName); }); }); </code> </pre> <p>Sorry, parser "eat" checkIntersection function, so full code available on <a href="http://www.everfall.com/paste/id.php?263utdc1nmqy" rel="nofollow noreferrer">http://www.everfall.com/paste/id.php?263utdc1nmqy</a></p> <p>wbr, Roman.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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