Switch between a JavaScript and CSS file with every click using jQuery on a single link

"Kundan Singh Chouhan" assisted me in resolving a problem a few weeks back: How to call a CSS file using JQuery .append() and delete it on the second click

However, the issue has since become more complex. I now aim to incorporate our ancient script, "Rovás," into the website: Visit Jakabszallas.hu

The challenge lies in not being able to simply use font-face CSS due to specific characters like "dzs, cs, gy, ty" having unique representations in Rovás writing. Consequently, these characters do not align with their Latin counterparts on the keyboard.

This led to the creation of a custom JavaScript solution: Explore Rovásmag

Currently, I am implementing this by triggering it through a link on the site's top-right corner, similar to how I previously used font-face.

This is the relevant link:

<li class="skip-link-rovas"><a class="assistive-text" href="#" accesskey="7">Toggle Rovás</a></li>

At the bottom of my site, you will find the following JavaScript code:

<script src="http://jakabszallas.hu/wp-content/themes/jakabszallasv2/js/rovasmag.js" type="text/javascript"></script><!-- Rovas -->
<script src="http://jakabszallas.hu/wp-content/themes/jakabszallasv2/js/scripts.js" type="text/javascript"></script><!-- Additional scripts -->

Within the scripts.js file, there are two JQuery scripts present:

// JQuery CSS switcher (Rovás)
$(document).ready(function() {
    $(".skip-link-rovas").click(function(){
        if($(this).find("link").length <= 0)
            $(this).append('<link rel="stylesheet" type="text/css" media="all" href="http://jakabszallas.hu/wp-content/themes/jakabszallasv2/css/rovas.css" />');
        else
            $(this).find("link").remove();
    });
});

$(document).ready(function() {
    $('.skip-link-rovas').click(function(){
        rovasmag_atro();
    });
});

The function"rovasmag_atro();" triggers the "rovasmag.js" script, converting all text to Rovás script and changing the writing direction from right to left. It is crucial for displaying the correct characters for "dzs, cs, gy, ty" letters in the Rovás font.

As someone unfamiliar with JavaScript programming, my question remains: Is there a way to integrate "rovasmag_atro()" into the aforementioned script that calls the CSS file and toggles it off on the second click?

Answer №1

Turning off the character translation on a webpage may not be as simple as flipping a switch, as it requires reversing all the translations that have been applied. One way to achieve this is by copying the entire page contents into a JavaScript variable when the page loads. You can then apply the necessary CSS and start the font/character translation process. If you later want to remove the font translation, you can do so by replacing the current page contents with the contents stored in the JavaScript variable. I have demonstrated this technique on jsFiddle:

http://jsfiddle.net/DF2w9/5/

<a class="remove" href="#">remove</a>

<script type="text/JavaScript">
var normalHTML = '';
$(document).ready(function() {
    normalHTML = $('html').html();
    $('html').append('<link rel="stylesheet" type="text/css" media="all" href="http://jakabszallas.hu/wp-content/themes/jakabszallasv2/css/rovas.css" />');
    rovasmag_atro();

    $("a.remove").click(function() {
        $('html').html(normalHTML);
    });
});
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript not populating data in ASP TextBox or Input field

<asp:TextBox ID="DataBus" runat="server"></asp:TextBox> This is a text box element that is currently not being populated with any data from JavaScript. $("#DataBus").val('hi'); Even after trying the HTML code below, the issue persi ...

Obtain the OrbitControls view result from ThreeJS and set it as the default position

When implementing OrbitControls in ThreeJS, users can freely move the camera around. However, upon refreshing the model, the camera resets to its default position. I attempted to preserve the camera position and rotation using the code snippet below: camer ...

Enable users to click on <tr> rows and display the outcome in a div using jQuery

Here are a couple of inquiries: 1. Is there a way to make my table rows clickable and simultaneously load ajax content in the ajaxContent div? 2. How can I incorporate a loading animation within the <div id='ajaxContent'> This page is c ...

Using an if statement within a map function in a React component

I am facing a challenge with using an if statement inside a map function without changing the return value. Here is my code snippet: this.example = this.state.data.map((item) => { return( <div> {if(1 + 1 == 2){ dat ...

Automatic capitalization feature for input fields implemented with AngularJS

I have integrated a directive into my input field to validate a license key against a server-side API. While this functionality works well, I also want the license key to automatically add hyphens and appear in capital letters. For example, when a user in ...

Google Maps Shifting Focus

I'm currently working on an AngularJS app that involves multiple locations, and the goal is for users to click on a location which then redirects them to the specific spot on Google Maps. However, I've encountered an issue when trying to relocate ...

When making an AJAX POST request, a Javascript associative array may unexpectedly become empty

I've encountered a problem. There's a page with multiple text fields that have the same class name but different attribute values. I need to create an array that has unique keys which combine the attribute values of the text fields, and then pass ...

Troubleshooting: Issues with Jquery's replaceWith function

I'm facing an issue with a table I have that includes a button in one of its columns. The button is supposed to toggle the class of the current row in the table and then replace itself once clicked. $(document).ready(function() { $(".checkOut"). ...

Combining CSS to Align Two Form Fields Side by Side

I recently came across an online form and I'm attempting to customize it by aligning the phone and email text fields next to each other. I have made some progress, but the formatting is not quite right. The fields are too small and adjusting their siz ...

Transferring information through Ajax to PHP

When using AJAX to send a string via the GET method, I've noticed that punctuation characters sometimes don't appear when echoed in PHP. For instance, sending "sub + 12" results in PHP echoing "sub 12", and sending "&()*" echoes an empty str ...

Node.js Discord Bot: Automatically assigning roles based on user's ID

How can I assign a role to a user using just their user id? It seems like the GuildMember object is needed for this purpose. let member = // retrieve member using id member.roles.add('my role id') ...

What is the best way to make just the background image transparent using HTML and CSS?

Hey there! I'm trying to make just the background image transparent, while leaving everything else non-transparent. Is this possible with Bootstrap? Here's a snippet of my HTML: HTML Section: <!-- Homepage Section --> <section id= ...

Get the JSON array that corresponds to a particular country

I have been searching for a solution to my specific issue, but so far have not found one. Here is the json data I am working with: { "name": "United States", "code": "US", "label": "State", ... "province_codes": { ...

Retrieve the initial span within a <div> by using the data-id

Looking to access the initial span element inside a div? To retrieve the DOM element of the div, use the following code snippet: helper: function(event,ui){ var dataId = $(this).data('id'); console.log($('[data-id=" ...

Troubleshooting custom filtering with jQuery Datatables across different tables is presenting challenges

I am currently utilizing the Datatables 1.10 jQuery plug-in and I am interested in implementing the custom search feature to filter two tables simultaneously on a single page, as shown below: function applyFilterByErrorClass(propertiesTable, errorClassNam ...

How do I change the 'CSS Theme' of my website?

With Halloween approaching, I am eager to transform my website's BODY css into a spooky Halloween theme. The challenge is that my .Net pages are Templates. Is there a way for me to ensure that the body class checks for an existing CSS theme override? ...

Attempting to execute npm install for an Odin project task, encountered the error "Module not Found". // A new error has surfaced, continue reading below

Trying to run npm install for the Odin Project JavaScript Fundamentals Part 4 lesson has been quite a challenge. Initially, upon forking and cloning the repository and running npm install as per the instructions, I encountered a permission error. However, ...

Can Vue.js accommodate nesting a v-model within an array?

How can I implement filtering on groups within a Vue app using a nested array with v-model? I attempted to achieve this using the following template... <div id="app"> <div class="filter__control filter__control--tags"> <div class="fi ...

Retrieving data from router in Angular

I have been working on a web application using Angular, and I have implemented a fixed header in the index.html file. The header appears on every page, with content injected through a ui-view. However, I now want to display this header only after the user ...

Firebase Error: Trying to access properties of null object (indexOf)

Whenever I try to console.log(docSnap), a Firebase error shows up as seen in the image below. Despite attempting various solutions, none have proved effective. https://i.sstatic.net/9R4vE.png useEffect(() => { if (folderId === null) { ...