changeset 117:4be71cc75f64

on click now
author ht
date Sat, 23 Mar 2019 18:09:20 +0000
parents 45b039236dc0
children 93809520eb71
files findWord.js hoverDemo.html
diffstat 2 files changed, 15 insertions(+), 9 deletions(-) [+]
line wrap: on
line diff
--- a/findWord.js	Sat Mar 23 17:47:41 2019 +0000
+++ b/findWord.js	Sat Mar 23 18:09:20 2019 +0000
@@ -1,7 +1,7 @@
 // Thanks to https://stackoverflow.com/a/30586239 for word-finder
 $(function() {
   // Get the HTML in #hoverText - just a wrapper for convenience
-  var $hoverText = $("#hoverText");
+  //var $hoverText = $("#hoverText");
 
   // Get the full word the cursor is over regardless of span breaks
   function getFullWord(event) {
@@ -114,7 +114,7 @@
   }
 
   // Return the word the cursor is over
-  $hoverText.mousemove(function(e) {
+  $("p").click(function(e) {
     var word = getFullWord(e);
     if (word !== "") {
        var res=$("#result");
@@ -124,13 +124,20 @@
        //var relX = pageX - parentOffset.left;
        //var relY = pageY - parentOffset.top; 
        res.css("visibility","visible");
-       res.css("left",(pageX+10) + "px").css("top",(pageY+-50) + "px");
+       res.css("left",(pageX-10) + "px").css("top",(pageY-15) + "px");
        res.text(word);
     }
     });
-  $hoverText.mouseout(function(e) {
+  $("#result").mousemove(function(e) {
       $("#result").css("visibility","hidden");
     });
+  $("#result").click(function(e) {
+      alert(e.target.innerHTML + " clicked");
+      $("#result").css("visibility","hidden");
+    });
+//   $("p").mousemove(function(e) {
+//       $("#result").css("visibility","hidden");
+//     });
 });
 
 // Helper functions
--- a/hoverDemo.html	Sat Mar 23 17:47:41 2019 +0000
+++ b/hoverDemo.html	Sat Mar 23 18:09:20 2019 +0000
@@ -8,16 +8,15 @@
 .slavic { color: blue;}
 #result {top:10px;left:10px;}
 .floater { position: fixed; background-color:white; border:2px solid
-    black; padding:4px;}
+    black; padding:4px; visibility: hidden}
 .word { color:blue;}
   </style>
 <script
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="findWord.js"></script>
- <div id="bridge" class="floater"></div>
  <div id="result" class="floater"></div>
-    <h1>Hover demo</h1>
- <div id="hoverText">
+    <h1>Click demo</h1>
+ <div>
 <p><span class="kinovar"><span id="selection_index3337"
 class="selection_index"></span>По f7-мъ часЁ твори1тъ сщ7eнникъ начaло
 съ кади1ломъ и3 со свэщeю, цrкимъ двeремъ tвeрзєннымъ, и3 поeтъ:
@@ -55,7 +54,7 @@
     <address><a href="mailto:ht@inf.ed.ac.uk">Henry S. Thompson</a></address>
 <!-- Created: Sat Mar 23 17:06:33 GMTST 2019 -->
 <!-- hhmts start -->
-Last modified: Sat Mar 23 17:14:05 GMTST 2019
+Last modified: Sat Mar 23 17:48:39 GMTST 2019
 <!-- hhmts end -->
   </body>