javascript

Cara Mengurutkan Data Di Dropdown Dengan Javascript

8/04/2019 09:53:00 am

Tips Mengurutkan Data Di Dropdown Dengan Javascript

Ok tanpa BASI BASA keburu di kejar DEADLINE kita langsung aja ke TKP.

Cara Mengurutkan Data Di Dropdown Dengan Javascript
Cara Mengurutkan Data Di Dropdown Dengan Javascript
Dalam kasus ini kita akan mengurutkan data yang berada di dalam option select atau sering disebut dengan dropdown.

Tampilan Normal:

  • Oslo
  • tockholm
  • Helsinki
  • Berlin
  • Rome
  • Madrid

Setelah diurutkan:

  • Oslo
  • tockholm
  • Helsinki
  • Berlin
  • Rome
  • Madrid

Hal yang terbesit

Bagaimana Caranya ya kok bisa begitu ?

Kodenya HTML :

  1. <ul id="id01">
  2.   <li><span>Oslo</span></li>
  3.   <li><span>tockholm</span></li>
  4.   <li><span>Helsinki</span></li>
  5.   <li><span>Berlin</span></li>
  6.   <li><span>Rome</span></li>
  7.   <li><span>Madrid</span></li>
  8. </ul>

Kodenya :

  1. <script  src="https://code.jquery.com/jquery-3.4.1.js"></script>
  2. <script>
  3. $(document).ready(function(){
  4. var list, i, switching, b, shouldSwitch;
  5.    list = document.getElementById("id01");
  6.   switching = true;
  7.   /* Make a loop that will continue until
  8.   no switching has been done: */
  9.   while (switching) {
  10.     // start by saying: no switching is done:
  11.     switching = false;
  12.     b = list.getElementsByTagName("li");
  13.     // Loop through all list-items:
  14.     for (i = 0; i < (b.length - 1); i++) {
  15.       // start by saying there should be no switching:
  16.       shouldSwitch = false;
  17.       /* check if the next item should
  18.       switch place with the current item: */
  19.       if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
  20.         /* if next item is alphabetically
  21.         lower than current item, mark as a switch
  22.         and break the loop: */
  23.         shouldSwitch = true;
  24.         break;
  25.       }
  26.     }
  27.     if (shouldSwitch) {
  28.       /* If a switch has been marked, make the switch
  29.       and mark the switch as done: */
  30.       b[i].parentNode.insertBefore(b[i + 1], b[i]);
  31.       switching = true;
  32.     }
  33.   } 
  34. })
  35. </script>

Hore..... Done...

Tutorial Membuat PDF Preview mengunakan PDF Worker.js, PDF Option.js, PDF.js

8/03/2019 10:48:00 pm

Tutorial Membuat PDF Preview mengunakan PDF Worker.js, PDF Option.js, PDF.js


Kali kita membuat preview file pdf ketika akan di upload ke server menggunakan plugin mengunakan PDF Worker.js, PDF Option.js, PDF.js


Tutorial Membuat PDF Preview mengunakan PDF Worker.js, PDF Option.js, PDF.js
Tutorial Membuat PDF Preview mengunakan PDF Worker.js, PDF Option.js, PDF.js

Langsung saja tanpa pikir panjang di source codenya.

Kodenya :

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <link rel="stylesheet" type="text/css" href="pdf-preview/pdf.style.css">
  6. </head>
  7. <body>
  8. <div id="preview-container">
  9.     <button id="upload-dialog">Pilih PDF</button>
  10.     <input type="file" id="pdf-file" name="pdf" accept="application/pdf" />
  11.     <div id="pdf-loader">Loading Preview ..</div>
  12.     <canvas id="pdf-preview" width="250"></canvas>
  13.     <span id="pdf-name"></span>
  14.     <button id="upload-button">Upload</button>
  15.     <button id="cancel-pdf">Cancel</button>
  16. </div>
  17. <script src="pdf-preview/pdf.js"></script>
  18. <script src="pdf-preview/pdf.worker.js"></script>
  19. <script src="pdf-preview/pdf.option.js"></script>
  20. </body>
  21. </html>


Hasilnya Seperti:

Tutorial Membuat PDF Preview mengunakan PDF Worker.js, PDF Option.js, PDF.js
Tutorial Membuat PDF Preview mengunakan PDF Worker.js, PDF Option.js, PDF.js

Jika masih bingung silahkan download SOURCE CODENYA disini
 Server  [SF] Server  [MF]

Hore.... Done....

Tutorial Membuat PDF Preview mengunakan plugin dari mozilla.github.io

8/03/2019 10:20:00 pm

Tutorial Membuat PDF Preview mengunakan plugin dari mozilla.github.io

Kali kita membuat preview file pdf ketika akan di upload ke server. Ok langsung aja ke tkp


Tutorial Membuat PDF Preview mengunakan plugin dari mozilla.github.io
Tutorial Membuat PDF Preview mengunakan plugin dari mozilla.github.io

Langsung saja tanpa pikir panjang di source codenya

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>

Kodenya :

  1. <input type="file" id="myPdf" /><br>
  2. <canvas id="pdfViewer" ></canvas>
  3. <script type="text/javascript">
  4. $(document).ready(function(){
  5.     document.getElementById("myPdf").value = "";
  6. })
  7.     // Loaded via <script> tag, create shortcut to access PDF.js exports.
  8. var pdfjsLib = window['pdfjs-dist/build/pdf'];
  9. // The workerSrc property shall be specified.
  10. pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
  11. $("#myPdf").on("change", function(e){
  12.     var file = e.target.files[0]
  13.     if(file.type == "application/pdf"){
  14.         var fileReader = new FileReader();  
  15.         fileReader.onload = function() {
  16.             var pdfData = new Uint8Array(this.result);
  17.             // Using DocumentInitParameters object to load binary data.
  18.             var loadingTask = pdfjsLib.getDocument({data: pdfData});
  19.             loadingTask.promise.then(function(pdf) {
  20.               console.log('PDF loaded');
  21.  
  22.               // Fetch the first page
  23.               var pageNumber = 1;
  24.               pdf.getPage(pageNumber).then(function(page) {
  25.                 console.log('Page loaded');
  26.  
  27.                 var scale = 0.3;
  28.                 var viewport = page.getViewport({scale: scale});
  29.                 // Prepare canvas using PDF page dimensions
  30.                 var canvas = $("#pdfViewer")[0];
  31.                 var context = canvas.getContext('2d');
  32.                 canvas.height = viewport.height;
  33.                 canvas.width = viewport.width;
  34.                 // Render PDF page into canvas context
  35.                 var renderContext = {
  36.                   canvasContext: context,
  37.                   viewport: viewport
  38.                 };
  39.                 var renderTask = page.render(renderContext);
  40.                 renderTask.promise.then(function () {
  41.                   console.log('Page rendered');
  42.                 });
  43.               });
  44.             }, function (reason) {
  45.               // PDF loading error
  46.               console.error(reason);
  47.             });
  48.         };
  49.         fileReader.readAsArrayBuffer(file);
  50.     }
  51. });
  52. </script>


Hasilnya Seperti

Tutorial Membuat PDF Preview mengunakan plugin dari mozilla.github.io
Jika masih bingung silahkan download SOURCE CODENYA disini
 Server  [SF] Server  [MF]

Hore.... Done....

Cara mengatasi duplikasi atau pengulangan kata di dropdown dengan javascript

7/28/2019 08:41:00 pm

Mengatasi Nilai yang sama di Dropdown atau Select Option HTML  dengan Javascript


Mengatasi duplikasi atau REMOVE DUPLICATE di dropdown ??. Mungkin cukup aneh bagi kita, tapi hal ini biasa sering kita jumpai dan bingung untuk mengatasainya. Ok langsung saja kita praktekkan.


Cara mengatasi duplikasi atau pengulangan kata di dropdown dengan javascript
Cara mengatasi duplikasi atau pengulangan kata di dropdown dengan javascript


Untuk penguunan SKRIPT dibawah pastaikan kita terkoneksi internet, untuk bisa menjalankan JQUERY nya atau, bisa download JQUERY  CDN di internet dulu jika koneksi internet tidak stabil.


Kode Opsi Pertama :

  1. <select class="sub_jenis_group">
  2.         <option class="ini-itu">abc</option>
  3.         <option class="ini-itu">abc</option>
  4.         <option class="ini-itu">bcd</option>
  5.         <option class="ini-itu">xyz</option>
  6.         <option class="ini-itu">bcd</option>
  7.         <option class="ini-itu">xyz</option>
  8.         <option class="ini-itu" value="0">dodo</option>
  9.         <option class="ini-itu">dodo</option>
  10.         <option class="ini-itu" value="1">dodo</option>
  11.         <option class="ini-itu" value="2">dodo</option>
  12.  </select> 
  13.  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  14.  <script type="text/javascript">
  15.   var move = {};
  16.         $(".ini-itu").each(function () {
  17.             if(move[$(this).text()]) {
  18.                 $(this).remove();
  19.                 console.log('Ada yang itu');
  20.             } else {
  21.                 move[$(this).text()] = $(this).val();
  22.                 console.log('Ada yang ini');
  23.             }
  24.         });
  25.     </script>
Jika SCKRIP di atas masih kurang pas boleh di coba cara kedua yang ada di bawah..

Kode Opsi Kedua :

  1. <select class="sub_jenis_group_2">         
  2.   <option id="ginjal_ginjal">abc</option>         
  3.   <option id="ginjal_ginjal">abc</option>         
  4.   <option id="ginjal_ginjal">bcd</option>         
  5.   <option id="ginjal_ginjal">xyz</option>         
  6.   <option id="ginjal_ginjal">bcd</option>        
  7.   <option id="ginjal_ginjal">xyz</option>        
  8.   <option id="ginjal_ginjal" value="0">dodo</option>       
  9.   <option id="ginjal_ginjal">dodo</option>        
  10.   <option id="ginjal_ginjal" value="1">dodo</option>       
  11.   <option id="ginjal_ginjal" value="2">dodo</option>  
  12. </select>     
  13.  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>    
  14.  <script type="text/javascript">  
  15.  var usedNames = {};    
  16.  $("select[class='sub_jenis_group_2'] > option").each(function () { 
  17.  if(usedNames[this.text]) {        
  18.   $(this).remove();     
  19.  } else {       
  20.   usedNames[this.text] = this.value;     
  21.  }   
  22.  });  
  23. </script>
  24.  

Membuka beberapa page dalam 1 kali klik dengan Javascript

7/20/2019 11:38:00 pm

Buka beberapa halaman dalam satu kali klik

Oke kali ini kita akan membuat suatu fungsi, tepatnya fungsi javascript untuk membuka beberapa url dalam satu kali perintah.

Membuka beberapa page dalam 1 kali klik dengan Javascript
Membuka beberapa page dalam 1 kali klik dengan Javascript  


Membuka beberapa page dalam 1 kali klik dengan Javascript 


Kodenya :

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>https://indianaweb.blogspot.com</title>
  5. </head>
  6. <body>
  7.  <a href="javascript:(function(){window.open('https://dezige-in.blogspot.com/2014/06/link-membuka-banyak-url-dalam-satu-klik.html');})();javascript:(function(){window.open('https://www.google.com/');})();">Teks Link</a>
  8. </body>
  9. </html>