แจก!!! Radio button css สวย ๆ มัดรวมไว้ในไฟล์เดียว

หากใครกำลังมองหา CSS สวย ๆ สำหรับทำ Radio button แล้วละก็ วันนี้ Onlymycode มีโค้ดไฟล์ CSS มาแจก ให้ท่าน ๆ สามารถโหลดไปใช้งานกันได้เลยผ่าน ปุ่ม Download ด้านล่าง

Download

See the Pen Radio button css example by Kiti Chan Boyd (@kiti-chan-boyd) on CodePen.

ตัวอย่างการใช้งาน Checkbox CSS

เริ่มที่ เรียกใช้งาน  css file ใน Tag <header>....</header>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin = "anonymous">
<link rel="stylesheet" href="icheck-bootstrap.css">

ตัวอย่างการสร้างสร้าง Radio Button ผ่าน css ของ icheck คือการเรียกใช้งาน DIV ที่ครอบ Input radio ไว้ เช่น <div class="radio icheck-success"></div>  และการกำหนด Id ให้กับ input และ label ให้สอดคล้องกัน

<div class="container">
   <div class="row">
        <div class="col-sm-3">
            <div class="radio icheck-default">
                <input type="radio" id="default1" name="default" />
                <label for="default1">Option 1</label>
            </div>
            <div class="radio icheck-default">
                <input type="radio" checked id="default2" name="default" />
                <label for="default2">Option 2</label>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="radio icheck-primary">
                <input type="radio" checked id="primary1" name="primary" />
                <label for="primary1">Option 1</label>
            </div>
            <div class="radio icheck-primary">
                <input type="radio" id="primary2" name="primary" />
                <label for="primary2">Option 2</label>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="radio icheck-success">
                <input type="radio" id="success1" name="success"/>
                <label for="success1">Option 1</label>
            </div>
            <div class="radio icheck-success">
                <input type="radio" checked id="success2" name="success"/>
                <label for="success2">Option 2</label>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="radio icheck-info">
                <input type="radio" checked id="info1" name="info" />
                <label for="info1">Option 1</label>
            </div>
            <div class="radio icheck-info">
                <input type="radio" id="info2" name="info" />
                <label for="info2">Option 2</label>
            </div>
        </div>
    </div>
</div>

Read More

แจก!!! Checkbox css สวย ๆ มัดรวมไว้ในไฟล์เดียว

หากใครกำลังมองหา CSS สวย ๆ สำหรับทำ Checkbox แล้วละก็ วันนี้ Onlymycode มีโค้ดไฟล์ CSS มาแจก ให้ท่าน ๆ สามารถโหลดไปใช้งานกันได้เลยผ่าน ปุ่ม Download ด้านล่าง

Download

See the Pen Checkbox CSS Example by Kiti Chan Boyd (@kiti-chan-boyd) on CodePen.

ตัวอย่างการใช้งาน Checkbox CSS

เริ่มที่ เรียกใช้งาน  css file ใน Tag <header>....</header>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin = "anonymous">
<link rel="stylesheet" href="icheck-bootstrap.css">

ตัวอย่างการสร้างสร้าง checkbox ผ่าน css ของ icheck คือการเรียกใช้งาน DIV ที่ครอบ Input checkbox ไว้ เช่น <div class="checkbox icheck-success"></div>  และการกำหนด Id ให้กับ input และ label ให้สอดคล้องกัน

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <div class="checkbox icheck-default">
                <input type="checkbox" checked id="icheck-default" />
                <label for="icheck-default">icheck-default</label>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="checkbox icheck-primary">
                <input type="checkbox" checked id="icheck-primary" />
                <label for="icheck-primary">icheck-primary</label>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="checkbox icheck-success">
                <input type="checkbox" checked id="icheck-success" />
                <label for="icheck-success">icheck-success</label>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="checkbox icheck-info">
                <input type="checkbox" checked id="icheck-info" />
                <label for="icheck-info">icheck-info</label>
            </div>
        </div>
    </div>
</div>

Read More

ทำ DIV ให้สูงเท่ากัน แก้ปัญหาขนาด DIV ในหน้าไม่เท่ากัน

วันนี้ Onlymycode มาพร้อมกับเทคนิคง่าย ๆ แต่ได้ใช้บ่อยเช่นเคย ไม่ว่าทุกจะทำเว็บ Blog หรือเว็บ Ecommerce ปัญหาที่มักจะเจอกันบ่อย ๆ นั้นก็คือ ขนาด DIV ไม่เท่ากัน ดังนั้นเราจึงนำเสนอเทคนิคการแก้ปัญหาง่าย ๆ ด้วยการใช้งาน matchHeight js นั้นเอง

ตัวอย่างการใช้งาน matchHeight js

See the Pen matchHeight js example by Kiti Chan Boyd (@kiti-chan-boyd) on CodePen.

หลักการทำงานของ js ตัวนี้ก็คือ หา DIV ที่มีความสูงมากสุดในแถวนั้น ๆ (Row) จากนั้นทำการกำหนดค่าให้กับ DIV อื่น ๆ ในแถวเดียวกันให้มีความสุดเท่ากับ DIV ที่มีความสูงสูงที่สุด

ตัวอย่างการเขียนโค้ด

เริ่มที่ เรียกใช้งาน  Javascript file ใน Tag <header>....</header>

<script type='text/javascript' src='https://code.jquery.com/jquery-1.12.4.min.js' crossorigin = "anonymous"></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js' crossorigin = "anonymous"></script>

ตัวอย่างการสร้างวางตำแหน่ง DIV

<div class="container">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
</div>

ตัวอย่าง CSS (โดยกำหนดความสูงของ DIV ให้แตกต่างกัน)

<style>
.container{
  float:left;
  display:inline-block;
  width:100%;
  height:auto;
  padding:25px;
}

.box{
  float:left;
  width:50px;
  border:1px solid #ccc;
  margin-right:15px;
}

#box1{
  height:20px;
  background-color:#F00; 
}

#box2{
  height:30px;
  background-color:#4cc203; 
}

#box3{
  height:50px;
  background-color:#00c4ff; 
}
</style>

ในส่วนของ Script กำหนดค่าตัวแปรเริ่มต้นสี ของแต่ละ Input ในรูปแบบของ Array (ส่วนโค้ดสีแดง) เรียกใช้งาน Function colorpicker (ส่วนโค้ดสีส้ม) และส่วนควบคุม (ส่วนโค้ดสีฟ้า) ตามกรอบด้านล่าง

<script>
$(document).ready(function(){
$('.container .box').matchHeight();
})
</script>

ขอบคุณความรู้จาก : https://www.cssscript.com/

Read More

รูปแบบการแสดงผลตัวอักษรภาษาอังกฤษ PHP vs CSS

วันนี้ Onlymycode ขอนำเสนอเทคนิคง่าย ๆ แต่ได้ใช้บ่อยมีทั้งแบบ คำสั่งแบบ PHP และ คำสั่งแบบ CSS โดยเราจะเรียงคำสั่งตามนี้นะครับ

แสดงข้อความแบบตัวพิมพ์เล็ก
แสดงข้อความแบบตัวพิมพ์ใหญ่
แสดงข้อความขึ้นต้นด้วยตัวพิมพ์ใหญ่

ก่อนอื่นเรามาเริ่มที่ฝั่ง PHP กันก่อน

คำสั่ง strtolower() 
ตัวอย่าง echo strtolower("Hello WORLD!");
ผลลัพธ์ hello world!
------------------------------------------------------
คำสั่ง strtoupper() 
ตัวอย่าง echo strtoupper("Hello WORLD!");
ผลลัพธ์ HELLO WORLD!
------------------------------------------------------
คำสั่ง ucfirst() 
ตัวอย่าง echo echo ucfirst("hello world!");
ผลลัพธ์ Hello world!
------------------------------------------------------
คำสั่ง ucwords() 
ตัวอย่าง echo echo ucwords("hello world");
ผลลัพธ์ Hello World!

มาต่อที่ฝั่ง CSS กันเลย

คำสั่ง text-transform: lowercase;
ตัวอย่าง <div style="text-transform: lowercase;">Hello WORLD!</div>
ผลลัพธ์ hello world!
------------------------------------------------------
คำสั่ง text-transform: uppercase; 
ตัวอย่าง <div style="text-transform: uppercase;">Hello WORLD!</div>
ผลลัพธ์ HELLO WORLD!
------------------------------------------------------
คำสั่ง text-transform: capitalize;
ตัวอย่าง <div style="text-transform: capitalize;">Hello WORLD!</div>
ผลลัพธ์ Hello World!

Read More

แก้ปัญหา git error: Your local changes to the following files would be overwritten by merge:

เจอปัญหา Error Git Merge แก้ยังไง วันนี้ Onlymycode เอาวิธีแก้ มาบอกให้ฟังกัน โดยแบ่งออกเป็น 2 กรณี ดังนี้

กรณีที่ 1 Code ใน Branch ปัจจุบันเก่ากว่าฝั่งที่จะ Pull code ลงมา

วิธีที่ 1. Checkout Code ใน Branch ที่เราต้องการจะ Pull Code

- git checkout [File path] เช่น git checkout path/to/file/to/revert
ตามด้วย
- git pull origin [branch] เช่น git pull origin master

วิธีที่ 2. Checkout Branch ใน Branch วิธีนี้ใช้ในกรณี วิธีแรกไม่ได้ผล -f คือการ force (บังคับ) ให้ git ของเราชี้ไปยังตำแหน่งปัจจุบันของ Branch

- git checkout origin/[branch] -f เช่น git checkout origin/master -f

วิธีที่ 3. แนะนำให้เป็นทางเลือกสุดท้าย เนื่องจาก git จะไม่สนใจทุกสิ่งที่เราแก้ไปใน Branch นั้น

- git reset -- hard
- git pull origin [branch]

---

กรณีที่ 2 Code ใน Branch ปัจจุบันใหม่กว่าฝั่งที่จะ Pull code ลงมา

วิธีที่ 1 ใช้ในกรณีที่เรายังไม่ต้องการ Add file เข้าไปใน git ให้ใช้คำสั่ง Stash Code ใน Branch ที่เราต้องการจะ Pull Code เพื่อที่จะ stash code ที่เราทำอยู่ปัจจุบันเก็บไว้ก่อน จากนั้น Pull code ลงมา และทำการ un stash code ที่เราเก็บไว้มาทับ Code ที่เรา pull ลงมา

1 git stash
2 git pull origin [branch] 
หลังจาก pull code เสร็จ
- git stash pop
- git stash apply

วิธีที่ 2 ใช้ในกรณีที่เราสามารถ Add file เข้าไปใน git ได้ กรณีที่เรามั่นใจว่า Code ปัจจุบันสามารถ add เข้า git ได้ใช้ใช้คำสั่ง git add ได้เลย

1. git add [filename.ext] / git add [directory] / git add --all
2. git commit -m "commit text"
3. git pull origin [branch] 

Read More