I recently implemented a scrolling script on my website that I found at this link: http://blog.waiyanlin.net/example/jquery/flyingtext.html. However, the animation currently scrolls from left to right and I would like it to scroll from right to left instead. Does anyone know how I can achieve this?
To achieve a right-aligned text, simply replace marginLeft with marginRight in the CSS code.
For an illustration of this in action, check out this example: http://jsfiddle.net/DkRRw/
To update your code, simply replace all instances of Left with Right within the document.ready() function in JavaScript.
According to BondyThegreat's observation, it is necessary to switch the positions of Left and Right in the script. Additionally, a modification needs to be made to the style sheet.
<script>
$(document).ready(function(){
$('.container .flying-text').css({opacity:0});
$('.container .active-text').animate({opacity:1, marginRight: "350px"}, 4000);
var int = setInterval(changeText, 5000);
function changeText(){
var $activeText = $(".container .active-text");
var $nextText = $activeText.next();
if($activeText.next().length == 0) $nextText = $('.container .flying-text:first');
$activeText.animate({opacity:0}, 1000);
$activeText.animate({marginRight: "-100px"});
$nextText.css({opacity: 0}).addClass('active-text').animate({opacity:1, marginRight: "350px"}, 4000, function(){
$activeText.removeClass('active-text');
});
}
});
</script>
Please make the following update to the style sheet:
.flying-text{
margin-right:-100px;
text-align:right;
}
If you have observed this animated effect, it involves animating the left-margin of text from 0 to a specific number of pixels.
To achieve the desired animation effect towards the right side, you can use set marginRight in the script instead of marginLeft.
UPDATE: In addition to the script changes mentioned above, don't forget to adjust the CSS code as follows:
.flying-text
{
//Remove this: margin-left:-100px;
margin-right:0px;
}
I have an index.html file that is used for making HTML and Ajax calls. When I run the file through localhost, the API works perfectly. However, if I directly open the index.html file in Google Chrome or Mozilla Firefox, I encounter a CORS (Cross-Origin Re ...
I'm currently working on my initial React project using Typescript, but I've hit a snag with the code snippet below. An error message is popping up - Parameter 'name' implicitly has an 'any' type.ts(7006) Here is the complet ...
I am attempting to stream videos using URLs in my Angular application. Every time I try, I encounter the following error: Access to XMLHttpRequest at 'https://player.vimeo.com/video/548582212?badge=0&autopause=0&player_id=0&ap ...
Can someone please help me create a dynamic table using Jquery DataTables? I specifically need the table to be of type Server-side processing, where all the columns are generated in the same Ajax request along with the results. DataColumns = "" //JSON res ...
How do I retrieve a file from a BLOB column using NodeJS? Currently, I am utilizing the oracledb library for database operations and my code snippet is as follows: async function getFile(req, res) { let filename = req.params.filename; let file = a ...
Currently, I am in the process of testing the code snippet below: $rootScope.$on('$routeChangeError', function(event, current, previous, rejection) { if(rejection === 'Unauthenticated') { $location.path('/'); ...
After using ajax to inject HTML into my page, the onclick handler on a specific part of that injected HTML does not seem to be functioning... Specifically, I am referring to this image... < img class="close_row" src="img/close.gif"/> In jQuery, I ...
Jquery $(document).on("click","[type=text]",function(event) { alert('test'); }); CSS .noWorking:focus{ z-index:100; position:relative; outline:none; box-shadow:0 0 0 1000px rgba(0,0,0,.2); } To ensure the shadow appears on top of all oth ...
When it comes to building my blog, I've decided to go with docsify and manage my markdown files using VScode. I wanted a preview of my blog, and after noticing that <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/t ...
In many of the pages on my blog, I have a structure that consists of boxes with a link like this: http://jsfiddle.net/gliu/E32Bh/ The issue I'm facing is that when too much text is added to these boxes, a vertical scrollbar appears only upon hoverin ...
clickable dropdown hover dropdown.jpg Source: Is there a way to create a dropdown menu that opens to the right like the clickable version, rather than to the left like the hover dropdown in the provided example? I'm open to other solutions as long ...
I am managing two collections: Category and Book Book: const mongoose = require('mongoose'); // eslint-disable-next-line camelcase const mongoose_delete = require('mongoose-delete'); const { Schem ...
It seems that there is an issue with the mcustomscrollbar "scrollTo" function not working in Chrome, although it works fine in FireFox. No errors are showing up in the console, so it appears to be a browser-specific problem. I even tested the functionali ...
Can anyone help me with my issue regarding Bootstrap scrollspy settings? It seems to be highlighting the wrong div id, always the last one. Here is the code snippet: Content: <body style="heigt: 100%" data-spy="scroll" data-target="#side-menu"> ...
I have a group of numerical values listed below that are stored in a variable. [700000000084, 100000000051652, 8800000000000072, 280000000000004, 680000000000008, 880000000000006] My goal is to iterate through this list using the SmartSheets API to gathe ...
I'm currently utilizing the "Custom HTML Tag" option in GTM with my code below, but encountering an error when attempting to publish: Invalid HTML, CSS, or JavaScript found in template. It seems that GTM may not support or recognize certain tag attri ...
In my project using VueJS 2 and Vuetify, I am creating a subscription form. The form is dynamic and fetches all the preferences related to a subscription from the server. In the example below, the preferences shown are specifically for a digital magazine s ...
I brought in a model and noticed that the shadow is only visible in a small area (highlighted in green in the image). How can I make all objects display their shadows? https://i.sstatic.net/hmzp2.png Below is my code snippet. light = new THREE.Direction ...
I have created a fun game where players must erase a colored layer to reveal an image. However, I am facing an issue as the game only works on my desktop and not on touchscreens like iPhones or iPads. I believe I need to replace MouseEvent with TouchEvent, ...
How can I implement a button that refreshes the current page using JavaScript? Here is what I have so far: <button type="button" onClick="refreshPage()">Refresh</button> <script> function refreshPage() { // What should I in ...