Display content depending on the URL

Navigation
0

I am creating an error page that works in 2 languages. The idea is that by default show a <div="404-spanish"> with a URL of the type: www.jonathancenteno.com/estapaginanoexiste . However, when the URL appears / in /, the idea would be that the <div="404-spanish"> would stop showing and show the <div="404-english"> in a URL of the type: www.jonathancenteno.com/en/estapaginanoexiste .

Thanks in advance.

EDITED:

I have tried the following codes and none of them work for me. Although I do not know if they are correct either:

HTML: 

<div id="404-page"></div>
<div id="404-spanish"></div>
<div id="404-english"></div>

SCRIPT

Option 1: 

<script>
var win = window.location;

var webPath = win.pathname;

var parent = document.getElementById("404-page");

var child = document.getElementById("404-spanish");

var y = document.getElementById("404-english");


//Dividimos la string en un array
var splittedPath = webPath.split("/");

//El primer valor del array segun la estructura mostrada sería el del idioma
switch(splittedPath[0]) {
  case "en": 
    parent.replaceChild(y, child);
    break;

  default:

    break;
}
</script>

Option 2: 

 <script>
    var win = window.location;

    var webPath = win.pathname;

    var x = document.getElementById("404-spanish");

    var y = document.getElementById("404-english");


    //Dividimos la string en un array
    var splittedPath = webPath.split("/");

    //El primer valor del array segun la estructura mostrada sería el del idioma
    switch(splittedPath[0]) {
      case "en": 
        x.style.display = "none";
        y.style.display = "block";
        break;

      default:
       y.style.display = "none";
      break;
    }
    </script>
    
asked by Jonathan Centeno 16.07.2018 в 16:25
source

2 answers

0

I've tried the code that alex told you is the one you put in your second option and I think the problem with that code is that position 0 of splittedPath is empty, in the two tests I've done I've realized that to access the first option there is to put 1 and not 0. I have set your example changing the 0 by 1 and I added some alerts to see the difference, the first alert shows the full webPath (/ js), the second the element 0 of the pattern (it shows nothing) and the third the elemnto 1 (js). 

var win = window.location;

    var webPath = win.pathname;

    alert(webPath);

    var x = document.getElementById("404-spanish");

    var y = document.getElementById("404-english");


    //Dividimos la string en un array
    var splittedPath = webPath.split("/");
    
    alert(splittedPath[0]);
    alert(splittedPath[1]);


    //El primer valor del array segun la estructura mostrada sería el del idioma
    switch(splittedPath[1]) {
      case "js": 
        x.style.display = "none"
        y.style.display = "block"
        break;
      default:
       y.style.display = "none"
      break;
    }
.x {width:200px;height:200px;background:Red;}
.y {width:200px;height:200px;background:blue;display:none;}
<div id="404-page"></div>
<div class="x" id="404-spanish"></div>
<div class="y" id="404-english"></div>
    
answered by 16.07.2018 / 22:37
source
1

Suppose we have the following url:

  

www.jonathancenteno.com/en/estapaginanoexist

To get the language you want to show it would be something like this: 

var win = window.location;

var webPath = win.pathname;

//Dividimos la string en un array
var splittedPath = webPath.split("/");

//El primer valor del array segun la estructura mostrada sería el del idioma
switch(splittedPath[0]) {
  case "en":
    //Mostrar pagina en ingles
    break;
  case "es":
    //Mostrar pagina en español
    break;
  default:
    //La opcion que quiera mostrar por defecto
    break;
}

The code works in the following way:

  • In the first line we get the browser instance ( window.location );
  • In the second line we store in a variable called webPath the string corresponding to the URL, in this case it would be: /en/estapaginanoexiste
  • In the third line we divide the string separating it according to the character / , in such a way that we would have an array whose value 0 would be en and whose value 1 would be estapaginanoexiste
  • The fourth line is a switch in which depending on the value you have in the position 0 the array previously mentioned shows the HTML elements in one language or another, and that, if for the reason that said value does not match with none included in the switch, since the lines after default are executed.

Note: I have omitted the part of the code in which it is handled and includes html elements, if required, you can see more information on how to do it here

    
answered by 16.07.2018 в 17:17
Get the days of the week from a date - Javascript CLSID error {000209FF-0000-0000-C000-000000000046}