javascript - Passing mouseover through element -


i'm working on regex-analyzer has syntax highlighting feature.

my site uses overlay of 2 contenteditable divs.

enter image description here

because of difficulty in getting cursor position , maintaining tags added , subtracted, decided best route have 2 contenteditable divs, 1 on top of other. first (#rinput) pretty plain. if not nuisance problems made me switch textarea, textarea. second (#rsyntax) gets value rinput , provides syntax highlighting. make sure both scrolled same position overlay perfect (however, use transparent (rgba(...)) font on rsyntax, if momentary sync-delay should occur, text still legible.)

in lower portion snapshot above, code of contenteditable rsyntax this:

<span class="cglayer">(test<span class="cglayer">(this)</span>string)</span>

while rinput, positioned on top, contains this

(test(this)string)

the problem method want offer alt-tooltips (or javascript version) when user mouses over. when user mouses on rinput, pass mouseover event elements of rsyntax.

i'd mousing on (test ... string) show "capturing group 1", while mousing on (this) show "capturing group 2", or if (?:test), "non-capturing group".

the terminology little tough because searching things "above" , "below" pulls lot of results have nothing z-index.

i did find css property pointer-events sounded ideal briefest moment doesn't allow filter pointer events (set rinput receive clicks, scrolls, pass mouseover through rsyntax , child-elements.

i found document.elementfrompoint may offer solution i'm not sure how. thought try document.getelementbyid('rinput').getelementfrompoint(mousex,mousey), function not available child elements.

theoretically, hide rinput on mousemove, using settimeout put quickly, , tooltip should appear when mousing on child elements of rsyntax, doesn't seem best solution because don't want rsyntax clickable. clicks should go rinput.

it's possible disable mouseover wizardry while rinput has focus, tooltips rsyntax won't work, , though haven't tried method, i'm not sure if passing click event rsyntax rinput position cursor properly.

is there method make work?

update

the best solution move syntax highlighter rsyntax iframe because can pass elementfrompoint() without flickering div vast improvement.

$(document).on("mousemove", "#rinput", function (e) {     $element = $(document.getelementbyid('frsyntax').contentdocument.elementfrompoint(e.pagex,e.pagey));     if ($element.attr("id") != "frsyntax" && $element.attr("id") != "rsyntax" && $element.attr("title") && $element.attr("title").length) {         $mother.find(".dashed").removeclass("dashed")         $element.addclass("dashed")         $("#syntip").html($element.attr("title"))         $("#syntip").css({"top": e.pagey+10, "left": e.pagex, "display": "inline-block"})     } else {         $mother.find(".dashed").removeclass("dashed");         $("#syntip").hide()     } })

and @ beginning of $(document).ready(..., added this

$('#frsyntax').load(function(){     $mother = $("#frsyntax").contents();     //frsyntax name of iframe.     $syntax = $mother.find("#rsyntax") });

first solution

i'll leave here in case it's more wants.

from further research, feel approach mousemove wizardry making element disappear, finding element below, document.elementfromposition, , popping in.

i'm still looking advice if has better option.

the trouble "flickering" cause mousemove , mouseover keep triggering, needless. created variable log coords , apply change when mouse moved.

$(document).on("mousemove", "#rinput", function (e) {     if (holdmouse != (e.pagex + "," + e.pagey)) {         $("#rinput").hide();         element = $(document.elementfrompoint(e.pagex,e.pagey));         if (element.attr("id") != "rinput" && element.attr("id") != "rsyntax") {             $(".classes, .cglayer").css("border-bottom","none");             element.css("border-bottom","2px dashed black")             $("#syntip").html(element.attr("title"))             $("#syntip").css({"top": e.pagey+10, "left": e.pagex, "display": "inline-block"})             holdmouse = e.pagex + "," + e.pagey         } else {             $(".classes, .cglayer").css("border-bottom","none");             $("#syntip").hide()         }         $("#rinput").show()     } })

Comments

Post a Comment

Popular posts from this blog

shopping cart - Page redirect not working PHP -

im trying redirect user when click "empty cart". redirect working "add cart" not "empty cart". ideas great. in main .php file set current url seen $current_url = base64_encode("http://$_server[http_host]$_server[request_uri]"); then below cartaction.php file handles actions such "add cart" , "empty cart" <?php session_start(); include_once 'config.php'; //add item in shopping cart if(isset($_post["add"])) { $product_id = $_post["product_id"]; //product id $return_url = base64_decode($_post["return_url"]); //return url $qty = $_post["qty"]; $product = $mysqli->query("select product_name, unit_price, unit_quantity products product_id = '$product_id'"); $obj = $product->fetch_object(); if(!isset($_session['products'])) { $_session['products'] = array(); } if(array_key_exists($product_id...
Read more

php - How to modify a menu to show sub-menus -

i have custom php menu made person, displays categories menu. however, need display subcategories well. tried adding hierarchical parameter didn't work. hoping assistance! here code: <ul> <?php /* categories wp e-commerce products */ $wpec_product_categories = get_terms( 'wpsc_product_category', 'hide_empty=0&parent=0&exclude=298'); $myarray = array(); foreach($wpec_product_categories $wpec_categories){ $myarray[$wpec_categories->term_id]['name'] = $wpec_categories->name; $myarray[$wpec_categories->term_id]['slug'] = $wpec_categories->slug; $myarray[$wpec_categories->term_id]['term_id'] = $wpec_categories->term_id; } foreach($myarray $wpec_categories1){ $wpec_term_name = $wpec_categories1['name']; $wpec_term_slug = $wpec_categories1['slug']; $wpec_term_id = $wpec_categories1['term_id']; echo '<li> <a href="'.get_page_link(19)....
Read more

python - Installing PyDev in eclipse is failed -

unable read repository @ http://pydev.sf.net/updates/content.xml. sun.security.validator.validatorexception: pkix path building failed: sun.security.provider.certpath.suncertpathbuilderexception: unable find valid certification path requested target i installing pydev in eclipse using python, doesn't install successfully. gives above error. happened? how solve error? i had error when trying install on laptop behind corporate firewall. couldn't tell setup of firewall, not sure of root cause. i got passed error installing pydev eclipse when out behind firewall. another way got around have eclipse on non-firewalled machine, install pydev eclipse, , copy whole eclipse directory non-firewalled machine firewalled machine. there better way, , way fix properly, didn't have time work out firewall doing. this on windows 7 machine (yeah know) not work *nix versions installed through package manager yum or apt.
Read more