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>
