I'm looking to make a text blink with alternating colors:
For instance: blinking a text with white, green, white, green, white, green
I am open to either using jQuery or CSS.
I'm looking to make a text blink with alternating colors:
For instance: blinking a text with white, green, white, green, white, green
I am open to either using jQuery or CSS.
Despite my reservations, I am sharing this code. Please be sure to make adjustments for cross-browser compatibility, especially with webkit.
REVISED FOR FULL BROWSER SUPPORT
<a href="#"> text</a>
/* css */
a {
animation-duration: 400ms;
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
IE 9 does not support animation-iteration-count.
Tip: To ensure compatibility with current browsers that do not support certain features, you can utilize Modernizr:
See How do I normalize CSS3 Transition functions across browsers?
CSS3 animation-fill-mode polyfill
@-webkit-keyframes blink {
from { color: green; }
to { color: white; }
}
@-moz-keyframes blink {
from { color: green; }
to { color: white; }
}
@-ms-keyframes blink {
from { color: green; }
to { color: white; }
}
@-o-keyframes blink {
from { color: green; }
to { color: white; }
}
@keyframes blink {
from { color: green; }
to { color: white; }
}
.blink {
color: green;
-webkit-animation: blink 2s 3 alternate;
-moz-animation: blink 2s 3 alternate;
-ms-animation: blink 2s 3 alternate;
-o-animation: blink 2s 3 alternate;
animation: blink 2s 3 alternate;
}
Having encountered an issue with my script that prevents sending data from AJAX to a PHP file, I decided to debug it by logging the form data before running it through the AJAX function. The data obtained was as follows: Form: name=jim&email=info%40te ...
I am trying to position an image and text within separate containers using div. The desired layout is to have the img floated left and the text centered on the page, but I am having trouble achieving this. Each element has its own div. Can you provide as ...
I have been working on a function that needs to loop through a dataset, updating values as it goes along using data from an asynchronous function. It is crucial for me to know when this function finishes running the loop and completes all updates. Here is ...
Currently, I am encountering an issue while attempting to duplicate a JSON array within this specific JavaScript function: var test = new array(); function showUser(user, pass, remember) { $.getJSON("login.php", { username : user, password : pass, che ...
I'm encountering an issue when trying to refresh a jqgrid. Despite attempting various solutions, I have yet to find one that works. My goal is to refresh the grid after receiving JSON data from the server side. Below is the code snippet showcasing how ...
Recently, I created a website that utilizes jquery ajax to send an ajax request every minute in order to retrieve json data. This data is then parsed and added into the DOM. While this process runs smoothly on Chrome and Firefox, I noticed a significant m ...
I'm currently working on developing a method to incorporate space for error messages within my form input group component. The main objective is to prevent any displacement of elements on my forms when displaying error messages. In this scenario, it ...
Is there a way to change the height of the scroll view? It seems too long for my liking, any advice? I attempted to adjust it using css but unfortunately, it didn't work out. The scroll view appears excessively lengthy as shown in the image below. h ...
I am having trouble implementing the autocomplete feature in my JavaScript code editor using Codemirror. Can someone please help me figure out what I'm doing wrong? Here is the snippet of code : var editor = CodeMirror.fromTextArea(myTextarea, { ...
I am looking to create a screen layout similar to the one shown in this image. It should consist of a row with no overflow and include: A left box that contains: A fixed height header (20px), An aspect square box taking up the remaining height. ...
Encountering an issue with the login form where I am unable to proceed to the next page after entering my credentials. The system acknowledges if the email and password match, however, the login does not go through. Seeking assistance in identifying the ...
Can I connect my SVG file to my CSS file for a line animation? I'm uncertain about including the SVG code directly in my HTML file. ...
Having an issue with CSS in Windows Notepad: <!DOCTYPE html> <html> <head> <title>UniqueScience</title> <style> #title { display: block; ...
I would like the showAll button click to redirect to another page where the showAll function is executed and the results are displayed on the new page. Additionally, I am looking for a way to modify the console.log statement to output the result on the new ...
Hey there, I'm working on creating a timeline and I'd like to have a line intersecting each year similar to this example. My tech stack includes tailwind CSS and next.js. Although I've written some code, I can't seem to get the line ce ...
I've been attempting to rotate the image using the code below, but I can only manage to go from a front view to a bottom view. My goal is to rotate the image from the front view to the left view. Is there a way for me to achieve this? body { heig ...
As I develop a jQuery plugin, I am utilizing the .on and .trigger functions for my pub/sub system. One challenge I am facing is triggering multiple events in different scenarios with ease. My question is whether it is possible to trigger multiple events a ...
I am encountering an issue with writing jQuery inside an AngularJS function. I can't seem to figure out why it's not working properly. HTML <div> <span ng-repeat="image in post.postImages" ng-if="$index <= 3" ng-init="image.showD ...
I need to modify some text based on the position of a div element. A visual demonstration would be most helpful, so here's an animated gif showcasing what I hope to achieve: Below is the code that I am currently working with: https://jsfiddle.net/c0 ...
The HAML code below is what I have: %header .grid %a{:name => "top"} .logo %a{:href => root_path} =image_tag("logo3.png") .tagline .clearfloat %p Fast Facts About Your Website, Your Competitors And Best ...