CSS News Ticker Design

Is there a way to play contents like a news ticker that moves from right to left? I found some code that works in Firefox but fails in Chrome (ref: [https://jsfiddle.net/jonathansampson/XxUXD/)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
       ... 

I tried an alternative solution, but unfortunately it didn't work with Chrome either.

@-webkit-keyframes{
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
} 

Answer №1

Don't miss this important link

<script src="http://leaverou.github.io/prefixfree/prefixfree.js"></script>

Your code snippet includes a External Resources

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

Connecting icons in Laravel: A step-by-step guide

I have experience linking style CSS using the code: {{ HTML::style('css/styles.css') }} However, I am unsure how to link an icon in Laravel since it is not a standard CSS or JS file. Can anyone provide guidance on this? ...

Using React and Typescript, implement an Ant Design Table that includes a Dropdown column. This column should pass

Next Row: { title: "Adventure", render: (item: ToDoItem) => { //<- this item return ( <Dropdown overlay={menu}> <Button> Explore <DownOutlined /> </Button> </Dropdown&g ...

Meteor, enhanced with the dynamic Iron Router module and integrated

I am working on a project using Meteor (Meteor.com) and I want to incorporate iron-router for the page routing along with the pre-existing accounts-ui package for login functionality. Previously, my {{loginButtons}} functioned properly, but ever since I i ...

InvalidSyntaxError: Client login cannot be completed due to an unexpected end of input. Please

I encountered an issue while trying to create a bot that sends welcome messages for my friend's server. Despite numerous attempts to troubleshoot the problem within my code, I have been unable to resolve it. Any assistance in solving this error would ...

Place the array contents inside a fresh division labeled "row" once it reaches 4 elements

I'm currently working with Bootstrap and I want to display my output in a specific grid format. I have successfully grouped my array into piles of 3 and placed them in a div with the classname "row". However, I'm facing an issue where the element ...

Tips for creating the X Mark using SVG and CSS

I'm struggling to create an animation of an "X" checkmark sign (for failure). Although I found a great example of an animated checkmark sign for success, the code uses a curve-bezier design that I can't replicate for the "X" sign. If anyone cou ...

Adjust the position of the select box slightly downwards to ensure it lines up with the preceding text in the HTML code

I am working on an HTML5 webpage and I am facing an alignment issue with the selection box. The selection box is currently not aligned with the text ("Select Discipline") that comes before it. I am looking for a way to adjust the position of the selectio ...

JPlayer experiencing technical difficulties on Internet Explorer and Opera browsers

Hey there! I'm facing an issue with my website . I've uploaded some ogg and m4a files for streaming, and while it works perfectly on Firefox, Safari, and Chrome, it's not functioning properly on IE. When I try to play a song, it seems to loa ...

Preventing distortion of the object when using camera.lookat() in three.js

I have created a piece of code that moves an object randomly on the screen using camera.lookat(). However, I noticed that when the object moves to the sides of the screen, it slightly changes its shape to look at the camera, causing a skewing effect. I wa ...

Updating the functionality of one-page scrolling - changing to overlap instead of sliding upwards

Hello, I am currently utilizing a JavaScript library to create a website with full page scrolling. If you want to know about the library, check out this link: For those interested, here is an example of my work on jsfiddle: http://jsfiddle.net/aLjLjxux/ ...

Sending a notification alert directly to the client's web browser

My goal is to develop an application that allows Super users to notify other users by providing access to content, such as a PDF file, when they click on a link. For example, in the scenario where a teacher wants to share a PDF with students, this applica ...

Obtain Blob using Uint8Array in JavaScript

Hello, I am currently facing an issue while trying to retrieve data from a WebSocket using JS and VUE. Here's the problem I'm encountering: In order to receive data, I am utilizing the following code snippet: created() { console.log('Starti ...

Is there a way to prevent autoplay on swiper only on one slide based on a specific condition?

One of the slides contains a form that opens when a button is clicked within that same slide. However, due to autoplay being enabled, the swiper continues to the next slide. I need to disable autoplay when the user clicks on the form opening button. The ...

Retrieve elements with a customized attribute from an array in JavaScript

In my JavaScript code, I have added objects to an array, each with a new property called "Type". Now, I need to extract the objects from the array that have this "Type" property and put them into a new array. var arr = [ {ID: 1, Name: "Name1"}, {ID: 2, Nam ...

Having difficulty properly streaming UI components with Vercel's AI-SDK

Recently, I've been diving into the new Vercel's AI-SDK to expand my skills. My current project involves developing a persona generator that takes specific guidelines as inputs and generates persona attributes according to a given Zod schema. B ...

What is the best method for including parameters in OBJECT_URL when sharing a post on Facebook?

Regarding this line: FB.api('/me/namespace:read' + '?article=http://www.xxxxxxxxxxxxxx/tm/redir.php&access_token=','post', Whenever I attempt: I encounter errors. How can I successfully pass parameters in the OBJECT_UR ...

What is a more efficient method for incorporating optional values into an object?

Currently, I am utilizing the optional addition feature in this way: ...(!!providerId && { providerId }), ...(!!practiceId && { practiceId }), Is there a more elegant shorthand method to replace this logic, such as: yield createRemark ...

The Axios request for the concatenated URL is failing to execute

Encountering an issue with Axios in node js. Here's the code snippet: let callResult = await axios.get(urlData, config) The configuration object used is as follows: let config = { headers: { 'X-Token': token } ...

What are the steps to implement the GET method with GraphQL and AJAX?

I've been delving into the world of Django and GraphQL by following this insightful documentation: django and graphql However, I've hit a roadblock halfway through where we can start testing with the graphql view and craft our queries. Instead ...

The Node.js Express Server runs perfectly on my own machine, but encounters issues when deployed to another server

I've encountered a strange issue. My node.js server runs perfectly fine on my local machine, but when I SSH into a digital ocean server and try to run it there, I get this error. I used flightplan to transfer the files to the new machine. deploy@myse ...