dropdown.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>
    <style>
      html, body {
          height: 100%;
        }
        
        .navbar-toggle {
          float: right;
          margin-left: 15px;
        }
        
        .navmenu {
          z-index: 1;
        }
        .project
        {
        position:absolute;
        left:15px;
        top:-15px;
        z-index:1;
        }
        .canvas {
          position: relative;
          left: 0;
          z-index: 2;
          min-height: 100%;
          padding: 50px 0 0 0;
          background: #fff;
        }
        
        @media (min-width: 0) {
          .navbar-toggle {
            display: block; /* force showing the toggle */
          }
        }
        
        @media (min-width: 2000px) {
          body {
            padding: 0;
          }
          .navbar {
            right: auto;
            background-color: transparent;
            border: none;
          }
          .navbar-default {
            background-color: transparent;
            border-color: transparent;
          }
          .canvas {
            padding: 0;
          }
        }
        
        .styled-select {
		   background: transparent;
		   width: 90%;
		   padding: 5px;
		   margin-left: 5px;
		   margin-top: 5px;
		   color: red;
		   font-size: 16px;
		   line-height: 1;
		   border: 0;
		   border-radius: 0;
		   height: 34px;
		   -webkit-appearance: none;
	   }
      </style>
  </head>

  <body>

    <div class="navmenu navmenu-default navmenu-fixed-right offcanvas">
      <a class="navmenu-brand" href="#">va3c Viewer</a>
      <ul class="nav navmenu-nav">
        <li style="padding-top:20px;padding-left:13px;"><b>EXAMPLES</b></li>
        <li><a href=""><i class="icon-adjust"></i>Revit</a></li>
        <li><a href="../navmenu-push/">Grasshopper</a></li>
        <li class="active"><a href="./">3DS Max</a></li>
        <li><a href="../navbar-offcanvas/">Sketchup</a></li>
        <li style="padding-top:20px;padding-left:13px;"><b>UPLOAD</b></li>
        <li><a href="">Drag File Here</a></li>
        <li style="padding-top:20px;padding-left:13px;"><b>SUN</b></li>
        <li>
		    <select class="styled-select" onchange="getComboA(this)">
			  <option value="New York">New York</option>
			  <option value="Sao Paulo">Sao Paulo</option>
			  <option value="Paris">Paris</option>
			  <option value="Tokyo">Tokyo</option>
			  <option value="Moscow">Moscow</option>
			</select>
		</li>
        <li><a href="">Month</a></li>
        <li><a href="">Day</a></li>
        <li><a href="">Year</a></li>
        <li style="padding-top:20px;padding-left:13px;"><b>CAMERA</b></li>
        <li><a href="">1st-Person | Trackball | Orbit</a></li>
      </ul>
    </div>

    <div>
    <script src=https://mrdoob.github.io/three.js/build/three.min.js ></script>
    <script src=https://mrdoob.github.io/three.js/examples/js/controls/TrackballControls.js ></script>
    <script src=https://mrdoob.github.io/three.js/examples/js/libs/stats.min.js ></script>
    <script src=va3c-viewer.js ></script>
    <script>
    	init();
    	animate();
    	function getComboA(sel) {
			var value = sel.value;
			//alert(value);
			var latlong;
			switch(value) {
			case "New York":
				latlong = [42.3482, -75.189];
				break;
			case "Sao Paulo":
				latlong = [-23.55, -46.633];
				break;
			case "Paris":
				latlong = [48.8567, 2.3508];
				break;
			case "Moscow":
				latlong = [55.75, 37.6167];
				break;
			case "Tokyo":
				latlong = [35.6895, 139.6917];
				break;
			default:
				latlong = [42.3482, -75.189];
			} 
			//tokyoLatitude:35.6895, Longitude:139.6917 
			//New York coordinates
			//Latitude:42.3482, Longitude:-75.189
			//saoaulo
			//Latitude:-23.55, Longitude:-46.633 
			//Moscow coordinates
			//Latitude:55.75, Longitude:37.6167
			//Paris coordinates
			//Latitude:48.8567, Longitude:2.3508
			alert(latlong);
		}
    </script>
    </div>
    
    <div class="canvas">
      <div style="background-color: transparent;border-color: transparent;" class="navbar navbar-default navbar-fixed-top">
        <h1 class="project"><b>va3c viewer</b></h1> 
        <button style="background-color: rgb(240,240,240);" type="button" class="navbar-toggle expand" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
    </div>

  </body>
</html>