Is there a way to overlay a div on a particular line within a p element?

Question

Is there a way to overlay a div on a particular line within a p element?

Within this paragraph lies a collection of text encapsulated by a < p > tag. When this content is displayed on the page, it spans across 5 lines. My objective is to creatively style and position a < div > tag in order to highlight a specific line without requiring any alterations to the original < p > tag or its inner content. Ideally, I aim to achieve this using jQuery.

The HTML markup appears as follows:

<p>one fish two fish red fish zoo fish fifth fish</p>

Upon rendering, the output presents itself in this format:

one fish
two fish
red fish
zoo fish
fifth fish

My intention is to overlap a transparent red div on the third line which contains "red fish".

I have not attempted any solutions yet and currently lack innovative ideas.

In response to Matt Burland's inquiry: I am tasked with devising a function that can identify an element P along with a specified line number, subsequently placing a colored box over that corresponding line upon being rendered.

The content within the paragraph could feasibly span various numbers of lines when displayed.

Fortunately, the window size remains constant, alleviating one aspect of concern.

As for additional functionality, it must be contingent upon the existing DOM structure of the webpage. While I possess the capability to add a div tag, my options for manipulation are relatively limited.

javascript jquery html css

Answer 1

Answer №1

TRY IT OUT

JAVASCRIPT

$paragraph = $('p').first();
$paraHeight = $paragraph.height()/5;
$paraTop = $paragraph.offset().top + (2*$paraHeight);
$paragraph.after('<div id="IvedonenothingandImalloutofideas" style="height:'+$paraHeight+'px;top:'+$paraTop+'px">');

CSS

p {
    outline:1px solid #ccc;
    width:60px; 
}

#IvedonenothingandImalloutofideas {
    background-color:rgba(255,0,0,0.2);
    width:60px;
    position:absolute;
}

Answer 2

TRY IT OUT

JAVASCRIPT

$paragraph = $('p').first();
$paraHeight = $paragraph.height()/5;
$paraTop = $paragraph.offset().top + (2*$paraHeight);
$paragraph.after('<div id="IvedonenothingandImalloutofideas" style="height:'+$paraHeight+'px;top:'+$paraTop+'px">');

CSS

p {
    outline:1px solid #ccc;
    width:60px; 
}

#IvedonenothingandImalloutofideas {
    background-color:rgba(255,0,0,0.2);
    width:60px;
    position:absolute;
}

Answer 3

Answer №2

It's not the best approach to handle it this way. As others have suggested, using a list element is a more appropriate solution. However, if you must preserve the paragraph structure, you can adjust the line-height and strategically position a div or overlay element.

CSS:

line-height: 22px;

JS:

var pHeight = $('p').height();
var lineHeight = parseInt($('p').css('line-height'));
var selectedLine = 3;
$('#overlay').css('top', -Math.abs(selectedLine * lineHeight));

Check out the demonstration here: http://jsfiddle.net/JVxdJ/

Answer 4

It's not the best approach to handle it this way. As others have suggested, using a list element is a more appropriate solution. However, if you must preserve the paragraph structure, you can adjust the line-height and strategically position a div or overlay element.

CSS:

line-height: 22px;

JS:

var pHeight = $('p').height();
var lineHeight = parseInt($('p').css('line-height'));
var selectedLine = 3;
$('#overlay').css('top', -Math.abs(selectedLine * lineHeight));

Check out the demonstration here: http://jsfiddle.net/JVxdJ/

Answer 5

Answer №3

If you're looking to maintain consistency in formatting and keep the original <P> unchanged, one option is to clone it - select the text you want to highlight and overlay the cloned version on top:

HTML

<p id="text">one fish two fish red fish zoo fish fifth fish</p>

CSS

#text {
    width:50px;
}

.highlight {
    background-color:red    
}

JS

var $text = $('#text');
var match = "red fish";

var $newtext = $text.clone().html($text.html().replace(match, '<span class="highlight">' + match + '</span>'))

$newtext.appendTo('body').offset($text.offset())

Demo: http://jsfiddle.net/j4UfM/1/

You can easily remove the highlighted section as needed.

Answer 6

If you're looking to maintain consistency in formatting and keep the original <P> unchanged, one option is to clone it - select the text you want to highlight and overlay the cloned version on top:

HTML

<p id="text">one fish two fish red fish zoo fish fifth fish</p>

CSS

#text {
    width:50px;
}

.highlight {
    background-color:red    
}

JS

var $text = $('#text');
var match = "red fish";

var $newtext = $text.clone().html($text.html().replace(match, '<span class="highlight">' + match + '</span>'))

$newtext.appendTo('body').offset($text.offset())

Demo: http://jsfiddle.net/j4UfM/1/

You can easily remove the highlighted section as needed.

Is there a way to overlay a div on a particular line within a p element?

Answer №1

Answer №2

Answer №3

Similar questions

Is it necessary to have n_ if I've already set up lodash?

React code is displaying as plain text and the components are not being rendered properly

Triggering a targeted action upon the user's click on any HTML element

User information in the realm of website creation

monitoring the HTML code post-editing

Ways to position a button at the bottom of a Bootstrap card

There seems to be an issue with React-hook-form and material-ui not retaining value changes in the onBlur() method

Customize and adjust the default color for dark themes in Material-UI

Error: Unable to locate module '@/components/Header' in Next.js project

CRUD operations are essential in web development, but I am encountering difficulty when trying to insert data using Express

Unable to extract query parameters from URL using Express JS as req.query returns an empty object

jQuery's AJAX functionality may not always register a successful response

Encountering issues with Stylus when trying to compile the `@font-face

When hovering over the menu, the sub-menu is displayed and the content slides downwards. Is there a way to prevent the content from sliding down and have the sub-menu overlap the

Utilize the PHP variable HTTP_USER_AGENT to identify and analyze the user's browser

The Canvas Clear function is malfunctioning; the items in the array are not being deleted

Acquiring HTML form data using JavaScript

Enable the input field once the checkbox has been marked

What is the proper way to handle a 504 response header in an AJAX request using jQuery?

If I utilize npm in Visual Studio Code, where can I find the installation location of my