Tips on expanding the space between words in a scrolling "marquee" text

Looking for some assistance with my jQuery project involving a horizontal scrolling "marquee" text. I am currently trying to adjust the size of the gap between the phrases in the marquee. Here is an example with the phrase "HEY THERE".

jQuery(document).ready(function($) {
$('.marquee_text').marquee({
    direction: 'left',
    duration: 20000,
    gap: 0, //adjust this value
    delayBeforeStart: 0,
    duplicated: true,
    startVisible: true
});
});
.marquee_text {
    color: #000000;
    font-size: 10vw;
    line-height: 1em;
    font-weight: 800;
    font-family: "Alliance No 2", Sans-serif;
    position: relative;
    transform: translateY(-50%);
}

.marquee-container{
    overflow: hidden;
    height: 11vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.min.js"></script>

<div class="marquee-container">
<div class="marquee_text"> HEY THERE HEY THERE HEY THERE HEY THERE  </div>
</div>

javascripthtmljquerycss

Answer №1

One way to adjust the spacing between words is by utilizing the word-spacing property. While there isn't a specific property for nth word spacing, you can try this alternative approach:

Another option is to wrap the phrases in a span and apply a padding-right: 150px; to the span, or any desired padding value.

jQuery(document).ready(function($) {
$('.marquee_text').marquee({
    direction: 'left',
    duration: 20000,
    gap: 0,
    delayBeforeStart: 0,
    duplicated: true,
    startVisible: true
});
});
.marquee_text {
    color: #000000;
    font-size: 10vw;
    line-height: 1em;
    font-weight: 800;
    font-family: "Alliance No 2", Sans-serif;
    position: relative;
    transform: translateY(-50%);
    /*word-spacing: 2em;*/
}
span { /*if you don't use the word-spacing, you can put spans in between each phrase and add a padding-right */
padding-right: 200px;
}

.marquee-container{
    overflow: hidden;
    height: 11vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.min.js"></script>

<div class="marquee-container">
<div class="marquee_text"> <span>HEY THERE</span><span>HEY THERE</span><span> HEY THERE<span></span> HEY THERE  </div>
</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

What is the methodology behind stackoverflow's implementation of comments functionality?

I am looking to implement a feature comparable to the comment system on Stack Overflow for this website. The idea is to enable users to type in a text, click submit, and instantly see it displayed on the page without having to navigate away. It has to be ...

htmlajax

How can one HTML form be used to request a unique identifier from the user, retrieve a record from the database, parse it into JSON format, and then populate an HTML page form using the

As someone who isn't an expert in any specific coding language, I have a knack for piecing things together to make them work. However, my current challenge is stretching my technical abilities a bit too far. Here's what I'm trying to achieve ...

phpjavascriptjqueryhtmljson

Utilize the Tab feature effectively in Impress.Js

Currently, I have disabled the Tab key in Impress.js so that it only moves to the next slide. However, when I try to focus on links and delete this code to let it behave normally, Impress.js crashes. Has anyone found a workaround for this issue? Appreciat ...

javascriptcssimpress.js

Employing jQuery Mobile with MVC3 for seamless auto-submit functionality

When I remove jQuery Mobile, the code works perfectly! The form: @using (Html.BeginForm("SearchTown", "Home", FormMethod.Post, new { id = "TheForm1" })) { @Html.DropDownList("TownID", (SelectList)ViewBag.TownId, "Select a Town") } The Javascript: & ...

javascriptasp.net-mvcjquery-mobile

Tips for comparing two attributes using Simple HTML DOM libraries

I'm attempting to retrieve a very specific tag using Simple HTML DOM, and I need to check two attributes in order to do this. However, I am unsure of the correct syntax. Currently, my code looks like this: foreach($html->find("ul[class=someclass]" ...

phphtmlsimple-html-dom

Do Scss mixins have the ability to adapt to different screen sizes

In my CSS, I set different font sizes for different devices: For example: @media only screen and (min-width: 480px) and (max-width: 599px) { t-heading { font-size:14px; } } @media only screen and (min-width: 600px) { t-heading { font-size:24px; } } I ...

cssresponsive-designsass

Styling CSS variables uniquely

I have limited knowledge of HTML and CSS, so I am unsure how to search for a similar post on StackOverflow. My apologies if this is a duplicate question. I am looking to achieve the following: margin-horizontal { margin-left: value; margin-right: va ...

javascriptcss

employing JavaScript to present an image

Here is the image code I have: <img id="imgId" src="img/cart.png" style="display: none"/> After clicking a button, it triggers a JavaScript function to show the image document.getElementById("imgId").style.display = "inline" The image display ...

javascriptcss

Displaying live data from a spreadsheet directly on a sidebar

My goal is to extract data from another sheet in the same spreadsheet and present it as a dropdown selection in the sidebar. The code.gs file contains a function called getVisualData() that successfully retrieves the desired list: function getVisualData() ...

javascripthtmlgoogle-apps-scriptgoogle-sheetstemplate-engine

Struggling with proper vertical alignment using Flexbox and achieving center alignment

I've been using JavaScript for displaying dynamic text and images, but I'm facing some formatting issues. Currently, I'm utilizing display: flex to position the text and image next to each other, but I'm struggling with horizontal alig ...

htmljquerycss

Discover the secrets of extracting the ID from a MenuItem within a Menu

Table Ui with menu Struggling with fetching the correct user ID in the edit button The edit button for all users is only displaying the last user's ID If the edit button is not nested inside the Menu, it works fine. However, within the Menu, it onl ...

javascripthtmlreactjsmaterial-uifetch

Securing data in AngularJS $http.post requests: Best practices

While working on $http.post requests for my app's backend, I noticed a security issue. When inspecting the data using tools like firebug in Firefox, I can see all the information being sent. Is it possible for third parties to intercept this data? Th ...

javascriptangularjssecurity

What could be causing MS browsers to transform my object array into an array of arrays?

Noticing an interesting behavior with Microsoft browsers especially when dealing with data returned from our product API. It seems that the array of 52 product objects is being transformed into several arrays, each containing only 10 objects. Our error tr ...

javascriptarraysjsoninternet-explorermicrosoft-edge

Saving a JSON object to a JSON file

My code successfully utilizes the following structure: $.getJSON('Json_users_templates/SO_example.json', function(data) { }); to retrieve JSON data from a local .json file into an object. Now, I am looking for some code that will allow me to s ...

jqueryajaxjson

Ways to distribute varied Responsive Images

Welcome to our website: .php .jquery .yii based Depending on the width of the viewport, we require at least two different infographic images. The client is very particular about w3c validation The picturefill solution does not pass validat ...

phpjquerymobileyiiresponsive-design

Search for elements with a specific substring in their class names using the querySelectorAll() method

I'm working with a custom component in app.js return ( {cards.map((index) => { return <Card key={index} /> ) Within the Card component, I assigned a specific className return ( <ListItem id="root" className="find-card"&g ...

javascriptreactjsmaterial-uireact-hooks

The text field is unable to receive input by clicking a button, only registering values when physically typed into the field

I have three text fields with buttons to increment or decrement the value, and a final text field that displays the calculation of the values in each field. Everything is functioning correctly, however, the issue arises when I try to add values using the ...

javascriptphpjquerybootstrap-4codeigniter-3

Managing the output from a function: Tips and strategies

Below is the function I am currently working with: function kontrola(){ var jmeno = self.document.forms.newPassForm.user.value; $.get("checkMail.php?mail="+jmeno, function(data){ if(data=='1'){ alert('Tento ...

javascriptjqueryreturn

Vertically arrange the table for better visibility

I need help with changing the table layout from horizontal to vertical. Currently, all fields are displayed horizontally and I want them to be displayed vertically. Also, I'm trying to add a functionality where the current date is added to the databas ...

phphtmlcssmysql

Display a portion of the existing URL as a clickable link on the webpage using JavaScript or PHP

If I have a website with the URL and I would like to showcase the image at https://example.com/image.jpg on my site (), what can I do? I attempted the following approach, but it only displays the URL of the image. <p id="image"></p> <scri ...

javascriptphp