I am looking to create a rotating text effect inside a div that scrolls from top to bottom in a continuous loop.
I came across a solution that achieves this effect using CSS3 at the following link: Link
The issue I'm encountering is that the scrolling doesn't work in Internet Explorer versions prior to IE10 due to lack of CSS3 support. Is there an alternative solution, such as a plugin or adjusting margins with JavaScript, that would produce the same result as the CSS3 example linked above?
If you're looking for something unconventional, consider using the <marquee> tag
This solution is compatible with Internet Explorer, Firefox, and last time I checked, Safari as well.
<marquee behavior="scroll" direction="up" height="250"
scrollamount="2" scrolldelay="10"">
Your text goes here
</marquee>
It should provide the effect you desire,
and you have the flexibility to style it just like any other <div>...
Plus, there's no need for JavaScript which is an added advantage.
But wait, there's more! This feature works on all browsers:
onmouseover="this.stop()" onmouseout="this.start()"
And specifically for Internet Explorer:
style="filter:progid:DXImageTransform.Microsoft.Alpha( Opacity=0,
FinishOpacity=100,
Style=1, StartX=0, FinishX=0, StartY=0, FinishY=10)
progid:DXImageTransform.Microsoft.Alpha( Opacity=100, FinishOpacity=0,
Style=1, StartX=0, FinishX=0, StartY=90, FinishY=100)"
Simply add these attributes to the marquee tag...
Give this a try!
Check out the JS fiddle link provided: http://jsfiddle.net/0pfwkw03/2/
function startAnimation(){
var topPosition = parseInt($(".inner").css("top").replace("px",""));
var containerHeight = $(".outer").outerHeight();
if(topPosition < containerHeight)
{
$(".inner").animate({"top":containerHeight},5000,startAnimation)
}
else
{
$(".inner").css({"top":-containerHeight});
startAnimation();
}
}
startAnimation();
How can I retrieve a new variable (section) after every 3 objects are called from an array in JavaScript ES6 Map? I've attempted to do this with an ES6 Map, but I'm not achieving the desired result. Can someone please assist me? Thank you! Below ...
I have been attempting to utilize UglifyJS to compress/minimize my bundle.js file. However, when executing webpack -p, I encountered the following error message: ERROR in bundle.js from UglifyJs Name expected [bundle.js:105519,6] The line causing the iss ...
Trying to create a visually interesting element on my website with 2 circles overlapping their parent element and 1 overlapping below. How can I make the third one centered below the first two? I've experimented with float left and right, but not sur ...
I am completely new to front-end development. I am in the process of building my own responsive website using Bootstrap 3. One issue I am facing is that when I resize my browser window to simulate a phone screen, I want the navigation bar color to change ...
Once a user logs in to my website and receives a successful login response from an ajax request, I would like them to be automatically redirected to 'appusers/appusers'. This redirection should trigger a post request to the server side module &ap ...
When retrieving data from ajax, I am receiving the output in string format instead of array format. $.get('ajax/order_details.php?order_limit=true&order_limit_id=<?php echo $_GET['id']; ?>', function(data){ ...
Why is my jQuery script not functioning as expected? <head> <title></title> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> </head> In the body <p id="somediv"></p> <script> ...
In my application, I am downloading an HTML file from the server and displaying it in a uiwebview. NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES); NSString *documentsDirectory = [paths firstObject]; NSStri ...
Currently, I am attempting to create a universal error handler for my website utilizing $http interceptors. However, it seems that the interceptors are not functioning as intended. I have set up interceptors for 'response' and 'responseErro ...
Recently, I have been working on my menu code and here is what I currently have: <td><a href="Products.asp?isnew=true"><img height="21" border="0" src="images/productmenu/new_items<%if request.querystring("isnew")="" then%><%else%& ...
I am currently working on creating a background for OP.gif. The goal is to have a transparent white color covering the entire web page, and to have the input[type='text'] below that coverage also in transparent white color. This way, the end-user ...
Currently, I am working on a feature where users can select multiple product links and have the option to email those links to someone. The functionality works perfectly fine on my local machine, but when deployed, it throws an exception as shown below: ...
Having trouble with the attribute starts with selector for validation of fields with dynamic IDs. Tried multiple approaches but haven't been successful. Here's what I've attempted so far: I have looked at other suggestions on Stack Overflo ...
I'm facing a challenge with my NodeJS module that is designed to translate XML to HTML using an XSL file. The issue arises when I try to package the XSL file along with the rest of the module. Currently, the XSL file is located inside the source fold ...
Here is the code for the "singleCard" component. When passing {{card.title}} and {{card.body}}, an error occurs: **Error in render: "TypeError: Cannot read property 'title' of undefined" found in ---> <SingleCard> at src/components/sing ...
For debugging purposes, I need to output the IDs of all previous images in a check. The issue arises when trying to assign classes to all previous elements using the script below, as the images are not being added to the correct classes. $(document).on(&a ...
Currently, I am working on building dynamic pages using gatsby-node. The templates for these pages are stored in the templates/ directory. However, I have run into an issue where I cannot utilize tailwind classes within these templates unless they are al ...
I am facing an issue with my menu and submenu setup. The submenu content is loaded using ajax. Currently, the submenu toggles open and closed. However, even when I click to hide the submenu, it still triggers the ajax call. Is there a way for the ajax ca ...
I am working on a table row that has the following HTML structure: When the user interacts with the "Name" field, I trigger the "select" event and pass it to the nameDropChanged function. Once I have a reference to this select element, I need to change th ...
My vuex mutation doesn't work synchronously as expected. Here is the code: mutations: { computeStatusData(state, status) { if (status.active !== true) { return } const started = new Date(status.startedAt); started.setHour ...