Adjust the position of a textarea on an image using a slider

Currently, I am exploring how to creatively position a textarea on an image. The idea is to overlay the text on the image within the textarea and then use a slider to adjust the vertical position of the text as a percentage of the image height. For instance, if the slider is set at 100%, the text should align with the bottom of the image while staying within its boundaries.

img {
width: 510px;
height: 720px;
}

.wrapper {
position: relative
}

label {
position: absolute;
left: 48px;
top: 12px;
}

textarea {
background: transparent;
outline: none;
border: none;
resize: none;
line-height: 122%;
letter-spacing: -0.01em;
min-height: 100px;
overflow-y: hidden;
}
<div>
<input type="range" min="1" max="100" value="1" id="range">
</div>

<div class="wrapper">
  <img src="https://image.shutterstock.com/image-photo/still-life-glass-objects-on-600w-1731010606.jpg"/>
  <label>
    <textarea>Lorem ipsum lorem ipsum lorem ipsum lorem</textarea>
  </label>
</div>

I have been brainstorming various approaches for achieving this effect, but so far nothing has stood out. Any suggestions or examples that can be achieved using vanilla JavaScript would be greatly appreciated.

javascripthtmlcss

Answer №1

To prevent the text from overlapping with the image, you can adjust the slider range to match the height difference between the image and the textarea:

(() => {
  const img = document.querySelector(".wrapper > img");
  const slider = document.querySelector("#range");
  const imgText = document.querySelector("#img-text");
  
  document.addEventListener("input", function() {
    slider.max = img.clientHeight - imgText.clientHeight;
    imgText.style.top = `${slider.value}px`;
  });
})()
img {
  width: 510px;
  height: 720px;
}

.wrapper {
  position: relative;
}

label {
  position: absolute;
  left: 48px;
  top: 12px;
}

textarea {
  background: transparent;
  outline: none;
  border: none;
  resize: none;
  line-height: 122%;
  letter-spacing: -0.01em;
  min-height: 100px;
  overflow-y: hidden;
}
<div>
  <input type="range" min="1" max="100" value="1" id="range">
</div>

<div class="wrapper">
  <img src="https://image.shutterstock.com/image-photo/still-life-glass-objects-on-600w-1731010606.jpg" />
  <label id="img-text">
        <textarea>Lorem ipsum lorem ipsum lorem ipsum lorem</textarea>
      </label>
</div>

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

Step-by-step guide on saving an array to localStorage using AngularJS

Currently working on constructing a shopping cart. My goal is to include the array invoice in localstorage for future reference. I suspect there may be some flaws with this particular approach. angular.module('myApp', ['ngCookies']); ...

javascripthtmlangularjscookiestore

Deciphering a JSON Array in JavaScript to extract specific components

I have a brief snippet for a JSON array and a JavaScript function that currently returns a single argument: <!DOCTYPE html> <html> <body> <h2>JSON Array Test</h2> <p id="outputid"></p> <script> var arrayi ...

javascriptarraysjsonstringparsing

What happens when the user closes a notification in GetUIkIt 3?

Is there a way to detect when a UIKit notification has been closed? The UIkit notification plugin () mentions that it has a close event. Can this be utilized for notifications triggered programmatically as shown below? e.g. UIkit.notification({ mess ...

javascriptgetuikit

Swap two pairs of elements in an array in a random order

I have a list of team members and also 2 substitute players: team = Samson, Max, Rowan, Flynn, Jack subs = Struan, Harry I am facing a challenge in randomly swapping the 2 subs into the team. The difficulty lies in ensuring that only these 2 elements are ...

javascriptarraysgoogle-apps-scriptgoogle-sheets

Executing multiple commands using Node.js TCP communication

I have established a connection to a serial device via the internet using an ethernet to serial device. The communication is facilitated through a small node.js application. The provided code retrieves the necessary information: var net = require('ne ...

javascriptnode.jstcp

Guide on implementing gradient animation effects in a React component

How can I implement gradient animation effects like this example in a React component using inline CSS? I need to utilize the CSS-based gradient animation effects shown below directly within the React component. Are there any specific packages available ...

cssreactjs

Avoid sudden page movements when validating user input

After successfully implementing the "Stars rating" feature from https://codepen.io/462960/pen/WZXEWd, I noticed that the page abruptly jumps up after each click. Determined to find a solution, I attempted the following: const labels = document.querySelect ...

javascriptcss

default selection in AngularJS select box determined by database ID

Here is the scenario: ... <select ng-model="customer" ng-options="c.name for c in customers"> <option value="">-- choose customer --</option> </select> .... In my controller: $scope.customers = [ {"id":4,"name":"aaaa", ...

javascriptangularjs

Execute Jquery ajax only on the initial invocation

When I am using ajax post in jQuery to build a portion of a page, I am encountering an issue where it only runs once. Below is the code snippet I am working with: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery ...

javascriptjqueryhtmlajax

Validate the Vuetify data table by retrieving data with a fetch request

I have integrated a v-data-table into my project to display data pulled from the backend. The data comes in the form of item IDs. How can I efficiently match the incoming IDs with the object IDs in the categories and show the corresponding category names i ...

javascriptvue.jsvuetify.jsvue-tables-2

Ways to verify if an element includes a specific class in JavaScript

When the mouse hovers over each paragraph within the DIVs with the "change" class, the font color should turn red, and revert back to black when the mouse is not on them. Here's my current code: var paragraphs = document.getElementsByTagName('p& ...

javascripthtml

Javascript code that enables me to specify the type of weather

My intention with this code was to create unique characteristics for different weather types and randomly select one by generating a random number. I defined 11 different weather types as objects of the Weather class. I then implemented a getWeather funct ...

javascripthtml

Animated jQuery carousel with a timer countdown feature

Currently, I am developing a jquery slider/carousel to display various promotions. I am seeking a method to indicate the time left until the next promotion appears. Similar to the flash promo on this website: Do you have any suggestions? ...

javascriptjqueryflash

Retrieve the JSON element from a Backbone model by its unique identifier

I'm diving into Backbone for the first time and I'm facing difficulties making it work smoothly with a JSON data file. Here's how my model looks: window.Test = Backbone.Model.extend({ defaults: { id: null, name: null, }, url: f ...

javascriptjsonbackbone.js

Storing a token in NodeJS using JavaScript

We currently have a mobile single-page application built using HTML/CSS/NodeJS. The functionality of this app requires numerous API calls, all of which require a bearer token for authorization purposes. This bearer token is simply a string value that we ge ...

javascriptnode.js

The value of req.files consistently shows as undefined

My issue is with req.files consistently returning undefined. Despite attempting connect-multiparty, body-parser, and express-fileupload, I can't seem to make it work with express-fileupload instead of multer. Can anyone help me troubleshoot this probl ...

javascriptnode.jsexpressexpress-fileupload

Encountering issues with the Sequelize Model.prototype.(customFunction) feature malfunctioning

While attempting to define a customFunction within the Sequelize model, I encountered an error: TypeError: user.getJWT is not a function at User.create.then (/projects/test/a/app/controllers/UserController.js:22:29) Below is the code snippet from ...

javascriptnode.jsexpresssequelize.js

The vertical alignment of the button text with SVG is not properly aligned

I'm facing a challenge in vertically centering text in a button while also using SVG. The text is centered properly when the SVG is removed. How can I maintain the SVG size and still achieve vertical text centering? https://i.sstatic.net/PJRtR.png ...

css

Challenges with rendering text in Three.js

We are currently working on a project in three.js and facing difficulties when it comes to loading fonts onto our text elements. Our approach involves using the TextGeometry object for rendering fonts and the typeface js converter to incorporate new fonts ...

javascriptthree.js

Utilizing BeautifulSoup to Extract Links

Currently, I am extracting cricket schedules from a specific website using Python's Beatiful Soup library. The webpage I am scraping corresponds to the following URL: www.ecb.c0.uk/stats/fixtures-results?m=1&y=2016 This particular link displays ...

pythonhtmlbeautifulsoup