How to select a language from a popup click button in css/html ?


Tags: javascript,html,css

Problem :

I am working on a language selector button on a webpage. The language selector button here is the green settings button as shown below:

enter image description here

It will work in way that if I click on the button then the drop-down menu will show up. If the language is already in English then it will ask us to select the French language and vice-versa as shown below:

enter image description here



enter image description here

The HTML which I have used for the button is:

<span class="label-mobile-languageselector" onclick="myFunction()"><img src="img/SettingsSign.png" alt="LanguageSelector">  
  <span class="popuptext" id="myPopup">English</span>
</span>

I am wondering, how can I display the whole page in English or French after clicking the English or French text as shown above in the 2 images ? At this moment; if I click on "French" text, "English" text is getting displayed on the popup and vice-versa but there is no language conversion.

The CSS which I have used for the button is:

/* Popup container - can be anything you want */
.label-mobile-languageselector {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The actual popup */
.label-mobile-languageselector .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: red;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: -55%;
    left: 45%;
    margin-left: -80px;
}

/* Popup arrow */
.label-mobile-languageselector .popuptext::after {
    content: "";
    position: absolute;
    top: -35%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: red transparent transparent transparent;
    transform: rotateX(180deg); 
}

/* Toggle this class - hide and show the popup */
.label-mobile-languageselector .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

I think (not sure) I need to write a JavaScript code in order to create the popup for it. The JavaScript which I have written in order to create popup is:

 function myFunction() {
  var popup = document.getElementById('myPopup');
  popup.classList.toggle('show')
  if (!popup.classList.toggle('show')) {
    if (popup.innerHTML == "English") {
      popup.innerHTML = "French";
      popup.classList.toggle('show')
    } else {
      popup.innerHTML = "English";
      popup.classList.toggle('show')
    }
  } else {
    popup.classList.toggle('show');
  }
}


Solution :

  1. Create a new HTML document in the language that you desire.
  2. Link to it

e.g. <a href="/fr/mypage" hreflang="fr" rel="alternate">This document in French</a>

HTML and JavaScript do not come with translation tools built in.


Third party automated translation tools, such as Google Translate, exist … but produce pretty poor results and are best left to users to initiate manually rather than having web authors endorse them.


    CSS Howto..

    How to add a mailto to a sentence without extra spacing?

    How to increase the size of an unicode icon awesome fonts relative to its container with CSS

    How to create a image transition hover effect with css without breaking the grid layout

    How do I tell what are the ids and classes of a rail html.erb component?

    How-to mix fixed and percentage heights/width using css without javascript

    How to center two columns using CSS without using a fixed width container?

    How to make a DIV float on top of another DIV without pushing down the CSS Underneath

    CSS- How to align background image over bottom border line? Jsfiddle included

    how to make a left aligned navigation with dropdown elements

    Hide element, but show CSS generated content

    How can I correctly center this div into its container? What is wrong?

    How do I float a div to the right of a title div without affecting the content of the title?

    Coming from Android XML layouts, how to place web page elements in XHTML?

    How to send web page in email body with css

    How can I use an inline style to add a shadow around the used portion of my page?

    How to make two buttons in column?

    How to get css background color on tag to span entire row

    In IE6, how to float item to right without clearing it?

    How do I trigger the popup dialog box automatically from iWebkit?

    CSS+HTML: How to draw table/cell border

    How to include google search result in my specified div width and height?

    How to find elements and siblings within a tree

    How to prevent slider from stretching?

    How to Create paragraph first letter uppercase in html & css (in special format)

    How to create new lines with less space HTML/CSS

    How to fill in blank space using html and css

    How to make sure pressed button remain “pressed down”

    How to prevent html div from expanding when text size is changed

    How to stretch container div from header to footer with html/css?

    How to implement fade in effect for CSS checkbox