javascript dropdown menu and screen redirects

Javascript dropdown menu is mostly used for language options. On selection of an option from the dropdown, content is reloaded on the page in a different language. We can opt to open new content in a new window or some framesets too for other options but in case of language options, it's not practical. Lets see how we can do that.

Create a Dropdown Menu

First of all lets create a dropdown menu with some options.

<select id="lang" onchange="return reDirect()">
  <option value="newfile.html">English</option>
  <option value="newfile.html">French</option>
  <option value="newfile.html">Spanish</option>
</select>

Add Javascript to Redirect

Now, add the basic javascript code to redirect the user to a different page.

<script>
function reDirect(){
  var selected = document.getElementById('lang').value;
  location.replace(selected);
}
</script>

Redirect to Target Frames or New Windows

We can add further blocks of codes to make the page open in a new window or a specific frame too. For that, we need to add a bit more information in the dropdown options values.

Create a Dropdown Menu (Modified)

First of all lets create a dropdown menu with some options with target options added to them. Basically, we'll add a reference symbol which will be used to split the value. The first one will be the reference location while the second one will be the target. We'll add a frame too.

<select id="lang" onchange="return reDirect()">
  <option value="newfile.html*_self">English</option>
  <option value="newfile.html*_blank">French</option>
  <option value="newfile.html*_framename">Spanish</option>
</select>
<iframe src="" name="abcd" width="100%" height="600"></iframe>

Add Javascript to Redirect and Open in Defined Target

Now, add the javascript code to redirect the user to the defined target.

<script>
function reDirect(){
  var selected = document.getElementById('lang').value;
  var split = selected.lastIndexOf("*");
  var location = selected.substring(0,split);
  var target = selected.substring(split+1);
  if (target=="_self") {
    document.location=location;
  }else if (target=="_blank") {
    window.open(location);
  }else{
    parent.frames[target].location = location;
  }
}
</script>

Here, we stored the value from the dropdown to the variable named selected. Then, we splitted the reference string on the basis of * so that the string before the * is stored ina variable named location and the string after the * is stored in the variable named target. Then, with if statement, we checked the location and added commands to open the document in the defined target.

SCREEN REDIRECT

This tool is very useful in detecting a user's screen resolution and redirect him to a specific page.

<script>
var screensize = screen.width;
var resolution = (
  ((!(640-screensize))*1)+
  ((!(800-screensize))*2)+
  ((!(1024-screensize))*3)+
  ((!(1152-screensize))*4)+
  ((!(1280-screensize))*5)+
  ((!(1600-screensize))*6)
); 
if(!(resolution)) resolution = 1;
if (resolution=='1'){
  window.location='https://www.google.com';
}
if (resolution=='2') {
  window.location='https://www.bing.com';
}
if (resolution=='3') {
  window.location='https://www.yahoo.com';
}
if (resolution!='1' && resolution!='2' && resolution!='3'){
window.location='https://www.msn.com';
}
</script>

Just add a piece of simple mathematics and the redirecting URLs.

0 Like 0 Dislike 0 Comment Share Tweet