display:inline » jQuery http://displayinline.net Update seputar web development—HTML, CSS, Javascript, Wordpress, etc. Tue, 31 Aug 2010 14:11:28 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Membuat ” share box ” cantik http://displayinline.net/javascript/membuat-share-box-cantik/ http://displayinline.net/javascript/membuat-share-box-cantik/#comments Fri, 24 Jul 2009 02:19:25 +0000 Kusaeni http://displayinline.net/?p=176 Janko dari JankoWarpSpeed membuat sebuah tutorial keren untuk membuat share box yang cantik hanya dengan mempergunakan CSS dan jQuery. Tanpa Flash dan support IE 6+ .

Fancy share box

Kunjungi dan baca tutorialnya disini , atau kamu juga bisa melihat dulu hasil implementasi nya disana.

Hai Textpatternian, Patrick di TxP Tips juga sudah membuat tutorial untuk menerapkannya ke TxP.

Mudah dan indah. Mau ???

Related posts

]]> http://displayinline.net/javascript/membuat-share-box-cantik/feed/ 5 Membuat tooltips dengan BeautyTips http://displayinline.net/javascript/membuat-tooltips-dengan-beautytips/ http://displayinline.net/javascript/membuat-tooltips-dengan-beautytips/#comments Sun, 01 Mar 2009 15:42:40 +0000 Deny Sri Supriyono http://displayinline.net/?p=146 BeautyTips adalah sebuah jQuery plugin untuk menampilkan tooltips dengan menggunakan canvas.

Contoh salah satu tampilan tooltips dengan BeautyTips

Contoh salah satu tampilan tooltips dengan BeautyTips

Tooltips bisa ditampilkan dengan beragam cara dan sangat mudah untuk dimodifikasi.

Canvas element yang diperlukan oleh BeautyTips sudah didukung oleh browser modern seperti Firefox, Safari, Chrome dan Opera. Sedangkan untuk Internet Explorer, dibutuhkan ExplorerCanvas untuk mendukung penggunaan canvas.

Lihat halaman demo untuk melihat banyak ragam contoh tampilan tooltips yang bisa dibuat dengan menggunakan BeautyTips.

Related posts

]]> http://displayinline.net/javascript/membuat-tooltips-dengan-beautytips/feed/ 0 Membuat Slideshow dengan CrossSlide http://displayinline.net/javascript/membuat-slideshow-dengan-crossslide/ http://displayinline.net/javascript/membuat-slideshow-dengan-crossslide/#comments Wed, 07 Jan 2009 03:02:46 +0000 Deny Sri Supriyono http://displayinline.net/?p=125 CrossSlide adalah sebuah jQuery plugin yang bisa digunakan untuk membuat slideshow animasi.

Contoh Tampilan Slideshow dengan CrossSlide

Contoh Tampilan Slideshow dengan CrossSlide

Ada 3 macam animasi yang bisa digunakan untuk tampilan slideshow, yaitu:

  1. Slide + cross-fade
    Gambar bergerak dari bawah ke atas atau sebaliknya untuk kemudian memudar dan berganti dengan gambar berikutnya.
  2. Static cross-fade
    Gambar memudar untuk kemudian berganti dengan gambar berikutnya.
  3. Ken Burns effect
    Gambar bergerak, zoom dan memudar sesuai dengan point yang ditentukan.

Setelah mencobanya, animasi favorit saya adalah Ken Burns effect meskipun sepertinya memerlukan kerja CPU yang paling besar dibandingkan efek lainnya.

Dalam percobaan dengan Chrome, transisi antar gambar terlihat agak tersendat dengan menggunakan Ken Burns effect — sesuatu yang tidak terjadi dengan Firefox 3 dan IE6.

CrossSlide memiliki ukuran 11KB dengan lisensi GPL.

Related posts

]]> http://displayinline.net/javascript/membuat-slideshow-dengan-crossslide/feed/ 0 Tinggi elemen yang seragam dengan EqualHeights jQuery Plugin http://displayinline.net/javascript/tinggi-elemen-yang-seragam-dengan-equalheights-jquery-plugin/ http://displayinline.net/javascript/tinggi-elemen-yang-seragam-dengan-equalheights-jquery-plugin/#comments Tue, 06 Jan 2009 04:22:07 +0000 Deny Sri Supriyono http://displayinline.net/?p=123 EqualHeights adalah sebuah jQuery plugin yang bisa digunakan untuk membuat semua element dengan class tertentu memiliki tinggi yang sama.

Contoh hasil dengan Equal Height

Contoh hasil dengan Equal Height

Dengan plugin ini, kita juga bisa menentukan tinggi minimal dan maksimal dari element yang kita inginkan.

Ketika tinggi maksimal sudah tercapai tapi content membutuhkan space yang lebih dari tinggi maksimal — maka akan muncul scrollbar untuk elemen tersebut.

Halaman Demo Equal Height.

Related posts

]]> http://displayinline.net/javascript/tinggi-elemen-yang-seragam-dengan-equalheights-jquery-plugin/feed/ 0 Membuat Slideshow dengan s3Slider jQuery plugin http://displayinline.net/javascript/membuat-slideshow-dengan-s3slider-jquery-plugin/ http://displayinline.net/javascript/membuat-slideshow-dengan-s3slider-jquery-plugin/#comments Wed, 31 Dec 2008 09:08:40 +0000 Deny Sri Supriyono http://displayinline.net/?p=120 s3Slider adalah sebuah jQuery plugin untuk membuat slideshow.

Contoh tampilan s3Slider

Contoh tampilan s3Slider

Posisi caption bisa diatur untuk ditaruh di atas, bawah, kanan atau kiri.

Lama pergantian antar image juga bisa diatur oleh pengguna.

s3Slider boleh digunakan untuk semua project termasuk komersial.

Halaman demo s3slider.

Related posts

]]> http://displayinline.net/javascript/membuat-slideshow-dengan-s3slider-jquery-plugin/feed/ 1 Galleriffic: jQuery plugin untuk membuat photo gallery http://displayinline.net/javascript/galleriffic-jquery-plugin-untuk-membuat-photo-gallery/ http://displayinline.net/javascript/galleriffic-jquery-plugin-untuk-membuat-photo-gallery/#comments Thu, 27 Nov 2008 09:44:52 +0000 Deny Sri Supriyono http://displayinline.net/?p=85 Galleriffic adalah sebuah jQuery plugin untuk membuat photo gallery.

Gallerific cocok dipergunakan untuk gallery dengan jumlah photo yang sangat banyak.

Contoh penggunaan Gallerific

Contoh penggunaan Gallerific

Fiturnya:

  • Smart Image Preloading after the page is loaded
  • Thumbnail Navigation (with pagination)
  • Bookmark-friendly URLs
  • Slideshow (with auto-updating url bookmarks)
  • Image fade transitions
  • Optional download link for the original image
  • Flexible configuration
  • Graceful degradation when javascript is not available
  • Now supports multiple galleries per page (View Multiple Gallery Demo)

Related posts

]]> http://displayinline.net/javascript/galleriffic-jquery-plugin-untuk-membuat-photo-gallery/feed/ 0 prettyPhoto: Satu lagi clone lightbox dengan jQuery http://displayinline.net/javascript/prettyphoto-satu-lagi-clone-lightbox-dengan-jquery/ http://displayinline.net/javascript/prettyphoto-satu-lagi-clone-lightbox-dengan-jquery/#comments Wed, 19 Nov 2008 17:54:41 +0000 Deny Sri Supriyono http://displayinline.net/?p=76 prettyPhoto adalah sebuah clone dari lightbox yang menggunakan jQuery.

Contoh tampilan prettyPhoto

Contoh tampilan prettyPhoto

prettyPhoto bekerja dengan baik di semua browser dan bisa digunakan untuk menampilkan photo dan flash. Jika diinginkan, beberapa photo juga bisa ditampilkan sebagai gallery.

prettyPhoto boleh digunakan untuk semua project termasuk project komersial.

Related posts

]]> http://displayinline.net/javascript/prettyphoto-satu-lagi-clone-lightbox-dengan-jquery/feed/ 1 Membuat rounded corner dengan jQuery Corners http://displayinline.net/javascript/membuat-rounded-corner-dengan-jquery-corners/ http://displayinline.net/javascript/membuat-rounded-corner-dengan-jquery-corners/#comments Sun, 16 Nov 2008 21:12:31 +0000 Deny Sri Supriyono http://displayinline.net/?p=72 jQuery Corners adalah jQuery plugin yang bisa digunakan untuk membuat rounded corner tanpa perlu menggunakan image.

Sudut yang akan dibuat rounded dan radiusnya bisa diatur dengan mudah.

jQuery Corners juga bisa digunakan untuk form button dan berjalan dengan baik di semua browser utama termasuk iPhone.

Related posts

]]> http://displayinline.net/javascript/membuat-rounded-corner-dengan-jquery-corners/feed/ 2 13 script Carousel dengan jQuery, YUI, Prototype dan MooTools http://displayinline.net/javascript/13-script-carousel-dengan-jquery-yui-prototype-dan-mootools/ http://displayinline.net/javascript/13-script-carousel-dengan-jquery-yui-prototype-dan-mootools/#comments Tue, 11 Nov 2008 04:18:04 +0000 Deny Sri Supriyono http://displayinline.net/?p=34 Beberapa waktu lalu, saya mengembangkan sebuah situs yang ingin menampilkan beberapa produk yang dimiliki oleh sister site-nya. Produk yang akan ditampilkan lumayan jumlahnya sehingga membutuhkan space yang cukup besar.

Untuk mengurangi kebutuhan spacenya, ada 3 solusi yang terpikirkan yaitu dengan menggunakan iframe, div dengan scrollbar atau Carousel.

Akhirnya, diputuskan untuk menggunakan Carousel yang setelah diimplementasikan sangat mengurangi kebutuhan spacenya dibandingkan jika memuat kontennya tanpa Carousel.

Contoh Horizontal Carousel

Contoh Horizontal Carousel

Berikut ini daftar 13 script Carousel dengan 4 macam Javascript library yang sempat saya kumpulkan yang mungkin berguna suatu waktu.

jQuery

Yahoo! UI

Prototype + Scriptaculous

MooTools

Jika sudah menggunakan Javascript library versi terbaru, jangan lupa untuk mengecek kompabilitasnya terlebih dahulu karena beberapa script Carousel tidak diupdate secara berkelanjutan.

jCarousel yang akhirnya saya gunakan bisa berjalan baik dengan jQuery versi 1.2.6 meskipun di webnya diupdate terakhir dengan v.1.2.3.

Semoga bermanfaat dan mohon ditambahkan jika ada yang mengetahui script Carousel lainnya.

Related posts

]]> http://displayinline.net/javascript/13-script-carousel-dengan-jquery-yui-prototype-dan-mootools/feed/ 4 Scroll Follow: jQuery Plugin To Scoll Objects http://displayinline.net/javascript/scroll-follow-jquery-plugin-to-scoll-objects/ http://displayinline.net/javascript/scroll-follow-jquery-plugin-to-scoll-objects/#comments Mon, 20 Oct 2008 08:52:29 +0000 Deny Sri Supriyono http://displayinline.net/?p=33 Scroll Follow adalah jQuery plugin yang memungkinkan DOM object untuk ikut bergerak mengikuti halaman ketika pengguna menggulung layarnya.

Scroll Follow sudah dites di IE6, IE7, FF2, FF3, Safari 3, and Opera 9 — semua dalam versi Windows.

Requirements:

Related posts

]]> http://displayinline.net/javascript/scroll-follow-jquery-plugin-to-scoll-objects/feed/ 0 12 Solusi Javascript untuk Pengembangan Web Aplikasi http://displayinline.net/javascript/12-solusi-javascript-untuk-pengembangan-web-aplikasi/ http://displayinline.net/javascript/12-solusi-javascript-untuk-pengembangan-web-aplikasi/#comments Sun, 19 Oct 2008 05:07:03 +0000 Deny Sri Supriyono http://displayinline.net/?p=32 Noupe membuat daftar 12 solusi Javascript yang bisa digunakan dalam pengembangan aplikasi web.

Berikut listnya:

  1. Setting Equal Heights
  2. IE6 PNG Alpha Transperancy support
  3. Changing CSS Classes in JavaScript
  4. Browser selectors in CSS
  5. min-/max- height & width support
  6. Center Elements Vertically / Horizontally
  7. Display Q tags in Internet Explorer
  8. Increase the size of click targets and get more call-to-action conversions
  9. Lazy loader: It delays loading of images in (long) web pages.
  10. bgiframe: Helps ease the pain when having to deal with IE z-index issues.
  11. ieFixButtons: fixes the buggy behavior of the <button> element in Internet Explorer 6 and 7.
  12. Fix Overflow: fixes the horizontal overflow in IE.

Related posts

]]> http://displayinline.net/javascript/12-solusi-javascript-untuk-pengembangan-web-aplikasi/feed/ 1 Scrollable: jQuery Plugin To Scroll Content http://displayinline.net/javascript/scrollable-jquery-plugin-to-scroll-content/ http://displayinline.net/javascript/scrollable-jquery-plugin-to-scroll-content/#comments Tue, 14 Oct 2008 08:59:14 +0000 Deny Sri Supriyono http://displayinline.net/?p=4 Scrollable adalah sebuah jQuery plugin untuk membuat konten yang bisa discroll.

Contoh hasil dari penggunaan Scrollable

Contoh hasil dari penggunaan Scrollable

Semua jenis konten (HTML, video, text) bisa digunakan sebagai item yang akan discroll.

Fitur:

  • bisa horizontal maupun vertikal
  • item yang akan dimunculkan bisa diatur jumlahnya
  • scroll elemen dengan mouse, arrow keys dan mousewheel (requires mousewheel.js)
  • programmatic actions: next, prev, nextPage, prevPage, seekTo, begin, end
  • ukuran file .js hanya 3.9 Kb!

Contoh lain penggunaan Scrollable bisa dilihat di halaman Scrollable-view dan Playlist.

Related posts

]]> http://displayinline.net/javascript/scrollable-jquery-plugin-to-scroll-content/feed/ 3