Looking for suggestions on creating a horizontal scrolling effect within a div that mimics a "news ticker," but without relying on a plugin. The goal is to make the text move from right to left dynamically. Here's an example of the desired outcome using a plugin: .
Need a quick fix for this issue? Check out this solution: http://jsfiddle.net/4mTMw/8/
var scrollingText = $('div.scrolling-text');
scrollingText.each(function() {
var text = $(this), indent = text.width();
text.scroll = function() {
indent--;
text.css('text-indent', indent);
if (indent < -1 * text.children('div.marquee-text').width()) {
indent = text.width();
}
};
text.data('interval', setInterval(text.scroll, 1000/60));
});
By utilizing the text-indent css property, you can easily achieve this effect.
My recent solution to this issue involved utilizing CSS keyframe animations.
The key to success is to have a wrapper div for your ticker with overflow hidden applied to it. Make sure that the items within the ticker are set to display inline-block so they appear in a line:
<div class="ticker-wrap">
<div class="ticker">
<div class="ticker__item">Letterpress chambray brunch.</div>
<div class="ticker__item">Vice mlkshk crucifix beard chillwave meditation hoodie asymmetrical Helvetica.</div>
<div class="ticker__item">Ugh PBR&B kale chips Echo Park.</div>
</div>
</div>
Here is an example of the necessary CSS styling:
.ticker-wrap {
position: fixed;
bottom: 0;
width: 100%;
overflow: hidden;
height: 4rem;
background-color: rgba(51, 51, 51, 0.5);
padding-left: 100%; // offsets items to begin
}
.ticker {
display: inline-block;
height: 4rem;
line-height: 4rem;
white-space: nowrap;
padding-right: 100%; // taken from container as display inline-block
}
.ticker__item {
display: inline-block;
padding: 0 2rem;
font-size: 2rem;
color: white;
}
I also have a demo available that showcases how css keyframe animation can smoothly transition content infinitely from one side to the other. Please note that vendor prefixed versions are not shown.
@keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
To implement this effect, simply adjust the animation duration and apply it to .ticker.
.ticker {
animation-name: ticker;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 25s; // tweak based on number of items/desired speed
}
You can view the complete demonstration here
I discovered that by replacing the left attribute with top, the content began scrolling from bottom to top flawlessly. This simple fix did the trick for me
Here is an example of how you can achieve a scrolling effect:
<div id="scroll-area" style="position:relative; overflow:hidden; width:100%;">
<span id="scroll-text" style="position:absolute; white-space:nowrap">This text will scroll horizontally</span>
</div>
This JavaScript function will create the scrolling animation:
function scrollText() {
$('#scroll-text').css('left', $('#scroll-area').width());
$('#scroll-text').animate({
left: '-='+($('#scroll-area').width()+$('#scroll-text').width())
}, 2000, function() {
scrollText();
});
}
scrollText();
You can view a demonstration of this code in action here: http://jsfiddle.net/abc123/45/
One of the features I am looking to implement in my Django application is a display that notifies the user when one of their posts is about to start. The idea is to show a DIV element with the message: <div>“Will start soon”</div>, 15 minut ...
I have been struggling to completely disable the ability for users to copy and paste or select text on my website across all devices. After much searching, I came across a solution that I implemented on my site. Below the <body> tag, I inserted the ...
I am facing an issue with my slider setup, where each slide contains a video as the background along with play/pause buttons. When I try to play the video by clicking the corresponding button on a specific slide, I encounter this problem: if I click the pl ...
I had hoped for something similar to this Image from bootstrap However, what I ended up with was this Image on my local host This is the code I have: <input type="password" class="form-con ...
I'm having a slight issue with jQuery. Below is the code in question: if ($("select[rendelo='" + rendelo + "'][nap='" + nap + "'][napszak='" + napszak + "']").val() == 0) { alert('sth'); ...
I operate a website that showcases various products, each with a corresponding link to a fancybox displaying detailed information about the product (detailed.php file). <a class="fancy fancy'.$_GET['type'].'" href="detail.php?id=&ap ...
I am currently working on a project that involves creating two pages. The first page will display a selection of items that I want to showcase on the second page. On the initial page, I have already picked out the specific items that I plan to show on the ...
I'm experimenting with storing JSON data in a variable and then randomly accessing it. (Superhero Alias Generator) The JSON data can be found on GitHub gist below I decided to try using the ajax method for the first time, but it doesn't seem to ...
I have created a slider component that makes an AJAX request to update a table based on the values selected by the user. When testing this on my local server, I did not notice any issues. However, after deploying the code onto a cloud service, there is si ...
<div className={styles.container}> <ul className={styles.links}> <li className={styles.link}> <a href="/">Home</a> </li> <li className={styles.link}> <a href="/portfolio& ...
I am just starting out as a beginner in web development. I decided to create a webpage to practice my HTML and CSS skills. However, when I set the width of all elements to 100%, I noticed that I am getting a horizontal scroll bar. I have tried troubleshoot ...
I am facing a challenge with a list of floated left divs inside another div. This inner block of divs can be hovered over to move it left and right. Each inner div, known as 'events', has class names that include a specific year. Additionally, t ...
Within my webpage, there is a random occurrence of the word -FORM-. I am looking to replace this word with another text that includes dashes for creating a clickable div. Despite having some code that successfully replaces the text, it lacks the function ...
Having trouble with my bootstrap 5.x layout. Can anyone help me achieve a design where the cards display like the left image on desktop/wide screens and like the right image on smaller width mobile screens? I currently have the mobile view showing A-B-C-D- ...
I'm struggling to position the footer at the bottom of the page with a horizontal line just above it. Despite trying various resources, I can't seem to get the footer to stay at the bottom. I'm currently using a blog template as the basis fo ...
After calling my service to retrieve a list of strings, I encountered an error message. $(document).ready(function () //executes this code when page loading is done { $.ajax({ type: "POST", url: "Services/pilltrakr.svc/getAllUsers", ...
UPDATE check out the new jsfiddle link here that effectively showcases the problem I am encountering an issue with white space appearing below my div. This can be seen in 2 photos, one of which is scrolled down: https://i.sstatic.net/yHlXL.png https:// ...
I am currently using a table to showcase a series of items for my data. Each data entry includes an action column with images. I would like to implement a feature where hovering over an image hides the image and reveals text, and vice versa (showing the im ...
I recently applied a background image to my "a" tag, but now I'm looking to hide only the HTML content within the tag. It's important that the background image and href address remain visible. Any suggestions on how to achieve this? Thank you in ...
Need help with a dynamic HTML div <a data-id="17" onclick="getcustomer();"> <div class="note note-success"> <h4 class="block">A</h4> <p>Email : <a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...