PlusMagi's Blog By Pitt Phunsanit

plus emotion magic to the knowledge of logic.

Category Archive CSS

Bootstrap: dynamic tabs hash

เพราะว่า dynamic tabs ของ Bootstrap มันจะไม่เลือก tabs จาก hash หรือเครื่องหมาย # ใน url ถ้าต้องการให้แสดงแท็บที่ต้องการจาก links ต้องเขียน code เพิ่มเติมอีกเล็กน้อย

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Bootstrap: Dynamic Tabs With Hash</title>
<link href="../vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="container">
<h2>Dynamic Tabs With Hash</h2>

<input id="tabindex" name="tabindex" type="text">

<ul class="nav nav-tabs">

<li class="nav-item">
<a class="active nav-link show" data-toggle="tab" href="#menu1">Menu 1</a>
</li>

<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
</li>

<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu3">Menu 3</a>
</li>
</ul>

<div class="tab-content">

<div id="menu1" class="active fade in show tab-pane">
<h3>Menu 1</h3>
<p>นาย</p>
</div>

<div id="menu2" class="fade tab-pane">
<h3>Menu 2</h3>
<p>พิชญ์</p>
</div>

<div id="menu3" class="fade tab-pane">
<h3>Menu 3</h3>
<p>พันธุ์สนิท</p>
</div>

</div>

</div>

<script src="../vendor/components/jquery/jquery.min.js"></script>
<script src="../vendor/twbs/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {

let hash = window.location.hash.substr(1);
let tabindex = $('#tabindex');
if (hash != tabindex.val()) {
$('a[href="#' + hash).click();
tabindex.val(hash);
}

});
</script>

</body>

</html>

เมื่อเปิดหน้าเว็บมาจาก url ที่ใส่ # ของแท็บที่ต้องการมา เช่น http://localhost/snippets/Bootstrap/tabs.dynamic.hash.html#menu2 แท็บก็จะเปิดหน้าที่ถูกต้องตามที่ต้องการ แทนที่จะดูจาก class active เพียงอย่าเดียว

Bootstrap: Dynamic Tabs

สามารถสร้างเนื้อหาที่เป็นรูปแบบ tabs หรือที่เรียกว่า dynamic tabs ได้โดยใช้แค่ jQuery และ Bootstrap

ตัวอย่าง

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Bootstrap: Dynamic Tabs</title>
    <link href="../vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="container">
        <h2>Bootstrap: Dynamic Tabs</h2>

        <ul class="nav nav-tabs">

            <li class="nav-item">
                <a class="active nav-link show" data-toggle="tab" href="#menu1">Menu 1</a>
            </li>

            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
            </li>

            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#menu3">Menu 3</a>
            </li>
        </ul>

        <div class="tab-content">

            <div id="menu1" class="active fade in show tab-pane">
                <h3>Menu 1</h3>
                <p>นาย</p>
            </div>

            <div id="menu2" class="fade tab-pane">
                <h3>Menu 2</h3>
                <p>พิชญ์</p>
            </div>

            <div id="menu3" class="fade tab-pane">
                <h3>Menu 3</h3>
                <p>พันธุ์สนิท</p>
            </div>

        </div>

    </div>

    <script src="../vendor/components/jquery/jquery.min.js"></script>
    <script src="../vendor/twbs/bootstrap/dist/js/bootstrap.min.js"></script>

</body>

</html>

โดยพื้นฐานคือใส่ data-toggle=”tab” ใน tag a ที่ลิงค์ไปยัง hash ที่เป็น id ของ div ที่มี class tab-pane ที่อยู่ใน div class tab-content ก็จะทำงานได้แล้วโดยไม่ต้องกำหนดสคริปเพิ่มเติมอีก แต่ถ้าหากต้องการเลือกแท็บจากลิงค์ให้อ่าน Bootstrap: dynamic tabs hash เพิ่มเติม

ทำ 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 ของตัวเองก็ได้

YII 2 : Horizontal / inline form

ตามปกติ form ของ yii ที่ใช้ GII generate ออกมาจะเป็นรูปแบบ label บรรทัดหนึ่ง input อีกบรรทัดหนึ่ง อ่านง่าย สวยงามพอสมควร แต่อาจจะไม่ถูกใจบรรดาหัวหน้าอนุรักษ์นิยมทั้งหลาย

yii มีอีกทางเลือกให้ใช้ทำฟอร์ม คือ มี Horizontal form ให้เลือกใช้ yii bootstrap activeform (Horizontal form) อีกตัว

วิธีการคือ

  1. เปิดไฟล์ _form.php ใน view เป้าหมาย
  2. เปลี่ยน use yii\widgets\ActiveForm; เป็น use yii\bootstrap\ActiveForm; ถ้าไม่เปลี่ยนจะเจอ error Setting unknown property: yii\widgets\ActiveForm::layout
  3. เปลี่ยน 
    $form = ActiveForm::begin();

    เป็น

    $form = ActiveForm::begin([
    'fieldConfig' => [
        'horizontalCssClasses' => [
            'label' => 'col-sm-2',
            'offset' => 'col-sm-offset-2',
            'wrapper' => 'col-sm-10'
        ]
    ],
    'layout' => 'horizontal'
]);

    4. สำเร็จแล้ว ฟอร์มจะเปลี่ยนเป็นรูปแบบเหมือนกับ Bootstrap Horizontal form โดย

    • layout คือ จะวางฟอร์มเป็นแบบไหน มีให้เลือก คือ default, horizontal และ inline
    • label คือ ค่า grid ของ label
    • wrapper คือ ความกว้างของช่อง input
    • offset คือ การเว้นระยะของพวก checkbox ตั้งไว้เท่ากับ label จะได้ตรงกันพอดี

    เสร็จแล้ว หรือจะใช้การจัด code แบบของผมก็ได้ครับ ไม่อยากสลับ php เข้าออก ไปๆ มาๆ 

    <?php

use yii\helpers\Html;
use yii\bootstrap\ActiveForm;

?>

<div class="user-form">
<?php
$form = ActiveForm::begin([
    'fieldConfig' => [
        'horizontalCssClasses' => [
            'label' => 'col-sm-2',
            'offset' => 'col-sm-offset-2',
            'wrapper' => 'col-sm-10'
        ]
    ],
    'layout' => 'horizontal'
]);

echo $form->field($model, 'username')->textInput(),
$form->field($model, 'email')->textInput(),
$form->field($model, 'status')->checkbox(array('label'=>'enable')),
'<div class="form-group">',Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']);
ActiveForm::end();
echo'</div>';

ตรวจฟอร์มด้วย 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>

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 ไว้ด้วยครับ ช่วยได้เยอะเลย เกือบจะต้องเริ่มต้นเขียนกันใหม่

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);
				}
			});
		});

	});
});

ใส่ Youtube ใช้ได้บนมือถือและทุกจอ

สมัยนี้เวลาทำเว็บต้องคิดถึงพวกอุปกรณ์ขนาดหน้าจอต่างๆ เมื่อใส่ video แล้วก็อยากจะให้มันกว้างพอดีกับหน้าจอ ไม่ว่าจะเป็น iPhone, ipad, Note อุปกรณ์พกพามันมีหลายขนาดเหลือเกิน โดยเฉพาะของช่างตัดกระจกอย่าง samsung ที่ทำมือถือออกมาแทบจะทุกขนาด แถมแต่ละเครื่องยังมีแนวตั้ง แนวนอนให้เลือกอีก อีกจะเขียน code ให้ได้ทุกชิ้นยังไงก็ไม่ครบทั้งหมด

ไปเจอบนความดีๆ Responsive Youtube Embed ใช้แค่ css นิดหน่อยก็ตอบโจทย์ได้แล้ว

เปิดหน้าเว็บยูทูปที่เราต้องการใส่ในเว็บ ของผมคือเพลง เพลง ความรักกับรองเท้า
ศิลปิน SIGNATURE สังเกตุด้านบนเว็บจะมี url อยู่ด้านบน ของเพลงนี้คือ http://www.youtube.com/watch?v=FPnewcqkmlc&list=RDFPnewcqkmlc คัดลอกอักษรระหว่าง v= และ & ไปใส่โค้ทตามตัวอย่างด้านล่าง

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Youtube Embed</title>
<style>
.video-container {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	padding-top: 30px;
	position: relative;
}
.video-container embed, .video-container iframe, .video-container object {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
</style>
</head>

<body>
<div class="video-container">
  <iframe src="http://www.youtube.com/embed/FPnewcqkmlc" frameborder="0" width="560" height="315"></iframe>
</div>
</body>
</html>

เสร็จแล้ว มันง่ายมาก ฟังเพลงโปรดของผมไปเพลินๆ นะครับ หวังว่าวันหนึ่งจะได้มีคนมานั่งฟังเพลงนี้ด้วยกัน

ใส่ฟอนต์สวยๆให้เว็บ

Css 3 ยอมให้กำหนด font เพิ่มได้เองนอกจากที่มีอยู่แล้ว ทำให้สามารถออกแบบหน้าเว็บสวยๆ หรือจะเล่น typography อักษรศิลป์ได้มากขึ้น แต่ก็ยังเจอกับปัญหาเดิมคือ แต่ละ browser มันรับชนิดตัวอักษรได้ไม่เท่ากัน ถ้าดูจาก http://caniuse.com/fontface จะเห็นว่าตั้งแต่ ie8 มันก็ใช้ font-face ได้แล้ว แต่เฉพาะ Embedded OpenType (EOT) แต่ก็ไม่มีเจ้าอื่นๆ ที่รับนามสกุลนี้เท่าไหร่เลย ที่มีความหวังที่สุดคือ True Type (TTF) และ OpenType (OTF) ก็ยังไม่ครบทุกบราวเซอร์

ปัญหานี้แก้ได้ง่ายๆ โดยไปที่เว็บ Convert Fonts upload ไฟล์ fonts ที่เราต้องการใช้ หรือเข้าไปหาฟอนต์ที่เคยลงไว้ใน C:WindowsFonts เสร็จแล้วกด get @font-face จะได้ไฟล์ zip
สมมุติจะแปลง THSarabunNew เป็นนามสกุลอื่นๆ ภายในจะมีไฟล์ตามนี้
thsarabunnew.css
เป็นตัวอย่าง css ให้เอาไปแปะในไฟล์ css สาเหตุที่มันทำงานได้ทุกๆ บราวเซอร์
เพราะพี่แกเล่นเขียน css แบบนี้มาให้เลย

@font-face {
    font-family: 'THSarabunNewRegular';
    src: url('thsarabunnew.eot');
    src: url('thsarabunnew.eot') format('embedded-opentype'),
         url('thsarabunnew.woff') format('woff'),
         url('thsarabunnew.ttf') format('truetype'),
         url('thsarabunnew.svg#THSarabunNewRegular') format('svg');
}

ต่างจากตัวอย่าง(ในอุดมคติ)ของ w3c เยอะเลย เพื่อให้ browser compatibility มากที่สุด
และมีฟอนต์ที่แปลงมาให้แล้วอีก 4 ตัว

  • thsarabunnew.ttf (TrueType)
  • thsarabunnew.eot (Embedded OpenType)
  • thsarabunnew.svg (Scalable Vector Graphics) เขียนมาเป็น code เลย อันนี้ไม่มีใครขยันทำเองแน่ๆ
  • thsarabunnew.woff (Web Open Font Format)

ตัวอย่างการใช้งาน กำหนดให้ใช้ฟอนต์สารบัญ

body
{
	color:#c00000;
	font-family: 'THSarabunNewRegular', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	font-size: 14px;
}

สังเกต จะมีชื่อฟอนต์อื่นต่อหลัง THSarabunNewRegular อีกที เพื่อถ้าหากโหลดฟอนต์มาไม่ได้ บราวเซอร์จะใช้ตัวถัดๆไปแสดงแทน

ให้ฟุตเตอร์อยู่ด้านล่างพอดีหน้าจอ (ตาราง)

จากที่เคยเขียน ให้ฟุตเตอร์อยู่ด้านล่างพอดีหน้าจอ
ถ้าหน้าเว็บสั้นกว่าจอโดยใช้ tableless เรามาย้อนยุคโดยใช้ตารางดูบ้าง
note

  • ใช้ได้กับทุกบราวเซอร์รวมทั้งไอโฟนด้วย แต่ ie ต้องใช้ DOCTYPE เท่านั้น ถ้าเป็นตัวอื่นจะกำหนดความสูงของแถวไม่ได้
  • ถ้าเนื้อหาน้อยมากๆ ตารางจะพยามชดเชยความสูงของตัวมันเองที่มากกว่าปกติ โดยจะเพิ่มความสูงของ tr ทดแทน ถ้าไม่อยากให้หน้าเว็บดูผิดปกติให้แก้
    ที่มีปัญหาเป็น

    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>100% table height</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css3.css">
<style>
html
{
	height:100%;
}
body
{
	height:100%;
	margin: 0px;
	padding: 0px;
	font-family: Helvetica, Arial, "Trebuchet MS", sans-serif;
}
table
{
	border: 0 none;
	height:100%;
}
td
{
	margin: 0px;
	padding: 0px;
	vertical-align:top;
	height:0px;
}
#header
{
	background:#c00000;
	height:20px;
}
#footer
{
	background:#c00000;
	height:20px;
}
</style>
</head>
<body>
<table border="1" class="tablewrapper">
  <tr>
    <td id="header">header</td>
  </tr>
  <tr>
    <td>contents</td>
  </tr>
  <tr>
    <td id="footer">footer</td>
  </tr>
</table>
</body>
</html>

    นี่ถ้าเขียนโดยใช้ div จะง่ายและสั้นกว่ามาก
    ดูเพิ่มเติม

Proudly powered by WordPress | Theme: Appointment Blue by Webriti