What are some effective ways to utilize a marquee?

I am looking for a way to duplicate the <a> tag within a DIV named box so that the text is displayed on a continuous line marquee without any breaks. As I am new here, please feel free to ask for more information in the comments. Thank you.

$('.box').marquee({
  duration: 20000,
  gap: 0,
  delayBeforeStart: 0,
  direction: 'left',
  duplicated: true
});
.box {
  margin: auto;
  width: 100%;
  height: 50px;
  overflow: hidden;
}

.box1 {
  margin-top: 14px;
  position: relative;
}

.box1 li {
  list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js"></script>
<div class="box">
  <ul class="box1">
    <li>
      <a>TEXT MARQUEE</a>
      <a>TEXT MARQUEE</a>
    </li>
  </ul>
</div>

javascriptjqueryhtmlcssmarquee

Answer №1

After some investigation, I have identified the issue at hand: when the scrolling text reaches the left border of the box, the content inside gets duplicated.

In order to achieve a seamless endless marquee effect, the text would need to span 100% width of the screen, which can be challenging to accomplish.

If you constrain the width of the box, it could work effectively. Take a look at this example:

$('.box').marquee({
  duration: 4000,
  gap: 20,
  delayBeforeStart: 0,
  direction: 'left',
  duplicated: true
});

$('.box2').marquee({
  duration: 4000,
  gap: 20,
  delayBeforeStart: 0,
  direction: 'left',
  duplicated: true
});
.box {
  margin: auto;
  width: 300px;
  font-size: 20px;
  line-height:1.2;
  height: 1.2em;
  overflow: hidden;
  margin-bottom: 1em;
}
.box--1 {
  background: rgba(255,0,0,.2);
}
.box--2 {
  background: rgba(255,0,0,.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js"></script>
<div class="box box--1">
  <a>TEXT MARQUEE</a>
</div>

<div class="box box--2">
  <a>the longer the text gets the better this endless scrolling works</a>
</div>

I am unsure if there are superior JavaScript solutions for this problem, but ideally, you would want a duplication each time the last one touches the right border of the box. This way, there will be a continuous flow of new text entering, regardless of its length.

Cheers!

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

When transferring files using formData via axios, the server is unable to interpret the data

`` In my quest to figure out how to send a file from a client using an input type=file to an API, I came across the suggestion to use formData. Following some examples I found, I implemented this approach, but upon checking the data on the server side, it ...

javascriptnode.jsreactjs

What could be causing this table to exceed its dimensions by 2 pixels?

Why is the height of this table 102px instead of 100px? Is there another CSS attribute that needs to be set besides: table { border-spacing:0; border-collapse:collapse; } For example, check out this example link. ...

css

How can one leverage Node JS to effectively manage events?

Is it considered a best practice to utilize events for communication between functions within ExpressJS? If so, what is the proper way to send arguments along with my emit event? ...

javascriptnode.jsexpress

Can you point me in the right direction for declaring the ImageObject format in Angular?

To create an Image Slider similar to the one shown here, I need to load images from a source. However, I'm unsure about where exactly in the file (possibly in the component.ts?) I should declare them: imageObject: Array<object> = [{ ...

htmlcssangularslideshow

What is the process for connecting personalized toggle controls to a checkbox input field?

I have created a custom slide toggle control to enhance the functionality of my checkboxes in the app. You can check out the controls by following this link: http://codepen.io/spstratis/pen/fJvoH Currently, I am looking for a way to connect these switche ...

javascriptjqueryhtml

Generate an HTML table from a CSV file with no success in finding a working solution

I came across a solution here However, I am having trouble implementing it. It seems like there might be a basic issue. Can someone provide some advice? This is the snippet of PHP code on my server: $ cat table.php <?php echo "<html><body&g ...

phphtmlcsv

Dynamically insert ID into a div element

Hi there, I have an ID "network" in the div class "parent". Inside this parent div, there is a for loop that generates multiple IPs. Whenever I click on a specific parent IP, it should call its child div. How can I dynamically generate IDs so that I can pl ...

jqueryhtmljquery-ui

When the browser is refreshed, jQuery will automatically scroll the window down

I created a div that matches the height and width of the window to simulate a "home screen." When scrolling down to view the content, everything works fine. However, after refreshing the browser, it automatically scrolls back to where you were before. I wa ...

jqueryhtmlcssscroll

I'm curious as to why IPC messages from one menu item in Electron can successfully reach my window, but when sent from a different menu item, they do not seem to

I am working on a straightforward application that requires running a background process to fetch some data. I want to display a loading indicator while the data is being retrieved, but I am encountering difficulties implementing this feature. My approach ...

javascriptnode.jselectron

Obtain information from express middleware

I am currently working on a project using node.js. As part of my application, I have developed a middleware function that is triggered whenever a GET request is made. This occurs when someone visits the home page, profile page, or any other page within my ...

javascriptnode.jsexpressmiddleware

Guide on showcasing an icon adjacent to the input fields once they have been validated successfully with the help of jquery plugins

I am struggling with the code below which is supposed to validate the SubmitForm when the button is clicked. It successfully changes the textboxes to red and displays an error message with a symbol if validation fails. However, I am wondering how I can sho ...

jqueryhtmlcssjquery-validate

Guide to designing a Bootstrap footer that appears only at the bottom of the page and not at the top

I am facing a challenge with my website where some pages have a lot of elements causing scrolling, while others have only a few elements without scrolling. My goal is to have a footer that stays at the bottom of the page regardless of the page size. The f ...

htmlbootstrap-5

Can one extract request data from an rxjs-timeout-error?

Currently, I am working on enhancing our error handling system, particularly in providing better descriptions of errors in both general and testing environments. My focus is on an Ionic app, but I am facing challenges with the rxjs timeout method. One asp ...

javascriptangularrxjs

How to save HTML content in a variable for future use in Next.js

When working with Next JS, my code resembles something like this: function Test() { return ( <section> <div>Test</div> </section> ); } Now, imagine that I want to have multiple entries here, gen ...

javascripthtmlnext.js

Discovering the right place to establish global data in Nuxt JS

Exploring the world of NuxtJS today, I found myself pondering the optimal method for setting and retrieving global data. For instance, how should a frequently used phone number be handled throughout a website? Would utilizing AsyncData be the most effecti ...

javascriptvue.jsnuxt.js

Adding or removing a class using Jquery based on the condition of form validation

I am facing a problem with the following code that adds and removes classes to bring the next stage of the form. The form progresses step by step where certain fields need to be filled before validation on the next button, followed by filling other fields. ...

javascriptphpjquery

Should data be stored in HTML5 using data-* attributes?

I have encountered a scenario like this: The screen contains numerous 'Rocks', each with attributes such as weight, points, and velocity. When a rock is clicked, its attributes are displayed. Currently, I have stored all the rocks' attribu ...

javascripthtml

Tips for choosing the parent's parent and applying a width of 100%

I am currently facing some challenges while creating a simple navigation bar from scratch. I am struggling with setting specific widths, especially wanting .navbarDropBtn to align its width with .navbarMain. However, it seems to only match the width of the ...

htmlcss

Hide the button when you're not actively moving the mouse, and show it when you start moving it

How can I make my fixed positioned button only visible when the mouse is moved, and otherwise hidden? ...

javascripthtmlcss

Is there a way to incorporate an external JavaScript file into a .ts file without the need for conversion?

I have an external JavaScript file that I need to utilize in a .ts file without performing any conversion. Does anyone know how to use it within TypeScript without the need for conversion? ...

javascriptangulartypescriptionic-frameworkionic4