Question

I’m very much not a javascript/html/css person.

Even so I find myself in the position of having to do a webpage. It’s static the only thing you can do on it is click on flags to change dispay-language based on a cookie.

If the cookie says ‘this’ I write text in one language, and if the cookie says ‘that’ I write in another language. This works perfectly but I have to use lots of document.write statements and it’s ugly and cumbersome.

Right now I type the text I want and use a macro in emacs to fold the text at about 80 chars and put document.write(' in the beginning of each line and '); at the end. I then paste it into the web page in a if(cookie_this) { } else { }.

There must be a better way to do it… Please?
Edit:
I was looking workaround for the limitations in document.write

Constraints:

• No server side magic, that means no ruby/php/perl
• One page only, or rather only one visible url
• The solution should be simpler than the working one I have

Answer 1

Expanding on artlung’s answer:

You can display or hide things given a lang attribute (or any other criteria, such as a class name). In jQuery and HTML:

<p>Language:     <select id='languageSelector'>         <option value='en'>English</option>         <option value='es'>Espa&ntilde;ol</option>     </select> </p>  <div lang='en-us'> Hello </div>  <div lang='es'> Hola </div>  <script type='text/javascript'> var defaultLanguage = 'en'; var validLanguages = ['en', 'es'];  function setLanguage(lang, setCookie) {     if(!$.inArray(languages, lang))         lang = defaultLang;      if(typeof(setCookie) != 'undefined' && setCookie) {        $.cookie('language', lang);     }      // Hide all things which can be hidden due to language.     $('*[lang]').filter(function() { return $.inArray(languages, $(this).attr('lang')); }).hide();      // Show currently selected language.     $('*[lang^=' + lang + ']).show(); }  $(function() {     var lang = $.cookie('language'); // use jQuery.cookie plugin     setLanguage(lang);      $('#languageSelector').change(function() {         setLanguage($(this).val(), true);     }); }); </script>