Search code examples
javascriptjquerycsselementfont-face

Toggle a js and css file in each click with Jquery on the same link

"Kundan Singh Chouhan" helped me to solve this problem a few weeks ago: Call a CSS file by Jquery .append(), and delete this by second click on the same element

But the problem became more complex. I want to use our ancient writing, the "Rovás" on the site: Jakabszallas.hu

I can't use a simple font-face CSS, because there are letters (dzs, cs, gy, ty) which have one simple character in the Rovás writing. That's why the creators of the "Rovás" font families not putted the characters on the keyboard where they belonging. So, the rovás "á" letter is not under the latin "á" character on my keyboard.

That's why they created this javascript: Rovásmag

Right now I using this on my site and I triggering with the same link on the site (top right corner), when I used with font-face in the past.

So, there is this link:

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

There is this javascript on the bottom of my site:

<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 -->

In the scripts.js this two jquery scripts:

// 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();
    });
});

"rovasmag_atro();" is calling the "rovasmag.js" javascript, which is changing every font to "Rovás" writing and also changing the writing direction from right to left. This javascript is the only way to change the "dzs, cs, gy, ty" letters to the proper character in the "Rovás" font.

I'm not javascript programmer at all! My question is: Is it possible to integrate somehow the "rovasmag_atro()" into the upper javascript, which is call the css file and on the second click, it's turning off?

Solution

  • It does not appear that you can simply turn if off because you would need to reverse all those character translations. Instead, as the page loads, you can copy the entire page contents to a JS variable. Then add the CSS and start the font/character translation. Then to remove the font translation, simply replace the entire page contents with the Javascript variable. I've created a jsFiddle with this technique :

    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>