html onclick for dictionary mode implementation

Question

Html newbie here..

I am trying to implement a webpage that pops up meanings of some selected technical words as shown below. I have a list of words with their meanings available in csv format. What can be done to automatically pick meanings for available list of words from the list?

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {

}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.show {display:block;}
</style>
</head>
<body>

<h2></h2>
<p>Hands-On with <div class="dropdown">
<button id="myBtn" class="dropbtn">Ultrahaptics'</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Feel of touch without wearing devices</a>

  </div>
</div>
 gave us a feel of technology of future.
</p>

<script>
// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};

/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

</body>
</html>

PS:Things like

<a title="Feel of touch without wearing devices">Ultrahaptics'</a>

works only with mouse pointers, not with touch device. So looking for a solution that works on touch devices too.

score 0 · Answer 1 · edited May 23 '17 at 12:31

0

I can see your using javascript. I would recommend using jQuery-CSV

this would help you read your csv using javascript. And you can visit this link as this is somewhat related to your question. Evans Answer

edited May 23 '17 at 12:31

Community

1
1

answered Jan 26 '16 at 08:31

John Roca

1,204
1
14
27

score -1 · Answer 2 · answered Jan 23 '16 at 15:49

-1

Using jQuery, this would be a simple case of:

$('.dropbtn').click(function(){
    $(this).siblings('.dropdown-content').toggleClass('hide');
});

With the following CSS:

.dropdown-content{
  position:absolute;
  background:#000;
  color:#fff;
}
.hide{
  display:none;
}

And I've simplified your HTML:

<p>
  Hands-On with
  <span class="dropdown">
    <button type="button" class="dropbtn">Ultrahaptics'</button>
    <a href="#home" class="dropdown-content hide">Feel of touch without wearing devices</a>
  </span>
  gave us a feel of technology of future.
</p>

You can see it in action here: https://jsfiddle.net/a73t8L4m/

You may also be interested in using the dfn tag, but this would make your HTML look a little different.

answered Jan 23 '16 at 15:49

rybo111

12,240
4
61
70

Even in this case, I have to manually update every occurance of technical words. There are 1000s of such occurances. I'm looking to automatically search technical words and show their meanings from csv file.Not necessarily a dynamic solution, even a static solution would be fine. I can run the update whenever there is update in csv file or article. – niko Jan 24 '16 at 02:06
@niko The easiest thing to do would be to use a database like MySQL to store your data, and a language like PHP to display it. – rybo111 Jan 24 '16 at 12:05
@niko also, your question started by mentioning CSS. What you are asking for has nothing to do with CSS. – rybo111 Jan 24 '16 at 12:11

html onclick for dictionary mode implementation

2 Answers2