Is there a way to change the color of a download link after it has been clicked on? I've attempted using the visited attribute, but it only seems to work with regular links and not with download documents:
Appreciate any help 🙏🏼
<a href="http://example.com/files/someFile.csv" target="_blank">
http://example.com/files/someFile.csv
</a>
Using the visited style:
a:visited {
color: pink;
}
It has been mentioned by others that in order for the :visited style to work correctly, you need to create a browsing history entry for that link. One way to achieve this is by adding a target="_blank" attribute to your link. This will cause the link to open in a new page, thus creating a browsing history entry.
The embedded code snippet on stackoverflow doesn't allow direct opening of new windows, so you have to use ctrl+click on the link. This behavior would not occur on a real webpage.
Additionally, PLEASE BE AWARE that the included snippet link will DOWNLOAD AN ACTUAL FILE sourced from . Prior to clicking the link, keep this in mind.
a:visited {
color: pink;
}<a href="https://file-examples.com/wp-content/storage/2017/02/file-sample_1MB.doc" target="_blank">
https://file-examples.com/wp-content/storage/2017/02/file-sample_1MB.doc
</a>Just like others have pointed out, HTML and CSS are not capable of determining if something has been downloaded or not. The only indication you can get is if a link has been clicked on, and based on that you can add a class to show that it has been used. To achieve this, you can utilize JavaScript. Here's an example using jQuery:
$("a.download").click(function(){ $(this).addClass("downloaded"); });a.downloaded { color:pink;}
If you wish for this marking to persist even after page reloads, you could employ browser localStorage to store the id of the anchor that should be marked as a downloaded file. Then, upon page load, you can use a#id to set the class back to downloaded.
Currently, I am working on creating a user interface that features a fixed navigation bar on the left hand side and a responsive content window. Here is what I have implemented so far: <div style="width: 15%; float: left; display: inline;"> <na ...
Presented here is a snippet of XML code: <xml> <section> <element>good</element> <section class="ignored"> <element>bad</element> </section> </section> </xml> Identifying a ...
Is there a way to trigger a JavaScript function when a specific div with a certain class is loaded within my Rails 4 application? <div class="myClass"> hello world </div I am looking for a solution to execute some JavaScript code only when t ...
I decided to tweak the original concept by placing the images inside a Bootstrap card. However, the end result is that the images appear to be floating. https://i.stack.imgur.com/Uf721.png Any suggestions on how to make them fit nicely within the card? ...
I'm looking for a way to dynamically position the element #ucp_arrow in the middle of a div using float: left. Here is an illustration: https://i.stack.imgur.com/nzvgb.png Currently, I have hard-coded it like this: JAVASCRIPT: $("#a_account").cli ...
My work involves using jQuery to manipulate progress bars. The issue I am facing is defining standard colors that should be displayed on the progress bar based on the value received. Here is my code: var defaultSegmentColors = ['#FF6363', &ap ...
I stumbled upon a snippet on CSS Tricks Attempting to replace the green color with a gradient value, but unfortunately, the value is not being applied. I have tried using both the fill property and gradient color, but neither has been successful. Here is ...
There are certain mobile browsers that appear to have trouble supporting all unicode characters, such as the down arrow icon like this: span.icon:after { content:"\25be"; } Currently, no symbol is shown. Is there a way for me to identify this i ...
I have come across examples in three.js that use: renderer = new THREE.WebGLRenderer( { canvas: document.querySelector( 'canvas' ) } ); This relates to a <canvas></canvas> element. On the contrary, there is another method: rendere ...
Any advice on excluding the "TOTAL" row from sorting in MUI library? onSortModelChange={(test, neww) => { neww.api.state.sorting.sortedRows = [14881337, 2, 3] neww.api.setState({...neww.api.state}) } } Review ...
After following a suggestion ("css only technique number 1" found here http://css-tricks.com/perfect-full-page-background-image/), I experimented with using an inline img element and CSS to create a background image that would occupy the entire browser win ...
On my HTML page, I have a centered header (h1) with a title that displays in portrait mode above an image. When switching to landscape orientation, I want the image to move to the left side of the title. I've experimented with using <br> along ...
After studying JavaScript React, I have come across a challenging question: Recently, I created a project on Codesandbox The main issue is that I am struggling to align the icon next to the input field as shown in the image below. https://i.stack.imgur. ...
I am facing a situation where I have a table with 25 default rows. When scrolling to the bottom of the table, I want to dynamically insert another set of 25 rows. Everything is functioning correctly, but in a specific scenario, I need to preserve the last ...
After experimenting with different iterations of this code, the outcomes have been mediocre and inconsistent. The concept is rather simple: A user inputs a search query into a text box, clicks a button, and the query is assigned to a var search. This varia ...
I am currently working on implementing the emit event in an express router, and I'm attempting to pass a global.io variable. However, I've encountered an issue where despite adding the following code: io.emit('join','Tudis' ...
Exploring options for improving this code: This is currently how I handle the observable data: this.observable$.pipe(take(1)).subscribe((observableValue) => { this.behaviourSubject$.next(observableValue); }); When I say improve, I mean finding a wa ...
Whenever I click on an element on my webpage, a modal window with a fixed position appears. The issue I am facing is that when I scroll using the mouse or touch gestures on my phone or tablet, the entire page scrolls instead of just the content within the ...
I am intrigued and eager to dive deep into the request and response cycle of backend development. Here's my query: I have a node.js express framework up and running. The app is launched and all functions are primed and ready for requests. app.use(&a ...
Within my register form, I have various INPUT tags present. One of these INPUTs has the name email. <input type=text name=email id=email> When filling out this form in Chrome, I encounter a peculiar behavior. Upon clicking on the email input field ...