Dynamic scrolling text for overflowing text display

Here's a scenario I'm facing: Let's say I have three div tags, each 100 pixels wide:

<--- DIV WIDTH --->
Text in div 1
Text in div two, it overflows
Text in div three
<--- DIV WIDTH --->

Currently, I've set the following CSS for the divs:

width:100px;
overflow:hidden;

I want the text to scroll like a marquee if it overflows so all the content can be seen after waiting a bit. However, I only want the marquee effect to show when the text actually overflows.

Can anyone advise on how to achieve this?

Thanks, Tony

javascriptjqueryhtmlcssmarquee

Answer №1

Addressing the conditional aspect

Javascript Solution

var element = $('your specific element');
if (element.get(0).scrollWidth > el.width()) {
    // Insert your marquee script here
}

Answer №2

$(document).ready(function(){
  $container = $('div.container');
  $container.children().each(function(){
    if ($container.width() < $(this).width()) {
      $(this).wrap('<marquee>');
    }
  )});
});

This jQuery code should help create a scrolling effect for elements within a container. Feel free to try it out and let me know if you encounter any issues.

Answer №3

Solving the conditional part is a simple task, as suggested by rennat.

If you are able to utilize jQuery, consider structuring your HTML to be compatible with the jQuery marquee plugin. Then, simply execute $(element).marquee(); to activate the animation. This method offers advantages over using the '<marquee>' tag, as it solely relies on div elements with appropriate CSS properties (thus avoiding the usage of non-standard tags).

Answer №4

Unfortunately, this solution may not be suitable for the issue at hand since it involves plain text within a div element. However, if this is just a simplified scenario, you could consider implementing overflow: auto to introduce a horizontal scrollbar in case of overflow.

(It's worth noting that the marquee tag is non-standard in HTML.)

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

Tips for automatically updating a MaterialUI DataGrid in a React JS application

Here's an overview of my current project: Users can save rows from deletion by clicking checkboxes (multiple rows at a time). Any unchecked records are deleted when the user hits the "purge records" button. I received some guidance on how to achieve ...

javascriptreactjsreact-nativematerial-ui

Altering the text and functionality of buttons with jQuery

A JavaScript method I have is designed to change based on the state of a button, which is determined by using indexOf("..some text.."). $('#add1').click(function(){ if($(this).text().indexOf("Add Me!")) { $.ajax({ type: & ...

javascriptjqueryhtml

How can I display input only when a checkbox is selected? React with Next.js

I'm trying to figure out how to handle this task, but I'm a bit confused on the approach. I would like to display the promo code field only when the checkbox (I have a promo code) is checked. Additionally, it would be ideal to reveal this field ...

javascriptreactjsnext.js

Generate a collection of div elements as child nodes

I'm working on a project where I have multiple rows with input fields. My goal is to create an array for each row that contains the values of the inputs. For example, if I have 3 rows and the values of 'input1' are 1, 'input2' are ...

javascriptjqueryhtmlarrays

Issues with toggling the menu on Angular 14 using Bootstrap 4.6

I am struggling with implementing a menu on the header section of my Angular 14 homepage. The menu I added is not opening as expected. Even after trying various working menu samples from the internet, I couldn't get it to work in my project. Here are ...

htmlangulartwitter-bootstrapbootstrap-4angular14

Sizing labels for responsive bar charts with chart.js

I'm encountering a problem with my bar chart created using chart.js - the responsive feature works well for some elements but not all. Specifically, the labels on my bar chart do not resize along with the window, resulting in a strange look at smaller ...

javascriptjquerychart.js

Update the database with the information provided by this model using Ajax technology

There is an Ajax function in my View that I am having trouble with. function Save() { var Url = '@Url.Action("UpdateCaseDetails", "CaseDetailView")'; var frm = $("form"); var data = JSON.stringify(frm.serializeArray()); $.ajax({ ...

jqueryajaxjsonasp.net-mvc

The :before pseudo element doesn't seem to be functioning properly on Internet Explorer 11

The following code works well in Chrome and Mozilla, but unfortunately does not function correctly in IE11. I am attempting to apply a background color on hover to a div with the class .border-green, however this functionality is failing specifically in ...

cssstylesheet

Using pg-promise to insert a UUID into the database

I am in the process of setting up a new server and I want each customer to have a unique UUID identifier. My goal is to allow the customers name, parent company, and internal id to be input through a web interface, while the UUID is generated on the server ...

javascriptpostgresqlexpress

Having difficulty utilizing the square bracket [ in Angular, despite it being a common feature in standard HTML

Yesterday, while working on my Angular code, I encountered an issue using the rbrack and lbrack. It turns out that Angular throws an error when these are used. Snippet of the code: &lt;gen-pack-comp &lbrack;email&rbrack;="email"" ...

htmlnode.jsangularangular-cli

Contrasting outcomes between calling the await method in a function and directly logging the same method

My code consists of a for loop that iterates through an array. With each iteration, I intend for the loop to extract the value from a specified webpage and then display it in the console. for (let i = 0; i < jsonObjSplit.length; i++) { console ...

javascriptnode.jsasync-awaitpuppeteer

How to access a variable in an Angular Factory's callback function from outside the factory

Here's a look at the structure of My Factory: .factory('MyFactory', function(){ return: { someFunction: functon(firstParam, secondParam, resultObject) { $http.get(url).success(resultObject); } ...

javascriptangularjsionic-framework

The webpage fails to display Vue Bootstrap radio buttons in a filled state

Hey there! I've been working on a project using vuejs and bootstrap-vue-3. My goal is to allow users to print data about the company, so I created a print scss file for that purpose and added some styles. However, I'm facing an issue where the ra ...

javascriptbootstrap-4vuejs3

Clickable list element with a button on top

Within my web application, there is a list displaying options for the user. Each 'li' element within this list is clickable, allowing the user to navigate to their selected option. Additionally, every 'li' element contains two buttons - ...

javascripthtmlcss

CSS: Obtain a button and align it to the "a" element

Feeling a bit puzzled: https://i.stack.imgur.com/S7xKh.png In the image, there's a span button labeled "Navigation einblenden", and a span a tagged as "Suche". Despite styling them identically: In the CSS snippet, dispOpts is the parent span's ...

htmlcss

Removing CSS from an Ajax combobox

When using an Ajax Combobox, I encountered a problem with the background color changing on hover. The combobox is bound to a datasource with specific conditions for defining the background color, but upon hovering over a list item, the color changes. I wan ...

cssasp.netajax

Error: Trying to access property '1' of an undefined value is not allowed

I'm experiencing a problem that I can't seem to solve. The issue arises after the user logs in. I am using useEffect() to retrieve the user data by using a secret token from localstorage. Everything seems to be working fine - the data, the secret ...

javascriptreactjsarraysreact-hooks

When HTML elements are unable to access functions defined in separate JS files

After successfully resolving the issue, I am still curious as to why the initial and second attempts did not work: The problem lay with an HTML element connected to an event (myFunction()): echo '<button class="btn remove-btn" onclick="myFunction( ...

javascripthtml

The seamless integration of React.js with HTML

My friend and I are beginners in the world of programming, with a solid grasp of html, CSS, and JavaScript. We're currently collaborating on a small project where we aim to create a chat system. While researching resources for our project, we came acr ...

javascripthtmlreactjs

When padding is added on an MVC 5 page, the Bootstrap 4.1.1 class option for rounded-circle becomes distorted

Incorporating VS 2017 and bootstrap 4.1.1 into an MVC 5 page, I am facing a challenge in adding right-side padding to an image without distorting the circular shape of the image, as shown below. When I apply the padding, the circle becomes warped, but remo ...

c#asp.netcssasp.net-mvc-5bootstrap-4