How to remove blue shadow in jquery mobile

แก้ปัญหา เงาใน jquery mobile เพื่อให้ mobile web application มีความเป็น native มากขึ้น

Are you  using jquery mobile to make mobile app like native mobile app ?
And are you trying to remove " the blue shadow " which shown after you click at button or link element ?

Here is the solution

Just add   style=" box-shadow: 0 1px 3px   gray " 

in the link or button element

for example

<button data-icon="check">Blue Shadow</button>
<button  style=" box-shadow: 0 1px 3px gray "  data-icon="check">No Blue Shadow</button>

The result is

เปลี่ยน textarea ธรรมดาให้เป็น rich text editor ที่มี toolbar สำหรับรูปแบบตัวอักษร

ใน HTML จะมี Element ที่ชื่อว่า textarea สำหรับกรอกข้อความยาวๆ แต่ปัญหาคือ เราไม่สามารถจัดการรูปแบบตัวอักษรใน Element textarea ได้ จำเป็นต้องใช้เครื่องมือเข้ามาช่วยในการสร้าง Element Textarea ให้มี toolbar ใน textarea ซ่งก็คือ tinymce นั่นเอง

ขั้นตอนการใช้งาน tinymce มีดังนี้

1. เรียกใช้งาน jquery และ tinymce

<!-- เรียกใช้งาน jquery -->
<script type="text/javascript" src="http://projectsoft.biz/js/jquery.js"></script>

<!-- เรียกใช้งาน tinymce -->
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>

2. สร้าง  Element Textarea

<textarea id="detail" name="detail" ></textarea>

3. พิมพ์คำสั่ง javascript เพื่อ สร้าง toolbar ให้ textarea
<script>

//สร้าง text editor
tinymce.init({
selector:'#detail ',//id ของ textarea ที่ต้องการสร้าง
height : 300,//กำหนดความสูงของ textarea
menubar: false,//ไม่แสดงเมนู
plugins: ["textcolor"],//ใช้ plugin ให้เปลี่ยนสีตัวอักษรได้
toolbar: ["undo redo | bold italic underline | styleselect | forecolor | alignleft aligncenter alignright |  bullist,numlist"],//กำหนดปุ่มใน toolbar
style_formats: [//กำหนดขนาดอักษร
{title: '11px', inline: 'span', styles: { fontSize: '11'}},
{title: '12px', inline: 'span', styles: { fontSize: '12'}},
{title: '14px', inline: 'span', styles: { fontSize: '14'}},
{title: '16px', inline: 'span', styles: { fontSize: '16'}},
{title: '18px', inline: 'span', styles: { fontSize: '18'}},
{title: '20px', inline: 'span', styles: { fontSize: '20'}},
{title: '22px', inline: 'span', styles: { fontSize: '22'}},
{title: '24px', inline: 'span', styles: { fontSize: '24'}}
],

});
</script>


และผลลัพธ์ที่ได้คือ

ป้องการการ copy paste และ cut ด้วย jquery

การป้องกัน หรือการห้ามไม่ให้หน้าเว็บมีการ  copy paste และ cut นั้น เราสามารถใช้ jquery ช่วยได้ดังนี้

<script src="http://projectsoft.biz/js/jquery.js"></script><!--ให้ใช้งาน jquery ได้ -->

<!-- สร้าง text area ที่มี Id เป็น  my_txt-->
<textarea  id="my_txt" ></textarea>

<script>
  $(document).ready(function(){

 //เมื่อโหลดหน้าเว็บเสร็จ เราจะไม่ให้มีการ cut copy paste สำหรับ text area ที่มี Id เป็น  my_txt

       $('#my_txt').bind("cut copy paste",function(e) {
            e.preventDefault();
       });

 });
</script>

แก้ปัญหาการตัด และนับ คำภาษาไทยใน PHP ด้วย iconv_strlen และ iconv_substr

ในภาษา PHP  เราใช้ function substr() เพื่อการตัดคำใน string และ function strlen()  เพื่อการหาจำนวนตัวอักษรใน string แต่เมื่อลองใช้ function  นี้กับภาษาไทยจะพบว่ามีปัญหา เราสามารถใช้

• function  iconv_strlen เพื่อนับจำนวนตัวอักษร เช่น 

          echo  iconv_strlen("สวัสดี","UTF-8");  ผลลัพธ์ที่ได้คือ 6

• function iconv_substr เพื่อตัด string เช่น 

           echo   iconv_substr("สวัสดี",1,2,"UTF-8");

          ผลลัพธ์ที่ได้คือ  "วั" เพราะ เริ่มต้นตัดอักษรตัวที่ 1 ( อักษรตัวแรกคือ 'ส' นับเป็นตัวที่ 0  )

จำไว้ว่า หากเราต้องการนับตัวอักษรภาษาไทย  หรือ ตัดคำภาษาไทยโดยใช้ PHP ให้ใช้ function iconv_strlen และ function iconv_substr เพื่อไม่ให้เกิดปัญหา

การสร้าง textbox ที่พิมพ์ได้แต่เฉพาะภาษาอังกฤษ

สำหรับ  text box ที่ให้กรอก username หรือ password หากเราต้องการไม่ให้กรอกตัวอักษรเป็นภาษาไทยได้เราสามารถใช้ jquery ลบตัวอักษรที่เป็นภาษาอังกฤษใน text box ได้ดังนี้

//ให้ใช้งาน jquery ได้

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

//สร้าง text box ที่มี id เป็น username และกำหนดให้ทำงานที่ function eng_only() เมื่อมีการเปลี่ยนข้อความ

<input type="text"  id="username" onchange="eng_only()" value="" />

<script type="text/javascript">

function eng_only() {

      var temp=$("#username").val();//เก็บข้อความที่พิมพ์ใน text box 

   

      temp=temp.toLowerCase();//เปลี่ยนให้ทุกตัวอักษรเป็น ตัวพิมพ์เล็ก

      

//วน loop แต่ละตัวอักษร เพื่อดูว่าแต่ละตัวอักษรเป็นภาษาไทย หรือภาษาอังกฤษ

for(i=0;i<temp.length;i++)

{

     

 if ((temp[i]=="a")||(temp[i]=="b")||(temp[i]=="c")||(temp[i]=="d")||(temp[i]=="e")||(temp[i]=="f")||(temp[i]=="g")||(temp[i]=="h")||(temp[i]=="i")||(temp[i]=="j")||(temp[i]=="k")||(temp[i]=="l")||(temp[i]=="m")||(temp[i]=="n")||(temp[i]=="o")||(temp[i]=="p")||(temp[i]=="q")||(temp[i]=="r")||(temp[i]=="s")||(temp[i]=="t")||(temp[i]=="u")||(temp[i]=="v")||(temp[i]=="w")||(temp[i]=="x")||(temp[i]=="y")||(temp[i]=="z")||(temp[i]=="z")||(temp[i]=="0")||(temp[i]=="1")||(temp[i]=="2")||(temp[i]=="3")||(temp[i]=="4")||(temp[i]=="5")||(temp[i]=="6")||(temp[i]=="7")||(temp[i]=="8")||(temp[i]=="9")||(temp[i]=="!")||(temp[i]=="@")||(temp[i]=="#")||(temp[i]=="$")||(temp[i]=="%")||

(temp[i]=="^")||(temp[i]=="&")||(temp[i]=="*")||(temp[i]=="(")||(temp[i]==")")||(temp[i]=="_")||(temp[i]=="+")||(temp[i]=="-")||(temp[i]=="=")||(temp[i]=="{")||(temp[i]=="}")||(temp[i]=="[")||(temp[i]=="]")||(temp[i]=="|")||(temp[i]=="/")||(temp[i]=="\"")||(temp[i]=="'")||(temp[i]==":")||(temp[i]==";")||(temp[i]=="<")||(temp[i]==">"))

 {

      

 }

 else

 {

     $("#username").val($("#username").val().replace(temp[i],""));//ลบตัวอักษรที่ไม่ใช่ภาษาอังกฤษออก

 }

}

    }

</script>

เรียง array ที่เป็น string ตามตัวเลข

หากเรามีชุดข้อมูลที่เป็น string เช่น

$arr=["1.jpg","10.jpg","2.jpg","24.jpg","4.jpg"];

การเลียงลำดับแบบ string จะเป็น

1.jpg
10.jpg
2.jpg
24.jpg
4.jpg

แต่มีหากความต้องการ sort ข้อมูลในแบบของตัวเลข  โดยใช้ PHP เราสามารถใช้ function  sort ของ PHP โดยกำหนดให้เป็นการเรียงลำดับตามตัวเลขได้ดังนี้


<?php
   
    $arr=["1.jpg","10.jpg","2.jpg","24.jpg","4.jpg"];//array ที่ต้องการเรียง
    sort($arr, SORT_NUMERIC);

    for($i=0;$i<count( $arr );$i++)
    {
          echo $arr[$i]."<br />";
    }

?>

ผลลัพธ์คือ
1.jpg
2.jpg
4.jpg
10.jpg
24.jpg

หาระยะห่างระหว่างสองตำแหน่งละติจูดลองติจูด

สำหรับการทำ Location Based Application นั้นย่อมมี ตำแหน่งละติจูด ลองตจูดเข้ามาเกี่ยวข้อง ถ้าต้องการที่จะหาระยะห่างระหว่างสองตำแหน่งเราสามารถใช้ function ในการหาได้ดังนี้

//function หาระยะทางระหว่างสอง ละติจูด ลองติจูด
function get_distance(lat1,lon1,lat2,lon2) {
  var R = 6371;
  var dLat = (lat2-lat1)* (Math.PI/180);
  var dLon = (lon2-lon1)* (Math.PI/180);
  var a =
    Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(lat1* (Math.PI/180)) * Math.cos(lat2* (Math.PI/180)) *
    Math.sin(dLon/2) * Math.sin(dLon/2)
    ;
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  var d = R * c; // ผลลัพธ์เป็น km
  return d;
}


//ตัวอย่างการเรียกใช้ function
var distince;
distince=get_distance(13.75672638963174,100.49458265304565,13.752474554298313,100.49338102340698);
document.write(distince);//ผลลัพธ์ 0.4902724239365899

แปลงการเข้ารหัส tis-620 และ utf-8 และการตรวจสอบการเข้ารัหส

เชื่อว่า PHP programmer หลายคนคงเคยเจอปัญกาเรื่องการเข้ารหัสมาบ้าง เช่น อ่านข้อมูลจากฐานข้อมูลมาเป็น TIS-620 แต่หน้าเว็บต้องผลเป็น UTF-8 เราสามารถแปลงการเข้าหรัสข้อมูลได้ตามตัวอย่างดังนี้

if(mb_detect_encoding ( $data )=="TIS-620")

{

     $data=iconv ("TIS-620" , "UTF-8" , $data);

}

จากตัวอย่าง

function mb_detect_encoding คือ function ตรวจสอบว่าข้อมูลมีการเข้ารหัสแบบใดถ้ามีการเข้ารหัสแบบ TIS-620 จะเปลี่ยนเป็นการเข้ารหัสแบบ UTF-8 โดยใช้ function iconv