Mendapatkan Koordinat Posisi Pointer Mouse terhadap Area

Dapatkan koordinat posisi pointer mouse dari sebuah area #area:

$(function() {
    $("#area").mousemove(function(e) {
        var offset = $(this).offset();
        var relativeX = (e.pageX - offset.left);
        var relativeY = (e.pageY - offset.top);
        $(this).text("X: " + relativeX + ", Y: " + relativeY);
    });
});

Lihat Demo

Catatan: Setelah Saya cek ternyata hasilnya tidak terlalu akurat. Koordinat sumbu-X selalu menyertakan desimal 0.5, entah itu karena saat ini Saya sedang memakai Linux atau karena browser Firefox Saya lama, Saya masih belum tahu.

---

Sumber: CSS-Tricks - Get X, Y Coordinates of Mouse Within Box

Otomatis Menyisipkan CheckBox pada Link Dikunjungi

a:visited:after {
  content:" \2714";
  color:black !important;
}

Lihat Demo

jQuery .scrollTop() dan .scrollLeft()

.scrollTop() digunakan untuk mengambil data mengenai seberapa jauh Anda telah menggulung layar ke bawah..scrollLeft() digunakan untuk mengambil data mengenai seberapa jauh Anda telah menggulung layar ke kanan. Selain mengambil data, fungsi tersebut juga dapat digunakan untuk memposisikan halaman pada jarak gulungan tertentu.

Dasar Penggunaan

Kode di bawah ini akan mengambil data mengenai seberapa jauh elemen <div> telah tergeser ke atas oleh scroll bar dan menyimpannya ke dalam variabel scrTop:

var scrTop = $('div').scrollTop();

Kode di bawah ini akan mengambil data mengenai seberapa jauh elemen <div> telah tergeser ke samping oleh scroll bar dan menyimpannya ke dalam variabel scrLeft:

var scrLeft = $('div').scrollLeft();

Pada umumnya, metode ini digunakan untuk menjalankan perintah apabila sebuah halaman telah discroll sampai pada titik tertentu. Seperti halnya navigasi back to top (baca di sini), saat Anda telah menggulung layar sampai pada titik tertentu, maka navigasi back to top akan ditampilkan dengan efek .fadeIn():

Navigasi Back to Top

Di sini Saya akan memberikan contoh bagaimana sebuah perintah dijalankan apabila sebuah area telah discroll sampai pada titik tertentu:

HTML

<h2 id='indc' style='display:none;'>Hai! Nama Saya Taufik Nurrohman.</h2>
<div id='area'>
    <div style='width:1000px;height:1000px;'></div>
</div>

CSS

#area {
  background-color:black;
  width:300px;
  height:400px;
  overflow:auto;
}

jQuery

$(function() {
    $('#area').scroll(function() {
        // Jika posisi scroll bar vertikal #area telah lebih besar dari 200...
        if($(this).scrollTop() > 200) {
            // tampilkan elemen <h2 id='indc'>Hai! Nama Saya Taufik Nurrohman.</h2>
            // dengan efek .slideDown()
            $('h2#indc').slideDown();
        // Dan jika posisi scroll bar horizontal #area sama dengan 200...
        } else if($(this).scrollLeft() == 200) {
            // Tampilkan peringatan "Hai! Nama Saya Taufik Nurrohman!"
            alert("Hai! Nama Saya Taufik Nurrohman.");
        } else {
            // Jika yang terjadi adalah selain kondisi diatas,
            // hilangkan elemen <h2 id='indc'>Hai! Nama Saya Taufik Nurrohman.</h2>
            // dengan efek .slideUp()
            $('h2#indc').slideUp();
        }
    });
});

Lihat Demo

Menerapkan Nilai Secara Langsung

Fungsi .scrollTop() dan .scrollLeft() juga bisa diterapkan untuk memposisikan area pada jarak scroll tertentu. Kode di bawah ini akan menggulung #area pada jarak gulungan vertikal sebesar 300 pada saat halaman diakses:

$(function() {
    $('#area').scrollTop(300);
});

Lihat Demo

Posisi Elemen di Tengah dengan CSS

Ada dua metode untuk mengatur posisi elemen agar berada di tengah. Pertama, menggunakan metode margin auto untuk posisi elemen di tengah secara horizontal. Ke dua, menggunakan margin negatif dan posisi absolut untuk posisi elemen berada di tengah secara vertikal maupun horizontal.

Posisi di Tengah secara Horizontal

Menerapkan nilai margin auto pada sisi kiri dan kanan akan membuat elemen berada di tengah secara horizontal. Katakanlah bahwa margin auto merupakan margin otomatis yang bisa menyesuaikan diri. Dengan menerapkan margin auto, maka elemen seolah-olah akan menjauhkan dirinya sejauh-jauhnya dari sisi kiri dan kanan sehingga elemen di antaranya akan diam di tengah:

#page-wrap {
  width:300px;
  height:1000px;
  margin:0 auto;
}

margin:10px auto 0;

Lihat Demo

Posisi di Tengah secara Horizontal dan Vertikal

Caranya dengan menerapkan posisi absolut pada elemen. Atur nilai top dan left sebesar 50% (gambar pertama), kemudian tarik kembali elemen menuju ke tengah dengan menuliskan nilai margin-top dan margin-left sebesar setengah dari tinggi dan lebar elemen dengan nilai negatif (gambar ke dua):

#page-wrap {
  width:300px;
  height:240px;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-150px; /* (300/2) */
  margin-top:-120px;  /* (240/2) */
}

Atur nilai top dan left sebesar 50%, kemudian angkat kembali elemen dengan jarak 1/2 dari lebar dan tinggi elemen.

Lihat Demo

Khusus untuk Internet Explorer lama biasanya memerlukan penambahaan deklarasi text-align:center pada elemen induknya seperti ini:

body {
  text-align:center;
}

#page-wrap {
  text-align:left;
  width:300px;
  height:1000px;
  margin:0 auto;
}

Cara Menampilkan Jumlah Posting dan Jumlah Komentar pada Blogger

Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian letakkan kode ini di dalam formulirnya:

<script>
function showPostCount(json) {
    document.write(parseInt(json.feed.openSearch$totalResults.$t, 10));
}
</script>
<p><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showPostCount"></script> Posting &amp; <script src="/feeds/comments/summary?max-results=0&alt=json-in-script&callback=showPostCount"></script> Komentar</p>

Klik Simpan.

Lihat Demo

CSS Reset

Paling Sederhana

* {
  padding:0;
  margin:0;
  border:none;
}

Eric Meyer

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

Yahoo CSS Reset

YUI 2

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
 padding: 0;
 margin: 0;
 }
table {
 border-collapse: collapse;
 border-spacing: 0;
 }
fieldset,img { 
 border: 0;
 }
address,caption,cite,code,dfn,em,strong,th,var {
 font-weight: normal;
 font-style: normal;
 }
ol,ul {
 list-style: none;
 }
caption,th {
 text-align: left;
 }
h1,h2,h3,h4,h5,h6 {
 font-weight: normal;
 font-size: 100%;
 }
q:before,q:after {
 content:'';
 }
abbr,acronym { border: 0;
 }

YUI 3

<link rel='stylesheet' type='ext/css' href='http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css'></link>

---

Sumber: YUI, Eric Meyer

Otomatis Menambahkan Ikon pada Semua Link Eksternal dengan jQuery

Tambahkan ikon di samping semua link eksternal di dalam area <div class='post'></div> secara otomatis:

// Saring semua link eksternal.
// Jika hasilnya cocok, sisipkan gambar eksternal-links.png di sampingnya
$(function() {
    $('div.post a').filter(function() {
        return this.hostname && this.hostname !== location.hostname;
    }).after(' <img class="netral" src="external-links.png" alt="external link" />');
});

external-links.png

Lihat Demo

---

Sumber: Learning jQuery - Dynamically Add an Icon for External Links

jQuery .css()

Secara umum digunakan untuk mengambil data nilai properti CSS pada elemen, namun bisa juga digunakan untuk mengeset properti CSS pada elemen seperti halnya menggunakan CSS.

Mengambil Data CSS dari Elemen

Katakanlah Saya memiliki elemen dengan struktur seperti ini:

HTML

<div id='box'></div>

CSS

#box {
  width:300px;
  height:250px;
  background-color:#9D0A0A;
  border:5px solid #47AD47;
  font:normal bold 16px/1.4 Arial,Sans-Serif;
  color:white;
  padding:10px;
}

jQuery

Ambil data lebar, tinggi dan warna latar belakang dari elemen #box, kemudian tampilkan data tersebut di dalam #box sebagai teks:

$(function() {
    var boxWidth  = $('#box').css('width'), // Mengambil data lebar #box
        boxHeight = $('#box').css('height'), // Mengambil data tinggi #box
        boxBg     = $('#box').css('background-color'); // Mengambil data warna background (background-color) #box

    // Saat #box disentuh...
    $('#box').hover(function() {
        // Tampilkan data-data yang telah diambil dalam bentuk teks
        $(this).text('Lebar: ' + boxWidth + ', tinggi: ' + boxHeight + ', background: ' + boxBg);

    // Saat pointer keluar dari #box...
    }, function() {
        // Hapus semua teks di dalamnya
        $(this).text('');
    });
});

jQuery: Properti CSS shorthand (margin, background, border dan yang lainnya) tidak didukung pada fungsi ini. Sebagai contoh, jika Anda ingin mengambil margin yang diberikan, gunakanlah $(elem).css('marginTop') dan $(elem).css('marginRight'), dan seterusnya… untuk mendapatkan semua data margin (harus dituliskan satu persatu)

Lihat Demo

Anda juga bisa menerapkan .css() sebagai pendeklarasi properti CSS secara langsung. Sintaks properti tunggal bisa dituliskan seperti ini:

// $(elemen).css('property','value');
$('div').css('background-color', 'red');

Untuk properti lebih dari satu bisa dituliskan seperti ini:

// $(elemen).css({property:value,property:value});
$('div').css({
    width: 200,
    height: 300,
    backgroundColor: 'red',
    border: '2px solid #333'
});

Menerapkan Fungsi .css() secara Langsung

.css() bisa digunakan untuk mengeset tampilan elemen secara langsung seperti contoh ini:

HTML

<div id='box'></div>

jQuery

Set lebar #box sebesar 200 piksel, tinggi 300 piksel, warna latar belakang merah dan border setebal 2 piksel bertipe solid dengan warna hitam:

$(function() {
    $('#box').css({
        width: 200,
        height: 300,
        'background-color': 'red',
        border: '2px solid black'
    })
});

Properti bisa diapit menggunakan tanda petik, bisa juga tidak, namun untuk pendeklarasian properti tunggal harus menggunakan tanda petik. Nilai/value bertipe numerik tidak perlu diapit dengan tanda petik meskipun sebenarnya bisa. Terutama jika Anda menyisipkan satuan di dalamnya seperti px, % dan lain-lain (Nilai berupa string seperti kode heksa warna, kata kunci warna dan lainnya harus menggunakan tanda petik).

jQuery	Kebenaran	Sebagai CSS
$('div').css({background:'black'}); $('div').css({'background':'black'}); $('div').css({background:'#000'}); $('div').css({backgroundColor:'#000'}); $('div').css({'backgroundColor':'#000'}); $('div').css({'background-color':'#000'});	Benar	div {background-color:#000;}
$('div').css({background:black}); $('div').css({background:#000}); $('div').css({backgroundColor:#000}); $('div').css({background-color:'#000'});	Salah
$('div').css({width:200}); $('div').css({width:'200px'}); $('div').css('width', 200); $('div').css('width', '200'); $('div').css('width', '200px');	Benar	div {width:200px;}
$('div').css({width:200px}); $('div').css(width, 200); $('div').css(width, '200'); $('div').css('width', 200px);	Salah

---

Yang Tidak Bisa Dilakukan CSS Namun Bisa Dilakukan .css()

CSS tidak bisa menerima nilai berupa variabel dari sebuah elemen, ataupun menyalin data dari elemen lain kemudian menyampaikannya sebagai CSS untuk menciptakan penampilan yang sama persis dengan duplikatnya (duplikasi CSS?):

HTML

<div id='box'></div>
<select id='css'>
    <option>red</option>
    <option>green</option>
    <option>blue</option>
    <option>yellow</option>
</select>

CSS

#box {
  width:200px;
  height:150px;
  background-color:red;
}

jQuery

Ubah warna latar belakang elemen #box berdasarkan selectbox:

$(function() {
    $('select#css').change(function() {
        var bgColor = $(this).val();
        $('#box').css('background-color', bgColor);
    });
});

Lihat Demo

UPDATE :: jQuery Toolpik Revision 1

I decided to update this Toolpik because I realize that there are some fatal mistakes about HTML manipulation when mouseout and things that I think still can be shortened. In addition, a problem which in my opinion (and all of us) the most annoying is that Toolpik not have the ability to keep itself stay on the visible area:

ARRGGHHH!!!

And moreover, the acronym tag is already deprecated and was replaced by abbr (Read: Avoid the Deprecated <acronym> Tag in HTML 5). But, if you want to continue include Toolpik for the acronym tag, just add it beside the abbr with separate comma:

var ttTarget = "abbr, acronym";

I don't know who is the author on this discussion, but gratitude to him for all of his knowledge. This is how I keep Toolpik stay on the visible area:

// Get the toolpik width and height
var toolpikWidth  = $("#toolpik").outerWidth(),
    toolpikHeight = $("#toolpik").outerHeight(),

    // Get the window width and height
    winWidth      = $(window).width(),
    winHeight     = $(window).height(),

    top           = e.clientY - toolpikHeight/2, // Set top and bottom position of the toolpik
    left          = e.clientX - toolpikWidth/2;  // Set the left and right position of the toolpik

if (top + toolpikHeight > winHeight) {
    // Flip the toolpik position to the top of the object
    // so it won't go out of the current window height
    // and show up in the correct place
    top = winHeight - toolpikHeight - 50;
} else if (top <= 0) {
    top = 10;
} else {
    top = top;
}

if (left + toolpikWidth > winWidth) {
    // Shift the toolpik position to the left of the object
    // so it won't go out of width of current window width
    // and show up in the correct place
    left = winWidth - toolpikWidth - 50;
} else if (left <= 0) {
    left = 10;
} else {
    left = left;
}

Complete Code

$(function() {

    $(ttTarget).css('cursor', 'help').hover(function(e) {

        $(this).append('<div id="toolpik"><div id="nurrohman"></div><div style="clear:both;"></div><img class="absol" src="' + ttImg + '" alt="" /></div>');
        $('#nurrohman', '#toolpik').html($(this).attr('title'));
        $(this).removeAttr('title');

        // Get the toolpik width and height
        var toolpikWidth  = $("#toolpik").outerWidth(),
            toolpikHeight = $("#toolpik").outerHeight(),

            // Get the window width and height
            winWidth      = $(window).width(),
            winHeight     = $(window).height(),

            top           = e.clientY - toolpikHeight/2, // Set top and bottom position of the toolpik
            left          = e.clientX - toolpikWidth/2;  // Set the left and right position of the toolpik

        if (top + toolpikHeight > winHeight) {
            // Flip the toolpik position to the top of the object
            // so it won't go out of the current window height
            // and show up in the correct place
            top = winHeight - toolpikHeight - 50;
        } else if (top <= 0) {
            top = 10;
        } else {
            top = top;
        }

        if (left + toolpikWidth > winWidth) {
            // Shift the toolpik position to the left of the object
            // so it won't go out of width of current window width
            // and show up in the correct place 
            left = winWidth - toolpikWidth - 50;
        } else if (left <= 0) {
            left = 10;
        } else {
            left = left;
        }

        // Last: Show and set the position of the toolpik with animation
        $('#toolpik')
            .delay(600)
            .fadeIn(1000, movement);

            function movement() {
                $(this)
                .delay(600)
                .animate({
                    top:top-70,
                    left:left
                }, {
                    duration:2000,
                    easing:"easeOutBack"
                })
                .animate({top:top}, 400);
            };

    }, function() {
        // Put back the title attribute's value
        $(this).attr('title', $('#nurrohman', '#toolpik').html());
        // Remove the appended toolpik
        $('#nurrohman').parent().remove();
    });
 
});

View Demo Download Files

Usage

Install the toolpik-styler.css, jQuery library and jQuery Easing 1.3, then add the Toolpik scripts above the </head>:

<link rel='stylesheet' href='css/toolpik-styler.css'></link>
<script src='js/jquery-1.7.1.min.js'></script>
<script src='js/jquery-easing-1.3.pack.js'></script>
<script src='js/toolpik.js'></script>
<script>
    var ttImg    = "ikon1.png"; // REPLACE THIS ICON WITH YOUR OWN
    var ttTarget = "abbr, acronym";
</script>

Activation

Toolpik will find the value of title attribute and convert it to text or HTML element inside Toolpik. Simply wrap the text that you want with <abbr> tag and add the title attribute with the specified value and it will be a description in Toolpik:

Lorem ipsum <abbr title="I'm a Toolpik">I have a Toolpik</abbr>. Dolor sit amet-amet jabang bayi oek-oek.

However, if you are not familiar using <abbr> as a marker, you can use another tags such as <a>. To enable <a> as Toolpik, replace the variable var ttTarget = "abbr, acronym"; to var ttTarget = "a[title]";

You can also insert HTML code into the title attribute to get various content. For safety reasons, just make sure that if you use double quotation symbol on the title attribute, you must use single quotes in tag attributes inside. And for more secure, parse all the code < with < and > with >

Lorem ipsum <abbr title="<h2 class='single-quotes'>I'm a Header</h2>I'm a Toolpik">I have a Toolpik</abbr>. Dolor sit amet-amet jabang bayi oek-oek.

Or...

Lorem ipsum <abbr title="&lt;h2 class='single-quotes'&gt;I'm a Header&lt;/h2&gt;I'm a Toolpik">I have a Toolpik</abbr>. Dolor sit amet-amet jabang bayi oek-oek.

CSS3 Tombol 3 Dimensi

HTML

<a class='button3' href='#'>Tombol 3 Dimensi</a>

CSS

.button3 {
  cursor:pointer;
  margin:10px 0px;
  background:#479ECD;
  padding:10px 15px;
  margin:4px 2px;
  font:bold 16px Arial,Sans-Serif;
  color:#fff;
  text-decoration:none;
  outline:none;
  text-shadow:0px -1px 0px #297EB9;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
}

.button3:hover {
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
}

.button3:active {
  position:relative;
  top:2px;
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #297EB9,
    0px 3px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #297EB9,
    0px 3px 3px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #297EB9,
    0px 3px 3px rgba(0,0,0,0.4);
}

Demo

Tombol 3 Dimensi Tombol 3 Dimensi Tombol 3 Dimensi

---

Disederhanakan dari: http://css3exp.com/button

jQuery Pull Out Menu

Mungkin Anda pernah melihat beberapa menu navigasi yang biasanya terletak di sebelah kanan bawah artikel. Saat menu tersebut diklik, sebaris label/tautan akan muncul ke atas dan bukannya ke bawah seperti menu-menu pada umumnya. Saya membuat konsep sederhananya di sini. Karena konsepnya sangat mudah, yaitu hanya berada di sekitar fungsi .slideUp(), .slideToggle(), .removeClass() dan .toggleClass(), kali ini Saya cukup menjelaskan cara kerjanya pada script secara langsung:

Lihat Demo

HTML

<nav id='popnav'>Label
    <ul class='fallback'>
        <li><a href='#'>JavaScript</a></li>
        <li><a href='#'>jQuery</a></li>
        <li><a href='#'>CSS</a></li>
        <li><a href='#'>HTML</a></li>
        <li><a href='#'>PHP</a></li>
    </ul>
</nav>

CSS

#popnav {
  width:60px;
  margin:10px 0;
  background-color:#362C23;
  padding:7px 15px;
  font:normal normal 11px Arial,Sans-Serif;
  text-transform:uppercase;
  color:#A1917B;
  position:relative;
  cursor:pointer;
}

#popnav:after {
  content:"";
  width:0;
  height:0;
  border:5px solid transparent;
  border-bottom-color:white;
  position:absolute;
  top:6px;
  right:12px;
}

/* Kelas 'down' akan diciptakan oleh jQuery */
#popnav.down:after {
  border:5px solid transparent;
  border-top-color:white;
  top:13px;
}

#popnav ul {
  border-top:2px solid #2D6D67;
  width:170px;
  background-color:#201A16;
  position:absolute;
  bottom:100%;
  left:0;
  z-index:999;
  margin:0 0;
  padding:0 0;
  display:none;
}

#popnav li {
  list-style:none;
  margin:0 0;
  padding:0 0;
}

#popnav li a {
  padding:10px 15px;
  display:block;
  text-decoration:none;
  color:#ccc;
  font-weight:bold;
  font-size:11px;
}

#popnav li a:hover {
  background-color:#439A91;
  color:white;
}

/* Fallback jika JavaScript dinonaktifkan */
#popnav:hover ul.fallback {display:block}

jQuery

$(function() {
    // Hilangkan class 'fallback' pada elemen <ul>
    // untuk menonaktifkan deklarasi fallback pada selektor CSS '#popnav:hover ul.fallback'
    // Proses pembukaan dan penutupan menu akan digantikan oleh jQuery
    $('#popnav ul').removeClass('fallback');

    // Saat #popnav diklik...
    $('#popnav').click(function(e) {

        // Tambahkan/hilangkan kelas `down` (toggle). Ini digunakan untuk
        // mengubah simbol panah atas menjadi panah bawah atau sebaliknya
        $(this).toggleClass('down');
        // Tampilkan/sembunyikan elemen <ul> yang berada di dalamnya dengan efek .slideToggle()
        $('ul', this).slideToggle();

        // Cegah `event bubbling`
        // Secara normal, saat kita mengeklik sembarang pada menu,
        // itu akan membuat peramban kesulitan untuk menentukan...
        // ... apakah kita sedang mengeklik menu ataukah sedang mengeklik dokumen
        // Dalam kasus ini, `event.stopPropagation()` akan memberitahu peramban...
        // ... bahwa yang kita klik adalah menu, bukan dokumen secara keseluruhan
        e.stopPropagation();
    });

    // Saat dokumen diklik (katakanlah: saat sesuatu selain #popnav diklik) ...
    $(document).click(function() {

        // Hilangkan menu yang tampak dengan efek `.slideUp()`
        $('#popnav ul:visible').slideUp();

        // Hilangkan juga kelas `down` pada #popnav untuk mengembalikan panah bawah menuju ke atas
        $('#popnav').removeClass('down');
    });
});

Clear Text Field on Focus

#1

Hilangkan/bersihkan teks saat elemen input diklik:

<input type="text" value="Telusuri..." onfocus="this.value='';" />

#2

Otomatis membersihkan teks bertuliskan Telusuri... saat elemen input diklik, namun jangan hilangkan teks secara otomatis saat nilainya bukan berupa Telusuri...:

<input type="text" value="Telusuri..." onfocus="if(this.value == 'Telusuri...') {this.value = '';}" />

#3

Saat ini, otomatisasi pembersihan nilai dalam field/elemen input teks jauh lebih mudah karena sudah didukung oleh atribut placeholder pada HTML5:

<input type="text" placeholder="Telusuri..." />

CSS3 Transformasi skew()

skew() digunakan untuk menciptakan efek condong pada elemen.

div {
  -webkit-transform:skew(35deg, 35deg); /* Safari & Chrome */
  -moz-transform:skew(35deg, 35deg);    /* Firefox         */
  -ms-transform:skew(35deg, 35deg);     /* IE              */
  -o-transform:skew(35deg, 35deg);      /* Opera           */
  transform:skew(35deg, 35deg);         /* W3C             */
}

Poin pertama adalah kecondongan terhadap sumbu-X, poin ke dua adalah kecondongan terhadap sumbu-Y.
skew() juga dapat dibagi menjadi dua:

• skewX(Ndeg)

• skewY(Ndeg)

div {
  -webkit-transform:skewX(35deg);
  -moz-transform:skewX(35deg);
  -ms-transform:skewX(35deg);
  -o-transform:skewX(35deg);
  transform:skewX(35deg);
  -webkit-transform:skewY(35deg);
  -moz-transform:skewY(35deg);
  -ms-transform:skewY(35deg);
  -o-transform:skewY(35deg);
  transform:skewY(35deg);
}

transform:skewX(35deg);transform:skewY(35deg);

Secara default, menuliskan nilai skew() dengan derajat tunggal akan memiliki arti yang sama dengan skewX:

transform:skewX(35deg) = transform:skew(35deg)

-webkit-transform:skew(15deg, 15deg);
-moz-transform:skew(15deg, 15deg);
-ms-transform:skew(15deg, 15deg);
-o-transform:skew(15deg, 15deg);
transform:skew(15deg, 15deg);

Pure CSS3 Ice Cream

Demo

You have to eat this ice cream before it gets "HOT"!

CSS

#wrap22 {
  width:200px;
  margin:0px auto 0px;
  position:relative;
  text-align:center;
  -webkit-transform:rotate(-30deg);
  -moz-transform:rotate(-30deg);
  -ms-transform:rotate(-30deg);
  -o-transform:rotate(-30deg);
  transform:rotate(-30deg);
}

#wrap22 .ice {
  height:300px;
  background-color:#FAA0AF;
  background-image:-webkit-radial-gradient(top, cover, #FAA0AF, #FFCBD3);
  background-image:-moz-radial-gradient(top, cover, #FAA0AF, #FFCBD3);
  background-image:-ms-radial-gradient(top, cover, #FAA0AF, #FFCBD3);
  background-image:-o-radial-gradient(top, cover, #FAA0AF, #FFCBD3);
  background-image:radial-gradient(top, cover, #FAA0AF, #FFCBD3);
  -webkit-box-shadow:inset 0px 0px 10px #fff, 0px 4px 10px rgba(0,0,0,0.2);
 -moz-box-shadow:inset 0px 0px 10px #fff, 0px 4px 10px rgba(0,0,0,0.2);
  box-shadow:inset 0px 0px 10px #fff, 0px 4px 10px rgba(0,0,0,0.2);
  -webkit-border-radius:100px 100px 10px 10px;
  -moz-border-radius:100px 100px 10px 10px;
  border-radius:100px 100px 10px 10px;
  position:relative;
}

#wrap22 .ice:after {
  content:"";
  position:absolute;
  bottom:0px;
  left:0px;
  width:100%;
  height:30px;
  background-color:#FAA0AF;
  background-image:-webkit-linear-gradient(top, #FF8B9D, #FAA0AF);
  background-image:-moz-linear-gradient(top, #FF8B9D, #FAA0AF);
  background-image:-ms-linear-gradient(top, #FF8B9D, #FAA0AF);
  background-image:-o-linear-gradient(top, #FF8B9D, #FAA0AF);
  background-image:linear-gradient(top, #FF8B9D, #FAA0AF);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  -webkit-box-shadow:inset 0px 0px 10px #fff, 0px -1px 70px #fff;
  -moz-box-shadow:inset 0px 0px 10px #fff, 0px -1px 70px #fff;
  box-shadow:inset 0px 0px 10px #fff, 0px -1px 70px #fff;
}

#wrap22 .stick {
  width:30px;
  height:130px;
  background-color:#FFEAC4;
  background-image:-webkit-linear-gradient(-45deg, #FFEAC4, #FFF5DB);
  background-image:-moz-linear-gradient(-45deg, #FFEAC4, #FFF5DB);
  background-image:-ms-linear-gradient(-45deg, #FFEAC4, #FFF5DB);
  background-image:-o-linear-gradient(-45deg, #FFEAC4, #FFF5DB);
  background-image:linear-gradient(-45deg, #FFEAC4, #FFF5DB);
  -webkit-box-shadow:inset 0px -1px 0px #fff, 0px 3px 0px #EDCE95, 0px 7px 10px rgba(0,0,0,0.2);
  -moz-box-shadow:inset 0px -1px 0px #fff, 0px 3px 0px #EDCE95, 0px 7px 10px rgba(0,0,0,0.2);
  box-shadow:inset 0px -1px 0px #fff, 0px 3px 0px #EDCE95, 0px 7px 10px rgba(0,0,0,0.2);
  margin:-15px auto 0px;
  -webkit-border-radius:3px 3px 15px 15px;
  -moz-border-radius:3px 3px 15px 15px;
  border-radius:3px 3px 15px 15px;
  position:relative;
  z-index:10;
}

HTML

<div id='wrap22'>
    <div class='ice'></div>
    <div class='stick'></div>
</div>

CSS3 Gradient Warning Line

CSS

.alert {
  background-color:yellow;
  background-image:-webkit-repeating-linear-gradient(45deg, yellow 15px, yellow 35px, black 30px, black 60px);
  background-image:-moz-repeating-linear-gradient(45deg, yellow 15px, yellow 35px, black 30px, black 60px);
  background-image:-ms-repeating-linear-gradient(45deg, yellow 15px, yellow 35px, black 30px, black 60px);
  background-image:-o-repeating-linear-gradient(45deg, yellow 15px, yellow 35px, black 30px, black 60px);
  background-image:repeating-linear-gradient(45deg, yellow 15px, yellow 35px, black 30px, black 60px);
}

HTML

<div class='alert'>
    ....
</div>

Demo

Cari/Mengganti Teks Tanpa Merusak Elemen DOM

Plugin

jQuery.fn.textWalk = function(fn) {
    this.contents().each(jwalk);
    function jwalk() {
        var nn = this.nodeName.toLowerCase();
        if(nn === '#text') {
            fn.call(this);
        } else if(this.nodeType === 1 && this.childNodes && this.childNodes[0] && nn !== 'script' && nn !== 'textarea') {
            $(this).contents().each(jwalk);
        }
    }
    return this;
};

Penggunaan

Temukan semua teks bertuliskan "John" pada elemen dengan id="test", kemudian ganti semuanya dengan "Peter":

$('#test').textWalk(function() {
    this.data = this.data.replace('John', 'Peter');
});

#text (???)

Lihat Demo

---

Sumber: Wowmotty - jQuery find/replace text without destroying DOM elements

CSS3 Lined Paper

Kertas Kuning

.paper1 {
  width:60%;
  padding:0px 20px;
  margin:10px auto 10px;
  font:normal 11px Georgia,Serif;
  line-height:30px !important;
  background-color:#F2EA7E;
  background-image:-webkit-repeating-linear-gradient(top, #F2EA7E 30px, #F2EA7E 30px, #F6D5AD 31px, #F2EA7E 31px, #F2EA7E 60px);
  background-image:-moz-repeating-linear-gradient(top, #F2EA7E 30px, #F2EA7E 30px, #F6D5AD 31px, #F2EA7E 31px, #F2EA7E 60px);
  background-image:-ms-repeating-linear-gradient(top, #F2EA7E 30px, #F2EA7E 30px, #F6D5AD 31px, #F2EA7E 31px, #F2EA7E 60px);
  background-image:-o-repeating-linear-gradient(top, #F2EA7E 30px, #F2EA7E 30px, #F6D5AD 31px, #F2EA7E 31px, #F2EA7E 60px);
  background-image:repeating-linear-gradient(top, #F2EA7E 30px, #F2EA7E 30px, #F6D5AD 31px, #F2EA7E 31px, #F2EA7E 60px);
  border-top:40px solid #F2EA7E;
  border-bottom:40px solid #F2EA7E;
  -webkit-box-shadow:inset 0px -1px 0px #F6D5AD, 0px 1px 4px rgba(0,0,0,0.3);
  -moz-box-shadow:inset 0px -1px 0px #F6D5AD, 0px 1px 4px rgba(0,0,0,0.3);
  box-shadow:inset 0px -1px 0px #F6D5AD, 0px 1px 4px rgba(0,0,0,0.3);
  color:#666;
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  border-radius:7px;
}

Kertas Putih

.paper2 {
  width:60%;
  padding:0px 20px;
  margin:10px auto 10px;
  font:normal 12px Georgia,Serif;
  line-height:30px !important;
  background-color:#E9E7ED;
  background-image:-webkit-repeating-linear-gradient(top, #E9E7ED 30px, #E9E7ED 30px, #B0BECF 31px, #E9E7ED 31px, #E9E7ED 60px);
  background-image:-moz-repeating-linear-gradient(top, #E9E7ED 30px, #E9E7ED 30px, #B0BECF 31px, #E9E7ED 31px, #E9E7ED 60px);
  background-image:-ms-repeating-linear-gradient(top, #E9E7ED 30px, #E9E7ED 30px, #B0BECF 31px, #E9E7ED 31px, #E9E7ED 60px);
  background-image:-o-repeating-linear-gradient(top, #E9E7ED 30px, #E9E7ED 30px, #B0BECF 31px, #E9E7ED 31px, #E9E7ED 60px);
  background-image:repeating-linear-gradient(top, #E9E7ED 30px, #E9E7ED 30px, #B0BECF 31px, #E9E7ED 31px, #E9E7ED 60px);
  border-top:40px solid #E9E7ED;
  border-bottom:40px solid #E9E7ED;
  -webkit-box-shadow:inset 0px -1px 0px #B0BECF, 0px 1px 4px rgba(0,0,0,0.3);
  -moz-box-shadow:inset 0px -1px 0px #B0BECF, 0px 1px 4px rgba(0,0,0,0.3);
  box-shadow:inset 0px -1px 0px #B0BECF, 0px 1px 4px rgba(0,0,0,0.3);
  color:#222;
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  border-radius:7px;
}

Lihat Demo

Catatan Tambahan

Selalu pastikan bahwa setiap elemen di dalamnya memiliki tinggi, padding dan margin pada kelipatan 30 piksel. Ukuran huruf tidak terlalu berpengaruh karena line-height jauh lebih berperan terhadap posisi dan jarak tiap baris elemen. Sebagai contoh, jika Anda menerapkan elemen heading level 2, maka setidaknya aturlah ukurannya agar tetap berada pada kelipatan 30 piksel sesuai dengan tinggi masing-masing garis untuk memastikan bahwa semuanya tampak teratur:

.paper1 h2 {
  font-size:20px;
  line-height:30px !important;
  margin:0px 0px 30px;
  padding:0px 0px;
}

CSS Drop Down Menu Sederhana

HTML

<nav class='drop-menu'>
Drop Down Menu
    <ul>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Portfolio</a></li>
        <li><a href='#'>Contact</a></li>
        <li><a href='#'>Archive</a></li>
        <li><a href='#'>Search</a></li>
        <li><a href='#'>Company</a></li>
    </ul>
</nav>

CSS

nav.drop-menu {
  position:relative;
  padding:10px 15px;
  background:#6D92A5;
  width:200px;
  font:bold 12px Arial,Sans-Serif;
  text-transform:uppercase;
  color:#eee;
}

nav.drop-menu:after {
  content:"";
  width:0px;
  height:0px;
  border:5px solid transparent;
  border-top-color:#fff;
  position:absolute;
  top:16px;
  right:14px;
}

nav.drop-menu ul {
  position:absolute;
  top:100%;
  left:0px;
  z-index:99;
  text-transform:none;
  margin:0px;
  padding:0px;
  background:#6D92A5;
  width:100%;
  font-weight:normal;
  display:none;
}

nav.drop-menu li {
  list-style:none;
  margin:0px;
  padding:0px;
}

nav.drop-menu li a {
  display:block;
  margin:0px;
  padding:7px 15px;
  text-decoration:none;
  color:#ccc;
}

nav.drop-menu li a:hover {
  background:#74838F;
  padding-left:19px;
}

nav.drop-menu:hover ul {
  display:block;
}

Lihat Demo

Lainnya

• Unduh Sampel CSS Drop Down Menu Lengkap

jQuery Event .toggle()

Selain sebagai efek, fungsi .toggle() juga termasuk dalam event jQuery. Sebelum ini (baca di sini), penerapan efek .toggle() dapat dituliskan seperti ini:

$('button').click(function() {
    $('#elemen').toggle(500);
});

Lihat Demo

Namun, dalam event kita juga bisa menuliskan fungsi .toggle() seperti ini:

$('#elemen').toggle(function() {
    $(this).css('background-color', 'red');
}, function() {
    $(this).css('background-color', 'blue');
});

Lihat Demo

Dan tidak hanya sebatas dua aksi saja, .toggle() juga bisa digunakan untuk menangani lebih dari itu. Pada intinya, setiap aksi yang kita tuliskan akan dijalankan setelah aksi sebelumnya telah dijalankan:

$('#elemen').toggle(function() {
    $(this).css('background-color', 'red').animate({width:"120"}, 1000);
}, function() {
    $(this).css('background-color', 'blue');
}, function() {
    $(this).css('background-color', 'yellow');
}, function() {
    $(this).css('background-color', 'green').animate({width:"800"}, 1000);
}, function() {
    $(this).css('background-color', 'black');
});

Lihat Demo

Smooth Scroll Back To Top dengan jQuery

Ternyata ada cara yang jauh lebih praktis dibandingkan dengan pembuatan smooth scroll back to top dengan jQuery yang pernah Saya tuliskan di sini:

<a onclick="jQuery('html, body').animate({scrollTop:0}, 'slow');" href="javascript:void(0);">Back to top!</a>

Atau untuk versi tidak langsungnya kira-kira seperti ini:

jQuery

$(function() {
    $('#top').click(function() {
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });
});

HTML

<a id="top" href="#">Back to top!</a>

Lihat Demo

---

Sumber: http://snipplr.com/view/57612/slide-to-top-of-page-jquery

Auto Updated Copyright Year

Tampilkan tahun awal website dibuat sampai saat ini secara otomatis:

Copyright &copy; 2012 - <span id='current-year'></span>
     
<script>
    function getCurrentYear() {
        var d = new Date();
        return d.getFullYear();
    }
    el = document.getElementById('current-year');
    el.innerHTML = getCurrentYear();
</script>

---

Sumber: http://snipplr.com/view/46444/

Tambahkan Kelas 'active'/'current' pada Menu Berdasarkan URL pada Address Bar

Tambahkan kelas active pada menu yang sedang aktif (menu dengan nilai href yang sama dengan URL pada Address bar):

jQuery

$(function() {
    var path = window.location.href; // Mengambil data URL pada Address bar
    $('nav a').each(function() {
        // Jika URL pada menu ini sama persis dengan path...
        if (this.href === path) {
            // Tambahkan kelas "active" pada menu ini
            $(this).addClass('active');
        }
    });
});

HTML

<nav>
    <ul>
        <li><a href='http://www.aa.com'>Beranda</a></li>
        <li><a href='http://www.bb.com'>Arsip</a></li>
        <li><a href='http://www.cc.com'>Tentang</a></li>
        <li><a href='http://sekaratmutlak.blogspot.com/2012/01/active-menu.html'>Komentar</a></li>
        <li><a href='http://www.ee.com'>Kontak</a></li>
    </ul>
</nav>

CSS

nav {
  font:normal 14px Impact,Arial,Sans-Serif;
  text-transform:uppercase;
}

nav ul {
  list-style:none;
  border:1px solid #1D4ABE;
  margin:0px 0px;
  padding:0px 0px;
  background:#222;
  -webkit-box-shadow:0px 1px 2px #000;
  -moz-box-shadow:0px 1px 2px #000;
  box-shadow:0px 1px 2px #000;
  overflow:auto;
}

nav li {
  display:inline;
  float:left;
}

nav li a {
  display:block;
  text-decoration:none;
  padding:10px 15px;
  background:#222;
  color:#ccc;
  text-shadow:0px 1px 1px rgba(0,0,0,0.8);
}

nav li a:hover  {background:#333;text-decoration:none;}
nav li a.active {background:#1D4ABE;color:#fff;}

Lihat Demo

Pembaharuan: Versi JavaScript murni

JavaScript

function currentNav(navId) {
    var current = window.location.href.split('#')[0],
        nav = document.getElementById(navId),
        navItem = nav.getElementsByTagName('a');
    for(var i = 0; i < navItem.length; i++) {
        // Jika nilai atribut href pada salah satu array tautan = URL address bar...
        if(navItem[i].href == current || navItem[i].href == decodeURIComponent(current)) {
            // Tambahkan kelas 'active' pada tautan tersebut
            navItem[i].className = "active";
        }
    }
} currentNav('navigation'); // Terapkan fungsi 'currentNav()' pada navigasi dengan id="navigation"

HTML

<nav id="navigation">
   ...
   ...
</nav>

Detail CSS

#navigation a.active {
  color:red;
  font-weight:bold;
}

---

Sumber: Stackoverflow - A Better Idea to Add Active Class to Menu Item

CSS3 Link Nudging

CSS-TRICKS.com

CSS

ul.nudging {
  margin:10px 10px;
  padding:0px 0px;
  font:normal 16px Sans-Serif;
}

ul.nudging li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}

ul.nudging li a {
  text-decoration:none;
  display:block;
  overflow:hidden;
  padding:5px 10px;
  color:white;
  background-image:-webkit-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
  background-image:-moz-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
  background-image:-ms-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
  background-image:-o-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
  background-image:linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
  -webkit-background-size:200% 100%;
  -moz-background-size:200% 100%;
  background-size:200% 100%;
  -webkit-transition:all 0.26s ease-out;
  -moz-transition:all 0.26s ease-out;
  -ms-transition:all 0.26s ease-out;
  -o-transition:all 0.26s ease-out;
  transition:all 0.26s ease-out;
}

.nudging li a:hover {
  background-position:100% 100%;
  padding-left:15px;
}

HTML

<ul class="nudging">
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Ipsum</a></li>
    <li><a href="#">Dolor</a></li>
    <li><a href="#">Sit Amet-Amet</a></li>
    <li><a href="#">Jabang Bayi</a></li>
    <li><a href="#">Oek-Oek</a></li>
</ul>

Lihat Demo

CSS Text-Decoration

text-decoration:	Keterangan	Hasil Tampilan
underline	Menciptakan efek garis bawah pada teks.	Taufik Nurrohman
overline	Menciptakan efek garis di atas teks.	Taufik Nurrohman
line-through	Menciptakan efek coret pada teks.	Taufik Nurrohman
blink	Menciptakan efek berkedip pada teks.	Taufik Nurrohman
none	Menetralkan/menghilangkan dekorasi yang telah ada.	Taufik Nurrohman

Contoh Penerapan

a {
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}

Auto Highlight Teks di dalam Tag PRE dengan jQuery

Posting ini sudah kadaluarsa. Mengapa?

Sebenarnya ini tidak mutlak pada elemen <pre>. Hanya karena selektornya saja yang berupa $('pre') jadi fungsi seleksi otomatis ini diberlakukan untuk elemen <pre>:

$(function() {
    $('pre').click(function() {
        var refNode = $(this)[0];
        if($.browser.msie) {
            var range = document.body.createTextRange();
            range.moveToElementText(refNode);
            range.select();
        } else if($.browser.mozilla || $.browser.opera) {
            var selection = window.getSelection();
            var range = document.createRange();
            range.selectNodeContents(refNode);
            selection.removeAllRanges();
            selection.addRange(range);
        } else if($.browser.safari) {
            var selection = window.getSelection();
            selection.setBaseAndExtent(refNode, 0, refNode, 1);
        }
    });
});

---

Sumber: Magp.ie

Satu Halaman Website Statis dengan Efek Sliding

Setelah sukses mengeset ukuran elemen berdasarkan ukuran layar, sekarang adalah saatnya untuk menciptakan efek smooth scrolling pada halaman. Saya menggunakan plugin jQuery scrollTo untuk mempermudah pengerjaan. Ya, itu benar, karena cukup dengan plugin tersebut, menciptakan efek smooth scrolling dapat dilakukan hanya dengan menuliskannya seperti ini:

$('a').click(function() {
    $('html, body').scrollTo($(this).attr('href'), 1000);
    return false;
});

Lihat Demo Download

HTML

Buat sebuah berkas HTML dimana jQuery, jQuery scrollTo dan CSS eksternal telah disertakan di dalamnya:

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8'>
        <title>Demo</title>
        <link rel='stylesheet' href='style.css'>
        <script src='jquery-1.7.1.min.js'></script>
        <script src='scrollTo.js'></script>
        <script>
            $(function() {
                // Pekerjaan kita di sini...
            });
        </script>
    </head>
    <body>

        <!-- halaman -->
        <div id='wrap'>
            <div class='box' id='home'>
                <h3>Home</h3>
            </div>
            <div class='box' id='contact'>
                <h3>Contact</h3>
            </div>
            <div class='box' id='fun'>
                <h3>For Fun</h3>
            </div>
            <div class='box' id='about'>
                <h3>About</h3>
            </div>
            <div class='box' id='website'>
                <h3>Website</h3>
            </div>
            <div class='box' id='skill'>
                <h3>Skills</h3>
            </div>
        </div>

        <!-- navigasi -->
        <ul id='nav'>
            <li><a class='active' href='#home'>Home</a></li>
            <li><a href='#website'>Website</a></li>
            <li><a href='#fun'>For Fun</a></li>
            <li><a href='#about'>About</a></li>
            <li><a href='#skill'>Skills</a></li>
            <li><a href='#contact'>Contact</a></li>
        </ul>
    </body>
</html>

Penerapan jQuery ScrollTo

Melanjutkan dari kode pada tutorial sebelumnya, di sini Saya telah mengubah script ini:

$('#nav a').click(function() {
    $('#nav a.active').removeClass('active');
    $(this).addClass('active');
});

Menjadi seperti ini untuk menjalankan animasi .scrollTo():

$('#nav a').click(function() {
    $('#nav a.active').removeClass('active');
    $(this).addClass('active');
    $('html, body').scrollTo($(this).attr('href'), 1000);
    return false;
});

Lebih Lengkap:

$(function() {

    // Hilangkan scrollbar
    $('html, body').css('overflow', 'hidden');

    function updateSize() {
        var winWidth  = $(window).width(),
            winHeight = $(window).height(),
            wrapSum   = $('.box').siblings().length;
        $('#wrap').css({
            width:winWidth*(wrapSum/2),
            height:winHeight*(wrapSum/3)
        });
        $('.box').css({
            width:winWidth,
            height:winHeight
        });  
    } updateSize();
               
    $(window).resize(function() {
        updateSize();
    });

    // Gunakan plugin jQuery scrollTo untuk menciptakan efek smooth scrolling
    $('#nav a').click(function() {
        $('a.active').removeClass('active');
        $(this).addClass('active');
        $('html, body').scrollTo($(this).attr('href'), 1000);

        // Cegah link mengakses halaman dari atributnya
        return false;
    });

});

Tanpa plugin scrollTo, menu masih dapat berfungsi dengan baik untuk meloncatkan halaman/seksi pada pandangan user dengan tepat. Hanya saja, efek animasi tidak akan terjadi. Saya tidak tahu banyak mengenai Mootools. Tapi pada intinya, Mootools dan jQuery adalah dua konsep yang sama:

Mootools = JavaScript Library = jQuery

Lebar dan Tinggi Elemen Dinamis berdasarkan Perubahan Ukuran Layar

Set Ukuran Lebar dan Tinggi Elemen secara Dinamis berdasarkan Ukuran Layar

Mengeset ukuran lebar dan tinggi elemen sesuai dengan ukuran layar memang mudah, namun menciptakan ukuran elemen berjumlah banyak dengan ukuran lebar dan tinggi masing-masing yang sama dengan layar tidak akan semudah itu. Kita membutuhkan elemen pembungkus dengan ukuran yang disesuaikan dengan jumlah elemen dan beberapa pembagian yang telah ditentukan untuk menciptakan kolom-kolom yang tepat.
Di sini Saya akan menunjukkan bagaimana cara Melissa Hie menciptakan kolom-kolom dengan ukuran yang cukup proporsional dengan lebar dan tinggi layar browser. Meskipun ia bilang bahwa situs yang ia buat diciptakan dengan Motools, tapi Saya bisa membuat konsep tipografinya dengan jQuery. Yang kita butuhkan pada dasarnya hanyalah mengambil data lebar dan tinggi layar, serta jumlah elemen .box untuk kalkulasi ukuran #wrap:

Lihat Demo

HTML

<div id='wrap'>
    <div class='box' id='home'>
        <h3>Home</h3>
    </div>
    <div class='box' id='contact'>
        <h3>Contact</h3>
    </div>
    <div class='box' id='fun'>
        <h3>For Fun</h3>
    </div>
    <div class='box' id='about'>
        <h3>About</h3>
    </div>
    <div class='box' id='website'>
        <h3>Website</h3>
    </div>
    <div class='box' id='skill'>
        <h3>Skills</h3>
    </div>
</div>

<ul id='nav'>
    <li><a class='active' href='#home'>Home</a></li>
    <li><a href='#website'>Website</a></li>
    <li><a href='#fun'>For Fun</a></li>
    <li><a href='#about'>About</a></li>
    <li><a href='#skill'>Skills</a></li>
    <li><a href='#contact'>Contact</a></li>
</ul>

CSS

#wrap {
  position:absolute;
  top:0px;
  left:0px;
}

h3 {
  margin:70px 30px;
  font:normal 22px Arial,Sans-Serif;
  color:#fff;
  color:rgba(255,255,255,0.7);
}

.box {
  width:50%;
  height:50%;
  float:left;
  background-color:#ccc;
}

#home    {background-color:#2f2f2f;}
#website {background-color:#00A7E2;}
#fun     {background-color:#EE9A10;}
#about   {background-color:#DD1F8E;}
#skill   {background-color:#620294;}
#contact {background-color:#84C922;}

ul#nav {
  width:100%;
  height:30px;
  background:#000;
  position:fixed;
  top:0px;
  left:0px;  
}

ul#nav li {
  display:inline;
  float:left;   
}

ul#nav li a {
  font:bold 10px Arial,Sans-Serif;
  text-decoration:none;
  color:#999;
  display:block;   
  padding:8px 15px;
}

ul#nav li a:hover, ul#nav li a.active {
  color:#fff;
}

jQuery

$(function() {
   // Hilangkan scrollbar dengan jQuery.
   // Jika jQuery gagal terpanggil, halaman masih bisa digeser dengan scrollbar seperti biasa
    $('html, body').css('overflow', 'hidden');

    function updateSize() {
        var winWidth  = $(window).width(),           // Ambil data lebar layar
            winHeight = $(window).height(),          // Ambil data tinggi layar
            wrapSum   = $('.box').siblings().length; // Hitung semua elemen .box (hasilnya: wrapSum=6)

        // Set ukuran .box agar sama dengan ukuran layar
        $('.box').css({
            width:winWidth,
            height:winHeight
        });

        // Set lebar #wrap sebesar tiga kali lebar .box (tiga kali lebar layar) dan tinggi sebesar dua kali tinggi .box (dua kali tinggi layar)
        // Saya membaginya jumlahnya (wrapSum) menjadi dua dan tiga,
        // karena Saya ingin hanya ada tiga .box dalam satu baris dan dua .box dalam satu kolom
        $('#wrap').css({
            width:winWidth*(wrapSum/2),
            height:winHeight*(wrapSum/3)
        });
    }
    // Jalankan fungsi secara default
    updateSize();
   
    $(window).resize(function() {
        // Saat ukuran layar diubah, jalankan fungsi kembali
        // untuk memastikan bahwa ukuran elemen akan terus ter-update/diperbaharui
        updateSize();
    });

    // Menambahkan class 'active' pada menu yang diklik
    $('ul#nav a').click(function() {
       $('ul#nav a.active').removeClass('active');
       $(this).addClass('active');
    });
});

Ini baru dasarnya saja, yaitu tentang bagaimana cara mengeset ukuran lebar dan tinggi elemen berdasarkan ukuran layar. Untuk selanjutnya, efek smooth scrolling bisa dibuat dengan menerapkan plugin jQuery scrollTo:

Berikutnya: Penyelesaian

CSS3 Melodi

Lihat Demo

CSS

#outer {
  width:200px;
  height:200px;
  margin:50px auto 0;
  position:relative;

  /* dilakukan setelah gambar sudah tersusun */
  -webkit-transform:skew(0deg, -10deg);
  -moz-transform:skew(0deg, -10deg);
  -ms-transform:skew(0deg, -10deg);
  -o-transform:skew(0deg, -10deg);
  transform:skew(0deg, -10deg);
}

.garis {
  width:4px;
  height:176px;
  background:#000;
  position:absolute;
}

.garis.satu {
  top:0px;
  left:50px;
}

.garis.dua {
  top:0px;
  right:0px;
}

.bulat {
  width:50px;
  height:40px;
  background:#000;
  -webkit-border-radius:70px / 60px;
  -moz-border-radius:70px / 60px;
  border-radius:70px / 60px;
  position:absolute;
}

.bulat.satu {
  bottom:0px;
  left:4px;
}

.bulat.dua {
  bottom:0px;
  right:0px;
}

.kotak {
  width:150px;
  height:20px;
  background:#000;
  position:absolute;
  right:0px;
}

.kotak.satu {
 top:0px;
}

.kotak.dua {
  top:30px;
}

HTML

<div id="outer">
    <div class="kotak satu"></div>
    <div class="kotak dua"></div>
    <div class="garis satu"></div>
    <div class="garis dua"></div>
    <div class="bulat satu"></div>
    <div class="bulat dua"></div>
</div> <!-- end outer -->

Menampilkan Waktu Saat Ini dengan JavaScript

Versi 24 Jam

<script>
<!--
var d         = new Date();
var curr_hour = d.getHours();
var curr_min  = d.getMinutes();
document.write(curr_hour + " : " + curr_min);
//-->
</script>

Versi AM & PM

<script>
<!--
var a_p       = "";
var d         = new Date();
var curr_hour = d.getHours();
if (curr_hour < 12) {
   a_p = "AM";
} else {
   a_p = "PM";
}
if (curr_hour == 0) {
   curr_hour = 12;
}
if (curr_hour > 12) {
   curr_hour = curr_hour - 12;
}

var curr_min = d.getMinutes();
curr_min = curr_min + "";
if (curr_min.length == 1) {
   curr_min = "0" + curr_min;
}

document.write(curr_hour + " : " + curr_min + " " + a_p);
//-->
</script>

Kode-kode ini bukan merupakan jam aktif melainkan jam pasif yang hanya bisa menampilkan waktu saat halaman terakses. Sementara saat waktu saat ini telah berubah, jam ini tidak akan ikut mengubah waktunya:

Lihat Demo

Pembaharuan: Versi Jam Aktif

Dapat dibuat secara sederhana dengan JavaScript setInterval():

<time id="clock"></time>
<script>
(function() {
    var clock = document.getElementById('clock');
    setInterval(function() {
        var time = new Date().toString().split(' ')[4];
        clock.innerHTML = time;
    }, 13);
})();
</script>

CSS3 Ribbon Snippets

Ribbon 1

.ribbon1 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:60%;
  padding:0px 30px;
  background:#3B5998;
  position:relative;
  line-height:48px;
  margin:50px auto;
}

.ribbon1:after {
  content:"";
  position:absolute;
  top:0px;
  left:100%;
  width:0px;
  height:0px;
  border:24px solid #3B5998;
  border-right-color:transparent;
}

<div class="ribbon1">Ribbon 1</div>

Ribbon 2

.ribbon2 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:60%;
  padding:0px 30px;
  background:#01943C;
  position:relative;
  line-height:48px;
  margin:50px auto;
}

.ribbon2:before {
  content:"";
  position:absolute;
  top:0px;
  right:100%;
  width:0px;
  height:0px;
  border:24px solid #01943C;
  border-left-color:transparent;
}

.ribbon2:after {
  content:"";
  position:absolute;
  top:0px;
  left:100%;
  width:0px;
  height:0px;
  border:24px solid transparent;
  border-left-color:#01943C;
}

<div class="ribbon2">Ribbon 2</div>

Ribbon 3

.ribbon3 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:60%;
  padding:0px 30px;
  background:#CEB754;
  position:relative;
  left:-10px;
  line-height:48px;
  margin:50px auto;
}

.ribbon3:before {
  content:"";
  position:absolute;
  top:100%;
  left:0px;
  width:0px;
  height:0px;
  border-width:5px;
  border-style:solid;
  border-color:#A28E34 #A28E34 transparent transparent;
}

.ribbon3:after {
  content:"";
  position:absolute;
  top:0px;
  left:100%;
  width:0px;
  height:0px;
  border:24px solid #CEB754;
  border-right-color:transparent;
}

<div class="ribbon3">Ribbon 3</div>

Ribbon 4

.ribbon4 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:60%;
  padding:0px 30px;
  background:#AF3605;
  position:relative;
  line-height:48px;
  margin:50px auto;
  text-align:center;
}

.ribbon4:before {
  content:"";
  position:absolute;
  top:100%;
  left:0px;
  width:0px;
  height:0px;
  border-width:5px;
  border-style:solid;
  border-color:#76290A #76290A transparent transparent;
}

.ribbon4:after {
  content:"";
  position:absolute;
  top:100%;
  right:0px;
  width:0px;
  height:0px;
  border-width:5px;
  border-style:solid;
  border-color:#76290A transparent transparent #76290A;
}

<div class="ribbon4">Ribbon 4</div>

Ribbon 5

.ribbon5 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:60%;
  text-align:center;
  padding:0px 30px;
  background:#AF3605;
  position:relative;
  line-height:48px;
  margin:50px auto;
}

.ribbon5:before {
  content:"";
  position:absolute;
  top:100%;
  left:0px;
  width:0px;
  height:0px;
  border-width:5px;
  border-style:solid;
  border-color:#76290A #76290A transparent transparent;
}

.ribbon5:after {
  content:"";
  position:absolute;
  top:100%;
  right:0px;
  width:0px;
  height:0px;
  border-width:5px;
  border-style:solid;
  border-color:#76290A transparent transparent #76290A;
}

.ribbon5 div {
  width:100%;
}

.ribbon5 div:before, .ribbon5 div:after {
  content:"";
  position:absolute;
  width:0px;
  height:0px;
  border:24px solid #983912;
  top:10px;
  z-index:-1;
}

.ribbon5 div:before {
  border-left-color:transparent;
  right:100%;
  margin-right:-10px;
}

.ribbon5 div:after {
  border-right-color:transparent;
  left:100%;
  margin-left:-10px;
}

<div style="position:relative;z-index:1;">
    <div class="ribbon5"><div>Ribbon 5</div></div>
</div>

Dec

30

Ribbon 6

.ribbon6 {
  font:bold 12px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:90px;
  text-align:center;
  padding:15px 0px;
  height:100px;
  background:#3B5998;
  position:relative;
  margin:50px auto 130px;
}

.ribbon6:after {
  content:"";
  position:absolute;
  top:100%;
  left:0px;
  width:0px;
  height:0px;
  border:45px solid #3B5998;
  border-bottom-color:transparent;
}

.ribbon6 h2 {
  margin:0px 10px;
  font-size:30px;
}

<div class="ribbon6">Dec<h2>30</h2>Ribbon 6</div>

Dec

30

Ribbon 7

.ribbon7 {
  font:bold 12px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:100px;
  text-align:center;
  padding:15px 0px 15px;
  height:150px;
  background:#3B5998;
  position:relative;
  margin:50px auto 100px;
}

.ribbon7:before, .ribbon7:after {
  content:"";
  position:absolute;
  bottom:-20px;
  left:-10px;
  width:0px;
  height:30px;
  border-width:20px 60px;
  border-style:solid;
  border-color:transparent #3B5998;
}

.ribbon7:after {
  bottom:10px;
}

.ribbon7 h2 {
  margin:0px 10px;
  font-size:30px;
}

<div class="ribbon7">Dec<h2>30</h2>Ribbon 7</div>

Ribbon 8

.ribbon8 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:50%;
  height:48px;
  text-align:center;
  padding:0px 30px;
  background:#AF3605;
  position:relative;
  line-height:48px;
  margin:50px auto;
}

.ribbon8:before {
  content:"";
  position:absolute;
  top:100%;
  left:0px;
  width:0px;
  height:0px;
  border-width:10px;
  border-style:solid;
  border-color:#76290A #76290A transparent transparent;
}

.ribbon8:after {
  content:"";
  position:absolute;
  top:100%;
  right:0px;
  width:0px;
  height:0px;
  border-width:10px;
  border-style:solid;
  border-color:#76290A transparent transparent #76290A;
}

.ribbon8 div {
  width:100%;
  height:100%;
}

.ribbon8 div:before, .ribbon8 div:after {
  content:"";
  position:absolute;
  width:40px;
  height:100%;
  background:#983912;
  top:20px;
  z-index:-1;
}

.ribbon8 div:before {
  border-left-color:transparent;
  right:100%;
  margin-right:-20px;
}

.ribbon8 div:after {
  border-right-color:transparent;
  left:100%;
  margin-left:-20px;
}

.ribbon8 div div {
  width:100%;
  height:100%;
}

.ribbon8 div div:before, .ribbon8 div div:after {
  content:"";
  position:absolute;
  width:50px;
  height:0px;
  background:transparent;
  border:25px solid #AF3605;
  top:10px;
  z-index:3;
}

.ribbon8 div div:before {
  border-left-color:transparent;
  margin-right:10px;
}

.ribbon8 div div:after {
  border-right-color:transparent;
  margin-left:10px;
}

.ribbon8 div div div {
  width:100%;
  height:100%;
}

.ribbon8 div div div:before, .ribbon8 div div div:after {
  content:"";
  position:absolute;
  width:0px;
  height:0px;
  background:transparent;
  border:5px solid transparent;
  top:100%;
  margin-top:10px;
  z-index:1;
}

.ribbon8 div div div:before {
  border-top-color:#76290A;
  border-left-color:#76290A;
  margin-left:20px;
}

.ribbon8 div div div:after {
  border-top-color:#76290A;
  border-right-color:#76290A;
  margin-right:20px;
}

<div style="position:relative;z-index:1;">
    <div class="ribbon8"><div><div><div>Ribbon 8</div></div></div></div>
</div>

CSS3 Media Temple Button

http://mediatemple.net/affiliate

Tombol ini benar-benar keren!!!

CSS

.button {
  cursor:pointer;
  background:#328EC5;
  background:-webkit-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  background:-moz-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  background:-ms-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  background:-o-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  background:linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  padding:0.75em 1.5em;
  font:normal 1em Calibri,Arial,Sans-Serif;
  text-transform:uppercase;
  color:#fff;
  text-decoration:none;
  text-shadow:0px -1px 0px rgba(0,0,0,0.3);
  -webkit-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.4),
    0px 1px 2px rgba(0,0,0,0.7);
  -moz-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.4),
    0px 1px 2px rgba(0,0,0,0.7);
  box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.4),
    0px 1px 2px rgba(0,0,0,0.7);
  -webkit-border-radius:0.7em;
  -moz-border-radius:0.7em;
  border-radius:0.7em;
  border:none;
}

.button:hover {
  background:#399BD6;
  background:-webkit-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  background:-moz-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  background:-ms-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  background:-o-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  background:linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  -webkit-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.5),
    0px 2px 4px rgba(0,0,0,0.4);
  -moz-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.5),
    0px 2px 4px rgba(0,0,0,0.4);
  box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.5),
    0px 2px 4px rgba(0,0,0,0.4);
}

.button:active {
  background:-webkit-linear-gradient(bottom, #88CEF7, #399BD6);
  background:-moz-linear-gradient(bottom, #88CEF7, #399BD6);
  background:-ms-linear-gradient(bottom, #88CEF7, #399BD6);
  background:-o-linear-gradient(bottom, #88CEF7, #399BD6);
  background:linear-gradient(bottom, #88CEF7, #399BD6);
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}

HTML

<a class="button" href="#">Get Started</a>

Demo

Get Started