Category Archive HTML

Byphunsanit

google maps: HTML5.Geolocation

คุณสมบัติใหม่ของ html5 คือ Geolocation API ช่วยให้ browser สามารถส่งตำแหน่งของตัวมันเองกลับไปให้ server ได้โดยใช้ตำแหน่ง gps หรือจากหมายเลข ip

แต่เพราะมันกระทบถึงความเป็นส่วนตัว ในการเขียนจึงต้องเผื่อว่า user ไม่อนุญาตให้ส่งตำแหน่งของตัวเองกลับมาไว้ด้วย ในตัวอย่างใช้

/* get position from HTML5 Geolocation */
function getGeolocation() {
    var position = false;
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(successCallback, errorCallback) {

            position = successCallback.coords;

            document.getElementById('latitudeA').innerHTML = successCallback.coords.latitude;
            document.getElementById('longitudeA').innerHTML = successCallback.coords.longitude;

        }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
        });
    } else {
        /*Browser doesn't support Geolocation*/
        handleLocationError(false, infoWindow, map.getCenter());

        return false;
    }

    return position;
}

ส่ง position กลับมา ให้

function initMap(defaultLatitude = 13.7651991, defaultLongitude = 100.5368694) {
    position = getGeolocation();

    if (position == false || position == null || position === undefined || position.length <= 0 || typeof position == 'undefined') {
        position = {
            "latitude": defaultLatitude,
            "longitude": defaultLongitude,
        };
    }

    createMap('mapA', position);
}

แต่ถ้าหากไม่มีพิกัดส่งมา จะนำค่า default มาแสดงแทน

คุณสามารถดูตัวอย่างได้จาก google maps: HTML5.Geolocation หรือลองสร้างไฟล์ตามตัวอย่าง

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps APIs > Maps JavaScript API > HTML5 Geolocation</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-2">
      <h3>HTML5 Geolocation</h3>
      <dl>
        <dt>latitude</dt>
        <dd id="latitudeA"></dd>
        <dt>longitude</dt>
        <dd id="longitudeA"></dd>
      </dl>
    </div>
    <div class="col-md-10 map" id="mapA"></div>
  </div>
</div>
<script>
var infoWindow;
var map;
var position = false;

/* function createMaps */
function createMap(mapArea, position) {
    var latlng = new google.maps.LatLng(parseFloat(position.latitude), parseFloat(position.longitude));
    var infoWindow = new google.maps.InfoWindow;
    var map = new google.maps.Map(document.getElementById(mapArea), {
        "zoom": 18
    });

    map.setCenter(latlng);

    var marker = new google.maps.Marker({
        "map": map,
        "position": latlng,
    });

    infoWindow.open(map, marker);
    infoWindow.setContent('Latitude = ' + position.latitude + ', ' + ' longitude = ' + position.longitude);
    infoWindow.setPosition(latlng);
}

/* get position from HTML5 Geolocation */
function getGeolocation() {
    var position = false;
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(successCallback, errorCallback) {

            position = successCallback.coords;

            document.getElementById('latitudeA').innerHTML = successCallback.coords.latitude;
            document.getElementById('longitudeA').innerHTML = successCallback.coords.longitude;

        }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
        });
    } else {
        /*Browser doesn't support Geolocation*/
        handleLocationError(false, infoWindow, map.getCenter());

        return false;
    }

    return position;
}

/* show error of HTML5 Geolocation */
function handleLocationError(browserHasGeolocation, infoWindow, position) {
    infoWindow.setPosition(position);
    infoWindow.setContent(browserHasGeolocation ?
        'Error: The Geolocation service failed.' :
        'Error: Your browser doesn\'t support geolocation.');
    infoWindow.open(map);
}

function initMap(defaultLatitude = 13.7651991, defaultLongitude = 100.5368694) {
    position = getGeolocation();

    if (position == false || position == null || position === undefined || position.length <= 0 || typeof position == 'undefined') {
        position = {
            "latitude": defaultLatitude,
            "longitude": defaultLongitude,
        };
    }

    createMap('mapA', position);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyDE5zb4r9sbN5S_GcD3NZRED1Ma3FzFqso"></script>
</body>
</html>

Byphunsanit

zopim: Options Mobile Vertical Offset

เพราะว่างานที่ทำในส่วนของ mobile จะมี bar แสดงเพิ่มขึ้นมาด้านล่างต่างจาก desktop แต่เจ้า zopim มันจะอยู่ล่างสุดเหมือนกัน ทำให้ซ้อนกันดูไม่สวยและใช้งานได้ยากลำบาก จึงตั้งใจที่จะย้าย zopim ขึ้นไปอีก ที่สำคัญคือ จะเป็นตัวอย่างให้เรา config options ให้กับ zopim ที่มันใช้วิธีต่างจากเจ้าอื่นๆมาก

ถ้าต้องการให้ zopim ขึ้นมาจากล่างสุดในแนวตั้งสามารถใช้คำสั่ง

$zopim.livechat.button.setOffsetVerticalMobile( ความสูง );

ตัวอย่าง code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>zopim: Mobile Vertical Offet</title>
<link href="vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<style>
#footerMobile {
	background: #c00000;
	bottom: 0;
	height: 200px;
	position: fixed;
	width: 100%;
}
</style>
</head>
<body>
<div class="visible-sm visible-xs" id="footerMobile">
  <h1>You're probably not using a phone.</h1>
</div>
<script>

<!--Start of Zendesk Chat Script-->
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
$.src="https://v2.zopim.com/?4fGXBEtxEXbPQBeWWwFwSqG8wmMQ6pAT";z.t=+new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
<!--End of Zendesk Chat Script-->

<!--Start of Zendesk Chat Script Custom Options -->
$zopim(function() {
	$zopim.livechat.button.setOffsetVerticalMobile(60);
});
<!--End of Zendesk Chat Script Custom Options-->

</script>
</body>
</html>

อ่านเพิ่มเติม$zopim.livechat.button

Byphunsanit

zopim: ระบบ chat กับ user

zopim เป็น service ที่ช่วยจัดการระบบ chat กับ user ให้โดยที่เราไม่ต้องเขียนระบบใหม่เอง (ใช้ฟรีได้แต่มีข้อจำกัดดูได้จาก pricing)

การติดตั้ง

  1. สมัครก่อนในหน้า Let’s get started
  2. เปิดอีเมล์ที่เค้าส่งมา แลัวไปที่ dashboard > Settings > Widget
  3. คลิกที่ Appearance ปรับรูปร่างหน้าตา chatbox ให้เหมาะกับเว็บเรา เสร็จแล้วลองเลือก option อื่นๆ ใน Forms, Settings และ Widget Security โดยมันจะเปลี่ยน chat box ให้เราเห็นแทบจะทันทีเลย
  4. การติดตั้งในเว็บไซต์
    WordPress หรือ Shopify
    ไปที่หัวข้อ 2. Plugins จะมีลิงค์ให้คลิกดาวน์โหลดปลั๊กอินเอาไปติดตั้งได้เลย
    ระบบที่เขียนเองและอื่นๆ
    ไปที่หัวข้อ 1.Embed the Zendesk Chat Widget copy code เอาไปใช้ได้เลยอย่าง

    <!--Start of Zendesk Chat Script-->
    <script type="text/javascript">
    window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
    d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
    _.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
    $.src="https://v2.zopim.com/?xxxxxxxxxxxxxxxxxxxxxxxx code ลับ พิชญ์ พันธุ์สนิท xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";z.t=+new Date;$.
    type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
    </script>
    <!--End of Zendesk Chat Script-->
Byphunsanit

ทำ checkbox / radio สวยๆ

สิ่งที่ css framework อย่าง bootstrapt ไม่ยอมทำซักทีคือ ทำให้ checkbox หรือ radio ออกมาเหมือนๆกันทุก browser ทำให้การออกแบบฟอร์มทำได้ไม่สวยงามเท่าที่ควร

แก้ได้โดยใช้ fronteed/icheck มาวางภาพทับ checkbox หรือ radio ไว้ และทำการจับ event แทนตัว input จริงๆ

ตัวอย่าง

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery iCheck</title>
<link href="vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="vendor/fronteed/icheck/skins/square/green.css" rel="stylesheet" type="text/css">
</head>
<body>
<?php
if(count($_POST)) {
   echo '<pre>', print_r($_POST, true), '</pre>';
}
?>
<div class="container">
  <form action="jQuery.icheck.php" id="formA" method="post">
    <fieldset class="form-group row">
      <legend class="col-form-legend col-sm-2">Checkbox</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" checked id="chk1" name="checkbox1" type="checkbox" value="checkbox1">
            Check me out </label>
        </div>
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" id="chk2" name="checkbox2" type="checkbox" value="checkbox2">
            Check me </label>
        </div>
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" id="chk3" name="checkbox3" type="checkbox" value="checkbox3" disabled>
            Check is disabled </label>
        </div>
      </div>
    </fieldset>
    <fieldset class="form-group row">
      <legend class="col-form-legend col-sm-2">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" checked id="gridRadios1" name="radio" type="radio" value="option1">
            Check me out </label>
        </div>
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" id="gridRadios2" name="radio" type="radio" value="option2">
            Check me </label>
        </div>
        <div class="form-check disabled">
          <label class="form-check-label">
            <input class="form-check-input" disabled id="gridRadios3" name="radio" type="radio" value="option3">
            Check is disabled </label>
        </div>
      </div>
    </fieldset>
    <div class="form-group row">
      <label class="col-sm-2"></label>
      <div class="col-sm-10 text-right">
        <button class="btn btn-lg btn-primary" type="submit">Save</button>
      </div>
    </div>
  </form>
  <hr>
  <button class="btn btn-lg btn-info" id="ajaxBtn" type="button">AJAX Value</button>
</div>
<script src="vendor/components/jquery/jquery.min.js"></script>
<script src="vendor/fronteed/icheck/icheck.min.js"></script>
<script>
$(function () {

  /* style */
  $('input').iCheck({
     "checkboxClass": "icheckbox_square-green",
     "radioClass": "iradio_square-green",
  });

  /* event */
  $('input').on('ifChanged', function(event) {
    console.log(event);

    alert('checked = ' + event.target.checked);
    alert('id = ' + event.target.id);
    alert('name = ' + event.target.name);
    alert('type = ' + event.target.type);
    alert('value = ' + event.target.value);
  });

  /* value */
  $('#ajaxBtn').click(function() {
     var formData = $('#formA').serializeArray();
     var message = '';

     $.each(formData, function (index, item) {
  	  message +='\n' +  index + ' ' +  item.name + ' = '+item.value;
     });

     alert(message);

  });

});
</script>
</body>
</html>

สามารถเปลี่ยนรูปแบบอื่นได้โดยดู style ได้จาก iCheck v1.0.1 @FRONTEED จากนั้นเปลี่ยน css ไฟล์ และ checkboxClass หรือ radioClass ไม่ก็ทำภาพพื้นหลังใหม่และเขียน css ของตัวเองก็ได้

Byphunsanit

ลิงค์ดาวโหลดไฟล์แบบชื่อสวยๆ

ถ้าเขียน php คงจะคุ้นกับการที่ใช้ php อ่านไฟล์แล้วใช้คำสั้่ง header ให้ download เป็นชื่ออื่นๆ

ถ้าไฟล์ไม่เป็นความลับที่จะต้องปกปิด หรือไม่ใช่ไฟล์ที่ generate ออกมาใหม่ สามารถใช้ความสามารถใหม่ใน HTML5 ได้ คือ download attribute วิธีใช้ก็ง่ายมาก

<!DOCTYPE html>
<html>
    <head>
        <title>HTML5 : Download Attribute</title>
        <meta name="author" content="Pitt Phunsanit">
    </head>
    <body>
        <h1>Download With Other Name</h1>
        <a href="IMG_0003.JPG" download="Pitt_Phunsanit">Download File With Name</a>
    </body>
</html>

อธิบายง่ายๆคือ ทำลิงค์ตามปกติแค่ ใส่

  • attribute href ชี้ว่าไฟล์อยู่ที่ไหน
  • attribute download จะบอกชื่อไฟล์ ถ้าไม่ใส่นามสกุลให้ มันจะเอานามสกุลไฟล์เดิมใส่ให้อัตโนมัติ

แต่เพราะเป็นคำสั่งใหม่ จึงมี browser รองรับดังนี้

  • google chrome 14.0
  • microsoft edge 13.0
  • mozilla firefox 20.0
  • opera 15.0 นู๋ก็รับนะ
  • apple safari ไม่รับอยู่เจ้าเดียว

สรุปง่ายๆคือ windows ต่ำกว่า 10 กับ mac มันจะใช้ไม่ได้ 100% จึงเป็นตัวเลือกที่ต้องใช้เทคนิคอื่นร่วมด้วย

Byphunsanit

ใส่ฟิลเตอร์ให้ select box

select box (drop down/ dropdown / ดรอปดาวน์ / list / ลิสต์ หลายชื่อเหลือกเกิน) นิยมใช้เวลาต้องการให้ user เลือกจากตัวเลือกที่กำหนดให้เท่านั้น แต่ถ้ามันมีเยอะมาก อย่าง 77 จังหวัด ถ้าต้องเลือกบ่อยๆ ก็ไม่สดวกที่จะต้องไล่หา แก้ได้โดยใช้ jQuery ใส่ filter ให้

ดูตัวอย่างการทำงานได้ที่

ตัวอย่าง Demo -> =>

  1. download jQuery.chosen มาจาก harvesthq Chosen แตกไฟล์
  2. ใส่ code ง่ายๆ ตามตัวอย่าง
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery Chosen Demo By Pitt Phunsanit</title>
    <link href="chosen/chosen.min.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <select id="province" style="width:200px;">
    	<option value="64">กระบี่</option>
    	<option value="1">กรุงเทพมหานคร</option>
    	<option value="56">กาญจนบุรี</option>
    	<option value="34">กาฬสินธุ์</option>
    	<option value="49">กำแพงเพชร</option>
    	<option value="28">ขอนแก่น</option>
    	<option value="13">จันทบุรี</option>
    	<option value="15">ฉะเชิงเทรา</option>
    	<option value="11">ชลบุรี</option>
    	<option value="9">ชัยนาท</option>
    	<option value="25">ชัยภูมิ</option>
    	<option value="69">ชุมพร</option>
    	<option value="45">เชียงราย</option>
    	<option value="38">เชียงใหม่</option>
    	<option value="72">ตรัง</option>
    	<option value="14">ตราด</option>
    	<option value="50">ตาก</option>
    	<option value="17">นครนายก</option>
    	<option value="58">นครปฐม</option>
    	<option value="36">นครพนม</option>
    	<option value="19">นครราชสีมา</option>
    	<option value="63">นครศรีธรรมราช</option>
    	<option value="47">นครสวรรค์</option>
    	<option value="3">นนทบุรี</option>
    	<option value="76">นราธิวาส</option>
    	<option value="43">น่าน</option>
    	<option value="77">บึงกาฬ</option>
    	<option value="20">บุรีรัมย์</option>
    	<option value="4">ปทุมธานี</option>
    	<option value="62">ประจวบคีรีขันธ์</option>
    	<option value="16">ปราจีนบุรี</option>
    	<option value="74">ปัตตานี</option>
    	<option value="5">พระนครศรีอยุธยา</option>
    	<option value="44">พะเยา</option>
    	<option value="65">พังงา</option>
    	<option value="73">พัทลุง</option>
    	<option value="53">พิจิตร</option>
    	<option value="52">พิษณุโลก</option>
    	<option value="61">เพชรบุรี</option>
    	<option value="54">เพชรบูรณ์</option>
    	<option value="42">แพร่</option>
    	<option value="66">ภูเก็ต</option>
    	<option value="32">มหาสารคาม</option>
    	<option value="37">มุกดาหาร</option>
    	<option value="46">แม่ฮ่องสอน</option>
    	<option value="24">ยโสธร</option>
    	<option value="75">ยะลา</option>
    	<option value="33">ร้อยเอ็ด</option>
    	<option value="68">ระนอง</option>
    	<option value="12">ระยอง</option>
    	<option value="55">ราชบุรี</option>
    	<option value="7">ลพบุรี</option>
    	<option value="40">ลำปาง</option>
    	<option value="39">ลำพูน</option>
    	<option value="30">เลย</option>
    	<option value="22">ศรีสะเกษ</option>
    	<option value="35">สกลนคร</option>
    	<option value="70">สงขลา</option>
    	<option value="71">สตูล</option>
    	<option value="2">สมุทรปราการ</option>
    	<option value="60">สมุทรสงคราม</option>
    	<option value="59">สมุทรสาคร</option>
    	<option value="18">สระแก้ว</option>
    	<option value="10">สระบุรี</option>
    	<option value="8">สิงห์บุรี</option>
    	<option value="51">สุโขทัย</option>
    	<option value="57">สุพรรณบุรี</option>
    	<option value="67">สุราษฎร์ธานี</option>
    	<option value="21">สุรินทร์</option>
    	<option value="31">หนองคาย</option>
    	<option value="27">หนองบัวลำภู</option>
    	<option value="6">อ่างทอง</option>
    	<option value="26">อำนาจเจริญ</option>
    	<option value="29">อุดรธานี</option>
    	<option value="41">อุตรดิตถ์</option>
    	<option value="48">อุทัยธานี</option>
    	<option value="23">อุบลราชธานี</option>
    </select>
    <script src="../jQuery/jquery-2.1.3.min.js"></script><!-- เรียกใช้ jQuery -->
    <script src="chosen/chosen.jquery.min.js"></script><!-- เรียกใช้ jQuery plugin -->
    <script>
    $(function(){
    
    	$('#province').chosen(); <!-- เรียกใช้ jQuery plugin chosen กับ id province-->
    
    })
    </script>
    </body>
    </html>
    
  3. ใช้ได้แล้ว
Byphunsanit

jQuery Validation On AJAX form

ถ้าเราต้องการส่งค่าฟอร์มไปแบบเอแจ็กซ์ โดยก่อนส่งค่าไปให้ตรวจสอบเบื่องต้นก่อน สามารถทำได้โดยใช้เมธอด validate()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Validation : AJAX form</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<form action="login.php" id="formA" method="post">
	<div class="form-group">
		<label>User
			<input type="text" name="user" required minlength="5" maxlength="20">
		</label>
	</div>
	<div class="form-group">
		<label>Password
			<input type="password" name="password" required minlength="10" maxlength="50">
		</label>
	</div>
	<button type="submit" class="btn btn-default">Submit</button>
</form>
<script src="assets/jQuery/jquery.min.js"></script>
<script src="plus/jQuery/jquery-validation/jquery.validate.min.js"></script>
<script>
$(function()
{
	form = $('#formA');
	validation = form.validate();
	form.on('submit', function(event)
	{
		event.preventDefault();
		/* check form validation */
		if(validation.form() == true)
		{
			$.ajax({
				data: form.serialize(),
				dataType : 'json',
				success: function(data){
					$('#predictionCompaireA').html(data);
				},
				type: 'POST',
				url: 'login.php'
			});
		}
	});
});
</script>
</body>
</html>
Byphunsanit

ตรวจฟอร์มด้วย HTML 5 / jQuery Validation Plugin

HTML 5 มี attribute อย่าง required ช่วยตรวจสอบฟอร์ม แต่มันยังไม่สมบูรณ์ เช่น ใช้ required กับกลุ่ม checkbox ไม่ได้ มันตรวจได้แค่เลือก checkbox ตัวนั้นๆเท่านั้น จะบังคับให้เลือก 1 ในตัวเลือกไม่ได้

ทำให้ต้องใช้เจคิวรี่อย่าง jQuery Validation Plugin ช่วย

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Validation : html5 / inline</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<form action="validation.php" enctype="multipart/form-data" id="formA" method="post">
	<div class="form-group">
		<p>เครื่องปรุง</p>
		<!-- ใส่ required ใน input ตัวแรกก็พอ -->
		<label>
			<input type="checkbox" name="flavoring[]" value="1" required>
			เกลือ</label>
		<label>
			<input type="checkbox" name="flavoring[]" value="2">
			น้ำตาล</label>
		<label>
			<input type="checkbox" name="flavoring[]" value="3">
			น้ำปลา</label>
		<label>
			<input type="checkbox" name="flavoring[]" value="4">
			พริกป่น</label>
		<!-- แสดง error ตรงนี้ อย่าลืม  class="error" -->
		<label for="flavoring[]" class="error"></label>
	</div>
	<div class="form-inline">
		<div class="form-group"><!-- input text ธรรมดา -->
			<label>สั่งวันที่
				<input type="text" name="dateOrder" required data-rule-date="true">
			</label>
		</div>
		<div class="form-group"><!-- input date -->
			<label>ส่งวันที่
				<input type="date" name="dateDelivery" required>
			</label>
		</div>
	</div>
	<div class="form-inline">
		<div class="form-group"><!-- min and max length -->
			<label>
				<input type="text" id="sendto" name="sendto" required minlength="10" maxlength="50" data-rule-email="true">
				Email</label>
		</div>
		<div class="form-group"> <!-- data-rule-equalTo id sendto -->
			<label>
				<input type="email" id="sendtoSame" name="sendtoSame" required data-rule-equalTo="#sendto">
				Email Confirm</label>
		</div>
	</div>
	<div class="form-inline">
		<div class="form-group">
			<label>รับเฉพาะภาพ
				<input type="file" name="image" accept="image/*">
			</label>
		</div>
		<div class="form-group"><!-- style input -->
			<label class="btn btn-primary">รับแต่ .jpeg
				<input type="file" name="jpeg" accept="image/jpeg" style="display:none;">
			</label>
		</div>
	</div>
	<div class="form-inline">
		<div class="form-group">
			<label>ข้าวเปล่า
				<input type="text" name="rice" data-rule-number="true">
			</label>
		</div>
		<div class="form-group">
			<label>แคปหมู (ปลีก สั่งเป็นขีดได้ เช่น 0.5)
				<input type="number" name="friedPorkSkin" step="0.1">
			</label>
		</div>
		<div class="form-group"><!-- custom message -->
			<label>แคปหมู (ส่ง kg.)
				<input type="number" name="friedPorkSkin" data-rule-digits="true" data-message-digits="ขายแต่เป็น KG ครับ">
			</label>
		</div>
	</div>
	<div class="form-group">
		<p>เส้น</p>
		<!-- ใส่ required ใน input ตัวแรกก็พอ -->
		<label>
			<input type="radio" name="noodle" value="1" required>
			เส้นหมี่</label>
		<label>
			<input type="radio" name="noodle" value="2">
			เส้นเล็ก</label>
		<label>
			<input type="radio" name="noodle" value="3">
			เส้นใหญ่</label>
		<label>
			<input type="radio" name="noodle" value="4">
			เส้นหมี่</label>
		<!-- แสดง error ตรงนี้ อย่าลืม  class="error" -->
		<label for="noodle" class="error"></label>
	</div>
	<div class="form-group">
		<label>ลวกนานมั๋ย
			<input type="range" min="2" max="8" step="1">
		</label>
	</div>
	<div class="form-inline">
		<div class="form-group">
			<label>เว็บบริษัท
				<input type="text" name="officeUrl" data-rule-url="true">
			</label>
		</div>
		<div class="form-group">
			<label>เว็บส่วนตัว
				<input type="url" name="blogUrl">
			</label>
		</div>
	</div>
	<input type="submit" value="Submit">
</form>
<script src="assets/jQuery/jquery.min.js"></script>
<script src="plus/jQuery/jquery-validation/jquery.validate.min.js"></script>
<script>
$(function()
{
	$('#formA').validate();
});
</script>
</body>
</html>
Byphunsanit

HTML5 IE หน้าเว็บเพี้ยน

อ้ายอีที่ขัดขวางการเจริญเติมโตของเว็บเทคโนโลยีกันมานานคงไม่พ้น internet explorer ไออี ตัวปัญหาเจ้าเก่าเจ้าประจำ ดั้งเดิมนั้นเอง เพราะว่ามันโดนฝั่งมากับ windows และต่างจาก chrome, Firefox, opera ตรงที่เจ้าอื่นๆมันจะ update อัตโนมัติ พยามพัฒนาตัวเองให้เป็นคนใหม่ มีความสามารถมากขึ้นเสมอๆ แต่เจ้าที่ตัวนี้ user ต้องพยามในการอัพเดตมันเอง แถมวินโดวน์เก่าๆ ยังไม่สามารถลงเวอร์ชั่นที่ล่าสุดได้ตามข้อจำกัดของวินโดว์นั้นๆ

ถ้าเราใช่ HTML5 และ tag ใหม่ อย่าง article, aside, footer, header, nav, section, time หวังว่าท่าน google จะทรงโปรด เพราะว่าแบ่งข้อมูลให้ท่านพิจารณาในการทำ SEO อย่างเต็มที่ แต่กลับกลายเป็นว่าหน้าเว็บเละอย่างไม่เคยเป็นมาก่อนใน IE8 ลงไป ลองใช้ compatibility mode ไล่ version ต่ำลงมาเรื่อยๆ ถึงจะเห็นว่าเป็นที่ IE9 ลงมา

เป็นเพราะว่ามันเห็น tag ใหม่ๆ อย่าง article, aside, footer, header, nav, section, time เป็นการเขียนผิด โดนกะลาครอบอยู่กับ HTML4 สมัยเมื่อ 10 ปีที่แล้ว แถมพาลไม่สนใจ css ที่มี tag พวกนี้อยู่ด้วย วิธีแก้คือสร้าง object ใหม่อีกครั้งด้วย JavaScript

'article aside footer header nav section time'.replace(/\w+/g,function(n){document.createElement(n)})

หรือจะใช้ tools อย่าง html5shiv

<!--[if lt IE 9]>
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

เราก็จะสามารถใช้ css กับเท็กใหม่ๆ พวกนี้ได้และควรใช้ css reset ไว้ด้วยครับ ช่วยได้เยอะเลย เกือบจะต้องเริ่มต้นเขียนกันใหม่

Byphunsanit

Basic image gallery

แกลเลอร์รี่รูปภาพง่ายๆโดยใช้เจคิวรี่ โดยกดเปลี่ยนภาพแล้วมันจะ swap ภาพไปอีกภาพโดยมีเฟตอิน แฟตเอ้า สำหรับแสดงสินค้าแบบง่ายๆ มีการแคชภาพไว้ล่วงหน้า เวลาเปลี่ยนภาพจะได้รวดเร็ว

ตกแต่งอัลบัมของเราซักเล็กน้อยก่อน

#imgPreview {
	height: 481px;
	width: 431px;
}
.thumbs li {
	float: left;
	height: 60px;
	margin: 18px 9px;
	width: 74px;
}
.thumbs li img.active {
	border:#c00000 sold thin;
}
  1. ใส่ภาพโดยภาพในทัมเนลจะตั้งชื่อให้เหมือนกับภาพใหญ่ เก็บไว้ที่เดียวกัน ต่างกันแค่ ภาพตัวอย่างจะต่อด้วย -thumb เพื่อความสะดวกในการดูแล
  2. class=”active” จะตรงกับภาพปัจจุบันเที่แสดงในไอดี imgPreview จะไว้เขียนตกแต่งเพิ่มเติมให้ผู้ใช้ทราบว่ากำลัง show ภาพตัวไหนอยู่
  3. ถ้าเปลี่ยนภาพแล้วกระตุกเพราะหน้าเพจขยับให้ใส่ วัตถุที่มีความยาว หรือความกว้างเท่ากับภาพในแนวที่เปลี่ยนไป จะได้ถีบไว้เวลาเปลี่ยนภาพ เช่น
    <hr width="431">
<img id="imgPreview" src="assets/products/1-big.jpg">
<ul class="thumbs">
	<li><img class="active" src="assets/products/1.jpg"></li>
	<li><img src="assets/products/2-thumb.jpg"></li>
	<li><img src="assets/products/3-thumb.jpg"></li>
	<li><img src="assets/products/4-thumb.jpg"></li>
	<li><img src="assets/products/5-thumb.jpg"></li>
	<li><img src="assets/products/6-thumb.jpg"></li>
	<li><img src="assets/products/7-thumb.jpg"></li>
</ul>

effect จะตั้งไว้ที่ 300 มิลลิวินาที ถ้าต้องการให้แสดงเร็วช้ากว่านี้ทดลองเปลี่ยนดูครับ

$(function()
{
	/* preload images cache */
	var images = new Array()
	$('.thumbs li img').each(function(index, value)
	{
		console.log(index+' '+$(this).attr('src'));
		src = $(this).attr('src').split('.jpg');
		src = src[0]+'-big.jpg';
		images[index] = new Image()
		images[index].src = src;
	});

	$('.thumbs li img').click(function()
	{

		thumb = $(this);
		if(thumb.hasClass('active'))
		{
			return true;
		}

		$('.thumbs li img').removeClass('active');
		thumb.addClass('active');

								/* บรรทัดนี้ทำให้เปลี่ยนรูปไปใช้อีกไฟล์ */
		src = thumb.attr('src').replace('-thumb.', '.');

		$('#imgPreview').fadeOut(300, function(){
			$(this).attr('src', src).bind('onreadystatechange load', function()
			{
				if(this.complete)
				{
					$(this).fadeIn(300);
				}
			});
		});

	});
});