moving text on the screen using the mouse drag function

I am attempting to design a text block with precise dimensions for both width and height. In the event that the text exceeds these dimensions, I desire the functionality to drag the text horizontally in order to reveal the remainder of the content (by clicking on the text and moving it left or right). Currently, when I try to do this, the text is selected instead of being dragged. I have observed some websites achieving this using flash, but I believe there must be a simpler method utilizing CSS or jQuery.

javascriptjqueryhtmlcss

Answer №1

Follow these steps to implement dragging text using Jquery UI's draggable() function:

HTML

<div id="container">
         <p>
          "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod                                                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud       exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
     </div>

css

          div{

               width:150px;
               height:150px;
               overflow:hidden;
               border:1px solid grey;

             }

Jquery--

                var container = document.getElementById("container");

                if (container.offsetHeight < container.scrollHeight) {

                   $('p').on('click',function(){
                   $(this).css("cursor","move");
                   $(this).draggable();
                   });

                 }

View the demo on Fiddle

Answer №2

Exploring a potential solution might involve delving into the realm of mobile JavaScript frameworks like KendoUI, jQuery Mobile, and others.

An alternate approach could entail overlaying a div atop the text and designating it as the draggable element.

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

The TypeScript compiler is indicating that the Observable HttpEvent cannot be assigned to the type Observable

Utilizing REST API in my angular application requires me to create a service class in typescript. The goal is to dynamically switch between different url endpoints and pass specific headers based on the selected environment. For instance: if the environmen ...

javascriptangulartypescript

Filter a list generated in real-time according to both the unique identifier and the text entered in a search box

WORKING $(document).ready(function() { $("#submit").click(function() { $.ajax({ url : "/vmstatus/", type : "POST", dataType: "json", ...

javascriptjqueryhtmlajax

What is the best way to create a trimmed edge around an input field?

I'm looking to design an input element that has a border which changes when the input is focused. Here's how I want the inputs to behave: Input without focus When the user focuses on the input or fills it out, I want the label to move up and t ...

javascripthtmlcssborder

Leveraging Nextjs Link alongside MUI Link or MUI Button within a different functional component (varieties)

Currently in my development setup, I am utilizing Next.js (10.2) and Material-UI (MUI) with Typescript. In the process, I have implemented a custom Link component: Link.tsx (/components) [...] On top of that, I have created another iteration which functi ...

javascriptreactjstypescriptnext.js

My webpage's `div` element is not loading properly when using the `.click(function()`, but magically works

Personal Website Issue Encountering a problem with a hidden div not fully loading when triggered by an .click(function(). After researching the issue and attempting both $(document).ready(function() and window.onload, my problem persists. IMPORTANT: The ...

jqueryloading

When I click the submit button in HTML PHP, the text in the text field disappears. How can I make sure the text stays

I am facing an issue with the functionality of my form's submit button. When I click the button, the text in the text field disappears, but I need it to remain for another button that requires it. These two buttons are part of different functions, and ...

phphtmlbuttonsubmittextfield

JavaScript on Ruby on Rails stops functioning in js.erb file

I have encountered an issue with pagination using AJAX in a view. Initially, I had two paginations working perfectly fine with their respective AJAX calls. However, when I tried to add a third pagination (following the same method as the previous two), it ...

javascriptjqueryruby-on-railsrubyajax

A collection of items that mysteriously affix themselves to the top of the page as

Unique Context In my webpage, I have a specific div element with the CSS property of overflow: auto. Within this scrolling div, there is structured content like this: <h3>Group A</h3> <ul> <li>Item 1</li> <li>I ...

phpjavascriptjqueryhtmlcss

jQuery's error function triggered even after a successful AJAX request

I need assistance with my WordPress site contact form, as I want it to submit without refreshing the page. Currently, the form sends the email successfully, but I added an error function in case it fails. However, now the error function is being called eve ...

jqueryajax

Transforming jQuery into vanilla JavaScript in order to create a customized dropdown select functionality

I am struggling with converting jQuery code to pure JavaScript for a custom select element. https://codepen.io/PeterGeller/pen/wksIF After referencing the CodePen example, I attempted to implement it with 3 select elements. const select = document.get ...

javascripthtmljquery

A step-by-step guide to dynamically adding HTML content on a button click using AngularJS

Can HTML content be added on Button Click event using AngularJS? Here is the code from my index.html: <div class="form-group"> <label for="category"> How Many Questions Do You Want to Add? </label> <div class="col-sm-10"& ...

javascriptangularjs

Automatically activate click events based on modifications in certain div classes - must be repeated in a loop

When a user makes changes within the .ap-create-story-panel-wrap div and then clicks outside of that specific div, I want to trigger a button click in my function. I am currently using the data-panel attribute as the selector for the container variable. I ...

jqueryhtmlcss

I'm looking to fetch my post request with JavaScript - does anyone know how to

In my current setup, I have two main projects. The first project involves using Node.JS for handling data transfer tasks. jsonobj = JSON.stringify(generateMockData) xhrToSoftware.send(jsonobj); xhrToAPI.open("POST", "http://127.0.0.1:8000/pa ...

javascriptnode.jsdjango

Show the checkboxes' names listed in an array

I am having trouble displaying the names of my checkboxes using the foreach statement below. Currently, all I see is "on" for each checked box. I have included the code for one of the checkboxes and I am looking to see if there is anything I can modify i ...

phphtmllaravelcheckbox

Adjusting the transparency of a Div element as you scroll

Before you get mad, let me clarify that I have combed through countless resources and forums, but I still can't seem to crack this code. I whipped up a basic website to grasp the concept before applying it to a more intricate project. I've experi ...

javascriptjqueryhtmlcssfade

What is the method for defining the current date variable within a .json object?

When using a post .json method to send an object, I encounter the following situation: { "targetSigningDate": "2021-09-22T21:00:00.000Z" } The "targetSigningDate" always needs to be 'sysdate'. Rather than manually c ...

javascriptjsontestingpostmanpostman-pre-request-script

Utilizing Twitter API authentication to prevent hitting rate limits

Currently, I am implementing the Twitter API to showcase the most recent tweets from 4 distinct users on my webpage. It seems that once a certain number of calls are made, an error message appears stating "NetworkError: 400 Bad Request" and prevents the tw ...

javascriptajaxtwitter

regarding unfamiliar functions in code and their mysterious purposes

My journey learning Vue.js has been going well, but I've hit a roadblock. Can someone explain the meaning of _. in the following code snippet? ...

javascriptvue.js

Converting JSON formatting from Object to Array: A Comprehensive Guide

Encountering another issue with changing the JSON array output. Struggling to figure out why it's not rendering the other files. Providing a clearer explanation below: In my code snippet, when I use data[name] = {, each return name is rendered into ...

javascriptarraysjsonnode.js

Events bound to JSX elements created in an array map are not being triggered by React

My current task involves working on a compact react + typescript (1.6) application designed for editing slideshows. The functionality of the app is straightforward. A sidebar on the left displays all existing slides, and upon clicking, a canvas appears on ...

javascriptreactjstypescript