Click on the lines to highlight them with your mouse or use the arrow keys

Previously, I inquired about how to Highlight lines of text on mouseover. However, after using it for some time, I discovered a few drawbacks. One issue was that users would often lose track of their place when switching tabs or moving the mouse to perform other tasks.

As a solution, I am interested in achieving the same result with mouse clicks, or even better, by utilizing the arrow keys on the keyboard.

Since I lack experience with jQuery, I'm not sure if this is feasible. If anyone is aware of a script that can accomplish this or is willing to create one for me, I would greatly appreciate it!

Thank you in advance for any assistance provided!

javascriptjqueryhtmlcsshighlight

Answer №1

Check out this jQuery snippet below 

$(document).ready(function() {
  $(".textWrapper").click(function(e) {
      var relativePos = e.pageY - this.offsetTop;
      var textRow = (Math.ceil(relativePos / 18) * 18) - 18;
      $(".highlight", this).css("top", textRow + "px");
      $(".highlight", this).show();
  });
});

And don't forget the link to the jsFiddle http://jsfiddle.net/abc123/

When it comes to using arrow keys, determining the number of lines in a paragraph can be a bit more complex.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhancing the camera functionality of the HTML <input> tag for iPhone and Android devices

I am currently working on a mobile web application that requires access to the device's camera. I am aware that this can be achieved using the following code: <input type="file" accept="image/*" capture="camera" /> The code snippet above suc ...

javascripthtmlcssbrowser

dividing the content of a division into sections similar to a PDF file

I am currently working on a resume application and I am looking for a way to display the HTML preview of the resume in multiple divs or automatically insert a horizontal row if the content exceeds the height of the div. The goal is to make it look like sep ...

angularjshtmlcss

How to position Angular Component at the bottom of the page

I have been working on my angular application and recently created a footer component that I want to stay at the bottom of the page like a typical footer. The footer component is included in the default app.component.html file, which makes it visible on th ...

htmlcssangular

Improving the Performance of Your Image Slider in ReactJS

Currently, I am working on creating an image carousel from scratch using ReactJS. Here is the progress I have made so far: https://codesandbox.io/embed/optimistic-elbakyan-4vzer?fontsize=14&hidenavigation=1&theme=dark When you drag the mouse to c ...

javascriptcssreactjsanimationcarousel

What is the reason these two pieces of JavaScript code are not the same?

When using jQuery 1.4.2 and Firefox 3.6.6: This script generates three divs that write messages to the Firebug console as expected. However, if you uncomment the loop and comment out the manual lines of code, it stops working correctly - hovering over any ...

javascriptfirebugclosuresjquery

Modify the text color of the fixed navigation when hovering over specific divs

Sorry if this question has already been asked. I've searched online but haven't come across a satisfactory solution. On my website, I have different background colors - blue and white. The text color in my navigation is mostly white, but I want i ...

javascripthtmlcssscrolltextcolor

Overlaying a div on top of an iframe

Struggling to make this work for a while now. It seems like a small issue related to CSS. The image isn't overlaying the IFrame at the top of the page as expected, it's going straight to the bottom. Here is the code snippet: .overlay{ width: ...

javascriptjqueryhtmlcssiframe

Building a bridge between React Native and MongoLab

I am currently in the process of developing a React Native application for iOS that will require querying a database. After some research, I have chosen to use MongoLab. Upon reviewing MongoLab's documentation, it is suggested to utilize the MongoDB D ...

javascriptnode.jsmongodbreactjsreact-native

Conceal certain elements from being printed by the client side on a website

Imagine logging into social media but not wanting to see the number of "likes" on posts as the page loads. For example, when you open a photo from a friend and underneath it shows "Somefriend, someotherfriend, and 123123 persons like this", you may want t ...

htmlbrowser

Is it feasible to include a URL in a jQuery array and perform various validations on it?

I am new to jQuery/JS and need some guidance. I have a loop in jQuery where I want to perform certain checks, specifically to see if a URL has already been processed or not. The data for the loop is sourced from JSON. The approach I am considering involve ...

jqueryarraysjsonloopseach

Passing data to a callback function in jQuery

I am struggling with passing a variable to a jquery function: function showImage(type, top, url) { $.getJSON('<?php echo $_SERVER['PHP_SELF']?>',{ type: type, top: top, img: url, action: 'imginfo' ...

javascriptjqueryjson

Element in SwipeableDrawer of Material UI is repositioned on mobile devices while scrolling

Utilizing Material UI's SwipeableDrawer component, I have successfully created a bottom drawer with a fixed action button container. The container is positioned using position: fixed; bottom: 0;. While this setup works effectively on desktop browsers, ...

cssreactjsmaterial-ui

Encountering an error when utilizing Firefox version 35 with protractor

When running my Angular app scenarios with Chrome, everything runs smoothly. However, I encounter a halt when trying to run the scenarios on Firefox version 35.0b6. Any help would be greatly appreciated. Thank you in advance. I am currently using Protract ...

javascriptangularjsfirefoxseleniumprotractor

The collapse feature of Bootstrap 4 Navbar is unresponsive

Struggling with the Bootstrap 4 navbar collapse feature issue. In the mobile viewport, instead of collapsing, it displays items as a vertical list. Here is the code snippet: <html> <body> <!-- Navbar --> <nav class="navbar na ...

javascriptbootstrap-4navbar

Why does the final value appear when passing an incrementing counter as a prop to multiple React Components created in a loop?

I am currently unraveling the concept of closures in JavaScript. Within this code snippet, I am cycling through the values of the 'items' array using a foreach loop. I have defined a let variable named "count" outside the scope of the loop. Afte ...

javascriptreactjstypescriptclosures

Compatibility with various browsers for the style 'cursor:pointer'

While exploring, I stumbled upon some CSS attributes that can turn the cursor into a hand: For IE - style="cursor: hand;" For NS6/IE6 - style="cursor: pointer;" Cross Browser - style="cursor: pointer; cursor: hand;" Interestingly, I noticed that Stack O ...

css

Converting Axios URL Parameter to Array of Strings in ExpressJS

How to Send a GET Request using axios: await this.client.get('/endpoint', { params: { query: ['max', 'kevin'] } }) This will result in a URL that looks like this: Request GET /endpoint?query[]=max&query[]=kevin Any sugge ...

javascriptrestexpressaxiosexpress-validator

Setting up a plan for executing Javascript server side scripts

Can JavaScript be executed server-side? If I attempt to access a script , can it be scheduled to run every four hours? Would most web hosts allow this, or is it considered poor webmaster practice? The main goal is to activate my website's webcrawler/ ...

javascriptnode.jsweb-hostingserverside-javascript

What are some tips for dynamically updating the Toolbar in React Material UI through programming?

One of the challenges I'm facing is with a Material UI Select component that I use to navigate between several pages. While this component is shared across all pages, I have specific Toolbar components on certain pages that I would like to programmati ...

javascriptreactjsmaterial-ui

Why do div and span display differently across browsers and how can we standardize their appearance?

My CSS file is currently displaying correctly in FF12, but the layout is different in Safari and Chrome. If images are not loading, you can view a live demo at This is how it should appear and does in FF: However, this is what happens in Safari and Chro ...

cssgoogle-chromebrowserdivider