Steps for retrieving the currently selected text inside a scrolled DIV

Question

Steps for retrieving the currently selected text inside a scrolled DIV

An imperfect DIV with text that requires a scroll bar

For example:

<div id="text" style='overflow:scroll;width:200px;height:200px'>

<div style='font-size:64px;'>BIG TEXT</div> 
Lorem Ipsum is simply dummy text of the printing and typesetting 
industry. Lorem Ipsum    has been the industry's standard dummy text ever  
since the 1500s, when an unknown printer took a galley of type and scrambled it 
to make a type specimen book. It has survived not only five centuries, but also 
the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets 
containing Lorem Ipsum passages, and more recently with desktop publishing software 
like Aldus PageMaker 
including versions of Lorem Ipsum.

</div>

As the scrollbar moves, the text changes (due to overflow:scroll), is it doable to only select the text currently visible?

Example: http://jsfiddle.net/cxgkY/15/

Updated: The content inside may have varying text sizes

javascript jquery html css dom

Answer 1

Answer №1

I have created a simple demonstration that should meet your expectations: click here (supports various sizes too). The concept involves dynamically generating individual span elements for each word, and then, upon scrolling the div, determining which spans are within view (based on their vertical position), thereby updating the selection range in the document. If you need further clarification, feel free to ask.

Answer 2

I have created a simple demonstration that should meet your expectations: click here (supports various sizes too). The concept involves dynamically generating individual span elements for each word, and then, upon scrolling the div, determining which spans are within view (based on their vertical position), thereby updating the selection range in the document. If you need further clarification, feel free to ask.

Answer 3

Answer №2

Uncertain about your request to choose only the text within the current viewport, but a potential solution could look like this:

var elem = $("#text"),
    txt = $(elem).text().split(' '),
    htmlContent = [],
    selectedText = '';

$.each(txt, function(index, element) {
    htmlContent.push('<span>'+element+'</span>');
});

elem.html(htmlContent.join(' '));

$('span', elem).each(function(index, element) {
    if ($(element).offset().top < elem.height()) {
        $(element).css('background', 'red');
        selectedText += $(element).text()+' ';
    }
});

FIDDLE

If the aim of this task is simply to showcase the text in another container element, you can achieve that by mimicking it with the following code:

$("#text").on('scroll', function() {
    $('#visible').html($(this).html()).scrollTop($(this).scrollTop());
});

FIDDLE

Answer 4

Uncertain about your request to choose only the text within the current viewport, but a potential solution could look like this:

var elem = $("#text"),
    txt = $(elem).text().split(' '),
    htmlContent = [],
    selectedText = '';

$.each(txt, function(index, element) {
    htmlContent.push('<span>'+element+'</span>');
});

elem.html(htmlContent.join(' '));

$('span', elem).each(function(index, element) {
    if ($(element).offset().top < elem.height()) {
        $(element).css('background', 'red');
        selectedText += $(element).text()+' ';
    }
});

FIDDLE

If the aim of this task is simply to showcase the text in another container element, you can achieve that by mimicking it with the following code:

$("#text").on('scroll', function() {
    $('#visible').html($(this).html()).scrollTop($(this).scrollTop());
});

FIDDLE

Answer 5

Answer №3

Here is an example that you can try out (Check out the DEMO link: http://jsfiddle.net/cxgkY/14/):

HTML:

<div id="text">
    <div id="wrapper">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

JavaScript:

$('#text').scroll(function () {
  var text = $(this).text();

  var begin = $(this).scrollTop() / 
      $(this).children('#wrapper').height();

  var end = begin + $(this).height() /
    $(this).children('#wrapper').height();

  var text = text.slice(text.length * begin, text.length * end);
  $('#visible').text(text);
});

Answer 6

Here is an example that you can try out (Check out the DEMO link: http://jsfiddle.net/cxgkY/14/):

HTML:

<div id="text">
    <div id="wrapper">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

JavaScript:

$('#text').scroll(function () {
  var text = $(this).text();

  var begin = $(this).scrollTop() / 
      $(this).children('#wrapper').height();

  var end = begin + $(this).height() /
    $(this).children('#wrapper').height();

  var text = text.slice(text.length * begin, text.length * end);
  $('#visible').text(text);
});

Answer 7

Answer №4

<div id="text">
    <p>Line 1</p>
    <p>Line 2</p>
    <p>Line 3</p>

</div>

One way to achieve this is by using the following code:

$(function(){
    var meanLineHeight = $('#text > p').first().outerHeight();

    var result = $('#result');

    $('#text').scroll(function(){
        var linesScrolled = Math.ceil(this.scrollTop/ meanLineHeight);
        console.log(linesScrolled);

        var linesToSelect = $('#text > p').slice(linesScrolled);
        linesToSelect.css('background-color', 'yellow');
    });
});

Check out the demo here

Answer 8

<div id="text">
    <p>Line 1</p>
    <p>Line 2</p>
    <p>Line 3</p>

</div>

One way to achieve this is by using the following code:

$(function(){
    var meanLineHeight = $('#text > p').first().outerHeight();

    var result = $('#result');

    $('#text').scroll(function(){
        var linesScrolled = Math.ceil(this.scrollTop/ meanLineHeight);
        console.log(linesScrolled);

        var linesToSelect = $('#text > p').slice(linesScrolled);
        linesToSelect.css('background-color', 'yellow');
    });
});

Check out the demo here

Steps for retrieving the currently selected text inside a scrolled DIV

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Display all the names of the files from various file inputs in a unified notification

What could be causing the malfunction of removeEventListener in my Nuxt application?

What is preventing the selected values of a dropdown element from being set?

Tips for implementing X-XSS-Protection: 1; mode=block in HTML

Clicking on a DIV using jQuery, with anchor elements

Trouble with AJAX communicating with PHP and not rendering fresh data

Establish the predefined date for the air-datepicker

JavaScript - Receiving alert - AC_RunActiveContent.js needed for this page to function

Using a CSS nth-child selector to eliminate the bottom margin of the final row

Leveraging Django's JSONResponseMixin for handling AJAX responses

Create a dynamically updating list using React's TypeScript rendering at regular intervals

Is there a way to invoke a function in an iframe from its parent?

Transferring data from a text area to a table with AngularJS

Importing GeoJSON data into Meteor's Leaflet

What is the best way to configure an EmailId validator in Angular 6 to be case insensitive?

Move your cursor over the top and bottom of the image to experience distinct effects

Unable to retrieve event data and integrate it into HTML using jQuery

The email verification process is experiencing technical difficulties

Directive fails to trigger following modification of textarea model

How can I eliminate the hover effect from a div element?