Posts

Showing posts with the label JS

Konversi DOM element ke HTML string

Mengubah dom document sebuah elemen kedalam HTMl string biasa <div id="elemenTersedia"></div> <script> function htmlFromDom(ClonedNode) { var target = document.getElementById('element-helper'); if (!target) { document.body.innerHTML += '<div id="element-helper" style="display:none"></div>'; target = document.getElementById('element-helper'); } target.innerHTML = ''; var wrap = document.createElement('div'); wrap.appendChild(ClonedNode); return wrap.innerHTML; } /* Penggunaan dalam pembuatan element */ var elem = document.createElement('p'); elem.id = 'IDELEMENT'; elem.innerHTML = 'text element'; // print secara langsung juga bisa document.write(htmlFromDom(elem)); // atau append ke element yang tersedia document.getElementById('elemenTersedia').innerHTML = htmlFr

Membuat array javascript unik

Image
function arrayUnik(A){ uniq = A.filter(function(item, pos, self) { return self.indexOf(item) == pos; }); return uniq; } /* Penggunaan */ var arraymu = [1,2,3,4,5,6,3,7,7,55,6,7,90,98,89,98,89,98,98,89,89]; console.log(arrayUnik(arraymu)); //Buka F12 developer tools untuk melihat hasilnya Menghapus duplikat array di javascript Membuat array menjadi unik di javascript

Disable Mouse Dragging CSS JS

Image
CSS <style> body { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } </style>

Check number is Odd or Even [JS]

Image
var oddoreven = function (n = false, type = 'odd') { var time = !n ? new Date().getDay() : Number(n); if (!/^-{0,1}\d+$/.test(time)){ alert('arguments is not number, please remove quote'); return; } hasil = time % 2; return hasil == (type == ('odd' || 'ganjil') ? 1 : 0); } Test document.write('isOdd / Ganjil : ' + oddoreven(false, 'odd')); document.write('<br/>'); document.write('isEven / Genap : '+oddoreven(false, 'even')); Output isOdd / Ganjil : true isEven / Genap : false

Lazy load images blogger

Image
Lazy load images blogger lazy loading blogger berguna untuk : Mempercepat laman web Meningkatkan rating pagespeed HTML (Usage) <img alt='' data-src='https://blogger.googleusercontent.com/img/proxy/AVvXsEjI6MvclZXd2doxNj1CYSURVRcQfQlMqLbnmYUuQWA2m5SPIEBljH7IXHIybUfyy5APOddK-sBYfaYz4DwTz0vC2iRRL-9BRnqt-QaH691ZLzXEdindLgThTk-ONk8DYE0BHVDNAVChX68j0RAaFMgeSNFbNPyT7jDnZynj0WMg-34sNKBpEPSkxw=w72-h58-p-k-no-nu' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEXz8/SVuXQoAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg=='/> src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEXz8/SVuXQoAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==' : source gambar dengan resolusi paling rendah data-src='https://blogger.googleusercontent.com/img/proxy/AVvXsEjI6MvclZXd2doxNj1CYSURVRcQfQlMqLbnmYUuQWA2m5SPIEBljH7IXHIybUfyy5APOddK-sBYfaYz4DwTz0vC2iRRL-9BRnqt-QaH691ZLzXEdindLgThTk-ONk8DYE0BHVDNAVChX

Alternative Widget Translator for blog

Image
Example Translator Languages English Indonesian Afrikaans Albanian Arabic Armenian Azerbaijani Basque Belarusian Bengali Bulgarian Catalan Chinese Croatian Czech Danish Dutch English Esperanto Estonian Filipino Finnish French Galician Georgian German Greek Gujarati Haitian Creole Hebrew Hindi Hungarian Icelandic Indonesian Irish Italian Japanese Kannada Korean Latin Latvian Lithuanian Macedonian Malay Maltese Norwegian Persian Polish Portuguese

Bootstrap 4 Auto Progress Bar

Image
Press F12 for console debug requirements: 1. jQuery 2. Bootstrap 4 css 3. https://rawcdn.githack.com/dimaslanjaka/Web-Manajemen/f3dfa14a3848a8282eb39b1e2f01e1d6e62d7c44/js/jquery.progressBarTimer.min.js Read How to async defer CSS JS perfectly attribute info: countdown = to start countdown data-callback = function name of callback data-warning = bar warning style data-success = bar success style data-base = bar progress style HTML code <div data-callback="fn" countdown="5"></div> <div data-callback="fi" countdown="10"></div> Javascript code var elm = $("[countdown]"); function fc() { console.log("callback Succedeed") } function ctd(elm) { //main function var tl = 0 < elm.attr("countdown") ? elm.attr("countdown") : 5, bs = elm.data("base") ? elm.data("base") : "bg-info",

Defer loading css js

Image
Cara defer loading javascript atau menunda pemanggilan javascript di blogger Berfungsi untuk : Mempercepat loading blog website / meningkatkan kecepatan loading website blog. Mengurangi ukuran halaman website. Meningkatkan score pagespeed google. Meningkatkan konten yang terlihat. Mempermudah edit template di mobile phone / hape. Menunda javascript berarti benar-benar memuat atau mem-parsing javascript itu hanya dimulai setelah konten halaman dimuat (Artinya tidak akan memengaruhi kecepatan halaman atau jalur render kritis). Menggunakan acara "onload", kami menyebutnya javascript eksternal Javascript eksternal tidak akan dimuat sebelum konten halaman dimuat Javascript eksternal kemudian akan berjalan dan mempengaruhi halaman Penjelasan Menunda javascript adalah salah satu masalah di web yang dapat membuat Anda ingin menarik rambut Anda mencoba mencari solusi . Banyak orang mengatakan "gunakan saja penundaan" atau "gunakan saja async" atau