Web Development Blog Shannenpio

The jQuery UI library provides effects, utilities, and themeable widgets that can add interactivity to your webpage. The Dialog widget is a part of jQuery UI; it allows you to display content inside a floating window which has a title bar, content area, button bar, drag handle and close button; and it can be moved, resized and closed. The following examples demonstrate some advance uses of the dialog widget. Modal Dialog with Buttons Open Dialog on Click Hide the Close Button/Title Bar Change Dialog Position Load Content via AJAX Size to Fit Content Read more...

Can you guess which datepicker is this? It is the jQuery UI datepicker tweaked for jQuery Mobile! I have written a small patch that allows you to use the jQuery UI datepicker with jQuery Mobile 1.4.x. To use the script: Include jQuery UI datepicker javascript after jQuery Mobile javascript files. You do not need the whole package; just grab the jquery.ui.datepicker.js file from from jQuery UI ZIP downloads. Include the monkey patch script; it basically replaces jQuery UI CSS classes with jQuery Mobile CSS classes in datepicker HTML. Add CSS rules to fine tune the appearance of datepicker. Call $(selector).datepicker() method on pagebeforecreate or pagecreate . Demo View source Open in new window

The jQuery UI Autocomplete widget enables users to quickly find and select from a list of values as they type. If you find the jQuery UI Autocomplete demos and documentation too daunting, here are some examples with explanation to get you started. Using Label-Value Pairs Add CSS Class to the Dropdown Load Data via AJAX Highlight Matched Text Custom HTML in Dropdown A note before you begin: the autocomplete data should look like one of the following regardless of the source option: An array of strings e.g. ['Option 1', 'Option 2'] An array of objects; each object having label and/or value (and additional) properties e.g. [{label: 'Option 1'}, {label: 'Option 2'}] [{value: 'Value 1'}, {value: 'Value 2'}] [{label: 'Option 1', value: 1}, {label: 'Option 2', value: 2}] If necessary, the widget normalizes the data behind the scenes to match the last format in the above mentioned list. Using Label-Value ...

The jQuery UI library provides effects, utilities, and themeable widgets that can add interactivity to your webpage. The Datepicker widget is a part of jQuery UI; it allows you to select a date from a popup/inline calendar. The following examples demonstrate some advance uses of the datepicker widget. Parse and Format Dates Set Date on Page Load Disable Specific Dates Style (or Highlight) Specific Dates Internationalization and Localization Update Datepicker Using AJAX Using Datepicker to Select Date Range Parse and Format Dates Datepicker provides two utility functions for converting a date string into JavaScript Date and vice-versa: $.datepicker.parseDate( format, value[, settings] ) $.datepicker.formatDate( format, date[, settings] ) The following example uses the onSelect event to parse and format the selected date in specific formats. The selected date is converted to a date object for calculation; then converted back to another date format: View source Ope...

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($) { v...

var $ul = $('#blog-roll'), roll = function() { $ul.find('li').first().slideUp('slow', function() { $(this).appendTo($(this).parent()).fadeIn(); }); }, anim = setInterval(roll, 3000); // Pause on hover... $ul.hover(function() { clearInterval(anim); }, function() { setInterval(roll, 3000); }); Demo

Pembaharuan 26 Mei 2013: Terjadi perubahan besar pada penulisan variabel-variabel di dalam widget ini. Saya terpaksa melakukannya demi pengembangan dan perbaikan widget yang lebih leluasa ke depannya agar tidak mengganggu para pemakai widget ini. Bagi Anda yang sudah memakai widget ini sebelum tanggal 26 Mei 2013 , Anda akan mendapatkan teks peringatan bahwa widget Anda harus segera diperbaharui. Perubahan fitur: (1) Opsi showThumbnails ditiadakan (2) Menambahkan fitur Infinite Scroll (3) Mengganti parameter indeks feed dari window.location.search menjadi window.location.hash dengan bantuan event hashchange , sehingga pengguna tidak perlu memuat ulang halaman secara keseluruhan hanya untuk mengubah window.location.search pada address bar . Sebelum ini Saya telah membuat widget Galleria versi pertama , kali ini Saya membuat versi yang ke dua dengan dua macam pilihan layout dan konfigurasi yang lebih lengkap. Masalah besar yang terjadi pada versi pertama adalah dia menampilkan ...

Menjawab permintaan dari It's a Hardlife , Saya mencoba untuk memodifikasi JQuery Carousel yang sederhana karena slideshow versi Agile Carousel itu terlalu rumit. Saya mengambil TinyCarousel sebagai bahan utama, yang pada awalnya hanya berupa slideshow gambar biasa untuk dimodifikasi lagi sesuai dengan tipografi slideshow Agile Carousel sehingga setiap slide menjadi lebih kaya akan konten: Lihat Demo Tahap 1: Mengedit Template Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan : Mengedit HTML Temukan kode ini: ]]></b:skin> Salin kode di bawah ini, kemudian letakkan di atasnya: /** * Custom TinyCarousel by Taufik Nurrohman * Visit:http://hompimpaalaihumgambreng.blogspot.com */ #tinycarousel { width:532px; /* Lebar Slideshow */ height:1%; overflow:hidden; font:normal 10px/12px Arial,Sans-Serif; color:#666; margin:30px auto; } #tinycarousel .viewport { height:336px; overflow:hidden; position:relativ...

Membuat konverter HTML dengan JavaScript atau JQuery Versi JavaScript Mentah Konverter HTML dengan JavaScript mentah bisa dibuat dengan mudah. Tambahkan sebuah elemen halaman HTML/JavaScript , kemudian salin kode ini dan letakkan di dalam formulirnya: <style type="text/css"> #codes { border:1px solid #666; width:98%; height:200px; margin:5px auto 10px; display:block; } .button-group { margin:0 auto; text-align:center; } </style> <textarea id="codes"placeholder="Tulis/paste kode di sini lalu klik 'Konversi'"></textarea> <div class="button-group"> <button onclick="cdConvert();">Konversi</button> <button onclick="cdClear();">Bersihkan</button> </div> <script type="text/javascript"> function cdClear() { var wtarea = document.getElementById('codes'); wtarea.value = ''; } function cdConvert() { v...

A letter from Arhan Tubar: Hello I like very much the automatic slideshow tutorial and I was wondering if you can help me with something. I would like to make the slideshow from this link: http://tympanus.net/codrops/2012/02/06/3d-gallery-with-css3-and-jquery/ ...to be automatic like in your tutorials. Can you help me with this request? Thank you in advance. My answer is, “Yes, why not. This is just about inserting images into 3D Gallery markup. A special post for you. Sorry about my bad English” :p View Demo Step 1: Edit Your Template First go to the Template menu and then click Edit HTML and click Continue / Proceed : Edit HTML Find this code: ]]></b:skin> Copy the code below and paste it above ]]></b:skin> : /* * Auto Content 4 3D Gallery by Taufik Nurrohman * Visit: http://hompimpaalaihumgambreng.blogspot.com */ .dg-container { width:100%; height:450px; position:relative; margin:0 auto; } .dg-wrapper { width:370px; height:300px; margi...

Saya sempat kesulitan saat mencoba mengintegrasikan template JSON Blogger dengan JQuery AnythingSlider . Pada dasarnya masalahnya bukan mengarah kepada kesulitan di dalam membangun slideshow , tetapi lebih kepada masalah opsi-opsi dalam plugin ini. Beberapa opsi Saya rasa tidak begitu penting jika kita berhubungan dengan Blogger yang sederhana namun sangat cepat. Jadi, Saya telah meringkas beberapa opsinya untuk mempermudah konfigurasi: Lihat Demo Tahap 1: Mengedit Template Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan : Mengedit HTML Temukan kode ini: ]]></b:skin> Salin kode di bawah ini, kemudian letakkan di atasnya: /* ============================================================================ AnythingSlider v1.7+ Default (base) theme By Chris Coyier: http://css-tricks.com with major improvements by Doug Neiner: http://pixelgraphics.us/ based on work by Remy Sharp: http://jqueryfordesigners.com/ W...