homepage Welcome to WebmasterWorld Guest from 23.22.97.26
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Blank keys on onMouseDown and show keys onMouseUp in virtual keyboard
csbalaji1




msg:4487479
 6:05 am on Aug 23, 2012 (gmt 0)

Hi,

I am developing Virtual keyboard for my project using javascript.
I am facing problem to blank key when onMouseDown event fired and show key when onMouseUp event fired.
pls sugest me the solution for this.
I have pasted sample code below for your reference.(u can see city bank Bharain login page also)


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Virtual Keyboard</title>

<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
.on {
display: none;
}

.off {
display: block;
}

#keyboard {
margin: 0;
padding: 0;
list-style: none;
}

#keyboard li {
font-family: Verdana, Arial, Helvetica, sans-serif;font-weight:bold;
float: right;
margin: 0 0px 0px 0;
width: 20px;
height: 20px;
line-height:20px;
text-align: center;
background: #fff;
border: 2px solid #C0C0C0;


}


#keyboard li:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #e5e5e5;

}
</style>


<script type="text/javascript" >

// to blank the keys until key released
function doBlankKeys()
{
var Acoll = document.getElementsByTagName("div");

for (LC=0; LC<Acoll.length; LC++)
{
if(Acoll[LC].className=="off")
{
Acoll[LC].className="on";

}
}

}

// to show keys
function doShowKeys(){

var Acoll = document.getElementsByTagName("div");
//alert(Acoll .length);
for (LC=0; LC<Acoll.length; LC++)
{
if(Acoll[LC].className=="on")
{
Acoll[LC].className="off";

}
}

}

function fix(){

doShowKeys();
}
</script>

</head>

<body >

<ul id="keyboard">
<table>
<tr>
<!-- <td><li class="symbol"><div class="off">~</div></li></td> -->
<td ><li class="symbol"><div ID="vkb_spl_13" class="off" onMouseDown="doBlankKeys();"
onMouseUp="doShowKeys();" onmouseout="fix();>:</div></li></td>
<td><li class="symbol"><div class="off" ID="vkb_spl_0" onMouseDown="doBlankKeys();"
onMouseUp="doShowKeys();" onmouseout="fix();">?</div></li></td>
<td><li class="symbol"><div class="off" ID="vkb_spl_1" onMouseDown="doBlankKeys();"
onMouseUp="doShowKeys();" onmouseout="fix();">/</div></li></td>
<td><li class="symbol"><div class="off" ID="vkb_spl_2" onMouseDown="doBlankKeys();"
onMouseUp="doShowKeys();" onmouseout="fix();">&amp;</div></li></td>
<td><li class="symbol"><div class="off" ID="vkb_spl_3" onMouseDown="doBlankKeys();"
onMouseUp="doShowKeys();" onmouseout="fix();">#</div></li></td>
<td><li class="symbol"><div class="off" ID="vkb_spl_4" onMouseDown="doBlankKeys();"
onMouseUp="doShowKeys();" onmouseout="fix();">*</div></li></td>
<td><li class="symbol"><div class="off" ID="vkb_spl_5" onMouseDown="doBlankKeys();"
onMouseUp="doShowKeys();" onmouseout="fix();">=</div></li></td>


</tr>
</table>
<ul>
</body>
</html>

 

daveVk




msg:4487905
 7:01 am on Aug 24, 2012 (gmt 0)

If you are trying to blank just the "pressed" key then onMouseDown="this.className='on';"

If you are trying to blank all keys, put the on/off class on the #keyboard and just toggle that.

Changing 'block' in the CSS will cause the keys to move position, try color or visibility instead.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved