Can i use the following code with prototype library. It is code that are using with jQuary. id_idx=0; $.browser.msie6 = $.browser.msie && /MSIE 6\.0/i.test(window.navigator.userAgent) && !/MSIE 7\.0/i.test(window.navigator.userAgent); jQuery.fn.setKeyboard = function(kblayout){ kblayout = (kblayout>0 && kblayout<6)?kblayout:1; this.each(function() { if($(this).attr('id')==null || $(this).attr('id')=='') { $(this).attr('id','auto_id_'+(++id_idx)); } /* 1 - English, 2 - Bijoy, 3 - Somewhere-in Phonetic, 4 - Avro Phonetic,/Provat Unicode 5 - Unijoy */ if($.cookie('kbscript')=='old'){ switch(kblayout) { case '1': switched = true; break; case '3': switched = false; makePhoneticEditor($(this).attr('id')); break; case '4': switched = false; makeProbhatEditor($(this).attr('id')); break; case '5': switched = false; makeUnijoyEditor($(this).attr('id')); break; default: switched = true; } }else{ KeyBoardLayout = kblayout; } } ); $.cookie('kblayout',kblayout,'{ expires: 30}'); ChangeKeyboarLayoutStatus(kblayout); } $(document).ready(function(){ bar_height = 25; jqInputs = $('textarea, :text'); if($.cookie('kbscript')=='old') { kboptions = '<li kb=1>English</li>'+ '<li kb=5>Unijoy</li>'+ '<li kb=3>Phonetic</li>'+ '<li kb=4>Provat</li>'; loadedScript = '<li style="margin: 2px 20px 0 0">Keyboard Script: <span style="color:blue;">Old</span> | <span style="cursor:pointer;" onclick="$.cookie(\'kbscript\',\'new\',{ expires: 30});window.location.reload();">New</span></li>'; }else{ kboptions = '<li kb=1>English</li>'+ '<li kb=4>Avro</li>'+ '<li kb=3>Phonetic</li>'+ '<li kb=5>Unijoy</li>'+ '<li kb=2>Bijoy</li>'; loadedScript = '<li style="margin: 2px 20px 0 0">Keyboard Script: <span style="cursor:pointer;" onclick="$.cookie(\'kbscript\',\'old\',{ expires: 30});window.location.reload();">Old</span> | <span style="color:blue;">New</span></li>' } //Statusbar $('body').append('<div id="status_bar"><div id="bglayer" class="bglayer"></div><div id="innerContainer"></div></div>'); $('body').append('<div id="layoutSelector" style="display:none"><div class="bglayer2"></div><div id="selector_layer"><UL style="margin:0;padding:0">'+ kboptions +'</UL></div></div>'); $("#status_bar").css({ backgroundColor: 'transparent', borderTop:'1px solid black', position:'fixed', height: bar_height+'px', bottom: '0px', width: '100%', zIndex:'4' }); $(".bglayer").css({ backgroundColor:'black', position:'absolute', width:'100%', opacity:0.6, height:'100%' }); $("#innerContainer").css({ backgroundColor:'transparent', margin:'2px 20px', position: 'absolute',//Problem With IE color:'White', right:'0px', zIndex:'10' }) $('#layoutSelector').css({ fontFamily:'arial,tahoma', fontSize:'12px', border:'1px solid black', backgroundColor: 'transparent', position:'fixed', bottom:bar_height+'px', right:'20px', height:'80px', width:'100px', zIndex:'5' }) $('#selector_layer').css({ padding:'4px', color: 'white', position: 'absolute', zIndex:10 }) $('#layoutSelector img').css({ width:'20px' }) $('#innerContainer').html('<UL style="margin:1px 0 0 0;font-family:arial,tahoma;font-size:12px;"><li><img style="width:20px;margin-right:5px;" src="bKeyboardJS/kb.png"></li><li style="margin: 2px 20px 0 0">Curent Layout:</li><li id="kbstatus" style="margin: 2px 20px 0 0;cursor:pointer;color:blue;" onclick = "$(\'#layoutSelector\').slideToggle(\'fast\')"></li>'+ loadedScript +'</UL>'); $('#innerContainer li').css({ listStyleImage:'none', listStylePosition:'outside', listStyleType:'none', cssFloat:'left' }) $(".bglayer2").css({ backgroundColor:'black', position:'absolute', width:'100px', opacity:0.4, height:'100%' }); //IE 6 Workground if($.browser.msie6) { try{ //$('#punwrap').wrap('<div style="height: 100%; overflow: auto; position: relative; z-index: 2;"></div>'); }catch(err){alert(err.toString())} //$('body').css({ // height: '100%', // overflow: 'hidden' //}) //$("#status_bar").css({ position: 'absolute',zIndex: '5'}); $('#layoutSelector').css({position:'absolute'}) } //Event Binding $('#selector_layer li').css({listStyleImage:'none', listStylePosition:'outside', listStyleType:'none',cursor:'pointer'}).click(function(){jqInputs.setKeyboard($(this).attr('kb'));$('#layoutSelector').slideToggle('fast');}).mouseover(function(){$(this).css('backgroundColor','#404040');}).mouseout(function(){$(this).css('backgroundColor','transparent');}); if($.cookie('kbscript')=='new') jqInputs.keypress( function(event){return KeyBoardPress(event);}).keydown(function(event){return KeyBoardDown(event);}); jqInputs.setKeyboard($.cookie('kblayout')); }); /****************************************** Changes resource strings Coded by : S M Mahbub Murshed Date: November 18, 2006 ******************************************/ function SetResourceStrings() { for (var resid in resource) { var resbyid = document.getElementById(resid); if(resbyid.type=="button") resbyid.value = resource[resid]; else resbyid.innerHTML = resource[resid]; } } /****************************************** Toggle resource Coded by : S M Mahbub Murshed Date: November 18, 2006 ******************************************/ function ToggleLanguage(lang) { var resbyid; if(lang==1) { resource = en_resource; resbyid = document.getElementById("english_res"); resbyid.innerHTML = "English"; resbyid = document.getElementById("bangla_res"); resbyid.innerHTML = "<a href=\"javascript:ToggleLanguage(2);\">বাংলা</a>"; } else if(lang==2) { resource = bn_resource; resbyid = document.getElementById("english_res"); resbyid.innerHTML = "<a href=\"javascript:ToggleLanguage(1);\">English</a>"; resbyid = document.getElementById("bangla_res"); resbyid.innerHTML = "বাংলা"; } SetResourceStrings(); } /****************************************** Changes keyboard layout status \param ev the event Coded by : S M Mahbub Murshed Date: August 30, 2006 ******************************************/ function ChangeKeyboarLayoutStatus(kblt) { var field = document.getElementsByName('KeyboardLayoutOption'); if($.cookie('kbscript')=='old') engkb = switched; else if($.cookie('kbscript')=='new') engkb = EnglishKeyboard; else engkb = true; if(kblt==1 || engkb) { $("#kbstatus").html('ENG'); } else if(kblt==2) { $("#kbstatus").html('BJY'); } else if(kblt==3) { // keyboard_ley.innerHTML = "বরà§à¦¤à¦®à¦¾à¦¨ লেখন পদà§à¦§à¦¤à¦¿: <b>সামহোয়à§à¦¯à¦¾à¦°-ইন ফোনেটিক বাংলা</b>"; $("#kbstatus").html('PHN'); } else if(kblt==4) { if($.cookie('kbscript')=='new') $("#kbstatus").html('AVR'); else $("#kbstatus").html('PRV'); } else if(kblt==5) { $("#kbstatus").html('UJY'); } } /****************************************** Handles keyboard option button click \param event the event Coded by : S M Mahbub Murshed Date: August 30, 2006 ******************************************/ function KeyboardLayoutOptionClick(event) { var field = document.getElementsByName('KeyboardLayoutOption'); for (var counter = 0; counter < field.length; counter++) { if (field[counter].checked) { KeyBoardLayout = counter+1; ChangeKeyboarLayoutStatus(); var myFld = document.getElementById(ID); myFld.focus(); break; } } } // end function KeyboardLayoutOptionClick /****************************************** Clears text area \param id the id of the html element Coded by : S M Mahbub Murshed Date: September 05, 2006 ******************************************/ function ClearTextArea(idtxt) { var elem = document.getElementById(idtxt); elem.value = ""; elem.focus(); } // end function ClearTextArea /****************************************** On page load Coded by : S M Mahbub Murshed Date: September 12, 2006 ******************************************/ function OnPageLoad() { SetResourceStrings(); ChangeKeyboarLayoutStatus(); var myFld = document.getElementById(ID); var unicodefontLabel = document.getElementById("unicodefont"); if(IE) { unicodefontLabel.innerHTML = ""; myFld.style.fontFamily = "SutonnyBanglaOMJ"; } else { unicodefontLabel.innerHTML = ""; myFld.style.fontFamily = "SolaimanLipi"; } myFld.style.width = 250; } Code (markup):