Sunday, November 26, 2023

On-Screen Keyboard Urdu Keyboard On Koha OPAC

 On-Screen Keyboard Urdu Keyboard


1. Urdu: Koha > Administration > System Preferences > OpacCustomSearch

Paste the following code here:


<script type="text/javascript">

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>

<style type="text/css">

#divUrduKeyboardcontainer {

}


#DisplayUrduKeyboard {

color: white;

cursor: pointer;

margin-left:2px;

}


#UrduKeyboard {

height: 130px;

}


#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: 2;

-moz-border-radius: 2;

border-radius: 2px;

width: 20px;

height: 20px;

cursor:pointer;

display: inline-block;

text-align: center;

margin-top: 10px;

padding: 2px;

}


.UrduKey:hover {

background: white;

color: black;

}


.UrduKey:active {

background: white;

color: gray;

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;

border-radius: 2px;

-moz-border-radius: 2px;

-webkit-border-radius: 2px;

width: 200px;

height: 20px;

cursor:pointer;

display: inline-block;

text-align: center;

margin-top: 10px;

}


.UrduKeySpace:hover {

background: white;

color: black;

}


.UrduKeySpace:active {

background: white;

color: yellow;

position:relative;

top:2px;

}


#translControl1 {


}


/* End of CSS for Koha CoverFlow Plugin */


.mastheadsearch {

    

   color:#FFF;


    -webkit-border-radius: 7px;

    -moz-border-radius: 7px;

    border-radius: 7px;

    padding: .8em;

    margin: .5em 0;

    background: #c7c7c1;

    background: -moz-linear-gradient(top, #c7c7c1 38%, #a7a7a2 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(38%, #c7c7c1), color-stop(100%, #a7a7a2));

    background: -webkit-linear-gradient(top, #c7c7c1 38%, #a7a7a2 100%);

    background: -o-linear-gradient(top, #c7c7c1 38%, #a7a7a2 100%);

    background: -ms-linear-gradient(top, #c7c7c1 38%, #a7a7a2 100%);

    background: linear-gradient(to bottom, #0B0B23, rgb(70, 71, 113) 100%);

    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#c7c7c1', endColorstr='#a7a7a2', GradientType=0);

}


    </style>


    <form name="searchform" method="get" action="/cgi-bin/koha/opac-search.pl" id="searchform" class="form-inline">

        <label for="masthead_search">

            Search

        </label>

        <select name="idx" id="masthead_search">

            <option value="">Library catalog</option>

            <option value="ti">Title</option>

            <option value="au">Author</option>

            <option value="su">Subject</option>

            <option value="nb">ISBN</option>

            <option value="se">Series</option>

            <option value="bc">Accession No.</option>

            <option value="callnum">Call number</option>

        </select>

        <input type="text" title="Type search term" class="transl1" id="translControl1" name="q"><span id="translControl"></span>

        <div class="input-append">

            <button type="submit" id="searchsubmit" class="btn btn-primary">Go</button> 

            <span id="DisplayUrduKeyboard" onclick="DisplayUrduKeyboardFunction();" class="btn btn-primary">اردو</span>

      

  </div>

    </form>


<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>


</div>

</div>

</center>

</div>



No comments:

Post a Comment