Virtual Keyboard

 

Paste in OPACUserCSS

<style type="text/css">

#divUrduKeyboardcontainer {

 }

 #DisplayUrduKeyboard {

color: black;

cursor: pointer;

}

 #UrduKeyboard {

background-color: #E1F5A9;

height: 130px;

width: 430px;

border: 1px solid black;

border-bottom-left-radius: 20px;

border-bottom-right-radius: 20px;

}

 #FirstLine, #SecondLine, #ThirdLine, #FourthLine {

text-align: center;

height: 30px;

}

 .UrduKey {

font-size: 16px;

font-weight: bold;

color: #ffffff;

background: #3498db;

background-image: -webkit-linear-gradient(top, #3498db, #2980b9);

background-image: -moz-linear-gradient(top, #3498db, #2980b9);

background-image: -ms-linear-gradient(top, #3498db, #2980b9);

background-image: -o-linear-gradient(top, #3498db, #2980b9);

background-image: linear-gradient(to bottom, #3498db, #2980b9);

-webkit-border-radius: 7;

-moz-border-radius: 7;

border-radius: 7px;

width: 18px;

height: 20px;

cursor:pointer;

display: inline-block;

text-align: center;

margin-top: 10px;

padding: 2px;

}

 .UrduKey:hover {

background: white;

color: black;

width: 22px;

height: 24px;

font-size: 18px;

}

 .UrduKey:active {

background: red;

color: yellow;

position:relative;

top:2px;

}

 

.UrduKeySpace {

font-size: 20px;

color: white;

background: #3498db;

background-image: -webkit-linear-gradient(top, #3498db, #2980b9);

background-image: -moz-linear-gradient(top, #3498db, #2980b9);

background-image: -ms-linear-gradient(top, #3498db, #2980b9);

background-image: -o-linear-gradient(top, #3498db, #2980b9);

background-image: linear-gradient(to bottom, #3498db, #2980b9);

border:0px solid #4a3a00;

text-shadow: 0px -1px 1px #222222;

box-shadow: 0px 4px 0px #2e2300;

-moz-box-shadow: 0px 4px 0px #2e2300;

-webkit-box-shadow: 0px 4px 0px #2e2300;

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

width: 300px;

height: 20px;

cursor:pointer;

display: inline-block;

text-align: center;

margin-top: 10px;

}

 .UrduKeySpace:hover {

background: white;

color: black;

}

 

.UrduKeySpace:active {

background: red;

color: yellow;

position:relative;

top:2px;

}

#translControl1 {

});

Paste in   OPACUserJS 

 

$(document).ready(function(){

$("#opac-main-search").append($("#divUrduKeyboardcontainer"));

})

 

function WriteLetter(Letter) {

textfield = document.getElementById("translControl1");

textfield.value = textfield.value + Letter;

}

 

function DisplayUrduKeyboardFunction () {

x = document.getElementById("UrduKeyboard");

if (x.style.display == "none") {

x.style.display = "block";

}

else if (x.style.display == "block") {

x.style.display = "none";

}

}

 

</script>

 

 

 

<div id="divUrduKeyboardcontainer">

<center><span id="DisplayUrduKeyboard" onclick="DisplayUrduKeyboardFunction();"> اردو کى بورڈ</span>

<div id="UrduKeyboard" style="display:none;">

<div id="FirstLine">

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ذ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ڈ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">د</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">خ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ح</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">چ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ج</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ث</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ٹ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ت</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">پ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ب</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">آ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">أ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ا</div>

<div class="UrduKey" onclick="WriteLetter2(this.innerHTML);">ّ</div>

</div>

<div id="SecondLine">

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ق</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ف</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">غ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ع</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ظ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ط</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ض</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ص</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ش</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">س</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ژ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ز</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ڑ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ر</div>

</div>

<div id="ThirdLine">

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ے</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ي</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ى</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ء</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ھ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ه</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ؤ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">و</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ن</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">م</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ل</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">گ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ک</div>

</div>

<div id="FourthLine">

<div class="UrduKeySpace" onclick="WriteLetter(this.innerHTML);"> </div>