Fungsi ini digunakan untuk menghasilkan angka acak dalam range atau batasan minimal dan maksimal yang telah ditentukan:
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}Buat angka acak dengan batasan tidak boleh kurang dari 5 dan tidak boleh lebih dari 17:
document.write(getRandomInt(5, 17));Fungsi ini digunakan untuk mengacak array:
function shuffleArray(arr) {
var i = arr.length, j, temp;
if (i === 0) return false;
while (--i) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}var myArray = shuffleArray(["Aku", "Cinta", "Kamu"]);
document.write(myArray.join(' '));Hasil keluaran nantinya akan menghasilkan teks Aku Cinta Kamu atau Kamu Cinta Aku atau Cinta Aku Kamu atau Cinta Kamu Aku atau Kamu Aku Cinta atau blablabla...
hashchange adalah event JavaScript yang akan memicu suatu fungsi untuk bekerja setiap kali hash pada address bar berubah. Umumnya terjadi ketika pengguna menekan tombol Back dan/atau Forward pada peramban. Bermanfaat untuk memastikan agar AJAX bisa tetap bekerja ketika pemicu fungsi yang digunakan adalah berupa penekanan tombol Back dan Forward:
// http://stackoverflow.com/questions/9339865/get-the-hashchange-event-to-work-in-all-browsers-including-ie7
(function(w) {
if ('onhashchange' in w) {
if (w.addEventListener) {
w.addHashChange = function(func, before) {
w.addEventListener('hashchange', func, before);
};
w.removeHashChange = function(func) {
w.removeEventListener('hashchange', func);
};
return;
} else if (w.attachEvent) {
w.addHashChange = function(func) {
w.attachEvent('onhashchange', func);
};
w.removeHashChange = function(func) {
w.detachEvent('onhashchange', func);
};
return;
}
}
var hashChangeFuncs = [], oldHref = location.href;
w.addHashChange = function(func, before) {
if (typeof func === 'function') hashChangeFuncs[before ? 'unshift' : 'push'](func);
};
w.removeHashChange = function(func) {
for (var i = hashChangeFuncs.length-1; i >= 0; i--) {
if (hashChangeFuncs[i] === func) hashChangeFuncs.splice(i, 1);
}
};
setInterval(function() {
var newHref = location.href;
if (oldHref !== newHref) {
oldHref = newHref;
for (var i = 0; i < hashChangeFuncs.length; i++) {
hashChangeFuncs[i].call(w, {
'type': 'hashchange',
'newURL': newHref,
'oldURL': oldHref
});
}
}
}, 100);
})(window);Fungsi ini akan menampilkan kotak peringatan setiap kali hash berubah. Fungsi ini tidak memerlukan pemicu seperti window.onload, elem.onclick, atau event apapun! Karena pemicu kemunculan kotak pesan berasal dari perubahan hash pada peramban. Untuk mengubah hash pada peramban bisa dilakukan dengan cara mengeklik tautan lokal yang mengandung hash atau menekan tombol Back dan/atau Forward:
addHashChange(function() {
alert('OK!');
});$('.ajax-link').on("click", function() {
window.location.hash = this.hash;
return false;
});
// If user opens a URL that already contains a hash...
if (window.location.hash) {
var theHash = window.location.hash; // Save the hash
window.location.hash = ''; // Remove the hash, so if the AJAX link is clicked, the `hashchange` event will be triggered.
$('.ajax-link').filter(function() {
return this.hash == theHash;
}).trigger("click"); // Trigger a click event to the AJAX link if it `hash` match with `window.location.hash`
}
// From hash change or history (Back/Forward button)
// Does not require any event. Just place the function like this...
// Because the trigger came from the hash changes in the address bar.
addHashChange(function(e) {
var url = (e.newURL||location.href).split('#');
$('#container').load(url[0] + ' #' + url[1]);
});// http://stackoverflow.com/questions/7264899/detect-css-transitions-using-javascript-and-without-modernizr/13081497#13081497
var supportCSSTransitions = (function() {
var s = document.createElement('p').style;
return 'transition' in s ||
'WebkitTransition' in s ||
'MozTransition' in s ||
'msTransition' in s ||
'OTransition' in s;
})();Menambahkan kelas spesifik pada tag <html> berdasarkan dukungan CSS transisi pada peramban yang dipakai:
document.documentElement.className +=
supportCSSTransitions ? " css-transition" : " no-css-transition";Menggunakan animasi CSS transisi untuk performa yang lebih baik jika peramban yang dipakai mendukung CSS transisi, dan akan dialihkan ke JQuery .animate() jika peramban yang dipakai tidak mendukung CSS transisi:
if (supportCSSTransitions) {
$('div').css({
"top": 50,
"left": 100
});
} else {
$('div').animate({
"top": 50,
"left": 100
}, 1000);
}JavaScript ini digunakan untuk memberitahu para pengguna bahwa font dengan nama tertentu tidak terpasang/terinstal di komputer:
/**
* JavaScript code to detect available availability of a
* particular font in a browser using JavaScript and CSS.
*
* Author : Lalit Patel
* Website: http://www.lalit.org/lab/javascript-css-font-detect/
* License: Apache Software License 2.0
* http://www.apache.org/licenses/LICENSE-2.0
* Version: 0.15 (21 Sep 2009)
* Changed comparision font to default from sans-default-default,
* as in FF3.0 font of child element didn't fallback
* to parent element if the font is missing.
* Version: 0.2 (04 Mar 2012)
* Comparing font against all the 3 generic font families ie,
* 'monospace', 'sans-serif' and 'sans'. If it doesn't match all 3
* then that font is 100% not available in the system
* Version: 0.3 (24 Mar 2012)
* Replaced sans with serif in the list of baseFonts
*/
/**
* Usage: d = new Detector();
* d.detect('font name');
*/
var Detector = function() {
// a font will be compared against all the three default fonts.
// and if it doesn't match all 3 then that font is not available.
var baseFonts = ['monospace', 'sans-serif', 'serif'];
//we use m or w because these two characters take up the maximum width.
// And we use a LLi so that the same matching fonts can get separated
var testString = "mmmmmmmmmmlli";
//we test using 72px font size, we may use any size. I guess larger the better.
var testSize = '72px';
var h = document.getElementsByTagName("body")[0];
// create a SPAN in the document to get the width of the text we use to test
var s = document.createElement("span");
s.style.fontSize = testSize;
s.innerHTML = testString;
var defaultWidth = {};
var defaultHeight = {};
for (var index in baseFonts) {
//get the default width for the three base fonts
s.style.fontFamily = baseFonts[index];
h.appendChild(s);
defaultWidth[baseFonts[index]] = s.offsetWidth; //width for the default font
defaultHeight[baseFonts[index]] = s.offsetHeight; //height for the defualt font
h.removeChild(s);
}
function detect(font) {
var detected = false;
for (var index in baseFonts) {
s.style.fontFamily = font + ',' + baseFonts[index]; // name of the font along with the base font for fallback.
h.appendChild(s);
var matched = (s.offsetWidth != defaultWidth[baseFonts[index]] || s.offsetHeight != defaultHeight[baseFonts[index]]);
h.removeChild(s);
detected = detected || matched;
}
return detected;
}
this.detect = detect;
};Kode eksekusi harus dinyatakan dalam keadaan DOM Content Loaded, atau letakkan saja di area <body>:
var d = new Detector();
// Jika font dengan nama `Lucida Grande` tidak ada di komputer, tampilkan pesan peringatan
if (!d.detect('Lucida Grande')) {
alert('Lucida Grande is not installed!');
}Sumber: JavaScript/CSS Font Detector
/*! http://stackoverflow.com/questions/8917921/cross-browser-javascript-not-jquery-scroll-to-top-animation */
function scrollTo(element, to, duration) {
// http://robertpenner.com/easing/
// t = current time, b = start value, c = change in value, d = duration
Math.easeInOutQuad = function(t, b, c, d) {
t /= d / 2;
if (t < 1) return c / 2 * t * t + b;
t--;
return -c / 2 * (t * (t - 2) - 1) + b;
};
var start = element.scrollTop,
change = to - start,
currentTime = 0,
increment = 20,
animateScroll = function() {
currentTime += increment;
var val = Math.easeInOutQuad(currentTime, start, change, duration);
element.scrollTop = val;
if (currentTime < duration) {
setTimeout(animateScroll, increment);
}
};
animateScroll();
}element digunakan untuk mewakili elemen yang ingin diberi efek animasi, to mewakili jarak arah gulungan ke atas, duration mewakili durasi animasi:
<button onclick="scrollTo(document.body, 0, 1000);">Scroll to Top</button>$('[placeholder]').each(function() {
var plc = $(this).attr('placeholder');
$(this).addClass('blur').removeAttr('placeholder').val(plc).on("focus blur", function(e) {
// Add a `blur` class to fade the text color for the default placeholder text
$(this)[(e.type == "blur" && (this.value === "" || this.value == plc)) ? "addClass" : "removeClass"]('blur');
// Set the value to `plc` on blur if the element value is empty
if (e.type == "blur" && this.value === "") $(this).val(plc);
// Set the value to empty on focus if the element value is same with the default placeholder text
if (e.type == "focus" && this.value == plc) $(this).val("");
});
});input.blur,
textarea.blur {color:#bbb}.chat-box {
font:normal normal 11px/1.4 Tahoma,Verdana,Sans-Serif;
color:#333;
width:200px; /* Chatbox width */
border:1px solid #344150;
border-bottom:none;
background-color:white;
position:fixed;
right:10px;
bottom:0;
z-index:9999;
-webkit-box-shadow:1px 1px 5px rgba(0,0,0,.2);
-moz-box-shadow:1px 1px 5px rgba(0,0,0,.2);
box-shadow:1px 1px 5px rgba(0,0,0,.2);
}
.chat-box > input[type="checkbox"] {
display:block;
margin:0 0;
padding:0 0;
position:absolute;
top:0;
right:0;
left:0;
width:100%;
height:26px;
z-index:4;
cursor:pointer;
opacity:0;
filter:alpha(opacity=0);
}
.chat-box > label {
display:block;
height:24px;
line-height:24px;
background-color:#344150;
color:white;
font-weight:bold;
padding:0 1em 1px;
}
.chat-box > label:before {content:attr(data-collapsed)}
.chat-box .chat-box-content {
/* padding:10px; */
display:none;
}
/* hover state */
.chat-box > input[type="checkbox"]:hover + label {background-color:#404D5A}
/* checked state */
.chat-box > input[type="checkbox"]:checked + label {background-color:#212A35}
.chat-box > input[type="checkbox"]:checked + label:before {content:attr(data-expanded)}
.chat-box > input[type="checkbox"]:checked ~ .chat-box-content {display:block}<div class="chat-box">
<input type="checkbox">
<label data-expanded="Close Chatbox" data-collapsed="Open Chatbox"></label>
<div class="chat-box-content">
<!-- Kode buku tamu dsb... -->
</div>
</div>
<div id="outer-wrapper">
<section id="nav">
<a href="#nav" id="toggle-nav-btn" title="Show Navigation">≡</a>
<div class="inner">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Archive</a></li>
<li><a href="#">Contact</a></li>
</ul>
...
...
</div>
</section>
<section id="main">
Artikel di sini...
</section>
</div>/* Outer wrapper */
#outer-wrapper {
background-color:black;
overflow:hidden;
}
/* Left sidebar */
#nav {
float:left;
width:2.8em;
color:#999;
position:relative;
}
#nav .inner {
padding:1em;
display:none;
}
.menu,
.menu li {
margin:0 0;
padding:0 0;
list-style:none;
}
.menu {margin:2em -1em 1em}
.menu a {
display:block;
font-weight:bold;
color:white;
text-decoration:none;
height:2.4em;
line-height:2.4em;
padding:0 1em;
}
.menu a:hover {background-color:#222}
/* Right sidebar */
#main {
background-color:white;
margin-left:2.8em; /* Same with the `#nav` width */
padding:1em 2em;
}
/* Toggle navigation button */
#toggle-nav-btn {
text-decoration:none;
font-size:200%;
line-height:100%;
color:#666;
display:block;
position:absolute;
top:.2em;
right:.4em;
}
#toggle-nav-btn:hover {color:#888}
/* When the `.menu-is-visible` class applied */
.menu-is-visible #nav {width:200px}
.menu-is-visible #nav .inner {display:block}
.menu-is-visible #main {margin-left:200px} /* Same with the `.menu-is-visible #nav` width */
.menu-is-visible #toggle-nav-btn {color:#aaa}JavaScript ini digunakan untuk menambahkan dan melepaskan kelas .menu-is-visible pada elemen <body> secara bergantian:
(function() {
var page = document.body,
btn = document.getElementById('toggle-nav-btn');
btn.onclick = function() {
// Toggle the `.menu-is-visible` class to the <body> tag based on `#toggle-btn-nav` click event
page.className = (/(^| )menu-is-visible( |$)/.test(page.className)) ?
page.className.replace(/menu-is-visible/,"") :
page.className + " menu-is-visible";
// Toggle the toggle navigation title too...
this.title = (this.title == "Show Navigation") ?
"Hide Navigation" :
"Show Navigation";
return false;
};
})();Kita juga bisa menggunakan plugin JQuery Toggle Sidebar untuk menampilkan dan menyembunyikan sidebar, dimana menu navigasi berada di dalam sidebar tersebut. Tapi dalam kasus ini Saya tidak menyarankannya, mengingat menggunakan JavaScript mentah saja masih bisa:
$('#nav').toggleSidebar({
expand: "#main",
defaultHidden: true
});var x = $(window).width(),
y = $(window).height();
// Tampilkan lebar dan tinggi layar dalam kotak pesan
alert('Lebar layar: ' + x + '; Tinggi layar: ' + y);var w = window,
d = document,
e = d.documentElement,
g = d.body,
x = w.innerWidth || e.clientWidth || g.clientWidth, // x = Lebar layar
y = w.innerHeight || e.clientHeight || g.clientHeight; // y = Tinggi layar
// Tampilkan lebar dan tinggi layar dalam kotak pesan
alert('Lebar layar: ' + x + '; Tinggi layar: ' + y);<div id="load-time">Calculating page load time...</div>
<script type="text/javascript">
var showTime = document.getElementById('load-time'),
startTime = (new Date()).getTime(); // Get the time before `window.onload`
window.onload = function() {
// Get the current time in `window.onload`
var endTime = (new Date()).getTime();
// Now use the `startTime` and `endTime` to calculate the seconds
// And show the result inside `#load-time`
showTime.innerHTML = "Page load time = " + ((endTime-startTime)/1000) + " sec(s).";
};
</script>Cara kerja manipulasi scrollbar ini bukan dengan cara menghilangkan scrollbar yang asli dan menggantinya dengan yang baru, melainkan hanya menyembunyikan scrollbar asli tersebut di balik/di belakang scrollbar palsu yang kita ciptakan di atasnya. Jika Anda menghilangkan warna latar pada scrollbar buatan ini, maka elemen scrollbar yang asli akan dengan mudah terlihat:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Custom Vertical Scrollbar</title>
<style type="text/css">
.scroll-area-wrapper {
width:80%;
margin:50px auto;
}
.scroll-area {
overflow:auto;
padding-right:1em;
position:relative;
}
.scrollbar-track,
.scrollbar-arrow-up,
.scrollbar-arrow-down,
.scrollbar-thumb {position:absolute}
/* scrollbar track */
.scrollbar-track {
background-color:#ccc;
top:0;
right:0;
bottom:0;
}
/* scrollbar thumb */
.scrollbar-thumb {
background-color:#eee;
cursor:pointer;
position:absolute;
right:0;
}
/* up & down arrow */
.scrollbar-arrow-up,
.scrollbar-arrow-down {
background-color:#eee;
cursor:pointer;
right:0;
}
.scrollbar-arrow-up {top:0}
.scrollbar-arrow-down {bottom:0}
.scrollbar-arrow-up:before,
.scrollbar-arrow-down:before {
content:"";
display:block;
position:absolute;
border:4px solid transparent;
left:50%;
margin-left:-4px;
}
.scrollbar-arrow-up:before {
border-bottom-color:#aaa;
top:50%;
margin-top:-6px;
}
.scrollbar-arrow-down:before {
border-top-color:#aaa;
bottom:50%;
margin-bottom:-6px;
}
/* hover state */
.scrollbar-arrow-up:hover,
.scrollbar-arrow-down:hover,
.scrollbar-thumb:hover {background-color:#ddd}
</style>
<script type="text/javascript">
var ssb = {
aConts: [],
mouseY: 0,
N: 0,
asd: 0, /* active scrollbar element */
sc: 0,
sp: 0,
to: 0,
// constructor
scrollbar: function (cont_id) {
var cont = document.getElementById(cont_id);
// perform initialization
if (! ssb.init()) return false;
var cont_outer = document.createElement('div');
cont_outer.style.overflow = 'hidden';
cont_outer.style.position = 'relative';
cont.parentNode.appendChild(cont_outer);
cont_outer.appendChild(cont);
cont_outer.style.height = cont.offsetHeight + 'px';
cont.style.position = 'relative';
cont.style.top = '0px';
cont.style.height = '100%';
// adding new container into array
ssb.aConts[ssb.N++] = cont;
cont.sg = false;
//creating scrollbar child elements
cont.st = this.create_div('scrollbar-track', cont, cont_outer);
cont.sb = this.create_div('scrollbar-thumb', cont, cont_outer);
cont.su = this.create_div('scrollbar-arrow-up', cont, cont_outer);
cont.sd = this.create_div('scrollbar-arrow-down', cont, cont_outer);
// on mouse down processing
cont.sb.onmousedown = function (e) {
if (! this.cont.sg) {
if (! e) e = window.event;
ssb.asd = this.cont;
this.cont.yZ = e.screenY;
this.cont.sZ = cont.scrollTop;
this.cont.sg = true;
}
return false;
};
// on mouse down on free track area - move our scroll element too
cont.st.onmousedown = function (e) {
if (! e) e = window.event;
ssb.asd = this.cont;
ssb.mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
for (var o = this.cont, y = 0; o !== null; o = o.offsetParent) y += o.offsetTop;
this.cont.scrollTop = (ssb.mouseY - y - (this.cont.ratio * this.cont.offsetHeight / 2) - this.cont.sw) / this.cont.ratio;
this.cont.sb.onmousedown(e);
};
// onmousedown events
cont.su.onmousedown = cont.su.ondblclick = function (e) { ssb.mousedown(this, -1); return false; };
cont.sd.onmousedown = cont.sd.ondblclick = function (e) { ssb.mousedown(this, 1); return false; };
// onmouseout events
cont.su.onmouseout = cont.su.onmouseup = ssb.clear;
cont.sd.onmouseout = cont.sd.onmouseup = ssb.clear;
// onscroll - change positions of scroll element
cont.ssb_onscroll = function () {
this.ratio = (this.offsetHeight - 2 * this.sw) / this.scrollHeight;
this.sb.style.top = Math.floor(this.sw + this.scrollTop * this.ratio) + 'px';
};
// scrollbar width
cont.sw = 18;
// start scrolling
cont.ssb_onscroll();
ssb.refresh();
// binding own onscroll event
cont.onscroll = cont.ssb_onscroll;
return cont;
},
// initialization
init: function () {
if (window.oper || (! window.addEventListener && ! window.attachEvent)) { return false; }
// temp inner function for event registration
function addEvent (o, e, f) {
if (window.addEventListener) { o.addEventListener(e, f, false); ssb.w3c = true; return true; }
if (window.attachEvent) return o.attachEvent('on' + e, f);
return false;
}
// binding events
addEvent(window.document, 'mousemove', ssb.onmousemove);
addEvent(window.document, 'mouseup', ssb.onmouseup);
addEvent(window, 'resize', ssb.refresh);
return true;
},
// create and append div finc
create_div: function(c, cont, cont_outer) {
var o = document.createElement('div');
o.cont = cont;
o.className = c;
cont_outer.appendChild(o);
return o;
},
// do clear of controls
clear: function () {
clearTimeout(ssb.to);
ssb.sc = 0;
return false;
},
// refresh scrollbar
refresh: function () {
for (var i = 0, N = ssb.N; i < N; i++) {
var o = ssb.aConts[i];
o.ssb_onscroll();
o.sb.style.width = o.st.style.width = o.su.style.width = o.su.style.height = o.sd.style.width = o.sd.style.height = o.sw + 'px';
o.sb.style.height = Math.ceil(Math.max(o.sw * 0.5, o.ratio * o.offsetHeight) + 1) + 'px';
}
},
// arrow scrolling
arrow_scroll: function () {
if (ssb.sc !== 0) {
ssb.asd.scrollTop += 6 * ssb.sc / ssb.asd.ratio;
ssb.to = setTimeout(ssb.arrow_scroll, ssb.sp);
ssb.sp = 32;
}
},
/* event binded functions: */
// scroll on mouse down
mousedown: function (o, s) {
if (ssb.sc === 0) {
ssb.asd = o.cont;
ssb.sc = s;
ssb.sp = 400;
ssb.arrow_scroll();
}
},
// on mouseMove binded event
onmousemove: function(e) {
if (! e) e = window.event;
// get vertical mouse position
ssb.mouseY = e.screenY;
if (ssb.asd.sg) ssb.asd.scrollTop = ssb.asd.sZ + (ssb.mouseY - ssb.asd.yZ) / ssb.asd.ratio;
},
// on mouseUp binded event
onmouseup: function (e) {
if (! e) e = window.event;
var tg = (e.target) ? e.target: e.srcElement;
if (ssb.asd && document.releaseCapture) ssb.asd.releaseCapture();
document.onselectstart = '';
ssb.clear();
ssb.asd.sg = false;
}
};
</script>
</head>
<body>
<div class="scroll-area-wrapper">
<div class="scroll-area" id="scroll-area-1" style="height:400px;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</div>
</div>
<script type="text/javascript">
ssb.scrollbar('scroll-area-1'); // scrollbar initialization with element ID
</script>
</body>
</html>Referensi: Script Tutorials - Custom Scrollbars (dengan beberapa perubahan dan peniadaan fitur yang tidak terlalu penting).
Membuat elemen HTML menjadi bisa digeser-geser ternyata jauh lebih mudah dibandingkan dengan apa yang Saya pikir selama ini. Fungsi di bawah ini murni menggunakan JavaScript biasa dan tidak memerlukan library apapun. Berbeda dengan plugin draggable buatan Saya yang dulu:
<div id="draggable-element" style="position:relative;">Drag me!</div>var selected = null, // Object of the element to be moved
x_pos = 0, y_pos = 0, // Stores x & y coordinates of the mouse pointer
x_elem = 0, y_elem = 0; // Stores top, left values (edge) of the element
// Will be called when user starts dragging an element
function _drag_init(elem) {
selected = elem; // Store the object of the element which needs to be moved
x_elem = x_pos - selected.offsetLeft;
y_elem = y_pos - selected.offsetTop;
}
// Will be called when user dragging an element
function _move_elem(e) {
x_pos = document.all ? window.event.clientX : e.pageX;
y_pos = document.all ? window.event.clientY : e.pageY;
if (selected !== null) {
selected.style.left = (x_pos - x_elem) + 'px';
selected.style.top = (y_pos - y_elem) + 'px';
}
}
// Destroy the object when we are done
function _destroy() {
selected = null;
}
// Bind the functions here...
document.getElementById('draggable-element').onmousedown = function() {
_drag_init(this);
return false;
};
document.onmousemove = _move_elem;
document.onmouseup = _destroy;// This function creates a new anchor element and uses location
// properties (inherent) to get the desired URL data. Some String
// operations are used (to normalize results across browsers).
// Read => http://james.padolsey.com/javascript/parsing-urls-with-the-dom/
function parseURL(url) {
var a = document.createElement('a');
a.href = url;
return {
source: url,
protocol: a.protocol.replace(':', ''),
host: a.hostname,
port: a.port,
query: a.search,
params: (function() {
var ret = {},
seg = a.search.replace(/^\?/, '').split('&'),
len = seg.length,
i = 0, s;
for (; i < len; i++) {
if (!seg[i]) {
continue;
}
s = seg[i].split('=');
ret[s[0]] = s[1];
}
return ret;
})(),
file: (a.pathname.match(/\/([^\/?#]+)$/i) || [, ''])[1],
hash: a.hash.replace('#', ''),
path: a.pathname.replace(/^([^\/])/, '/$1'),
relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [, ''])[1],
segments: a.pathname.replace(/^\//, '').split('/')
};
}Data yang diparse nantinya akan berubah menjadi objek seperti ini:
{
source: "XXX",
protocol: "XXX",
host: "XXX",
port: "XXX",
query: "XXX",
params: {
"XXX": "XXX",
"XXX": "XXX",
"XXX": "XXX",
"XXX": "XXX"
},
file: "XXX",
hash: "XXX",
path: "XXX",
relative: "XXX",
segments: ["XXX", "XXX", "XXX"]
}Dari situ kita bisa memanggil setiap bagian dari objek yang dihasilkan dengan cara yang sama seperti saat kita memanggil data pada objek. Misalnya:
var myUrl = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top');
alert(myUrl.protocol); // => akan menghasilkan `http`myUrl.file; // = 'index.html'
myUrl.hash; // = 'top'
myUrl.host; // = 'abc.com'
myUrl.query; // = '?id=255&m=hello'
myUrl.params; // = Object = { id: 255, m: hello }
myUrl.path; // = '/dir/index.html'
myUrl.segments; // = Array = ['dir', 'index.html']
myUrl.port; // = '8080'
myUrl.protocol; // = 'http'
myUrl.source; // = 'http://abc.com:8080/dir/index.html?id=255&m=hello#top'
<div class="image-box-wrapper" id="image-box-wrapper">
<!-- `.image-box` start -->
<div class="image-box">
<div class="image-container">
<img src="img/image-1.jpg" alt="" width="200" height="150">
</div>
<div class="image-details">
<div class="details">
<h4>Description Title</h4>
<p>Description text...</p>
<p><a class="more" href="#">More</a></p>
</div>
</div>
</div>
<!-- `.image-box` end -->
...
...
...
<div class="clear"></div>
</div>.image-box-wrapper {
width:642px;
margin:50px auto;
}
.image-box {
width:210px;
height:160px;
overflow:hidden;
background-color:white;
border:1px solid #ccc;
float:left;
margin:1px 1px;
font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
color:#333;
}
.image-container,
.image-details {
height:150px;
border:5px solid white;
background-color:#ffc;
-webkit-transition:margin-top .4s ease-out .4s;
-moz-transition:margin-top .4s ease-out .4s;
-ms-transition:margin-top .4s ease-out .4s;
-o-transition:margin-top .4s ease-out .4s;
transition:margin-top .4s ease-out .4s;
}
.image-container img {
width:200px;
height:150px;
padding:0 0;
margin:0 0;
border:none;
outline:none;
max-width:none;
max-height:none;
background-color:black;
}
.image-details h4,
.image-details p {
margin:0 0 .2em;
padding:0 0;
height:70px;
}
.image-details h4 {
font-size:120%;
height:auto;
}
.image-details .details {
padding:10px 12px;
overflow:hidden;
}
.image-details .more {
color:white;
text-decoration:none;
display:block;
text-align:center;
font-weight:bold;
background-color:#f9a;
height:26px;
line-height:26px;
margin:10px 0 0;
}
.image-box:hover {border-color:#bbb}
.image-box:hover .image-container {margin-top:-160px}
.image-details .more:hover {background-color:black}
Pada peramban WebKit seperti Google Chrome dan Safari, sebuah elemen input bertipe search memiliki kemampuan untuk menampilkan ikon/tombol pembersih kecil di samping input teks jika kita telah mengetikkan sesuatu di dalamnya. Tapi tidak pada peramban yang lain. Terkadang kita merasa butuh dan menyukai fitur itu, dan berharap bisa bekerja pada semua peramban.
Kita bisa menggunakan markup ekstra dan sedikit JavaScript untuk menciptakan rekayasa seperti itu. Tapi untuk memastikan tampilannya polos, gunakan elemen input bertipe text, bukan search:
<form id="search-form" action="/search" method="get">
<span class="text-input-wrapper">
<input type="text" name="q" size="18"><span title="Clear">×</span>
</span>
<input type="submit" value="Submit">
</form>.text-input-wrapper {
border:1px solid;
background-color:white;
padding:1px 6px 1px 1px;
display:inline-block;
}
.text-input-wrapper input {
border:none;
background:none;
outline:none;
padding:0 0;
margin:0 0;
font:inherit;
}
.text-input-wrapper span {
cursor:pointer;
color:blue;
font-weight:bold;
visibility:hidden;
}(function() {
var searchForm = document.getElementById('search-form'),
textInput = searchForm.q,
clearBtn = textInput.nextSibling;
textInput.onkeyup = function() {
// Show the clear button if text input value is not empty
clearBtn.style.visibility = (this.value.length) ? "visible" : "hidden";
};
// Hide the clear button on click, and reset the input value
clearBtn.onclick = function() {
this.style.visibility = "hidden";
textInput.value = "";
};
})();
Sebagai catatan, perpanjangan dl sebagai definition list pada HTML4 telah diganti menjadi description list pada HTML5 — HTML5 Doctor - The DL Element
<dl class="member-details">
<dt>Nama:</dt>
<dd>Lulu Tralala</dd>
<dt>Usia:</dt>
<dd>17</dd>
<dt>Jenis Kelamin:</dt>
<dd>Wanita</dd>
<dt>Lahir:</dt>
<dd>14 April 1992</dd>
<dt>Alamat:</dt>
<dd><em>Belum dilengkapi</em></dd>
<dt>Keterangan:</dt>
<dd>Lorem ipsum dolor sit amet...</dd>
</dl>.member-details {
margin:0 0 1.7em 0;
padding:0 0;
overflow:hidden;
}
.member-details dt,
.member-details dd {
margin:0 0 2px 136px;
padding:5px 7px;
background-color:#eee;
}
.member-details dt {
background-color:#BC4106;
float:left;
font-weight:bold;
width:120px;
clear:left;
margin-left:0;
}Fungsi ini digunakan untuk memastikan bahwa JavaScript tidak akan mengalami gangguan/error jika salah satu variabel tidak sempat ditentukan. Hal ini biasanya disebabkan karena kelalaian pengguna yang lupa menuliskan variabel yang dibutuhkan, sehingga salah satu variabel yang harus ada untuk mengaktifkan plugin yang dia pakai tidak hadir/hilang; Atau karena developer plugin tersebut telah memperbaharui plugin buatannya dengan menambahkan beberapa variabel baru, sementara para pengguna yang menggunakan plugin melalui hosting dari sumber plugin secara langsung sudah cukup banyak. Developer tidak mungkin memberitahu para pengguna untuk mengeset variabel baru agar plugin mereka bisa bekerja kembali. Itu merepotkan:
function handleVars(options) {
// Set beberapa variabel default/standar di sini:
var defaults = {
"name": "Anonymous",
"age": "Unknown",
"site": "Not available",
"email": "Not available",
"address": "Unknown"
}, i = 0;
// Cek apakah key `options[i]` tidak hadir/tidak ditentukan.
// Jika tidak hadir, gantikan dengan `defaults[i]`
for (i in defaults) {
options[i] = (typeof options[i] == "undefined") ? defaults[i] : options[i];
}
return options;
}Anda bisa menentukan/menambah/mengedit beberapa variabel standar/default pada plugin yang Anda buat di dalam objek defaults. Fungsi di atas akan menjaga para pengguna dari gangguan yang disebabkan oleh ketidakhadiran variabel yang diperlukan karena kesalahan atau pembaharuan. Fungsi di atas akan memastikan bahwa: jika variabel tidak hadir, maka variabel tersebut akan digantikan oleh variabel standar yang sudah dituliskan di dalam objek defaults.
Sebagai contoh, variabel pada plugin yang harus ada adalah name, age, site, email dan address. Sedangkan yang kita tuliskan/deklarasikan hanya tiga variabel:
var myWidgetConfig = handleVars({
"name": "Taufik Nurrohman",
"age": "21",
"site": "http://www.dte.web.id"
});Tidak masalah. Beberapa variabel yang tidak sempat dideklarasikan akan mengikuti variabel standar yang telah kita tentukan di dalam handleVars, sehingga myWidgetConfig akan menghasilkan konfigurasi seperti ini secara tidak langsung:
var myWidgetConfig = {
"name": "Taufik Nurrohman",
"age": "21",
"site": "http://www.dte.web.id",
"email": "Not available",
"address": "Unknown"
};div {
width:100px; /* dimensi lebar */
height:100px; /* dimensi tinggi */
line-height:100px; /* sama dengan tinggi elemen, posisi di tengah secara vertikal */
text-align:center; /* posisi di tengah secara horizontal */
background-color:maroon;
color:white;
}<div>ABC</div>
Membuat fitur seleksi teks otomatis pada elemen-elemen formulir seperti <textarea> atau <input> memang mudah, tetapi membuat fitur seleksi otomatis pada elemen-elemen non formulir seperti <div> dan <pre> membutuhkan sedikit langkah tambahan. Berikut ini adalah fungsinya:
function autoSelect(elem) {
var selection, range;
if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(elem);
selection.removeAllRanges();
selection.addRange(range);
} else if (document.selection) { // IE
selection = document.selection.createRange().text;
range = document.body.createTextRange();
range.moveToElementText(elem);
range.select();
}
}Posting ini juga sekaligus akan Saya jadikan sebagai dokumentasi tambahan untuk memperbaharui posting Saya yang lama mengenai cara membuat fitur seleksi teks otomatis pada tag <pre> di sini. Sejak rilis JQuery 1.9, sepertinya jQuery.browser sudah ditiadakan, jadi posting tersebut sudah tidak berlaku lagi.
Potongan kode di atas lebih baik, dan bisa diaktifkan oleh pengguna JavaScript mentah maupun pengguna JavaScript Library seperti JQuery.
Parameter elem akan kita gunakan sebagai referensi menuju elemen yang ingin kita seleksi. Misalnya, kita ingin menyeleksi semua teks di dalam elemen yang memiliki ID foo:
autoSelect(document.getElementById('foo'));Kode di atas merupakan contoh penerapan JavaScript mentah. Untuk menerapkannya pada JQuery, kita cukup mengganti pola selektornya saja:
autoSelect($('#foo')[0]);var pre = document.getElementsByTagName('pre');
for (var i = 0, len = pre.length; i < len; i++) {
pre[i].onclick = function() {
autoSelect(this);
};
}$('pre').on("click", function() {
autoSelect(this);
});Gambar: Google
 |
|
|---|---|
|
|