I've been tasked with converting a textbook into a website for my teacher, and I've encountered an issue. Within a div element, there is text in a foreign language. Certain words need to be clickable, triggering a pop-up box with their translation. I'm unsure how to implement this feature.
Appreciate any guidance!
If you want to implement a jQuery modal dialog widget, you can do so by following these steps:
Firstly, create a JSON object to store words and their meanings like this:
var messages = {
"lorem": "Explanation about Lorem.",
"dolor": "Explanation about dolor."
};
Next, structure your markup in a way that makes the words distinguishable:
<div class="content">
<span>Lorem</span> ipsum <span>dolor</span>.
</div>
<!-- This will be used by the jQuery dialog widget. -->
<div id="dialog" title=""></div>
I have enclosed 'Lorem' and 'dolor' within span containers.
To make the spans look like links using CSS, you can use the following style:
.content span {
text-decoration: underline;
cursor: pointer;
}
Finally, utilize jQuery to handle the functionality of displaying the meaning when a word is clicked:
$(".content").on("click", "span", function(e) {
e.stopPropagation();
var $this = $( this ),
_text = $this.text();
var dialogContent = messages[_text.toLowerCase()];
if(dialogContent && dialogContent.length > 0) {
$( "#dialog" ).dialog({
"modal": true,
"title": _text
}).html(dialogContent);
}
});
You can view a demo of this implementation here.
For more information on jQuery's Dialog Widget API, visit here.
I hope this guide helps you with your implementation.
Create a new object with properties that match those of the translation items. When an element is clicked, select the property of the object that corresponds to the translated text, and display the value of that property in an alert.
var translations = {
"hola": "hello"
};
var elements = document.getElementsByTagName("a");
Array.prototype.slice.call(elements).forEach(function(element) {
element.onclick = function(event) {
event.preventDefault();
alert(translations[this.hash.slice(1)])
}
})<div>
text <a href="#hola">hola</a>
</div>Currently, I am working on implementing cancellation of axios calls in my project. After reviewing the axios documentation, it appears to be quite straightforward, which can be found here. To begin, I have defined some variables at the top of my Vue compo ...
Code: console.log(propertyName); console.log(eval(this.state.propertyName)) console.log(this.state.DriverFirstName); Output: DriverFirstName undefined fsdfds I am attempting to access a variable defined by a string value (propertyNa ...
I am currently developing an application to monitor my expenses using javascript, nodejs, express, and handlebars as the templating engine. Within the app, I have a "list" div that displays all of my expenses. (There is an add button next to the list, not ...
I've created a webpage with multiple cards displayed in the main section. Due to the large number of cards, only a few are visible at a time. My goal is to design a scrollable feature for these cards. To achieve this, I included the overflow: scroll p ...
I currently have an HTML table with 4 columns: SKU Group, Group_ID, Edit button, and Delete button. My focus at the moment is on implementing the delete functionality. I want it so that when the delete button is clicked, a confirmation box appears. If "OK" ...
I found a helpful tutorial on creating an expandable list using Angular. It's working fine, but I wanted to add an animation when the div expands or collapses. I tried adding a class with a transition in the max-height property, but it didn't wor ...
On my homepage header, there are login and register buttons. However, on wide screens, these two buttons appear without any space between them. It's only when the screen size is smaller that they collapse and create space. I'm looking for a way ...
I am working with an AngularJS code and HTML. <input type="text" ng-model="selected" uib-typeahead="demos for demos in demo | filter:$viewValue | limitTo:8"> $scope.demo = ['demo-NV-enable','demo-NV-disable','demo-NV-shutdo ...
While using the react-notifications-component snack bar, I encountered an issue where my snack bar was appearing behind the pop-up. Is there a way to fix this with z-index? I tried using <ReactNotification style={{ zIndex: 10000 }}/>, but it didn&ap ...
I am seeking assistance in properly parsing the "MoreData" JSON file. Currently, I have a basic data table displaying first and last names reading from an external Git JSON file. When a row is clicked, the corresponding JSON data is retrieved and displayed ...
I have an idea for a questionnaire that includes questions and an interactive element at the end. At the completion of the questionnaire, there will be a button labeled "display answers" which users can click to reveal the correct responses. For example, ...
I am seeking a method to tally substrings of object values. In other words, instead of the entire object containing a string, I want it where one key equals a string. An effective Xpath in XSLT is: count(//v[contains(.,current-grouping-key())]) However, ...
Adding the microsoft-edge prefix to a URL (microsoft-edge:) will open the page in Edge, regardless of the browser being used for running the app. I am wondering if there is an equivalent prefix for Chrome and Firefox? Thank you in advance. ...
I am facing an issue with my layout consisting of 6 div tags divided into 2 rows of fixed height. Whenever I try to add a margin around the divs, the rightmost div gets pushed down to the next row. How can I solve this problem? HTML: <div class="contai ...
I am looking to create a dynamic table that filters rows based on user input in an input text box. Here is an example table: Row 1: Apples Row 2: Oranges Row 3: Bananas When a user starts typing in the text box, I want the rows to filter accordingly. ...
I am curious about the best approach to handling a response that contains various types of objects presented like this: [ {"nodeClass":"Entity", "text":"foo","entityfield":"booz"}, {"nodeClass":"User","username":"bar","userfield":"baz"} ] Each type of ob ...
I've created an html file called index.html that has an empty div which loads content from another html file named second.html using ajax. To enhance the user experience, I implemented a popup feature with an audio player using jqueryui when a butto ...
I am trying to dynamically load content in a Vue component based on a specific argument provided. Here is an example code snippet: ParentComponent.vue <Suspense> <div class="row g-0"> <div class="col-md-3"> < ...
Can someone help me figure out why I am unable to display JSON values on my modal using AngularJS? I can see the values in the console or alert message, but they won't show up on the modal dialog. Thank you in advance for any assistance. Checkout my ...
I have been working on a website to manage an SQL table and I encountered a situation where I needed to reload the page with new variables. To achieve this, I created a form named "rerouter" with hidden textareas and set the action to the current page (in ...