What is the correct method for managing marquees in the present day?

Now that the marquee HTML tag is no longer supported, I'm curious about the best way to achieve a similar effect. There are various jQuery and Javascript solutions out there, but I'm interested in knowing if there's a new standard for creating marquees.

I've come across CSS snippets like:

overflow-style: marquee-line;
marquee-style: line;

However, these don't seem to work consistently across all browsers. While the marquee effect may be considered outdated, there are still certain use cases where it's necessary. For example, my Income Ticker on my website really needs to scroll to make the most of the available screen space.

jqueryhtmlcssmarquee

Answer №1

Creating a marquee in HTML is not as straightforward as it used to be without any styling. However, having full control over the display of each object ultimately leads to a better user experience. While marquees may not always be recommended for good UX, tweaking widths and indents can help achieve the desired effect across different browsers.

To get started, you can use the following code snippet as a template:

<div class="marquee">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</div>

.marquee {
    width: 300px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 50s linear infinite;
}

@keyframes marquee {
    0%   { text-indent: 27.5em }
    100% { text-indent: -105em }
}

You can view a live example here.

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

Implementing a clickable image using an anchor tag in JavaScript

I need to enhance my image tag in JQuery by adding an anchor tag alongside it. How can I accomplish this using JavaScript? Here is what I attempted: var imgg = document.createElement("img"); imgg.className='myclass'; $( ".myclass" ).add( "<a ...

javascriptjqueryhtml

What should be done if an image is not wide enough to stretch it to match the width of the window?

When the image is not full screen, it looks fine but when it's viewed in full screen, there's a white area on the right side which is likely due to the image not being large enough. Is there a way to automatically stretch the image so that its wi ...

javascripthtmlcssimagenext.js

HTML: Base64 image not displaying properly due to incorrect height specification

I have a straightforward base64 image that I am having trouble with. The issue is that only the upper half of the image is displaying. If I try to adjust the height using the "style" attribute in the img tag: style="height: 300px;" it shows correctly. Ho ...

javascripthtmlcssimagesvg

Display a button within a table depending on the content of adjacent cells

Below is the code snippet I'm currently working with: <tbody *ngIf="packages"> <tr *ngFor="let package of packages"> <td class='checkbox'> <label class="css-control css-co ...

javascripthtmlangular

Design an interactive listbox with both HTML and Angular that allows for multiple selections

I am trying to implement a multi select listbox with keyboard navigation capability. Currently, this is the HTML layout I have: <div> <div *ngFor="let tag of tags; let index=index" [class.selectedRow]="rowIsSelected(tag.id) ...

htmlangular

Generating dynamic links in HTML

I've been stuck on this problem for a while now. What I'm trying to do is create a Django website that pulls in Twitch livestreams and displays them on different pages. It's a project I'm working on to learn how to use APIs in web appli ...

htmldjangoobject

Sharing CSRF token with CompoundJS using jQuery - A step-by-step guide

Within my application layout, I have my csrf-token rendered as a meta tag. <meta content="authenticity_token" name="csrf-param"> <meta content="28c5136f4ef175c620ead78cc6d9589b98be0b78" name="csrf-token"> I store the value of the csrf-token m ...

jqueryexpresshttp-postcsrfcompoundjs

Guide on incorporating an inline input and glyph icon within a table cell using Bootstrap 3

How do I align my glyph icon in the same line as an input in Bootstrap3? I've tried various classes but none seem to work. The glyph icon keeps displaying on a separate line because the input is too long. The only solution that works is manually setti ...

csstwitter-bootstrap-3

Tips for changing the click event of a button with .on/off

My approach for attaching and detaching event handlers is through on()/off(). HTML: <div id='load' class="UnfiledContainer"> <button onclick="loaded()">Try it</button> <p id="demo"></p> </div> JS: ...

javascriptjquery

Discovering modifications to CSS using selenium

Currently, I am working on an ajax form where CSS elements are dynamically changed. I am curious to know if it is feasible to verify these changes using Selenium. For example, checking if the background color changes from #ffffff to #000000 after clicking ...

cssselenium

utilizing class manipulation to trigger keyframe animations in react

Currently, I am delving into my very first React project. In my project, I have implemented an onClick event for one of the elements, which happens to be a button. The aim is to smoothly transition an image's opacity to 0 to indicate that the user ha ...

javascriptcssreactjs

Troubleshooting Flexbox in Internet Explorer 11: Issue with 100% width not functioning properly within nested flex containers with a 'column'

Is there a way to ensure that an image within nested flex containers has a width of 100% in IE11, even when the container has flex-direction: column? I've tried setting the width to 100% with a max-width of calc(100% - 0.1px), but unfortunately it doe ...

htmlcssflexboxinternet-explorer-11

When using AJAX, the image may not appear on the initial request but will display on subsequent requests

I encountered a peculiar issue where I am trying to display a loading spinner icon while making an AJAX request. Strangely, the spinner does not appear for the first request (such as after manually refreshing the page) but shows up for all subsequent reque ...

htmljquerycssajax

I am having trouble retrieving the information stored in an Array of Objects. Specifically, I am having difficulty accessing and iterating through each object using a for

Is there a way to extract data from an API individually and retrieve data from an Array? let {Array}=jsonData fetch("https://apis.ccbp.in/city-bikes?bike_name" + search, options) .then(function(response){ return response.json(); }) .then(funct ...

javascripthtmlcss

Having trouble with JQuery's $.post function not functioning on your web server?

I'm encountering an issue with my script that uses Ajax to send a request to my PHP file for updating a txt file. Interestingly, the script works perfectly fine on my localhost but fails to work on the webserver. Testing HTML code: <!DOCTYPE html ...

phpjqueryajax

problem encountered when converting SVG HTML into SVG paths

Recently, I came across an interesting SVG file depicting a question mark enclosed in a circle. Intrigued by its design, I wanted to extract the paths from this SVG image so that I could integrate it directly into my codebase. Following some online tutoria ...

htmlcsssvggimp

When you press the submit button, the screen automatically scrolls down but no action is taken

I'm currently utilizing Selenium WebDriver (Java) with the Firefox driver. Upon trying to click the 'Submit' button on a particular page, it only results in scrolling down the screen slightly. The button itself does not register the click, c ...

javascripthtmlseleniumselenium-webdriver

Activate a jQuery plugin on elements that are dynamically generated

Here is the code snippet I am using: $(".address-geocomplete").geocomplete({ country: "US", details: ".details", detailsAttribute: "data-geo" }); When these elements are loaded with the document, everything works smoothly. However, there seem ...

javascriptjqueryajax

Tips for transforming a table column into an input field to retrieve the value and id of the field?

I have a set of data stored in the table provided below. My goal is to convert the table cell into an <input/> field once it is clicked. Following that, I want to send both the value and the id of the <input/> via an ajax request. Is this achie ...

javascriptjquery

How to make an Ajax "POST" request to the server using jQuery or AngularJS without sending any parameter data

"Execute a 'POST' request to the server by using the code provided below However, the parameter data is not being sent to the server. I have attempted both the jQuery Way and var request = $.ajax({ url: baseUrl, type:'post', da ...

javascriptjqueryajaxangularjsiis