It appears that the styles for a:visited do not apply to links that are loaded via JavaScript. When a user clicks on a standard link, it shows as visited right away and even after refreshing the page. I'm uncertain if this issue is specific to jQuery Mobile (where I initially noticed it) or if it's a limitation in browsers that I wasn't aware of?
If you want your code to work with history and visited links styling, consider changing the location.hash.
It is important to note that the styling of visited links may vary across different browsers due to the privacy vulnerability in browsing history popularized by the Did You Watch Porn website.
a:visited applies to links that have been clicked and are in the browser's history.
If you utilize AJAX to prevent navigation to a specific URL, that URL will not be added to the browsing history.
To address this issue, opt for using # links instead.
a:visited is only activated when a link is clicked.
In the case of an AJAX call, clicking the link generally results in a return value of 'false' (Even using a hash solution like <a href="#">link</a> still returns false to prevent jumping to the top of the page).
As a result, the link is never executed and therefore remains unmarked as visited.
Let's not change the a element's href to a hashed url as suggested by others, as it could disrupt the user experience. This would result in double loading for those wanting to open in new window, and cause issues for search engines and users with Javascript disabled.
The problem arises when using hashes to transition your website into a RIA (rich internet application), where links point to mysite.com/page but actually access mysite.com/#/page, leading to inconsistencies in visiting the original page.
A better solution is to utilize the HTML5 History API, allowing direct URL changes and enabling tracking of URL changes without the use of hashes. For more information on the comparison between hashes, hashbangs, and HTML5 History API, check out this link: https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling, which also provides sample code for upgrading your website with the HTML5 History API.
jQuery Mobile is set to adopt the HTML5 History API in the future (currently in progress), so it may be worth waiting until this implementation is complete.
One way to apply the same style to a link as you would for a:visited is by setting a class in the ajax callback.
I am facing an issue with select boxes inside multiple divs. The selected option value is supposed to show in a span div using a jQuery function. However, the function only works for the first div select box and not the rest. I need a single function that ...
I am trying to achieve a functionality where clicking on an element will add a class, but if the parent of this element already has the class, it should remove it first. However, the current code is not working as expected. It only adds new classes without ...
My objective is to showcase the event details in a modal. To achieve this, I am running a JavaScript script that calls the "GetEventsDetails" method in my "Event" controller with the event ID. While debugging in Chrome, I can see the ID being passed corre ...
I am looking to add 2 JQ UI Sliders to a single page on my PHP website. I need to capture the final values from both sliders (the last value when the user stops sliding) and store them in PHP variables for multiplication. How can I accomplish this task? I ...
I'm attempting to set up this apparently straightforward initialization process for the DataTables plugin feature called TableTools. From what I understand, all I need to do is specify the tableTools parameter and then initialize other options within ...
I was exploring the potential of using breakpoints in the MUI v4 component to control the visibility of items in my Grid System. How can I create a smooth CSS transition for b, transitioning from 0px to a defined breakpoint size of 3 for xl? Using % works ...
Looking to create a unique text input with static content on the right and editable text on the left https://i.stack.imgur.com/K0YfM.png Any suggestions? ...
Using a specific template, I have listed topics in the following way: //Template used for topic list display %li.topic{:topic_slug => "<%=topic.slug%>", :topic_name =>"<%=topic.text%>"} %a{href: "#!/topics/<%=topic.slug%>" } <%= ...
Just a heads up before you dive in: I've encountered an issue with Safari related to Chrome, but it seems to work fine on other browsers. So, it could be more OS-specific rather than a general problem. I recently ran into a frustrating situation whil ...
I am encountering an issue in my Chrome Inspector console where it mentions an (anonymous function) error due to a line of code in my script: $.ajax({ Below is the snippet of the code. Thank you for any assistance provided. $('#form-new_login') ...
UPDATE: I initially used filter(), which was incorrect. I have since switched to find(), but unfortunately the issue persists. This snippet of code functions properly for me: $('#content') .replaceWith($( '<div> <d ...
I have been trying to implement a basic jQuery functionality that involves changing the text in one textbox to be half of the numeric value entered in another textbox. Below is the script I am using: <script> $(document).ready(function () { $(& ...
I am currently working with the following CSS: input[type="text"] { border: 2px solid rgb(173, 204, 204); height: 31px; box-shadow: 0px 0px 27px rgb(204, 204, 204) inset; transition:500ms all ease; padding:3px 3px 3px 3px; } My goal i ...
Hi all, I'm in need of some insights. I've been looking into the well-known issue of 'Flash hogging keyboard focus', but I believe our specific problem might require a workaround that someone else has already discovered. Despite trying ...
I have a straightforward question that I've been struggling to find an answer to. When using jQuery selectables, I want to retrieve the ID of the selected list item when it's clicked. Here is an example of my list: <ol id="selectable"> ...
The image above the footer is not displaying properly. Screenshot: Image appears below the footer https://i.stack.imgur.com/RvSqI.png Source Code .footer-area { background-position: center; position: relative; z-index: 5; } .footer-area::before { ...
Struggling with aligning items in a sidebar, specifically regarding the fixed footer and the overflow of the main sidebar container. Trying to achieve a layout where the scrollable element stays within the designated space. Current setup includes: ...
Struggling to center nav-content by using the center option Hoping for it to have this appearance. Unfortunately, applying it directly to the ul attribute doesn't yield desired results. Instead, it ends up looking like this. This is the code snipp ...
Currently, I am running a JavaScript game from file:// and attempting to send a post request to a localhost Rails server in order to add a new high score. In my JavaScript: highScoresEntryView.keyHandlers = function() { var that = this; this.pa ...
My toggle function is not working correctly in my FaQ section. When a user clicks on a topic, the bottom section should appear, but the <p> tag is being displayed across the entire line instead of just one word.. Here is an image to help illustrate ...