codeboc

alias all-scroll auto cell context-menu col-resize copy crosshair default e-resize ew-resize grab grabbing help move n-resize ne-resize nesw-resize ns-resize nw-resize nwse-resize no-drop none not-allowed pointer progress row-resize s-resize se-resize sw-resize text url w-resize wait zoom-in zoom-out ➤ CSS <style> .alias {cursor: alias;} .all-scroll {cursor: all-scroll;} .auto {cursor: auto;} .cell {cursor: cell;} .context-menu {cursor: context-menu;} .col-resize {cursor: col-resize;} .copy {cursor: copy;} .crosshair {cursor: crosshair;} .default {cursor: default;} .e-resize {cursor: e-resize;} .ew-resize {cursor: ew-resize;} .grab {cursor: -webkit-grab; cursor: grab;} .grabbing {cursor: -webkit-grabbing; cursor: grabbing;} .help {cursor: help;} .move {cursor: move;} .n-resize {cursor: n-resize;} .ne-resize {cursor: ne-resize;} .nesw-resize {cursor: nesw-resize;} .ns-resize {cursor: ns-resize;} .nw-resize {cursor: nw-resize;} .nwse-resi...

➤ CSS <style> .spinner {   width: 40px;   height: auto;   background-color: #333;   margin: 100px auto;   -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;   animation: sk-rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotateplane {   0% { -webkit-transform: perspective(120px) }   50% { -webkit-transform: perspective(120px) rotateY(180deg) }   100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) } } @keyframes sk-rotateplane {   0% {     transform: perspective(120px) rotateX(0deg) rotateY(0deg);     -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)   } 50% {     transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);     -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)   } 100% {     transform: perspective(120px) rotateX(-180deg) rotate...

CLICK THAILAND ➤ CSS   /* The Modal (background) */   .modalHome {     background-image: linear-gradient(rgba(0, 0, 0, 0.9),rgba(0, 0, 0, 0.9)) , url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgZ1cF2pU5obktByz1yYLSxu4fQQeBt7ghcrbihiky2GbpLM3GTrZTv4fwr1rZMORNFsEAJ3zDDTgmA2erMBHPy8lgaMxwOH6WXrkXggU7udn3fpPOgl5RO2-2l4dNwxbIPG5TOvV6ApA/s16000/drone-hikers-top.jpg);     background-position: center;     background-size: cover;     display: none; /* Hidden by default */     position: fixed; /* Stay in place */     z-index: 1; /* Sit on top */     padding-top: 100px; /* Location of the box */     left: 0;     top: 0;     width: 100%; /* Full width */     height: 100%; /* Full height */     overflow: auto; /* Enable scroll if needed */  ...

go to Section 2 go to Section 1 ➤ CSS (Cascading Style Sheets) <style>   html {     scroll-behavior: smooth;   }   #section1 {     height: 600px;     background-color: green;     text-align:center;   }   #section2 {     height: 600px;     background-color: red;     text-align:center;   } </style>     ➤ HTML Code <div class="main" id="section1">   <a href="#section2">go to Section 2</a> </div> <div class="main" id="section2">   <a href="#section1">go to Section 1</a> </div>  

Product 1 Product 2 Product 3 Product 4 Product 5 Product 6 Load More... ➤ CSS (Cascading Style Sheets)   <style>   .list {     margin: 0px auto;     width: 80%;     box-sizing: border-box;   }   .list-element {     width: 100%;     margin: 25px 0px;     font-family: arial;     border-radius: 50px;     padding: 10px 0px;     color: #11f2d0;     font-size: 20px;     text-align: center;     box-shadow: 0px 0px 6px 0px #11f2d0;     display: none;   }   #loadmore {     margin: 50px auto 0px;     display: table;     border: none;     padding: 10px 20px;     font-size: 18px;     cursor: pointer;     color: black;    ...

TextBox 1 TextBox 2 TextBox 3 TextBox 4 TextBox 5 TextBox 6 TextBox 7 TextBox 8 TextBox 9 TextBox 10 TextBox 11 TextBox 12 TextBox 13 TextBox 14 TextBox 15 TextBox 16 Load More ➤ CSS (Cascading Style Sheets) <style>   *, body {     margin: 0;     padding: 0;   }   .flex {     display: flex;     flex-wrap: wrap;     justify-content: left;     align-items: center;   }   .content {     width: 16.25%;     color: #fff;     font-size: 24px;     line-height: 100px; /* centering text just for view */     text-align: center;     background-color: grey;     margin: 2px;     /*border: 1px solid lightgrey;*/     display: none;   }   #loa...

➤ CSS and Javascript Include   <link rel="stylesheet" type="text/css" href="/css/result-light.css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>   ➤ HTML Code   <!-- create a bootstrap card in a container--> <div class="container">   <!--Bootstrap card wit...

เขียนคำสั่งพิมพ์รายงานโดยใช้ Javascript รายงานสินค้า ยี่ห้อ สี รูปภาพ Adidas ขาว เทา Umbro น้ำเงิน ขาว เทา Nike ขาว ชมพู ส้ม เขียว     ➤ CSS (Cascading Style Sheets)   <style>   table   {     width: auto;     font: 17px Calibri;   }   table, th, td   {     border: solid 1px #DDD;     border-collapse: collapse;     padding: 2px 3px;     text-align: center;   }   img   {     width: 50%;   } </style> ➤ HTML Code   <div>   <h2>รายงานสินค้า</h2>   <table id="tablePrint">     <tr>       <th>ยี่ห้อ</th>       <th>สี</th>   ...

Dynamic information display with javascript sourced data show in table ➤ CSS (Cascading Style Sheets)    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">     ➤ HTML Code   <table id="allDay" class="display" width="100%"></table>     ➤  Javascript Code   <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script> <script>   var dataSet = [      [ "1", "January", "All", "31", "Day", "2021" ],      [ "2", "Febuary", "All", "28", "Day", "2021" ],      [ "3", "March", "All", "31", "Day", "2021" ],      [ "4", ...

5 star rating calculator html code input Radio button star rating CSS style ➤ CSS (Cascading Style Sheets)    <style>   .rating input[type="radio"]:not(:nth-of-type(0)) {     /* hide visually */         border: 0;     clip: rect(0 0 0 0);     height: 1px;     margin: -1px;     overflow: hidden;     padding: 0;     position: absolute;     width: 1px;   }   .rating [type="radio"]:not(:nth-of-type(0)) + label {     display: none;   }   label[for]:hover {     cursor: pointer;   }   .rating .stars label:before {     content: "★";     font-size: 30px;   }   .stars label {     color: lightgray;   }   .stars label:hover {     text-shadow: 0 0 1px #000;   }   .rating [ty...

โค้ด Html CSS Javascript Countdown  นับถอยหลัง  การจับเวลานับถอยหลัง ในที่นี้จะคำนวณแบบ นับเวลาถอยหลัง โดยกำหนดค่าได้เป็นจำนวนวัน จำนวนชั่วโมง จำนวนนาที จำนวนวินาที (เหมือนตัวอย่างข้างบน) สามารถเขียนตาม ตัวอย่างโค้ด HTML ได้ดังนี้ ➤ CSS (Cascading Style Sheets)  <style>   .divStyle {     background-color:#ddd;     padding:10;     text-align: center;     font-size: 20px;   } </style> ➤ HTML Code <div class="divStyle">   <h2>นับถอยหลังวัน ชั่วโมง นาที วินาที<h/2>   <!-- แสดงข้อความเวลา-->   <p id="countDown"></p> </div> ➤ Javascript Code <script>   /*// เพิ่มจำนวนวัน add days       var d = new Date();       d.setDate(d.getDate() + 1);*/   // เพิ่มจำนวนชั่วโมง add hours   var param = new Date();   param.setHours(24);   /*// เพิ่มจำนวนนาที add minutes       var param ...

การเขียน โค้ด Html กําหนดจํานวนตัวอักษร  ค่อนข้างใช้บ่อยและพบเห็นได้ในหน้าแรกหรือหน้าแสดงสินค้า ซึ่งเราสามารถเขียน Cascading Style Sheets (CSS) ให้ จํากัดตัวอักษร Html แสดงแบบ 1 บรรทัด 2 บรรทัด 3 บรรทัด หรือที่ตามต้องการได้ โดยการเขียน CSS ประกาศไว้ แล้วเรียกใช้งานผ่าน Class เช่น Class="textLimit" (ตามตัวอย่างด้านล่าง) เป็นต้น เท่านี้ก็สามารถ จำกัดตัวอักษร ให้แสดงบนหน้าเว็บได้แล้วครับ ➤   CSS  ( Cascading Style Sheets)  <style>   . textLimit   { overflow : hidden ; text - oveflow : ellipsis ; display : - webkit - box ; line - height : 16px ; /* ขนาดความสูงตัวอักษร 1 บรรทัด */ max - height : 32px ; /* ขนาดความสูงตัวอักษร 2 บรรทัด*/ - webkit - line - clamp : 2 ; /* จำนวนบรรทัดที่แสดง 2 บรรทัด */ - webkit - box - orient : vertical ; } </style> ➤ HTML Code <div class="textLimit" > Upin Sale Online Shopping อูพิน เซลล์ ออนไลน์ ช้อปปิ้ง ส่งฟรี ทั่วไทย /* ให้ตัดตัวอักษรและแสดงเพียง 2 บรรทัด*...