How do i save CSS values after page reload with jQuery?

Question

I have a simple language dropdown on my site that changes the language inside an iframe. The problem is, whenever i swich to the next page in the iframe the language sets back to its default value, even though the dropdown is still on another language.

HTML:

<input type="checkbox" id="checkbox_English" checked style="display: none">
<input type="checkbox" id="checkbox_German" style="display: none">
    <select id="language_Dropdown">
        <option value="english">English</option>
        <option value="german">Deutsch</option>
    </select>

CSS on main page:

#language_Dropdown{
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-top: 1px black solid;
    border-right: 1px black solid;
    border-bottom: 2.5px black solid;
    border-left: 1px black solid;
    border-radius: 7.5%;
    font-family: PixelGosub, Roboto, sans-serif;
    color: white;
    background-color: black;}

CSS in iFrame:

.english{
    display: unset;}
.german{
    display: none;}

jQuery:

$(document).ready(function() {
    $( "#language_Dropdown" ).change(function() {
        var option = $("#language_Dropdown").val();
        if (option == "english") {
            $( "#checkbox_English" ).prop( "checked", true );
            $( "#checkbox_German" ).prop( "checked", false );
            var iFrame = $("#iFrame_Content").contents();
            iFrame.find(".english").css("display", "unset");
            iFrame.find(".german").css("display", "none");
        }
        else if (option == "german"){
            $( "#checkbox_English" ).prop( "checked", false );
            $( "#checkbox_German" ).prop( "checked", true );
            var iFrame = $("#iFrame_Content").contents();
            iFrame.find(".english").css("display", "none");
            iFrame.find(".german").css("display", "unset");
        }
    });
});

I've read i have to use cookies to do that, but i'm pretty new to jQuery and most solutions i looked up were pretty advanced... Is there a more simpler way to just add something to my code to make it work, or am i on a complety wrong track?

What's the URL of the iframe? You might need to open the iframe with a query parameter like; `http://www.iframe.com?lang=eng` — Jerdine Sabio, Nov 24 '19 at 04:33
Welcome to Stack Overflow. if this is all under the same domain, you can do this with a Browser Cookie to LocalStorage variable. The question becomes how long do you want the browser to store the preference. You can also write some handy functions to make adding and reading from the cookie easier. — Twisty, Nov 24 '19 at 05:42
Take a look here: https://stackoverflow.com/questions/56503795/get-saved-value-from-browsers/56504708#56504708 — Twisty, Nov 24 '19 at 05:43
You are reaching into the iframe document with `iFrame.find` to directly manipulate the display property of elements in there (you are not even _using_ classes as you mention in the title, you are setting inline styles) - so of course all of that gets lost, when the document inside the iframe is completely replaced by navigation to a new one. You would have to handle that via the `load` event of the iframe, to repeat that same procedure - either from the parent document, or from inside the (new) document loaded into it. — 04FS, Nov 24 '19 at 07:01
But using iframes has so many issues (usability, SEO, ...), that I don't think it warrants going into the above much further - you should rather change the whole approach. Look into server-side techniques for stuff like this, rather than client-side. (Specifically bad in regards to SEO here would probably be not only the use of iframes itself, but that you have two language versions in the same document to begin with. You could / should have each with a proper `lang` set attribute on the appropriate elements - but separate documents per language would be preferable in the first place.) — 04FS, Nov 24 '19 at 07:03

score 0 · Answer 1 · answered Nov 24 '19 at 12:32

Thanks for all the replies,

i looked up the load method as 04FS mentioned and found something that works for me.

Here is the added code:

$(document).ready(function() {
    $("#iFrame_Content").on( "load", function() {
        var option = $("#language_Dropdown").val();
        if (option == "english") {
            var iFrame = $("#iFrame_Content").contents();
            iFrame.find(".english").css("display", "unset");
            iFrame.find(".german").css("display", "none");
        }
        else if (option == "german") {
            var iFrame = $("#iFrame_Content").contents();
            iFrame.find(".english").css("display", "none");
            iFrame.find(".german").css("display", "unset");
        }
    });
});

How do i save CSS values after page reload with jQuery?

1 Answers1