codeboc

➤ Javascript   <script> $(document).ready(function(){          disableSelection(document.body);     });     function disableSelection(target){         $(function() {              $(this).bind("contextmenu", function(e) {                  e.preventDefault();              });          });          if (typeof target.onselectstart!="undefined") //For IE               target.onselectstart=function(){return false}          else if (typeof target.style.MozUserSelect!="undefined") //For Firefox               target.style.Moz...

➤ 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();         }); ...

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>

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

เขียนโค้ดแสดงวันที่และเวลา ตามโซนประเทศไทย 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...

โค้ด 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 ...