java script for navigation with key board ....
<html>
<head>
<style>
.focuson{
background-color:red;
text-align:center;
border:1px solid black;
}
.focusoff{
background-color:blue;
text-align:center;
border:1px solid black;
}
</style>
<script language="javascript">
var JSONObject = { "name" : "vicky",
"address" : "D.NO-4-98,Bhimavaram",
"age" : 22,
"phone" : "9603904131",
"MobileNo" : 9949132669
};
window.onkeydown = getKeyCode;
var GetIds = [];
var cnt = 0;
var Names =["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31"];
var max = 0;
//var min= 7;
var nav = 3;
function start() {
document.getElementById("display").style.visibility = 'hidden';
if(Names.length<nav)
nav = Names.length;
for(var i =0; i<nav;i++)
{
GetIds[i] = document.getElementById("div_"+i);
}
fillDivs();
GetIds[0].className ="focuson";//focusing first division
}
//filling divisions with data in array called Names
function fillDivs(){
for(var i =0; i<nav;i++)
{
GetIds[i].innerHTML = "<h1>"+Names[i]+"</h1>";
}
}
function getKeyCode(event)
{
var keyCode = event.keyCode;
//alert(keyCode);
switch(keyCode)
{
case 38: document.getElementById("display").style.visibility = 'hidden';
GetIds[cnt].className ="focusoff";//up arow
cnt--;
if(cnt<0)
{
cnt = 0;
if(nav>2)
fillup();
}
GetIds[cnt].className ="focuson";
break;
case 40: document.getElementById("display").style.visibility = 'hidden';
try{
GetIds[cnt].className ="focusoff";//down arrow
cnt++;
if(cnt>=nav)
{
cnt = nav-1;
if(Names.length>nav)
filldown();
}
GetIds[cnt].className ="focuson";
}catch(ex){
alert("error navigation ::"+ex);
}
break;
case 37: document.getElementById("display").style.visibility = 'hidden';
GetIds[cnt].className ="focusoff";//left arrow
cnt--;
if(cnt<0)
{
cnt = 0;
fillup();
}
GetIds[cnt].className ="focuson";
break;
case 39:
document.getElementById("display").style.visibility = 'hidden';
GetIds[cnt].className ="focusoff";//right arrow
cnt++;
if(cnt>=nav)
{
cnt = 2;
filldown();
}
GetIds[cnt].className ="focuson";
break;
case 13:
document.getElementById("display").style.visibility = "visible";
document.getElementById("name").innerHTML=JSONObject.name;
document.getElementById("address").innerHTML=JSONObject.address;
document.getElementById("age").innerHTML=JSONObject.age;
document.getElementById("landline").innerHTML=JSONObject.phone;
document.getElementById("mobileno").innerHTML=JSONObject.MobileNo;
break;
}
}
function filldown()
{
if((max+3)<=Names.length-1)
max=max+3;
for(var i =0; i<3;i++)
{
GetIds[i].innerHTML = "<h1>"+Names[max+i]+"</h1>";
}
}
function fillup()
{
if((max-3)<Names.length-3)
max--;
for(var i =0; i<3;i++)
{
if(max<0)
{
max=0;
}
GetIds[i].innerHTML = "<h1>"+Names[max+i]+"</h1>";
}
}
</script>
</head>
<body onload="start()">
<table>
<tr colspan="3">
<td>
<div id="div_0" class="focusoff" style="width:256px;"><h1> </h1></div>
<div id="div_1" class="focusoff" style="width:256px;"><h1> </h1></div>
<div id="div_2" class="focusoff" style="width:256px;"><h1> </h1></div>
</td>
<td>
</td>
<td>
<div id="display" style="width:256px; height=800px; background-color:green; text-align:center; border:1px solid black ">
<p>
name: <span id="name"></span><br />
Address: <span id="address"></span><br />
age: <span id="age"></span><br />
LandLine: <span id="landline"></span><br />
Mobile No: <span id="mobileno"></span><br />
</p>
</div>
</td>
</tr>
</body>
</html>
Output:
Output:
|
|
name:
Address: age: LandLine: Mobile No: |
Posts
