DTE :]

Monday, April 11, 2016

Bagaimana Sebenarnya jQuery Bekerja

Ketika orang-orang sudah cukup puas dengan markup dan style sheet language, pada akhirnya mereka memutuskan untuk tertarik dengan dunia pemrograman setelah mereka dipertemukan dengan bahasa pemrograman yang luar biasa dahsyat yang mereka kenal sebagai jQuery. Mereka jatuh cinta karena efek animasi yang diberikan; mereka jatuh cinta kepada slideshow, kepada efek dropdown menu, kepada efek gambar kabur, dan lain sebagainya; sebegitu jatuh cintanya mereka hingga mereka sanggup untuk duduk berlama-lama di depan komputer, ketagihan menggoyang-goyangkan pointer mouse mereka di permukaan menu navigasi dropdown berkali-kali hanya demi melihat efek slide-up dan slide-down yang begitu indah…

Labels: JavaScript, jQuery, Lanjutan, Tautan

Saturday, November 29, 2014

Beberapa Tip untuk Para Pengguna JQuery Tingkat Lanjut

Berikut ini adalah beberapa tip penggunaan jQuery tingkat lanjut untuk Anda yang menginginkan performa web yang lebih baik, entah itu dari segi lama/cepatnya waktu eksekusi skrip ataupun dari segi panjang/pendeknya penulisan kode. Semoga bermanfaat!

Kode Pintasan untuk ‘DOM Ready’

// Sebelum
$(document).ready(function() {
   …
});

// Sesudah
$(function() {
    …
});

Metode Berantai

Jika memang masih bisa dikaitkan, maka Anda sebenarnya tidak perlu menuliskan selektor jQuery berulang-ulang dan kemudian menerapkan metode pada selektor tersebut:

// Sebelum
$('button').click(function() {
    $(this).toggleClass('active');
    $(this).html('Clicked!');
    $(this).css('opacity', .5);
});
$('button').css('color', 'red');

// Sesudah
$('button').click(function() {
    $(this).toggleClass('active').html('Clicked!').css('opacity', .5);
}).css('color', 'red');

Menyeleksi Elemen `<body>` dan `<html>`

Selektor ini akan memberikan performa yang lebih baik:

// Sebelum
var $root = $('html'),
    $base = $('body');

// Sesudah
var $root = $(document.documentElement),
    $base = $(document.body);

Mengambil/Mengeset Atribut Elemen dengan JavaScript Mentah

Dalam kondisi tertentu, metode ini terbukti jauh lebih efisien jika dibandingkan dengan metode .attr():

// Sebelum
$('div').each(function(i) {
    $(this).attr({
        'class': 'foo',
        'id': 'bar-' + i
    });
});

// Sesudah
$('div').each(function(i) {
    this.className = 'foo';
    this.id = 'bar-' + i;
});

// Sebelum
$('a').click(function() {
    alert($(this).attr('href'));
});

// Sesudah
$('a').click(function() {
    alert(this.href);
});

Menerapkan Metode JavaScript Mentah kepada Selektor jQuery

Anda bisa menggunakan jQuery .get() untuk mengembalikan status selektor jQuery menjadi selektor JavaScript, atau gunakan indeks array yang ada untuk menyeleksi elemen pada urutan tertentu:

// Tidak valid
$('div').innerHTML = 'test';

// Valid
$('div').get(0).innerHTML = 'test';
$('div')[0].innerHTML = 'test';

// Tidak valid
$('#my-button').onclick = function() {
    alert('test!');
};

// Valid
$('#my-button').get(0).onclick = function() {
    alert('test!');
};
$('#my-button')[0].onclick = function() {
    alert('test!');
};

Fungsi Anonim untuk Menggantikan `.each()`

// Sebelum
$('div').each(function(i) {
    $(this).html('Element: ' + i);
});

// Sesudah
$('div').html(function(i) {
    return 'Element: ' + i;
});

Mengeset Event dan Mengeksekusinya Secara Bersamaan

// Sebelum
function windowSizeCheck() {
    $('#result').html('Width: ' + $(window).width() + '<br>Height: ' + $(window).height());
} windowSizeCheck();
$(window).resize(windowSizeCheck);

// Sesudah
$(window).resize(function() {
    $('#result').html('Width: ' + $(this).width() + '<br>Height: ' + $(this).height());
}).trigger("resize");

Jalan Pintas untuk Efek Toggle

Setiap metode dalam jQuery pada umumnya adalah berupa objek, sehingga Anda bisa menganggap $(document).ready() dan $(document)['ready']() sebagai dua hal yang sama:

// Tidak efisien
$('a').mouseenter(function() {
    $(this).addClass('hover');
});
$('a').mouseleave(function() {
    $(this).removeClass('hover');
});

// Lebih efisien
$('a').mouseenter(function() {
    $(this).addClass('hover');
}).mouseleave(function() {
    $(this).removeClass('hover');
});

// Lebih efisien lagi
$('a').hover(function() {
    $(this).addClass('hover');
}, function() {
    $(this).removeClass('hover');
});

// Paling efisien
$('a').on("mouseenter mouseleave", function(e) {
    $(this)[e.type == "mouseenter" ? 'addClass' : 'removeClass']('hover');
});

Efek Tabulasi

Gunakan .siblings() untuk menyeleksi semua elemen yang sejenis dengan X di dalam induk yang sama tanpa menyeleksi elemen X itu sendiri:

/**
 * <div class="my-tab-buttons">
 *   <a href="#tab-1">Tab 1</a>
 *   <a href="#tab-2">Tab 2</a>
 *   <a href="#tab-3">Tab 3</a>
 *   <a href="#tab-4">Tab 4</a>
 * </div>
 */

// Sebelum
$('.my-tab-buttons a').click(function() {
    $(this).parent().find('a').removeClass('active');
    $(this).addClass('active');
    return false;
});
$('.my-tab-buttons a:first').addClass('active');

// Sesudah
$('.my-tab-buttons a').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
    return false;
}).first().trigger("click");

Efek Animasi Beruntun

Sebelumnya Saya sudah pernah menjelaskan tentang ini…

// Sebelum
$('div')
    .animate({'font-size':10}, 400)
    .animate({'font-size':50}, 400)
    .animate({'font-size':100}, 400)
    .animate({'margin-top':200}, 400);

// Sesudah
var anim = [
    {'font-size':10},
    {'font-size':50},
    {'font-size':100},
    {'margin-top':200}
];
$.each(anim, function(i) {
    $('div').animate(anim[i], 400);
});

// Sebelum
$('div')
    .animate({'font-size':10}, 400)
    .animate({'font-size':50}, 1000)
    .animate({'font-size':100}, 200)
    .animate({'margin-top':200}, 300);

// Sesudah
var anim = [
    [{'font-size':10}, 400],
    [{'font-size':50}, 1000],
    [{'font-size':100}, 200],
    [{'margin-top':200}, 300]
];
$.each(anim, function(i) {
    $('div').animate(anim[i][0], anim[i][1]);
});

Efek Berdenyut

function pulsate() {
    var $div = $('div');
    $div.animate({
        fontSize: $div.css('font-size') == '50px' ? '100px' : '50px'
    }, 800, pulsate);
} pulsate();

Labels: JavaScript, jQuery, Lanjutan

Sunday, August 4, 2013

JQuery Find and Highlight Text

HTML, CSS & jQuery

<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title>jQuery Find and Highlight Text</title>
<style>
body {
  background-color:white;
  padding:40px 10px 10px;
  font:normal normal 13px/1.4 Arial,Sans-Serif;
  color:black;
}
.text-finder {
  position:fixed;
  top:0;
  right:0;
  left:0;
  z-index:999;
  background-color:white;
  border-bottom:1px solid gray;
  padding:5px 6px;
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}
.highlight {
  background-color:yellow; /* highlight color */
  font-weight:bold;
}
</style>
<script src="//code.jquery.com/jquery-2.0.2.js"></script>
<script>
/*!
 highlight v4
 Highlights arbitrary terms.
 <http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html>
 MIT license.
 Johann Burkard
 <http://johannburkard.de>
 <mailto:jb@eaio.com>
*/
(function($) {
    $.fn.highlight = function(pat) {
        function innerHighlight(node, pat) {
            var skip = 0;
            if (node.nodeType == 3) {
                var pos = node.data.toUpperCase().indexOf(pat);
                if (pos >= 0) {
                    var spannode = document.createElement('span');
                    spannode.className = 'highlight';
                    var middlebit = node.splitText(pos);
                    var endbit = middlebit.splitText(pat.length);
                    var middleclone = middlebit.cloneNode(true);
                    spannode.appendChild(middleclone);
                    middlebit.parentNode.replaceChild(spannode, middlebit);
                    skip = 1;
                }
            } else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
                for (var i = 0; i < node.childNodes.length; ++i) {
                    i += innerHighlight(node.childNodes[i], pat);
                }
            }
            return skip;
        }
        return this.length && pat && pat.length ? this.each(function() {
            innerHighlight(this, pat.toUpperCase());
        }) : this;
    };
    $.fn.removeHighlight = function() {
        return this.find("span.highlight").each(function() {
            this.parentNode.firstChild.nodeName;
            with (this.parentNode) {
                replaceChild(this.firstChild, this);
                normalize();
            }
        }).end();
    };
})(jQuery);

// Text finder form function
(function($) {
    $(document).ready(function() {
        var $finder = $('#text-finder'),
            $field = $finder.children().first(),
            $clear = $field.next(),
            $area = $(document.body),
            $viewport = $('html, body');
        $field.on("keyup", function() {
            $area.removeHighlight().highlight(this.value); // Highlight text inside `$area` on keyup
            $viewport.scrollTop($area.find('span.highlight').first().offset().top - 50); // Jump the viewport to the first highlighted term
        });
        $clear.on("click", function() {
            $area.removeHighlight(); // Remove all highlight inside `$area`
            $field.val('').trigger("focus"); // Clear the search field
            $viewport.scrollTop(0); // Jump the viewport to the top
            return false;
        });
    });
})(jQuery);
</script>
</head>
<body>

<form id="text-finder" class="text-finder" action="javascript:;">
    <input type="text" placeholder="Find...">
    <input type="reset" value="&times;">
</form>

Content goes here...

</body>
</html>

Lihat Demo

Labels: Blogger, JavaScript, jQuery, Potongan

Wednesday, July 10, 2013

JavaScript/jQuery · Cek Jika Latar Gambar Telah Termuat

Lakukan sesuatu jika latar gambar pada elemen #test-bg telah termuat.

Tidak ada fungsi bawaan khusus yang bisa digunakan untuk mengecek bahwa sebuah latar gambar telah termuat. Tetapi Anda bisa melakukan itu dengan cara mengambil URL latar gambar pada elemen yang Anda inginkan untuk Anda sisipkan ke dalam atribut src gambar palsu yang Anda buat melalui JavaScript. Mengapa gambar? Karena kita bisa mendeteksi event onload pada gambar:

JavaScript Mentah

function getBgUrl(el) {
    var bg = "";
    if (el.currentStyle) { // IE
        bg = el.currentStyle.backgroundImage;
    } else if (document.defaultView && document.defaultView.getComputedStyle) { // Firefox
        bg = document.defaultView.getComputedStyle(el, "").backgroundImage;
    } else { // try and get inline style
        bg = el.style.backgroundImage;
    }
    return bg.replace(/url\(['"]?(.*?)['"]?\)/i, "$1");
}

var image = document.createElement('img');
image.src = getBgUrl(document.getElementById('test-bg'));
image.onload = function() {
    alert('Loaded!'); // Test!
};

jQuery

var bg = $('#test-bg').css('background-image').replace(/url\(['"]?(.*?)['"]?\)/i, "$1");
$('<img />').attr('src', bg).on("load", function() {
    alert('Loaded!'); // Test!
});

Lihat Demo

Referensi: SO - How Can I Check if a Background Image is Loaded?

Labels: Gambar, JavaScript, jQuery, Potongan

Monday, June 17, 2013

Cross Browser HTML5 Placeholder

jQuery

$('[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("");
    });
});

CSS

input.blur,
textarea.blur {color:#bbb}

Lihat Demo

Labels: JavaScript, jQuery, Potongan

Thursday, May 30, 2013

Aksesibilitas pada Soal Pilihan Ganda Online

Berbicara mengenai elemen formulir, umumnya elemen radio dan checkbox akan menjadi jenis elemen yang cukup sulit untuk ditangani oleh pihak pengguna karena ukurannya yang sangat kecil. Contoh sederhana:

<input type="radio" name="o"> Pilihan 1
<br>
<input type="radio" name="o"> Pilihan 2

Formulir di atas memang bekerja, tetapi tidak cukup nyaman untuk digunakan. Area yang bisa diklik hanya terfokus pada elemen radio saja yang ukurannya sangat kecil:

Aksesibilitas elemen radio yang kurang baik tanpa adanya elemen label. — Area pengecekan hanya terbatas pada elemen radio yang berukuran sangat kecil.

Mungkin tidak masalah jika orang yang mengisi formulir tersebut adalah orang-orang yang masih muda. Tetapi bagaimana jika yang mengisi formulir tersebut adalah para orangtua dan lanjut usia? Karena bagi mereka, mengarahkan mouse saja sudah kewalahan, apalagi mengeklik elemen radio yang ukurannya kecil seperti itu!

Selalu Ingat untuk Menambahkan Elemen Label

Untuk memperluas area pengecekan, kita bisa membungkus setiap opsi formulir dengan elemen label seperti ini:

<label><input type="radio" name="o"> Pilihan 1</label>
<br>
<label><input type="radio" name="o"> Pilihan 2</label>

Cara ini memungkinkan teks (atau elemen apa saja) yang berada di dalam elemen label tersebut untuk bisa bekerja sebagai pemicu perubahan kondisi radio yang merupakan anak dari label tersebut:

Aksesibilitas elemen radio yang lebih baik dengan penambahan elemen label. — Area pengecekan menjadi lebih luas, meliputi radio dan teks di sampingnya.

Kursor

Berikan elemen label dan semua jenis tombol dengan kursor jari telunjuk untuk meningkatkan kenyamanan:

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
label {cursor:pointer}

Efek Timbal Balik

Perubahan warna saat opsi disentuh dan saat opsi terseleksi, semua itu akan memberikan rasa keyakinan kepada setiap pengguna yang sedang mengisi formulir Anda:

label:hover {background-color:whitesmoke}
label:active {background:none}
label.selected {background-color:forestgreen} /* Kelas `.selected` akan diciptakan oleh JavaScript */

Demonstrasi

Berikut ini adalah sebuah demonstrasi soal pilihan ganda online dengan akses jawaban yang mudah untuk kenyamanan pengguna:

HTML

<form class="qa-form" id="qa-form" action="...">
    <ol>
        <li>
            <p>Uraian pertanyaan di sini ...</p>
            <label><input type="radio" name="a-1"> Jawaban 1</label>
            <label><input type="radio" name="a-1"> Jawaban 2</label>
            <label><input type="radio" name="a-1"> Jawaban 3</label>
            ...
        </li>
        <li> ... </li>
    </ol>
</form>

CSS

.qa-form {padding:1em 1em 2em}

.qa-form ol,
.qa-form li,
.qa-form p,
.qa-form input,
.qa-form label {
  margin:0;
  padding:0;
}

.qa-form ol {
  list-style:decimal outside;
  margin:0 0 2em 3em;
}

.qa-form p {
  margin:1em 0;
  clear:both;
}

.qa-form label {
  display:block;
  width:300px;
  cursor:pointer;
  overflow:hidden;
  padding:5px 10px 5px 6px;
  margin:0 0 2px;
  line-height:100%;
  border-radius:20px;
}

.qa-form label input {
  outline:none;
  vertical-align:top;
  cursor:inherit;
}

.qa-form button {cursor:pointer}
.qa-form label:hover {background-color:whitesmoke}
.qa-form label:active {background:none}

.qa-form label.selected {
  background-color:forestgreen;
  color:white;
}

jQuery

// Fungsi ini digunakan untuk menambahkan/menyingkirkan
// kelas `.selected` pada elemen `<label>`
// berdasarkan kondisi radio di dalamnya
$(document).ready(function() {
    $('#qa-form :radio').on("change", function() {
        $(this).parent()[this.checked ? "addClass" : "removeClass"]('selected').siblings().removeClass('selected');
    });
    $('#qa-form :reset').on("click", function() {
        $(this).closest('form').find('label').removeClass('selected').children().prop('checked', false);
    });
});

Lihat Demo

Kesimpulan

Selalu pastikan bahwa pengguna bisa merasa nyaman dengan apa yang Anda berikan untuk mereka gunakan. Berikan efek timbal balik yang tegas kepada pengguna agar mereka yakin dengan apa yang telah mereka putuskan, sehingga hal-hal seperti kegagalan tes karena kesalahan antarmuka pengguna tidak akan terjadi.

Labels: HTML, JavaScript, jQuery, Lanjutan

Friday, May 3, 2013

Jalan Pintas untuk Menangani Perintah-Perintah JQuery di dalam Peraturan Kondisi

Dalam sebuah forum Saya pernah sekali diajari mengenai cara tersingkat untuk menangani perintah-perintah jQuery di dalam peraturan kondisi yang biasa dituliskan seperti ini:

if (statement) {
    $(selector).method1();
} else {
    $(selector).method2();
}

Kode di bawah ini adalah jalan pintas untuk kondisional di atas:

$(selector)[statement ? "method1" : "method2"]();

Pada awalnya Saya merasa bingung dengan sudut pandang yang orang tersebut berikan, sampai kemudian Saya menyadari bahwa pada dasarnya ini hanyalah sebuah jalan pintas peraturan if/else untuk memanggil item objek yang berbeda berdasarkan kondisi tertentu.

jQuery, pada dasarnya hanyalah sekumpulan fungsi yang dinyatakan di dalam objek. Kurang lebihnya seperti ini (memang tidak sama persis seperti ini, tapi setidaknya lumayan mirip):

var foo = {
    addClass: function(param) { ... },
    removeClass: function(param) { ... },
    toggleClass: function(param) { ... },
    hasClass: function(param) { ... }
    ...
}

Sehingga setiap fungsi bisa dipanggil dengan cara seperti ini:

foo.addClass('bar');
foo.removeClass('bar');

Atau seperti ini:

foo["addClass"]('bar');
foo["removeClass"]('bar');

Katakanlah kita ingin memanggil fungsi tertentu di dalam foo hanya jika suatu kondisi terpenuhi. Jika kondisi tidak terpenuhi, maka fungsi cadangan yang lain akan dijalankan:

if (abc === true) {
    foo["removeClass"]('bar');
} else {
    foo["addClass"]('bar');
}

Yang mana jika diubah ke pernyataan kondisional ringkas akan menjadi seperti ini:

var x = (abc === true) ? "removeClass" : "addClass";
foo[x]('bar');

Sehingga kita bisa menyimpulkannya menjadi seperti ini:

foo[abc === true ? "removeClass" : "addClass"]('bar');

Contoh Penerapan

Berikut ini adalah contoh penerapan kondisional jalan pintas untuk menangani perintah .slideDown() dan .fadeOut() berdasarkan visibilitas panel:

Sebelum

$('h2').click(function() {
    $(this).toggleClass('active');
    if ($(this).next().is(':hidden')) {
        $(this).next().slideDown();
    } else {
        $(this).next().fadeOut();
    }
});

Sesudah

$('h2').click(function() {
    $(this).toggleClass('active')
        .next()[$(this).next().is(':hidden') ? "slideDown" : "fadeOut"]();
});

Lihat Demo

Labels: JavaScript, jQuery, Lanjutan, Masalah

Monday, April 22, 2013

Membuat Navigasi Halaman AJAX pada Blogger

Prinsipnya sederhana. Di sini Saya menggunakan navigasi Posting Lebih Lama sebagai navigasi AJAX dan menggunakan jQuery $.get() untuk memanggil URL pada navigasi tersebut:

// Menyingkirkan navigasi posting lebih baru (Navigasi ini tidak diperlukan)
$('#blog-pager').find('#blog-pager-newer-link').remove();

// Dasar AJAX navigasi
$('#blog-pager').on("click", "#blog-pager-older-link a", function() {
    $.get(this.href, {}, function(data) {
        // Proses...
    }, "html");
    return false;
});

Kita akan menggunakan elemen .blog-posts untuk memuat posting-posting baru dari halaman selanjutnya.

Menerapkan AJAX pada Navigasi Halaman

Pastikan jQuery sudah terpasang pada template. Masuk ke editor HTML template, kemudian salin kode ini dan letakkan di atas </body>:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script>
//<![CDATA[
(function($) {
    var $pager = $('#blog-pager'),
        $posts = $('.blog-posts');
    $pager.find('#blog-pager-newer-link').remove(); // Menyingkirkan navigasi posting lebih baru
    $pager.on("click", "#blog-pager-older-link a", function() {
        $.get(this.href, {}, function(data) {
            var source = $(data).find('.post').length ? $(data) : $('<div></div>');
            $posts.append(source.find('.blog-posts').html()); // Menyisipkan posting
            $pager.html(source.find('#blog-pager-older-link').clone()); // Memperbaharui navigasi
        }, "html");
        $(this).replaceWith('<span>Memuat...</span>'); // Ubah navigasi posting menjadi indikator memuat saat sedang memuat
        return false;
    });
})(jQuery);
//]]>
</script>
</b:if>
</b:if>

Klik Simpan Template.

Sekarang coba buka halaman blog Anda kemudian klik navigasi Posting Lama atau Older Post. Jika navigasi tersebut berubah menjadi teks bertuliskan “memuat...” seperti ini, maka itu artinya AJAX sedang bekerja:

Ini adalah gambar navigasi halaman yang sedang memuat halaman baru dengan AJAX — Indikator sedang memuat

Tunggu sampai posting-posting baru muncul di bawah posting-posting yang sedang terlihat saat ini.

Infinite Scroll (?)

Untuk menciptakan infinite scroll pada sistem navigasi halaman, cukup nyatakan event .scroll() pada $(window) dan cek apakah jarak gulungan layar telah mencapai batas akhir atau belum. Jika ya, picu event .click() pada navigasi AJAX yang telah kita buat sebelumnya.

Dalam kasus ini, Saya menentukan batas akhir gulungan layar bukan berdasarkan tinggi halaman, melainkan berdasarkan posisi navigasi terhadap bagian teratas dari layar:

(function($) {

    var $pager = $('#blog-pager'),
        $posts = $('.blog-posts'),
        loading = false;

    // AJAX
    $pager.find('#blog-pager-newer-link').remove(); // Menyingkirkan navigasi posting lebih baru
    $pager.on("click", "#blog-pager-older-link a", function() {
        $.get(this.href, {}, function(data) {
            var source = $(data).find('.post').length ? $(data) : $('<div></div>');
            $posts.append(source.find('.blog-posts').html());
            $pager.html(source.find('#blog-pager-older-link').clone());
            loading = false;
        }, "html");
        $(this).replaceWith('<span>Memuat...</span>'); // Ubah navigasi posting menjadi indikator memuat saat sedang memuat
        return false;
    });

    // INFINITE SCROLL
    $(window).on("scroll resize", function() {
        // Jika AJAX sedang tidak memuat dan jika jarak gulungan layar + tinggi layar telah mencapai
        // tinggi yang sama dengan/lebih besar dari offset navigasi halaman terhadap bagian teratas dari layar...
        if (!loading && ($(this).scrollTop() + $(this).height()) >= $pager.offset().top) {
            $pager.find('#blog-pager-older-link a').trigger("click"); // Picu event `.click()` pada navigasi AJAX posting
            loading = true; // Mulai antre pemuatan
        }
    });

})(jQuery);

Catatan: JavaScript Auto Read-More akan tereksekusi saat halaman dimuat dengan cara biasa, sehingga jangan kaget jika posting-posting baru yang dimuat oleh AJAX tidak akan terpotong menjadi ringkasan posting. Saya sarankan Anda untuk menggunakan konsep ringkasan posting tanpa JavaScript yang pernah Saya tuliskan sebelumnya di sini.

Labels: Blogger, Desain, JavaScript, jQuery, Menengah

Sunday, March 10, 2013

Mendapatkan Tinggi dan Lebar Layar Monitor

Versi jQuery

var x = $(window).width(),
    y = $(window).height();

// Tampilkan lebar dan tinggi layar dalam kotak pesan
alert('Lebar layar: ' + x + '; Tinggi layar: ' + y);

Versi JavaScript Murni

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);

Labels: JavaScript, jQuery, Potongan

Sunday, February 24, 2013

AJAX jQuery · Memuat Beberapa Bagian Halaman Sekaligus dalam Satu Kali Permintaan

Ini adalah metode dasar yang sering Anda gunakan untuk memuat sebagian halaman ke dalam kontainer yang sudah dipersiapkan menggunakan AJAX. Di sini Saya menggambarkan Anda akan memuat elemen #content dari halaman /p/sample-page.html ke dalam elemen #container:

$('button').on("click", function() {
    $('#container').load('/p/sample-page.html #content');
});

Setelah tombol diklik, maka elemen #content dari halaman /p/sample-page.html akan termuat di dalam elemen #container. Ini adalah kasus yang sederhana. Namun kasus ini akan menjadi lebih rumit ketika Anda ingin memuat beberapa bagian dari halaman lain secara bersamaan dalam satu kali permintaan. Sebagai contoh, Anda ingin memuat bagian posting, navigasi halaman dan komentar secara bersamaan dalam satu kali permintaan HTTP ke dalam beberapa kontainer yang sudah dipersiapkan. Berikut ini adalah cara yang tidak efisien:

$('button').on("click", function() {
    $('#container-1').load('http://blog.my_site.com/p/sample-page.html .post');
    $('#container-2').load('http://blog.my_site.com/p/sample-page.html #nav');
    $('#container-3').load('http://blog.my_site.com/p/sample-page.html #comments');
});

Lebih Efisien: Gunakan $.get()

Jangan memakai jQuery .load() untuk memuat beberapa bagian halaman sekaligus. Tapi gunakan jQuery $.get():

$('button').on("click", function() {
    $.get('http://blog.my_site.com/p/sample-page.html', function(data) {
        $('#container-1').html($(data).find('.post'));
        $('#container-2').html($(data).find('#nav'));
        $('#container-3').html($(data).find('#comments'));
    });
});

Pada metode ini, Anda mengeklik sebuah tombol. Kemudian permintaan akan terjadi. Setelah proses permintaan berhasil dilakukan dan halaman yang diminta berhasil dipanggil, maka halaman tersebut tidak akan langsung dimuat ke dalam area/kontainer yang sudah dipersiapkan, melainkan masih berada di dalam parameter data.

Pada kasus ini, parameter data bisa disamakan sebagai keseluruhan HTML dari halaman http://blog.my_site.com/p/sample-page.html.

Dari parameter tersebut Anda bisa menelusuri bagian-bagian halaman lainnya dengan cara menyeleksi elemen yang diinginkan di dalam $(data) untuk kemudian bisa dimuat ke dalam kontainer yang diinginkan melalui jQuery manipulasi DOM seperti .html(), .text(), .append() dan .prepend() atau yang lainnya.

Demo?

Jika Anda sedang menggunakan peramban Firefox, klik pada menu drop-down di pojok kiri atas. Pilih menu Web Developer kemudian klik sub menu Scratchpad (Atau cukup tekan tombol Shift+F4). Salin kode di bawah ini kemudian tempelkan di dalam editor Scratchpad:

$('a').click(function() {
    $.get(this.href, function(data) {
        $('.post').html($(data).find('.post').html());
        $('#blog-pager').html($(data).find('#blog-pager').html());
        $('#comments').html($(data).find('#comments').html());
    }, 'html');
    return false;
});

Klik menu Execute dan pilih Run:

Firefox ScratchPad — Setelah kode ditempelkan, pilih menu **Execute** kemudian klik **Run**.

Sekarang klik salah satu tautan pada daftar entri/posting populer di sidebar blog ini dan tunggu beberapa saat sampai bagian dari halaman tersebut termuat. Jika berhasil, maka bagian yang akan berganti isinya adalah ada pada posting, navigasi halaman blog dan isi komentar (isi posting akan berubah, tautan navigasi halaman akan berubah dan isi komentar juga akan berubah).

Catatan dan Tambahan

jQuery .load() bisa menerima beberapa selektor sekaligus, jika Anda tidak tahu:

// Memuat `#sidebar`, `#comments` dan `#blog-pager`
// dari `http://abc_site.com/sample-page.html` ke dalam `#container`
$('#container').load('http://abc_site.com/sample-page.html #comments,#sidebar,#blog-pager');

Jika proses pemuatan menggunakan $.get() gagal (yang Saya alami adalah muncul pesan error TypeError: n.innerHTML is undefined), cobalah untuk menggunakan pola ini:

$.get('http://abc_site.com/sample-page.html', {}, function(data) {
    // Lakukan sesuatu dengan `$(data)`
}, 'html');

Labels: JavaScript, jQuery, Lanjutan, Masalah

Wednesday, February 20, 2013

Membangun Layout Paralaks dengan JQuery

Membuat layout paralaks, jika Anda masih kesulitan untuk memahami bagaimana cara kerja dan cara membuatnya, di sini Saya akan menjelaskannya dengan rinci mengenai bagaimana layout tersebut tercipta. Pada dasarnya, sebuah layout paralaks hanyalah elemen HTML dengan beberapa tumpukan layer di dalamnya, dimana setiap layer tersebut akan dianimasikan posisinya dengan kecepatan yang sama namun dengan jarak yang berbeda untuk menciptakan efek tiga dimensi saat layer-layer tersebut bergerak.

Membuat Latar Paralaks

Kita mulai dengan elemen HTML seperti ini:

<div id="parallax-wrapper" class="parallax-wrapper">
    <div class="layer layer-1"></div>
    <div class="layer layer-2"></div>
    <div class="layer layer-3"></div>
    ...
    ...
</div>

Saya membuat sebuah elemen HTML sebagai kontainer dengan beberapa layer di dalamnya. Elemen utamanya adalah #parallax-wrapper. Elemen ini berfungsi sebagai wadah dari semua elemen paralaks di dalamnya. Sedangkan elemen-elemen .layer nantinya akan kita gunakan sebagai penampil latar. Kita akan memposisikan layer-layer tersebut menjadi bertumpukan layaknya tumpukan kaca. Jadi kita memerlukan ini untuk mengatur dimensi paralaks yang kita buat:

.parallax-wrapper {
  border:1px solid black;
  height:200px; /* Tentukan tinggi area paralaks, ukuran lebar tidak begitu penting */
  position:relative; /* Penting! Posisi absolut pada elemen induk */
  overflow:hidden;
}

/* Buat semua layer paralaks sebagai elemen absolut,
   sehingga tampilannya akan bertumpuk satu sama lainnya */
.parallax-wrapper .layer {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  /* set beberapa pengaturan latar di sini,
     sebelum kita mendefinisikan latar gambar secara sepihak
     pada masing-masing layer */
  background-position:0 0;
  background-color:transparent;
  background-repeat:repeat-x;
}

Setelah itu, gambar-gambar bisa diterapkan pada masing-masing layer:

.parallax-wrapper .layer-1 {background-image:url('img/parallax-bg-1.png')}
.parallax-wrapper .layer-2 {background-image:url('img/parallax-bg-2.png')}
.parallax-wrapper .layer-3 {background-image:url('img/parallax-bg-3.png')}

Navigasi Paralaks

Navigasi ini digunakan untuk menggerakkan latar paralaks —dan konten di dalamnya tentunya, agar paralaks tidak hanya berfungsi sebagai hiasan. Navigasi terdiri dari elemen <span> dengan beberapa tautan di dalamnya. Anda bisa membuatnya menggunakan elemen apa saja, tapi di sini Saya mencoba untuk membuatnya seminimalis mungkin:

<span id="parallax-navigation" class="parallax-navigation">
    <a href="#1">1</a>
    <a href="#2">2</a>
    <a href="#3">3</a>
    <a href="#4">4</a>
    ...
    ...
</span>

CSS untuk navigasinya:

.parallax-navigation {
  display:block;
  height:30px;
  line-height:30px;
  position:relative;
  text-align:right;
  font-size:11px;
  font-weight:bold;
}

.parallax-navigation a {
  text-decoration:none;
  color:black;
  background-color:#eee;
  padding:5px 10px;
}

/* set latar dan warna yang berbeda untuk item navigasi yang sedang aktif */
.parallax-navigation a.active {
  background-color:#529834;
  color:white;
}

Selesai sampai di sini, sekarang kita akan mengerjakan fungsi dasar untuk menggerakkan layer:

Lihat Demo

Efek Paralaks

Beberapa mungkin akan membuat efek paralaks dengan cara menganimasikan properti left pada elemen relatif untuk menggerakkan elemen ke kiri atau ke kanan. Tapi kekurangannya adalah, mengubah jarak left terlalu jauh akan membuat posisi layer berubah dan pada akhirnya akan menghilang dari pandangan jika jaraknya sudah terlalu jauh. Di sini Saya lebih menyarankan untuk menganimasikan posisi latar dibandingkan posisi layer itu sendiri, sehingga layer tidak akan bergerak, hanya latarnya saja yang bergerak.

Namun jQuery tidak mendukung properti animasi background-position dengan baik, jadi kita membutuhkan sebuah plugin untuk itu. Anda akan menemukan begitu banyak plugin jQuery yang berfungsi untuk menganimasikan posisi latar jika Anda mencarinya, dan Saya memilih untuk menggunakan plugin animasi posisi latar dari Keith Wood. Saya tidak kenal dengan orang itu, tapi pluginnya bagus ⇒ http://keith-wood.name/backgroundPos.html

<!-- Muat jQuery di awal -->
<script src="js/jquery.js"></script>
<!-- Sertakan plugin jQuery BackgroundPos -->
<script src="js/jquery.backgroundpos.min.js"></script>
<script>
  // Pekerjaan kita di sini...
</script>

Definisikan beberapa variabel untuk mempermudah kita dalam menyeleksi elemen dan sekaligus juga memperbaiki performa. Seperti biasa:

var $parallax = $('#parallax-wrapper'),
    $layer = $parallax.find('.layer'),
    $nav = $('#parallax-navigation');

Setelah itu kita kumpulkan semua item navigasi dan layer di dalam paralaks. Kita akan cenderung menggunakan jQuery .each() di sini, karena ini adalah cara yang paling mudah untuk mendapatkan indeks/urutan masing-masing elemen. Kita akan menganimasikan elemen dengan parameter dari indeks elemen (urutan elemen):

$nav.find('a').each(function() {
    // Saat pengguna mengeklik item navigasi...
    $(this).on("click", function() {
        var step = $(this).index(); // Dapatkan indeks dari setiap item navigasi
        // Kumpulkan layer...
        $layer.each(function() {
            // Definisikan jarak animasi latar pada setiap layer berdasarkan indeksnya
            var distance = ($(this).index()+1) * 200; // Kalikan dengan 200
        });
        return false;
    });
}).first().addClass('active'); // Tambahkan kelas `active` pada item navigasi pertama sebagai awalan

Setelah itu, buat fungsi untuk menambah dan melepas kelas active pada setiap item navigasi. Dulu Saya sudah pernah menuliskan kodenya di sini

$nav.find('a').each(function() {
    // Saat pengguna mengeklik item navigasi...
    $(this).on("click", function() {
        var step = $(this).index(); // Dapatkan indeks dari setiap item navigasi
        $nav.find('.active').removeClass('active'); // Singkirkan kelas `active` pada item navigasi
        $(this).addClass('active'); // Tambahkan kelas `active` pada item navigasi yang diklik
        // Kumpulkan layer...
        $layer.each(function() {
            // Definisikan jarak animasi latar pada setiap layer berdasarkan indeksnya
            var distance = ($(this).index()+1) * 200; // Kalikan dengan 200
        });
        return false;
    });
}).first().addClass('active'); // Tambahkan kelas `active` pada item navigasi pertama sebagai awalan

Animasikan posisi latar pada masing-masing layer dengan parameter berupa urutan layer, sehingga jarak perubahan posisi akan berbeda-beda pada masing-masing layer (lebih tepatnya: jarak animasi akan meningkat berdasarkan urutan layer):

$nav.find('a').each(function() {
    // Saat pengguna mengeklik item navigasi...
    $(this).on("click", function() {
        var step = $(this).index(); // Dapatkan indeks dari setiap item navigasi
        $nav.find('.active').removeClass('active'); // Singkirkan kelas `active` pada item navigasi
        $(this).addClass('active'); // Tambahkan kelas `active` pada item navigasi yang diklik
        // Kumpulkan layer...
        $layer.each(function() {
            // Definisikan jarak animasi latar pada setiap layer berdasarkan indeksnya
            var distance = ($(this).index()+1) * 200; // Kalikan dengan 200
            // Animasikan posisi latar
            $(this).stop().animate({backgroundPosition: '-' + (step*distance) + 'px 0px'}, 1500);
        });
        return false;
    });
}).first().addClass('active'); // Tambahkan kelas `active` pada item navigasi pertama sebagai awalan

Dan beginilah hasil akhir sementara kita. Baru latarnya saja yang dianimasikan, belum ada konten:

Lihat Demo

Langkah Akhir: Menambahkan Konten

Animasi paralaks sudah berhasil dibuat, sekarang tinggal membuat konten paralaks saja. Setiap konten merupakan item yang bisa Anda isi dengan tulisan dan/atau gambar layaknya slideshow:

HTML

<div id="parallax-wrapper" class="parallax-wrapper">
    <div class="layer layer-1"></div>
    <div class="layer layer-2"></div>
    <div class="layer layer-3"></div>
    <div class="box-item-wrapper">
        <div class="box-item"> ... </div>
        <div class="box-item"> ... </div>
        <div class="box-item"> ... </div>
        <div class="box-item"> ... </div>
        ...
        ...
    </div>
</div>

CSS

.box-item-wrapper {
  position:relative;
  overflow:hidden;
}

.box-item-wrapper .box-item {
  float:left; /* posisikan `.box-item` sebagai layout mendatar */
  width:100%;
  margin:7em 0;
  padding:1.5em 2em;
}

Fungsi selanjutnya ditujukan untuk mengeset ukuran kontainer item dan lebar item, serta menganimasikan kontainer item menuju ke kiri dengan jarak tertentu berdasarkan indeks item navigasi. Pertama-tama kita atur ukuran lebar .box-item-wrapper dan .box-item:

var $window = $(window),
    $wrap = $parallax.find('.box-item-wrapper'),
    width, totalWidth; // Variabel kosong

$window.on("resize", function() {

    width = $parallax.width(); // Mendapatkan lebar `#parallax-wrapper`
    totalWidth = width * $wrap.find('.box-item').length; // Lebar total = lebar `#parallax-wrapper` dikalikan jumlah `.box-item`

    // Set lebar `.box-item-wrapper` selebar `totalWidth`
    $wrap.width(totalWidth)
        // Set lebar `.box-item` selebar `#parallax-wrapper`
        .find('.box-item').width(width);

}).trigger("resize");

Saya menuliskan variabel width dan totalWidth kosong, kemudian menyatakan nilainya di dalam $window.on("resize", function() {}) agar lebar elemen bisa diperbaharui setiap kali ukuran layar diubah. Saya juga menyatakan lebar elemen di dalam event tersebut.

Terakhir, gabungkan animasi properti left di dalam event klik item navigasi untuk menganimasikan posisi .box-item-wrapper:

$nav.find('a').each(function() {
    // Saat pengguna mengeklik item navigasi...
    $(this).on("click", function() {
        var step = $(this).index(); // Dapatkan indeks dari setiap item navigasi
        $nav.find('.active').removeClass('active'); // Singkirkan kelas `active` pada item navigasi
        $(this).addClass('active'); // Tambahkan kelas `active` pada item navigasi yang diklik
        // Kumpulkan layer...
        $layer.each(function() {
            // Definisikan jarak animasi latar pada setiap layer berdasarkan indeksnya
            var distance = ($(this).index()+1) * 200; // Kalikan dengan 200
            // Animasikan posisi latar
            $(this).stop().animate({backgroundPosition: '-' + (step*distance) + 'px 0px'}, 1500);
        });
        // Animasikan `.box-item-wrapper` ke kiri untuk menggerakkan `.box-item`
        $wrap.stop().animate({'left': -(step*width)}, 1500);
        return false;
    });
}).first().addClass('active'); // Tambahkan kelas `active` pada item navigasi pertama sebagai awalan

Produk Final

HTML

<div id="parallax-wrapper" class="parallax-wrapper">
    <div class="layer layer-1"></div>
    <div class="layer layer-2"></div>
    <div class="layer layer-3"></div>
    <div class="box-item-wrapper">
        <div class="box-item"> ... </div>
        <div class="box-item"> ... </div>
        <div class="box-item"> ... </div>
        <div class="box-item"> ... </div>
    </div>
</div>

<span id="parallax-navigation" class="parallax-navigation">
    <a href="#1">1</a>
    <a href="#2">2</a>
    <a href="#3">3</a>
    <a href="#4">4</a>
</span>

CSS

.parallax-wrapper {
  border:1px solid black;
  height:200px;
  position:relative;
  overflow:hidden;
}

.parallax-wrapper .layer {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-position:0 0;
  background-color:transparent;
  background-repeat:repeat-x;
}

.parallax-wrapper .layer-1 {background-image:url('img/parallax-bg-1.png')}
.parallax-wrapper .layer-2 {background-image:url('img/parallax-bg-2.png')}
.parallax-wrapper .layer-3 {background-image:url('img/parallax-bg-3.png')}

.box-item-wrapper {
  position:relative;
  overflow:hidden;
}

.box-item-wrapper .box-item {
  float:left;
  width:100%;
  margin:5em 0 0;
  padding:1.5em 2em;
}

.parallax-navigation {
  display:block;
  height:30px;
  line-height:30px;
  position:relative;
  text-align:right;
  font-size:11px;
  font-weight:bold;
}

.parallax-navigation a {
  text-decoration:none;
  color:black;
  background-color:#eee;
  padding:5px 10px;
}

.parallax-navigation a.active {
  background-color:#529834;
  color:white;
}

jQuery

(function($) {

    // Cache some elements
    var $window = $(window),
        $parallax = $('#parallax-wrapper'),
        $layer = $parallax.find('.layer'),
        $wrap = $parallax.find('.box-item-wrapper'),
        $nav = $('#parallax-navigation'), width, totalWidth;

    // Set the parallax content & item width in window resize ...
    // ... so we can be sure that when the window is resized, the size of the elements will be updated too
    $window.on("resize", function() {
        width = $parallax.width(); // get the parallax wrapper width
        totalWidth = width * $wrap.find('.box-item').length; // total width = (parallax wrapper width * box item length)
        $wrap.width(totalWidth).find('.box-item').outerWidth(width);
    }).trigger("resize");

    // Collect all navigation item inside parallax navigation, then get their index to set the animation distance
    $nav.find('a').each(function() {
        // when user click on the navigation item
        $(this).on("click", function() {
            var step = $(this).index(); // get the index (0, 1, 2, 3, ...)
            $nav.find('.active').removeClass('active'); // remove the active class from navigation item
            $(this).addClass('active'); // add the active class to the clicked navigation item
            $layer.each(function() {
                // set the background-position per-animation distance of each layer ...
                // ... based on its index
                var distance = ($(this).index()+1) * 200; // multiplied by 200
                $(this).stop().animate({backgroundPosition: '-' + (step*distance) + 'px 0px'}, 1500); // (jQuery background position plugin required)
            });
            // also, animate the `.box-item-wrapper` to the left to move the `.box-item`
            $wrap.stop().animate({'left': -(step*width)}, 1500);
            return false;
        });
    }).first().addClass('active'); // add active class to the first navigation item on initiation

})(jQuery);

Demo

Lihat Demo Unduh Semua Demo Bonus: Paralaks Orientasi Vertikal

Labels: Desain, JavaScript, jQuery, Lanjutan

Wednesday, January 30, 2013

Input Teks dengan Pelengkap Sugesti

Elemen UI ini terinspirasi dari Google, lebih tepatnya pada bagian atas dasbor Forum Blogger (2013). Ini hanyalah penerapan konsep drop-down menu sebagai pelengkap elemen input teks dan sama sekali tidak ada hubungannya dengan cara kerja filter penelusuran/sortir topik pembicaraan seperti pada grup Google.

Elemen ini bisa Anda gunakan untuk memberikan sugesti atau pilihan kata kunci secara tidak langsung tanpa harus repot-repot menuliskan perintah-perintah khusus di sekitar formulir untuk pengguna agar mereka menuliskan kata kunci seperti ini dan itu. Cukup letakkan beberapa sugesti kata kunci pada menu drop-down, maka para pengguna akan segera mengerti gambaran formulir tersebut saat mereka menampilkan menu:

HTML

<div class="input-text-wrap">
    <form action="//your_site_name.com/search" method="get">
        <input class="text-input" type="text" name="q" autocomplete="off">
        <span class="down-arrow"></span>
        <input class="submit-button" type="submit" value="Search">
        <ul>
            <li>Wallpaper 3D</li>
            <li>Anime</li>
            <li>Manga</li>
            <li>Comics List</li>
            <li>Characters</li>
            <li>Animepedia</li>
        </ul>
    </form>
</div>

CSS

/*
  @credit: http://www.dte.web.id, https://plus.google.com/108949996304093815163/about
  font-family: Segoe,"Segoe UI",Arial,Sans-Serif
  font-size: 12px
  line-height: 30px
  border-color: #8E8E74, black
  color: #333, #666, black
  background-color: white, #FFEAD3, #EDD8BF, #E0CBB2
*/

/* outer */
.input-text-wrap {
  text-align:left;
  display:inline-block;
  background-color:white;
  border:1px solid #8E8E74;
  height:30px;
  position:relative;
  font:normal normal 12px/30px Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#333;
  -webkit-box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.4);
  -moz-box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.4);
  box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.4);
}

/* focused `.input-text-wrap` */
.input-text-wrap.focused {
  -webkit-box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.7);
  -moz-box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.7);
  box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.7);
  border-color:black;
}

/* resets or netralize all element inside */
.input-text-wrap input,
.input-text-wrap form,
.input-text-wrap ul,
.input-text-wrap li {
  margin:0 0;
  padding:0 0;
  list-style:none;
  border:none;
  background:none;
  font:inherit;
  color:inherit;
  vertical-align:top;
}

.input-text-wrap input {display:inline-block}

.input-text-wrap .text-input,
.input-text-wrap .submit-button {
  height:30px;
  line-height:30px;
  font-weight:bold;
  margin:0 20px 0 5px;
  outline:none;
}

/* the text input */
.input-text-wrap .text-input {
  width:160px; /* set the text input width here */
}

/* the submit button */
.input-text-wrap .submit-button {
  width:70px;
  padding:0 0 2px;
  margin:0 0;
  background-color:#FFEAD3;
  border-left:1px solid #8E8E74;
  color:#666;
  cursor:pointer;
  -webkit-box-shadow:0 0 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 0 2px rgba(0,0,0,.4);
  box-shadow:0 0 2px rgba(0,0,0,.4);
  position:relative;
}

.input-text-wrap .submit-button:hover {
  background-color:#EDD8BF;
  color:black;
}

/* the drop-down menu */
.input-text-wrap ul {
  position:absolute;
  top:100%;
  right:-1px;
  left:-1px;
  z-index:99;
  background-color:white;
  border:1px solid black;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  display:none;
}

/* drop-down menu item */
.input-text-wrap li {
  line-height:26px;
  padding:0 10px;
  cursor:pointer;
}

.input-text-wrap li:hover {
  background-color:#E0CBB2;
  color:black;
}

/* the down arrow before the submit button */
.input-text-wrap .down-arrow {
  display:block;
  width:20px;
  height:30px;
  position:absolute;
  top:0;
  right:70px;
  cursor:pointer;
}

.input-text-wrap .down-arrow:hover,
.input-text-wrap .down-arrow.active {
  background-color:white;
  -webkit-box-shadow:-1px 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:-1px 1px 2px rgba(0,0,0,.4);
  box-shadow:-1px 1px 2px rgba(0,0,0,.4);
  z-index:2;
}

.input-text-wrap .down-arrow:active,
.input-text-wrap .down-arrow.active {
  -webkit-box-shadow:-1px 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:-1px 1px 1px rgba(0,0,0,.2);
  box-shadow:-1px 1px 1px rgba(0,0,0,.2);
}

/* create the down-arrow triangle with pseudo-element and border hack */
.input-text-wrap .down-arrow:before {
  content:"";
  display:block;
  width:0;
  height:0;
  border:4px solid transparent;
  border-top-color:#666;
  position:absolute;
  top:14px;
  left:50%;
  margin-left:-4px;
}

jQuery

(function($) {

    var $inputWrap = $('.input-text-wrap'),
        $arrow = $inputWrap.find('.down-arrow');

    // Hide the dropdown menu when user click outside the `.input-text-wrap`, anywhere...
    $(document).on("click", function() {
        $inputWrap.find('ul').hide();
        $arrow.removeClass('active');
    });

    $arrow.on("click", function(e) {

        // Remove all the `focused` class and hide all visible drop-down menu
        $inputWrap.removeClass('focused').find('ul:visible').hide();
        // Remove al the `active` down arrow
        $arrow.removeClass('active');

        // Toggle the `.down-arrow` active class
        $(this).toggleClass('active')
            // Add a `focused` class to the `.input-text-wrap`
            .closest('.input-text-wrap').addClass('focused')
                // Show or hide the dropdown `ul`
                .find('ul').toggle()
                    // When we click the `li`...
                    .find('li').on("click", function() {
                        // Set the input text value to the clicked `li`'s text
                        $(this).closest('.input-text-wrap').find('.text-input').val($(this).text())
                            // and trigger the focus event to it
                            .trigger("focus");
                        // After that, hide the visible dropdown menu
                        $(this).parent().hide();
        });

        // Prevent event bubbling!
        e.stopPropagation();

    });

    // When the text input focused...
    $inputWrap.find('.text-input').on("focus", function() {
        // Add a `focused` class to the `.input-text-wrap`
        $(this).closest('.input-text-wrap').addClass('focused');
    // When the text input loses the focus...
    }).on("blur", function(e) {
        // Remove the `focused` class from `.input-text-wrap`
        $(this).closest('.input-text-wrap').removeClass('focused');
    });

})(jQuery);

Demo

Labels: Eksperimen, HTML, JavaScript, jQuery

Wednesday, January 23, 2013

JavaScript Seleksi Teks Otomatis

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.

Contoh Penggunaan

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]);

Demo JavaScript Demo jQuery

Contoh Lain: Membuat Fitur Seleksi Otomatis pada Tag PRE

Versi JavaScript Mentah

var pre = document.getElementsByTagName('pre');
for (var i = 0, len = pre.length; i < len; i++) {
    pre[i].onclick = function() {
        autoSelect(this);
    };
}

Lihat Demo

Versi jQuery

$('pre').on("click", function() {
    autoSelect(this);
});

Lihat Demo

Gambar: Google

Labels: Blogger, JavaScript, jQuery, Potongan

Monday, January 21, 2013

jQuery Carousel

HTML

<div class="carousel" id="carousel">
    <div class="carousel-inner">
        <img src="img/1.jjpg" alt="">
        <img src="img/2.jjpg" alt="">
        <img src="img/3.jjpg" alt="">
        <img src="img/4.jjpg" alt="">
    </div>
</div>
<nav class="carousel-nav" id="carousel-nav">
    <button data-direction="prev">Prev</button>
    <button data-direction="next">Next</button>
</nav>

CSS

.carousel {
  width:400px;
  overflow:auto;
  margin:0 auto .7em;
}

.carousel,
.carousel-inner {
  height:100px;
}

.carousel img {
  width:100px;
  height:100px;
  background-color:#ccc;
  display:block;
  float:left;
  margin:0 5px;
}

.carousel-nav {
  text-align:center;
}

.carousel-nav button {
  cursor:pointer;
}

jQuery

(function($) {
    var $carousel = $('#carousel'),
        $container = $carousel.find('.carousel-inner'),
        $nav = $('#carousel-nav'),
        $img = $container.find('img'),
        totalWidth = ($img.outerWidth()+parseInt($img.css('margin-left'),10)+parseInt($img.css('margin-right'),10))*$img.length;
    $carousel.css('overflow', 'hidden'); // Singkirkan scroll bar jika JavaScript aktif
    $container.css('width', totalWidth); // Set lebar `.carousel-inner` selebar => [jumlah gambar + lebar gambar + margin kiri dan kanan gambar]
    $nav.find('button').on("click", function() {
        // Animasikan properti `scrollLeft` ke kiri/ke kanan,
        // berdasarkan nilai atribut `data-direction` pada tombol yang diklik
        var dir = $(this).data('direction');
        $carousel.stop().animate({
            scrollLeft: (dir == "next") ? "+=100px" : "-=100px"
        }, 200);
    });
})(jQuery);

Demo

Labels: Gambar, JavaScript, jQuery, Potongan

Saturday, January 19, 2013

Mengimplementasikan AJAX pada Blogger

Mungkin beberapa dari kalian ada yang pernah memperhatikan/membaca komentar-komentar lama Saya atau perkataan lama Saya yang pernah Saya ucapkan, yang menyatakan bahwa kita tidak bisa mengimplementasikan AJAX pada blogspot. Saya ingin menyangkal semua perkataan Saya itu dan ingin mengatakan bahwa AJAX memungkinkan untuk diimplementasikan pada blogspot!

Untuk membuktikannya, coba Anda klik tombol di bawah ini:

Klik Untuk Memuat Halaman dengan AJAX

Tombol di atas cuma contoh awal, jadi hasil yang termuat jelas akan tampak sangat berantakan. Untuk membaca artikel ini lagi, mohon muat ulang halaman ini setelah Anda melihat efek yang terjadi.

Seperti yang kita semua tahu bahwa AJAX hanya berlaku untuk domain lokal, itu memang benar. Selama ini sepertinya Saya terlalu paranoid atau bahkan skeptis mengenai kekuatan blogspot yang sangat terbatas sehingga Saya tidak menyadari bahwa apapun bentuknya, asalkan URL yang digunakan untuk memuat adalah URL lokal, maka bisa dipastikan kita bisa mengimplementasikan AJAX pada platform tersebut. Karena bisa atau tidaknya kita di dalam mengimplementasikan AJAX sama sekali tidak ditentukan oleh kemampuan ~~CMS~~ Blogger bukan merupakan CMS, melainkan blog service.

Berikut ini adalah kode yang Saya gunakan:

HTML

<div id="loading-text"></div>
<div id="container"></div>
<a id="ajax-button-example" href="/search/label/jQuery?max-results=10">Klik Untuk Memuat Halaman dengan AJAX</a>

jQuery

$('#ajax-button-example').on("click", function() {
    var url = this.href;
    $('#loading-text').html('<span>Memuat halaman...</span>');
    $('#container').load(url, function() {
        $('#loading-text').html('');
    });
    return false;
});

Hanya penerapan jQuery .load() yang sangat mendasar. Jika sebelumnya Anda sudah pernah belajar mengenai seluk-beluk jQuery AJAX pasti Anda akan dengan mudah mengerti mengenai ini.

Ke depannya, mungkin akan ada beberapa tutorial/info mengenai pengimplementasian AJAX pada platform blogspot. Tapi Saya masih butuh waktu untuk memantapkannya. Begitulah.

Labels: JavaScript, jQuery, Lanjutan, Masalah

Friday, January 18, 2013

Efek Animasi Loading dengan Event `beforeunload`

Sebelumnya Saya pernah menuliskan cara membuat efek animasi loading pada saat halaman berpindah dengan cara menyeleksi semua tautan internal untuk memicu tampilnya overlay/tabir animasi saat tautan tersebut diklik. Tapi metode ini memiliki dua kelemahan:

Pertama, menyeleksi semua tautan internal dengan selektor atribut sebenarnya tidak begitu baik karena selektor atribut itu performanya buruk.

Ke dua, jika kita mengeklik tautan internal yang memiliki atribut target='_blank' di dalamnya, tautan tersebut akan terbuka di tab baru. Tapi efek animasi memuat halaman justru terpicu pada halaman sebelumnya, padahal kita tidak menghendaki itu ⇒ #c8644667892985451185. Saya sudah berhasil mengakalinya dengan cara memfilter tautan internal tersebut dengan cara mengecualikan tautan yang memiliki atribut target='_blank' menggunakan jQuery .filter():

$internalLinks.filter(':not([target="_blank"])').click(function() {});

Tapi mulai sekarang lebih baik kita lupakan cara lama tersebut. Kita bisa menciptakan efek animasi perpindahan halaman dengan aman menggunakan event beforeunload.

beforeunload adalah event yang akan terpicu saat sebuah halaman mulai berpindah karena seorang pengguna mengeklik tautan tertentu (atau sekedar memuat ulang halaman dengan cara mengeklik tombol Reload pada peramban) yang memicu mereka untuk keluar dari halaman tersebut:

$(window).on("beforeunload", function() {
    // Menampilkan tabir animasi dengan efek `.fadeIn()`...
});

Kali ini tabir animasi ditampilkan bukan karena terpicu oleh aksi klik pada tautan melainkan karena aksi halaman yang mulai berpindah. Sehingga kita bisa merancang ulang tabir animasi perpindahan halaman dengan cara ini:

Anggaplah jQuery sudah terpasang di blog kita. Pertama, masuklah ke halaman editor HTML template, kemudian letakkan kode CSS ini di atas ]]></b:skin> atau </style>:

#page-loader {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:9999;
  background-color:black;
  color:white;
  padding:1em 1.2em;
  display:none;
}

Kemudian sisipkan kode ini di atas </body>:

<script>
//<![CDATA[
// Menyisipkan markup tabir animasi
$(document.body).append('<div id="page-loader">Loading...</div>');
// Saat halaman terpicu untuk berpindah/keluar menuju halaman lain...
$(window).on("beforeunload", function() {
    // ... tampilkan tabir animasi dengan efek `.fadeIn()`
    $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Klik Simpan Template.

Demo

Lihat Demo

Labels: Dasar, JavaScript, jQuery

Saturday, December 29, 2012

Meringkas Efek Animasi Beruntun/Berkelanjutan

Saat kita membuat efek animasi beruntun/berkelanjutan menggunakan .animate(), biasanya kita akan melakukan ini:

$('div').animate({
    width:100,
    height:30
}, 1000).animate({
    marginTop:200,
    marginLeft:100
}, 1000).animate({
    fontSize:30,
    padding:40
}, 1000).animate({
    borderWidth:10
}, 1000).animate({
    marginTop:0
}, 1000); // dan seterusnya...

Implementasi di atas memang bekerja dan sama sekali tidak salah. Lihat hasilnya di sini:

Lihat Demo

Tapi sadarkah Anda bahwa properti-properti animasi yang tertulis di dalam .animate() pada dasarnya hanyalah objek:

Dan kita bisa mempopulasikan itu ke dalam sebuah array:

var anim = [
    { width:100, height:30 },
    { marginTop:200, marginLeft:100 },
    { fontSize:30, padding:40 },
    { borderWidth:10 },
    { marginTop:0 }
];

Ini memungkinkan kita untuk menerapkan properti-properti animasi tersebut satu per satu tanpa harus mendeklarasikan .animate() berulang kali:

var anim = [
    { width:100, height:30 },
    { marginTop:200, marginLeft:100 },
    { fontSize:30, padding:40 },
    { borderWidth:10 },
    { marginTop:0 }
];

$.each(anim, function(i) {
    $('div').animate(anim[i], 1000);
});

Atau cukup gunakan cara lama yang biasa digunakan untuk menangani array saat kita menggunakan JavaScript mentah seperti ini:

var anim = [
    { width:100, height:30 },
    { marginTop:200, marginLeft:100 },
    { fontSize:30, padding:40 },
    { borderWidth:10 },
    { marginTop:0 }
];

for (var i = 0, len = anim.length; i < len; i++) {
    $('div').animate(anim[i], 1000);
}

Lihat Demo

Performa?

Saya tidak tahu apakah cara ini bisa mempercepat kerja animasi atau tidak (Saya malas mengetesnya). Tapi Saya pikir cara ini bisa mempermudah kita di dalam membangun deret animasi berlebih-lebihan tanpa harus mendeklarasikan jQuery .animate() secara berlebihan. Selain itu, dengan cara mempopulasikan properti animasi di dalam array, maka ini memungkinkan kita untuk menciptakan gerak animasi yang berbeda-beda pada elemen yang berbeda dengan cara meletakkan array animasi ke dalam atribut elemen. Misalnya seperti ini:

<div data-animation="[{top:30},{left:50},{fontSize:30,borderWidth:10},{padding:30}]"></div>

Setelah itu, cukup gunakan method manipulasi atribut untuk mendapatkan nilai atribut pada masing-masing elemen. Konversi nilainya agar menjadi array (bukan string) dengan eval():

$('div').each(function() {
    var anim = eval($(this).data('animation')), // Mengambil nilai atribut `data-animation` dari elemen
        $div = $(this);
    $.each(anim, function(i) {
        $div.animate(anim[i], 1000);
    });
});

Lihat Demo

Referensi: SO - jQuery .animate() with Direction That Created from an Array of Objects, But

Labels: JavaScript, jQuery, Lanjutan

Sunday, December 16, 2012

Mendapatkan Node Komentar HTML dengan jQuery

Kode ini memungkinkan kita untuk mengambil node komentar HTML yang kemudian bisa kita gunakan sebagai elemen HTML biasa. Sehingga jika komentar HTML adalah berupa elemen HTML yang mengandung permintaan HTTP, maka kita bisa memuat elemen tersebut secara tidak langsung dengan cara menuliskannya sebagai komentar HTML terlebih dahulu:

$('#fake-elem-container').contents().filter(function() {
    return this.nodeType == 8;
}).each(function(i, e) {
    $('#container').html(e.nodeValue);
});

#fake-elem-container adalah elemen yang akan dijadikan sebagai penampung komentar HTML, sedangkan #container akan menjadi penampung node komentar yang sudah berubah menjadi elemen HTML:

<div id="fake-elem-container">
    <!-- <img alt="" src="gambar.jpg"> -->
</div>

<div id="container"></div>

Jika berhasil diterapkan, maka #container akan memuat gambar yang dibentuk dari komentar HTML di dalam elemen #fake-elem-container

Demo:

Labels: HTML, JavaScript, jQuery, Potongan

Tuesday, December 11, 2012

Plugin jQuery Custom Select Box

jQuery Custom SelectBox Plugin — Plugin jQuery **Custom SelectBox**

Ini adalah plugin jQuery yang Saya buat berdasarkan konsep selectbox kustom yang pernah Saya temukan dan Saya catat di sini. Fungsinya adalah untuk mengubah tampilan selectbox biasa menjadi selectbox yang mudah dimodifikasi tampilannya. Saya suka dengan metodenya yang sangat sederhana untuk mengubah tampilan selectbox asli tanpa harus menghilangkan elemen aslinya dan hanya membungkusnya dengan elemen baru, sehingga kita bisa menyesuaikan dimensi selectbox palsu berdasarkan dimensi selectbox yang asli tanpa menggunakan perhitungan JavaScript yang rumit. Di sini Saya hanya memanfaatkan dimensi selectbox asli untuk mengubah ukuran lebar elemen inline-block:

Lihat Demo Unduh Plugin Unduh Plugin (Minified) Unduh CSS Unduh CSS (Minified)

Penggunaan

Letakkan CSS sebelum jQuery dan plugin setelah jQuery, kemudian aktifkan .customSelectBox() pada elemen <select> yang dikehendaki. Setelah itu Anda bisa menjalankan perintah-perintah lain yang diperlukan terhadap elemen selectbox asli melalui event .change():

<link href="css/jquery.select.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.select.min.js"></script>
<script>
$(document).ready(function() {
    $('select').customSelectBox().change(function() {
        // Lakukan sesuatu di sini seperti halnya saat kita melakukan sesuatu ...
        // ... dengan event `change` jQuery pada elemen selectbox
        var val = this.value;
        alert(val);
    });
});
</script>

Itu saja.

Konfigurasi Lanjutan

Konfigurasi lanjutan ini hanya berputar di sekitar modifikasi kelas. Tidak ada efek-efek khusus tambahan pada plugin ini:

$('select').customSelectBox({
    selectboxClass: 'styled-select',
    buttonClass: 'curr',
    selectedClass: 'selected',
    disabledClass: 'disabled',
    focusedClass: 'focused'
}).change(function() {});

Pilihan Modifikasi Kelas
Opsi	Keterangan
selectboxClass	Nama kelas pembungkus luar
buttonClass	Nama kelas tombol pemicu drop down menu (penayang nilai opsi terseleksi)
selectedClass	Nama kelas opsi terseleksi (elemen `<option>` dengan atribut `selected="true"`)
disabledClass	Nama kelas opsi mati (elemen `<option>` dengan atribut `disabled="true"`)
focusedClass	Nama kelas tombol selectbox terfokus (saat diklik)

Keterangan dan gambaran markup HTML tergenerasi selengkapnya bisa Anda lihat pada halaman demo

Hanya untuk proyek skala kecil. Tidak bekerja pada selectbox dengan optgroup.

Labels: JavaScript, jQuery, Menengah

Saturday, November 17, 2012

Kotak Penelusuran Blogger dengan AJAX jQuery

Ajax Search Form with jQuery — Kotak Penelusuran Blogger dengan Ajax jQuery

Beberapa waktu yang lalu Saya pernah menuliskan cara menampilkan hasil penelusuran dengan JSON Blogger tanpa harus berpindah dari halaman awal menuju halaman hasil penelusuran dengan JavaScript (Anda bisa membacanya di sini).

Melalui jQuery $.ajax() kita bisa meniadakan penyisipan script callback dan langsung memanggil JSON dengan cara seperti ini:

$('#search-form').on("submit", function() {
    $.ajax({
        url: '/feeds/posts/summary?alt=json-in-script&q=KATA_KUNCI',
        type: 'get',
        dataType: 'jsonp',
        success: function(json) {
            …
        }
    });
});

Sehingga jika dijabarkan akan menjadi seperti ini:

HTML Formulir

<form action="/search" id="ajax-search-form">
  <input type="text" name="q">
  <input type="submit" value="Search">
</form>

jQuery

(function($) {
    var $form = $('#ajax-search-form'),
        $input = $form.find(':text');
    $form.append('<div id="search-result"></div>');
    var $result_container = $('#search-result');
    $form.on("submit", function() {
        var keyword = $input.val();
        $result_container.show().html('Loading...');
        $.ajax({
            url: 'http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
            type: 'get',
            dataType: 'jsonp',
            success: function(json) {
                var entry = json.feed.entry,
                    link, skeleton = "";
                if (typeof entry !== "undefined") {
                    skeleton = '<h4>Search results for keyword &quot;' + keyword + '&quot;</h4>';
                    skeleton += '<a class="close" href="/">&times;</a><ol>';
                    for (var i = 0; i < entry.length; i++) {
                        for (var j = 0; j < entry[i].link.length; j++) {
                            if (entry[i].link[j].rel == "alternate") {
                                link = entry[i].link[j].href;
                            }
                        }
                        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
                    }
                    skeleton += '</ol>';
                    $result_container.html(skeleton);
                } else {
                    $result_container.html('<a class="close" href="/">&times;</a><strong>No result!</strong>');
                }
            },
            error: function() {
                $result_container.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>');
            }
        });
        return false;
    });
    $form.on("click", ".close", function() {
        $result_container.fadeOut();
        return false;
    });
})(jQuery);

Lihat Demo

Cara Kerja

Pertama-tama kita tangkap beberapa elemen penting yaitu formulir pencarian dan elemen input kata kunci pencarian:

var $form = $('#ajax-search-form'), // Mendapatkan elemen formulir
    $input = $form.find(':text'); // Mendapatkan elemen input bertipe teks (penampung kata kunci pencarian)

Sisipkan sebuah elemen HTML secara tidak langsung sebagai kontainer hasil pencaran:

$form.append('<div id="search-result"></div>');
var $result_container = $('#search-result');

Setelah itu kita berlakukan event .submit() atau .on("submit") pada formulir untuk kemudian kita bisa langsung memproses data JSON yang akan ditransfer pada saat yang bersamaan ketika kita menekan tombol Enter pada papan ketik atau mengeklik tombol penelusuran di dalam formulir:

$form.on("submit", function() {
    $.ajax(url, type, dataType, success, error); // Dapatkan data dan proses data di sini...
    return false; // <= Ini digunakan untuk mencegah formulir membawa kita menuju halaman hasil penelusuran saat kita men-submit kata kunci pencarian
});

Pengambilan data JSON dilakukan oleh jQuery $.ajax(), sehingga kita tidak perlu menyisipkan skrip callback ke dalam area <head> seperti dalam metode JavaScript mentah pada umumnya:

$.ajax({
    url: 'http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
    type: 'get',
    dataType: 'jsonp',
    success: function(json) {
        var entry = json.feed.entry,
            link, skeleton = "";
        if (typeof entry !== "undefined") {
            skeleton = '<h4>Search results for keyword &quot;' + keyword + '&quot;</h4>';
            skeleton += '<a class="close" href="/">&times;</a><ol>';
            for (var i = 0; i < entry.length; i++) {
                for (var j = 0; j < entry[i].link.length; j++) {
                    if (entry[i].link[j].rel == "alternate") {
                        link = entry[i].link[j].href;
                    }
                }
                skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
            }
            skeleton += '</ol>';
            $result_container.html(skeleton);
        } else {
            $result_container.html('<a class="close" href="/">&times;</a><strong>No result!</strong>');
        }
    },
    error: function() {
        $result_container.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>');
    }
});

keyword adalah variabel. Nilainya diambil dari elemen input teks:

var keyword = $input.val();
// `/feeds/posts/summary?alt=json-in-script&q=keyword&max-results=9999`

Integrasi Widget ke Blogger

Widget ini hanya akan bekerja jika blog Anda sudah dilengkapi dengan jQuery.

Pertama-tama masuk ke halaman Tata Letak, kemudian tambahkan sebuah elemen halaman HTML/JavaScript. Salin kode ini dan letakkan di dalam formulirnya:

<style scoped="scoped">
#ajax-search-form {
  position:relative;
  font:normal normal 13px/normal Helmet,FreeSans,Sans-Serif;
}
#ajax-search-form a {
  color:#741F27;
  text-decoration:none;
}
#ajax-search-form input {
  border:1px solid #ccc;
  border-top-color:#999;
  background-color:white;
  font:inherit;
  color:black;
  margin:0 0;
  padding:5px 5px;
  width:180px;
}
#ajax-search-form input::-moz-focus-inner {
  margin:0;
  padding:0;
  border:none;
  outline:none;
}
#ajax-search-form input[type="submit"] {
  width:auto;
  background-color:#084670;
  border-color:transparent;
  color:#B4D8F0;
  font-weight:bold;
  cursor:pointer;
  padding-left:7px;
  padding-right:7px;
}
#ajax-search-form input[type="submit"]:hover,
#ajax-search-form input[type="submit"]:focus {background-color:#083E5F}
#search-result {
  border:1px solid #bbb;
  background-color:white;
  padding:10px 15px;
  margin:2px 0;
  width:auto;
  height:auto;
  position:absolute;
  top:100%;
  left:0;
  z-index:99;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  display:none;
}
#search-result ol,
#search-result li,
#search-result h4 {
  margin:0;
  padding:0;
}
#search-result h4,
#search-result strong {
  display:block;
  margin:0 30px 10px 0;
}
#search-result ol {margin:0 0 10px 28px}
#search-result ol a:hover {text-decoration:underline}
#search-result .close {
  display:block;
  position:absolute;
  top:6px;
  right:10px;
  line-height:normal;
  color:#17950F;
}
#search-result strong {color:#B75252}
</style>
<form action="/search" id="ajax-search-form">
  <input type="text" name="q"/>
  <input type="submit" value="Search"/>
</form>
<script>
(function($) {

    var $form = $('#ajax-search-form'),
        $input = $form.find(':text');
    
    // Append a search result container to the search form
    $form.append('<div id="search-result"></div>');
    var $result_container = $('#search-result');
    
    // When the keyword is submitted…
    $form.on("submit", function() {

        // Get the input value
        var keyword = $input.val();

        // Show the search result container and insert a `Loading...` text
        $result_container.show().html('Loading...');

        // Get the blog JSON via $.ajax() to show the search result
        // The URL format: http://blog_name.blogspot.com/feeds/posts/summary?alt=json-in-script&q={THE_KEYWORD}&max-results=9999
        $.ajax({
            url: 'http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
            type: 'get',
            dataType: 'jsonp',

            // If success, grab the search result list…
            success: function(json) {
                var entry = json.feed.entry,
                    link, skeleton = "";
                if (typeof entry !== "undefined") {
                    skeleton = '<h4>Search results for keyword &quot;' + keyword + '&quot;</h4>';
                    skeleton += '<a class="close" href="/">&times;</a><ol>';
                    for (var i = 0; i < entry.length; i++) {
                        for (var j = 0; j < entry[i].link.length; j++) {
                            if (entry[i].link[j].rel == "alternate") {
                                link = entry[i].link[j].href;
                            }
                        }
                        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
                    }
                    skeleton += '</ol>';
                    $result_container.html(skeleton);
                } else {
                    // If the JSON is empty … (entry === undefined)
                    // Show the `not found` or `no result` message
                    $result_container.html('<a class="close" href="/">&times;</a><strong>No result!</strong>');
                }
            },
            error: function() {
                // If error, show an error message
                $result_container.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>');
            }
        });
        return false;
    });

    // Fade out the search result container if the close button is clicked
    $form.on("click", ".close", function() {
        $result_container.fadeOut();
        return false;
    });

})(jQuery);
</script>

Ganti kode yang Saya beri tanda dengan URL blog Anda kemudian klik Simpan Widget.

Lihat Demo Lihat Demo: Dengan Navigasi

Labels: Blogger, JavaScript, jQuery, JSON, Lanjutan, Widget

DTE :]

Monday, April 11, 2016

Bagaimana Sebenarnya jQuery Bekerja

Saturday, November 29, 2014

Beberapa Tip untuk Para Pengguna JQuery Tingkat Lanjut

Kode Pintasan untuk ‘DOM Ready’

Metode Berantai

Menyeleksi Elemen <body> dan <html>

Mengambil/Mengeset Atribut Elemen dengan JavaScript Mentah

Menerapkan Metode JavaScript Mentah kepada Selektor jQuery

Fungsi Anonim untuk Menggantikan .each()

Mengeset Event dan Mengeksekusinya Secara Bersamaan

Jalan Pintas untuk Efek Toggle

Efek Tabulasi

Efek Animasi Beruntun

Efek Berdenyut

Sunday, August 4, 2013

JQuery Find and Highlight Text

HTML, CSS & jQuery

Wednesday, July 10, 2013

JavaScript/jQuery · Cek Jika Latar Gambar Telah Termuat

JavaScript Mentah

jQuery

Monday, June 17, 2013

Cross Browser HTML5 Placeholder

jQuery

CSS

Thursday, May 30, 2013

Aksesibilitas pada Soal Pilihan Ganda Online

Selalu Ingat untuk Menambahkan Elemen Label

Kursor

Efek Timbal Balik

Demonstrasi

HTML

CSS

jQuery

Kesimpulan

Friday, May 3, 2013

Jalan Pintas untuk Menangani Perintah-Perintah JQuery di dalam Peraturan Kondisi

Contoh Penerapan

Sebelum

Sesudah

Monday, April 22, 2013

Membuat Navigasi Halaman AJAX pada Blogger

Menerapkan AJAX pada Navigasi Halaman

Infinite Scroll (?)

Sunday, March 10, 2013

Mendapatkan Tinggi dan Lebar Layar Monitor

Versi jQuery

Versi JavaScript Murni

Sunday, February 24, 2013

AJAX jQuery · Memuat Beberapa Bagian Halaman Sekaligus dalam Satu Kali Permintaan

Lebih Efisien: Gunakan $.get()

Demo?

Catatan dan Tambahan

Wednesday, February 20, 2013

Membangun Layout Paralaks dengan JQuery

Membuat Latar Paralaks

Navigasi Paralaks

Efek Paralaks

Langkah Akhir: Menambahkan Konten

HTML

CSS

Produk Final

HTML

CSS

jQuery

Demo

Wednesday, January 30, 2013

Input Teks dengan Pelengkap Sugesti

HTML

CSS

jQuery

Demo

Wednesday, January 23, 2013

JavaScript Seleksi Teks Otomatis

Contoh Penggunaan

Contoh Lain: Membuat Fitur Seleksi Otomatis pada Tag PRE

Versi JavaScript Mentah

Versi jQuery

Menyeleksi Elemen `<body>` dan `<html>`

Fungsi Anonim untuk Menggantikan `.each()`