3

I've made a simple website for my daughter. It is in Dutch and for every page there is a English version as well.

Dutch URL: nl/index.html

English URL: eng/index.html

What I would like to do is give the visitor the option to set one language as preference. So if they come to this site the next time they will automatically linked to the preferable page. I know this can be done with a cookie and saw the explanation on this forum ( How to remember the currently clicked url? javascript?PHP? ).

I've tried to make this work but apparently I am doing something wrong? Can somebody guide me through step by step? That would be great!

Kind regards, Jurgen

Community
  • 1
  • 1
Jurgen
  • 31
  • 1
  • 2
  • cookies are indeed the way to go, but without seeing any code we can't give much specific advice. Also, why did you tag your question "java" ? – fvu Jul 08 '12 at 14:23

1 Answers1

2

If you are familiar with jQuery you can use the cookies plug-in to persist the user's language choice and redirect him to the appropriate page every time he comes back to your site. Bellow is a sample code that uses two buttons to set the language:

First you declare the jQuery scripts (I use to store them in a Script folder, hence the following):

<script type="text/javascript" src="../Script/jquery-1.7.2.js"></script>
<script type="text/javascript" src="../Script/jquery.cookie.js"></script>

Then you define the page ready event like this:

$(function () {

    var url = 'your_url';
    var english_page = 'eng/index.html';
    var dutch_page = 'nl/index.html';

    if ($.cookie('default_page') != null) {
        if (window.location.href != url + '/' + $.cookie('default_page')) {
            window.location.href = url + '/' + $.cookie('default_page');
        }
    }

    $('#set_english_butt').click(function () {
        $.cookie('default_page', english_page, { expires: 999 });
        alert('English was set as the default language');
    });

    $('#set_dutch_butt').click(function () {
        $.cookie('default_page', dutch_page, { expires: 999 });
        alert('Dutch was set as the default language');
    });

});

Which is hooked to some html buttons in you page:

<div>
    <span>Select your language:</span>
    <button id="set_english_butt">English</button>
    <button id="set_dutch_butt">Dutch</button>
</div>
Thomas C. G. de Vilhena
  • 13,819
  • 3
  • 50
  • 44
  • Hello Thomas. Thank you for the answer. I did not give any code because I thought the link would do. Furthermore, I gave the tag 'java' because there is java involved isn't it. Thomas your code is pretty clear, do I need to put the 'define the page ready event' in script tags in the body? Sorry but I am not familiar with this kind of coding yet. Regards, Jurgen – Jurgen Jul 08 '12 at 16:07
  • Yes, you need to register it as you would do with regular javascript code, but inside your html page **head** tag, not in the body. Look [here](http://api.jquery.com/ready/) for more info about the *document ready event*. – Thomas C. G. de Vilhena Jul 08 '12 at 16:20
  • Okay, I've set up a quick free domain to do some testing. I think I did it exactly as you explained but it doe not work. Here is the site with the pages: http://jurvan.x10.mx/ – Jurgen Jul 08 '12 at 19:39
  • You inverted the order the scripts are defined. jQuery should be defined first because the cookie plug-in depends on it – Thomas C. G. de Vilhena Jul 08 '12 at 23:16
  • Wow! You're right. It works beautifully now, thanks. I did not know that the order matters. Finally I know what went wrong with other things (not related to this topic) as well. Again many thanks for you help. Jurgen – Jurgen Jul 09 '12 at 08:59