Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to show some custom menu on text selection?
In some text editors, when you select the text, it shows the menu to edit texts and provides functionalities like justifying text, aligning text, increasing the text size, changing colour, etc. Microsoft word is the best example of it. In Microsoft word, when you select any text, it shows the custom horizontal menu to perform some actions on the text.
This tutorial will use JavaScript to create a custom menu on the text selection.
Syntax
Users can follow the syntax below to show some custom menu on text selection.
let coOrdinates = document.querySelector(".content").getBoundingClientRect();
let posX = clientX - Math.round(coOrdinates.left) + "px";
let posY = clientY - Math.round(coOrdinates.top) - 25 + "px";
In the above syntax, we get the coordinates of the content div. After that, we find the x and y position for the custom text menu. Next, we can change the position of the custom text menu using JavaScript.
Steps
Step 1 − In the HTML, create a div and add text. Also, create a custom menu and style it using CSS.
Step 2 − In JavaScript, use the addEventListner() method and when the ‘mousedown’ event occurs, get the coordinates of the clicked position and store them in the ‘clientX’ and ‘clientY’ variables.
Step 3 − When the ‘mouseup’ event triggers on the document, use the getSelection() method to get the selected HTML.
Step 4 − Use the toString() method to convert the HTML to text.
Step 5 − Check the text. If the text is empty, hide the custom menu.
Step 6 − If users have selected some text, get the coordinates of the selected text.
Step 7 − Define the ‘posX’ variable and store the horizontal position of the custom menu. Also, define the ‘posY’ variable to store the verticle position of the custom menu.
Step 8 − Set the left and top positions of the custom menu using the value of the ‘posX’ and ‘posY’ variables.
Example
In the example below, we have created the div element and added some text content. Also, we have created the custom menu and styled it using CSS. In the custom menu, we have added the copy and cut text.
In JavaScript, we have implemented the above steps to show a custom menu if users select some texts. In the output, users can try to select the text, and they will see a custom menu at the top of the text.
<html>
<head>
<style>
.hoverMenu { display: none; position: absolute; background: #a4a4a4; border-radius: 6px; height: 30px; }
.hoverMenu span{ color: #000; cursor: pointer; margin: 8px;}
</style>
</head>
<body>
<div class = "content">
<h2>Showing custom menu on text selection</h2>
<p>Select some text to see custom menu</p>
<p>TutorialsPoint is an online platform that provides free tutorials and resources on various programming languages, software tools, and technologies. </p>
<div class = "hoverMenu"> <span> Copy </span> <span> Cut </span> </div>
</div>
<script>
var clientX, clientY;
document.addEventListener("mousedown", function (event) { clientX = event.pageX; clientY = event.pageY;});
document.addEventListener("mouseup", () => {
let selectionFromDocument = document.getSelection();
let textValue = selectionFromDocument.toString();
var hoverMenu = document.querySelector(".hoverMenu");
if (textValue == "") { hoverMenu.style.display = "none";
} else {
// get coOrdinates of the content div
let coOrdinates = document.querySelector(".content").getBoundingClientRect();
// set the display style of the hoverMenu to block
hoverMenu.style.display = "flex";
// set the position of the hoverMenu
let posX = clientX - Math.round(coOrdinates.left) + "px";
hoverMenu.style.left = posX;
posY = clientY - Math.round(coOrdinates.top) - 25 + "px";
hoverMenu.style.top = posY;
}
});
</script>
</body>
</html>
Users learned to show some custom text menu on the text selection. Here, we have added only text in the custom text menu, but users can also add functionality according to requirements. For example, when we click on the copy text, it should copy it to the clipboard.
To show a custom menu on text selection, get the coordinates of the selected text, and set the position of the menu accordingly.
516 Views
To Continue Learning Please Login