codeboc

➤ HTML Coding ตัวเลขยกกำลัง (Superscripts) เช่น 2 2 HTML Code: 2²  ตัวห้อย (Subscripts ) เช่น 2 2 HTML Code: 2 < sub > 2 < / sub >

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...

➤ Javascript <!-- Ref: Disable right mouse click html code --> <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script> <script> <!-- Function: Disable right mouse click html code --> $(function() {         $(this).bind("contextmenu", function(e) {             e.preventDefault();         });     }); </script> ➤ HTML Coding <html> <head> <!-- Ref: Disable right mouse click html code --> <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script> <script> <!-- Function: Disable right mouse click html code --> $(function() {         $(this).bind("contextmenu", function(e) {             e.preventDefault();         }); ...

➤ HTML Coding   <iframe allowfullscreen='' frameborder='0' height='255' src='//www.youtube.com/embed/DTFOvTPIYGs?rel=0&amp;autoplay=1&amp;loop=1&amp;playlist=DTFOvTPIYGs' width='400'></iframe>

➤ 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 */  ...

CODEBOC... ➤ HTML Coding   <div id="mydiv">CODEBOC...</div> ➤ Javascript Coding   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> setTimeout(function() {     $('#mydiv').fadeOut('fast'); }, 3000); //$('#mydiv').delay(2000).hide(1000); </script>

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>  

➤ CSS (Cascading Style Sheets) <style>   .imgHeight {     height: 335px;     width:100%;     padding-top:6px;   }   @media screen and (max-width: 800px) {     .imgHeight {       height: 180px;     }   } </style>   ➤ HTML Code <a href="https://upinsale.blogspot.com/" title="กดคลิกดูดีลนี้" target="_blank">   <img class="mySlides imgHeight" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpeAb6XLYAbIPD_axB9uLBqnfRHd96-z5qDLX15daKNmll7iV0hzOi9fNrbNSjS7BxX2X_KfJEZKYwvyEXpHUg2h2ufxCBLhuAWhBCmDvFETf2FPuLhF03Bxc_odS03a4JtLHHbhRxKe8/w640-h237/upinsale_cover.png" style="" /> </a> <a href="https://ipthai.blogspot.com/2020/01/wyndhamgardenirin-pattaya.html" title="กดคลิกดูดีลนี้" target="_blank">   <img class="mySlides imgHeight" src="https://blogger.googleusercon...

รถมือสองสภาพดี ➤ HTML Code <!-- Like Page --> <div class="fb-page" data-href="https://www.facebook.com/svautosale" data-hide-cover="false" data-show-facepile="true" data-show-posts="false">   <div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/svautosale"><a href="https://www.facebook.com/svautosale">รถมือสองสภาพดี</a></blockquote>   </div> </div> <!-- Comments Page --> <div class="fb-comments" data-href="https://www.facebook.com/svautosale" data-width="790" data-numposts="10"></div>   ➤ Javascript Code <script>(function(d, s, id) {     var js, fjs = d.getElementsByTagName(s)[0];     if (d.getElementById(id)) return;     js = d.createElement(s); js.id = id;     js.src = "//connect.facebook.net/th_TH/sdk.js#xfbml=1&version=v3.1";  ...

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", ...

Coding for Event Onclick Window Location Href Target "_blank" with Html and Javascript Function for redirect page on window ☛ Location OnClick ☛ New Window OnClick ☛ New Window "_blank" OnClick ☛ Function New Window OnClick ➤ HTML and Javascript Code <!-- Location OnClick --> <p onclick="location.href='https://upinsale.blogspot.com'" style="cursor:pointer">Location OnClick</p> <!-- New Window OnClick --> <p onclick="window.open('https://upinsale.blogspot.com')" style="cursor:pointer">New Window OnClick</p> <!-- New Window Blank OnClick --> <p onclick="window.open('https://upinsale.blogspot.com', '_blank')" style="cursor:pointer">New Window "_blank" OnClick</p> <!-- Fuction New Window OnClick--> <p onclick="functionGetFree()" style="cursor:pointer">Function New Window ...

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...

เขียนโค้ดแสดงวันที่และเวลา ตามโซนประเทศไทย Asia/Bangkok โดยเรียกใช้ผ่านคำสั่ง Javascript เพื่อให้แสดงวันเวลาปัจุบัน date now javascript timezone thailand ได้ดังนี้ ➤ HTML Code <p id="dateNowThaizone" style="text-align:center;color:#11f2d0;font-size:36px;" ></p> ➤ Javascript Code <script>    document.getElementById("dateNowThaizone").innerHTML = new Date().toLocaleString('en-US', { timeZone: 'Asia/Bangkok' }); </script>

Javascript Page Rendering Time ตามปกติแล้วพบเห็นได้ในหน้าแรกของเว็บต่างๆ เพื่อใช้นับเวลาการโหลดหน้าเว็บครั้งแรก  Page Load Speed เพื่อประโยชน์ในการใช้วิเคราะห์ข้อมูล ปรับแต่งเว็บและวัดความเร็วด้านการประมวลผลเว็บไซต์ เพื่อพัฒนาให้เว็บไซต์เรามีประสิทธิ์ภาพมากขึ้น โหลดเร็วขึ้น ทั้งนี้เป็นเพียงโค้ด Page Load Time ที่ใช้ในการวัดค่าและแสดงการโหลดหน้าเว็บเท่านั้น ไม่ได้มีผลต่อการทำให้เว็บมีประสิทธิ์มากขึ้น เร็วขึ้นแต่อย่างใด ซึ่งผู้พัฒนาเองต้องเป็นผู้ปรับแต่งให้เวลาการโหลดน้อยลงต่อไป ➤ HTML Code <h2> <input id="PagePender" value="" style="background-color: black;color:#11f2d0;border: 1px solid #11f2d0;text-align: center;width:100%" /> </h2>   ➤ Javascript Code <script type="text/javascript">     var start_time=+new Date();     var PagePender = document.getElementById('PagePender');     window.onload=function(){         PagePender.value = "coding elearning for html css java script | rendered in " + ((+ne...

การเขียนคำสั่ง Javacript คำนวณราคาส่วนลดขาย ให้อยู่ในรูปแบบของเปอร์เซ็นต์(Percent)ส่วนลด โดยคำนวณจากราคาต้นทุน(Price) และให้แปรผันตามเปอร์เซ็นต์ส่วนลด ซึ่งในที่นี้จะได้ราคาส่วนลดมาจาก 2 ตัวแปร คือ ราคาและเปอร์เซ็นต์  สูตรการคำนวณ มาจากการกำหนด (ราคา-(ราคาxเปอร์เซ็นต์)/100) ซึ่งจะได้ผลลัพท์ออกมาอยู่ในรูปส่วนลดที่เป้นเงินบาท ทั้งนี้สามารถนำไปประยุกต์ใช้ในงานส่วนลดสินค้าต่างๆ ได้ตามความเหมาะสม Price Percentage Calculator Javascript Price: Percent: Discount: 0 ฿ Total Price: 0 ฿ ➤ HTML Code <p>   <label>Price:</label>   <input id="inputPrice" type="" placeholder="price" value="1000"> </p> <p>   <label>Percent:</label>   <input id="inputPercent" type="" placeholder="%" oninput="priceConverter(this.value)" onchange="priceConverter(this.value)"> </p> <p>   <label>Discount:</label>   <sp...