0

I've been trying to setup multilanguage option on my website. My site is onepage HTML based on bootstrap. I looked at the following code

function ChangeLanguage(selected) {
    alert(selected.value()); // Do whatever you want in here.
}

<div class="btn-group dropdown pull-right">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" >
        <span class="lang-sm lang-lbl-full" lang="en"></span> <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" >
        <li><span class="lang-sm lang-lbl-full" onclick="ChangeLanguage(this)" lang="ar" value="ar"></span></li>
        <li><span class="lang-sm lang-lbl-full" onclick="ChangeLanguage(this)" lang="en" value="en"></span></li>
        <li><span class="lang-sm lang-lbl-full" onclick="ChangeLanguage(this)" lang="fr" value="fr"></span></li>
    </ul>
</div>

I can't figure out how the calling of the other language works.

So my question is how do I call the right div(s) so that it would work.

If there are better ways of doing this other than using multiple divs I'm all ears.

dee.ronin
  • 1,032
  • 12
  • 22
Siavash
  • 9
  • 4
  • Do you want everything to be able to be translated? Look at this site I did for my Greek church. http://stnickporticons.com/ On the top left of the page under the menu is Greek that means Click the Greek language in the language selection to translate the page into Greek. – mlegg Aug 03 '18 at 00:59

1 Answers1

0

Actually multilingual has nothing to do with Bootstrap, for onepage website you can use Javascript with CSS to achieve. Here is a very simple example:

Elements with class name lang will be filtered by language selector, class name ar, en, fr for defining a language.

(function($) {
  $('#lang-selector').on('change', function() {
    $('body').attr('data-lang', $(this).val());
  });
})(jQuery);
.lang {
  display: none;
}
body[data-lang="ar"] .lang.ar {
  display: initial;
}
body[data-lang="en"] .lang.en {
  display: initial;
}
body[data-lang="fr"] .lang.fr {
  display: initial;
}
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body data-lang="ar">

  Select Language:
  <select id="lang-selector">
    <option value="ar">Arabic</option>
    <option value="en">English</option>
    <option value="fr">French</option>
  </select>
  
  <hr>

  <h2 class="lang ar">Arabic</h2>
  <h2 class="lang en">English</h2>
  <h2 class="lang fr">French</h2>

  <div class="content">
    <p class="lang ar">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
    </p>
    <p class="lang en">
    Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

    Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
    </p>
    <p class="lang fr">
    Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.

    Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
    </p>
  </div>

</body>
Chaska
  • 3,145
  • 1
  • 10
  • 17
  • Can I use this to make it so that by default it picks the language based on browser and then user can change it with the language dropdown menu? – Siavash Aug 07 '18 at 00:59
  • It involves detecting browser's language, please read this: https://stackoverflow.com/questions/1043339/javascript-for-detecting-browser-language-preference – Chaska Aug 07 '18 at 01:48
  • I tried to use your way to translate my site, but I couldn't even get past the nav bar without noticing that it started showing doubles and wouldn't hide the ones that are not supposed to be showing. – Siavash Aug 11 '18 at 22:47
  • Share your fiddle will be great – Chaska Aug 12 '18 at 04:14
  • any thoughts on my last comment? – Siavash Aug 17 '18 at 23:09
  • Would you provide fiddle version so that I can check it more easier. – Chaska Aug 20 '18 at 02:22
  • What you want to do is using Bootstrap Dropdown as your language switcher? – Chaska Aug 20 '18 at 15:17
  • I've updated the fiddle, take a look and see if this is what you want. Btw your html markup pis quite messy and syntax is not correct, and there are too many js libraries are missing. You should study more about Bootstrap before asking any other questions. – Chaska Aug 20 '18 at 15:41
  • oh, sorry I didn't add those. I thought you meant to put the code piece that I used in fiddle and that's what I did. The site is working :D – Siavash Aug 20 '18 at 18:46
  • Would you please vote vote my answer up and accept it? – Chaska Aug 21 '18 at 04:30
  • I don't see your changes in the fiddle page :( – Siavash Aug 24 '18 at 05:52
  • so you're not gonna help me? – Siavash Aug 25 '18 at 08:21