Dream Night Animation With JQuery

Dreamnight is an animated screen saver where bubble colored appeared in a random position, grow in size and then disappear. This effect is really noticeable very cool.

Best view on Google Chrome and press F11

Simple Background SlideShow with jQuery

It's a small wonder that many jQuery plugins were developed with the intention of easily introducing pretty slideshows to display and rotate series of images. However, almost none of these slideshow plugins utilize the idea of rotating CSS backgrounds. :)

<!-- jQuery Library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>

<!-- Simple Background SlideShow Script -->
<script src="http://jquery-aing.googlecode.com/files/BackgroundSlideShowAing.js" type="text/javascript"></script>

<!-- Call ssBG.SlideMyBG() function after the page fully loaded -->
<script type="text/javascript">$(window).load(function(){ssBG.SlideMyBG()})</script>

<!-- Advanced settings -->
<script type="text/javascript">
$(window).load(function(){
  var MYlist=[
    "http://mysite.com/photo1.jpg",
    "http://mysite.com/photo2.jpg" // No coma at the end of list
  ];
  var MYstyle='diurut aje bang dari awal ye'; // Default is random
  var MYspeed=10000; // Delay between image changes
  var MYbgPos='top center'; // background-position

  var MYbgSize='100%'; // background-size (you may try auto 100%)
  var MYbgRep='repeat-x'; // repeat-y, repeat, no-repeat

  ssBG.SlideMyBG(MYlist,MYstyle,MYspeed,MYbgPos,MYbgSize,MYbgRep)
})
</script>

<!-- To add a new collection into an existing, you may use ssBG.gbr.concat(list1,list2) -->
<script type="text/javascript">
$(window).load(function(){
  var MYlist1=[
    "http://mysite.com/photo1.jpg",
    "http://mysite.com/photo2.jpg" // No coma at the end of list
  ];
  var MYlist2=[
    "http://mysite.com/photo3.jpg",
    "http://mysite.com/photo4.jpg",
    "http://mysite.com/photo5.jpg" // No coma at the end of list
  ];

  ssBG.gbr=ssBG.gbr.concat(MYlist1,MYlist2);
  ssBG.SlideMyBG('','sort','','','auto 100%');
})

</script>

I am always receptive to any thoughts/suggestions you might have, so have words with me in the comments.

jQuery: Do More

jQuery itu JavaScript Library cara cepat dan singkat yang menjadikan alur document HTML menjadi lebih sederhana, penanganan event, membuat animasi, dan interaksi Ajax untuk pengembangan web yang cepat. jQuery didesain buat ngerubah cara lo nulis Javascript. Pastinya jQuery ini gak bakalan jalan kalo kita belom nge-load Library-nya. Kalo gak mau atau males hosting Library sendiri, kita bisa pake punya orang :D, misal punya google kaya dibawah ini. <script src='"http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>

Sample 1

Click --> slideToggle('slow')

<a href="javascript:void(0)" onClick="$('#h-slide').slideToggle('slow')">Click Here 4 slideToggle('slow') Demo</a>
<div id="h-slide" style="display:none">Hello There.. :)</div>

Sample 2

Click --> show('slow')

<a href="javascript:void(0)" onClick="$('#h-show').show('slow'); $(this).css({display:'none'})">Click Here 4 show('slow') Demo</a>
<div id="h-show" style="display:none">Hello There.. :)</div>

www.google.co.id/search?q=belajar+jQuery Coy

jQuery Elemen Vertikal Horisontal

Artikel kali ini akan membahas tentang cara memposisikan suatu elemen agar berada tepat di tengah halaman secara seimbang baik secara vertikal maupun horisontal menggunakan jQuery. Selain itu kita akan membandingkan antara centering elemen menggunakan CSS murni dengan centering elemen menggunakan jQuery. Setelah dipahami silahkan memilih mana cara yang terbaik untuk memposisikan suatu elemen pada bagian tengah halaman. Cara ini biasanya digunakan untuk menampilkan popout baik yang berisi gambar, peringatan atau pun iklan.

CSS Centering Horisontal

Kode CSS dibawah ini merupakan cara yang paling banyak digunakan untuk memposisikan suatu elemen agar berada di tengah halaman secara horisontal namun tidak jika dilihat dari sisi vertikal.

.elemen{
    width: 250px;
    height: 100px;
    margin: 0 auto;
}

Demo CSS Centering Horisontal

Kunci untuk memposisikan elemen ini ada pada kode margin: 0 auto, yang jika kita jabarkan maka; elemen memiliki jarak margin atas bawah sebesar 0, dan memiliki jarak margin kiri kanan dengan pengesetan auto. auto digunakan untuk menyesuaikan elemen secara otomatis sesuai dengan lebar halaman.

CSS Centering Horisontal dan Vertikal

Dibawah ini kode CSS yang sering digunakan untuk memposisikan elemen agar berada ditengah-tengah halaman secara horizontal dan vertikal. Namun terkadang menghasilkan posisi yang tidak simetris (jika salah perhitungan) apabila jarak diukur antara sisi kiri dengan sisi kanan, sisi atas dengan sisi bawah.

.elemen{
    width: 250px;
    height: 100px;
    position: absolute;
    margin: -50px 0 0 -125px;
    left: 50%;
    top: 50%;
}

Demo CSS Centering Horisontal dan Vertikal

Kunci untuk memposisikan elemen ini ada pada kode:

1. position: absolute = ini digunakan untuk memposisikan elemen agar elemen memiliki posisi yang absolut (mutlak) terhadap halaman. Maksudnya, agar elemen tidak mengikuti pada aturan-aturan lain yang diterapkan pada elemen lain diluar dirinya.
2. margin: -50px 0 0 -125px = ini merupakan kunci untuk memposisikan elemen. Nilai-nilai ini diperoleh dari hasil pembagian lebar dan tinggi elemen. Margin atas di beri nilai -50px, ini diperoleh dari pembagian height. Height atau tinggi di set dengan nilai 100px, maka apabila di bagi 2 (100:2) akan di peroleh nilai 50px. Nilai 50px ini yang kemudian digunakan untuk menentukan margin atas. Sedangkan margin kiri di beri nilai -125px, ini juga di perolah dari pembagian width. Width atau lebar di set dengan nilai 250px, maka apabila di bagi 2 (250:2) akan diperoleh nilai 125px. Kemudian nilai 125px ini digunakan untuk menentukan margin kiri. Namun kenapa margin kiri dan margin atas diberi nilai negatif?
3. left:50% dan top:50% = nilai 50% digunakan untuk memposisikan elemen agar berada tepat di tengah-tengah halaman, sehingga jarak elemen dari atas halaman dan dari kiri halaman ditentukan setengahnya atau 50%. Namun harus diingat, nilai 50% ini akan membuat elemen berada tepat ditengah-tengah halaman seandainya elemen tersebut memiliki luas 1px. Sedangkan elemen yang di buat memiliki lebar 250px dan tinggi 100px.
4. Perhatikan gambar di bawah ini! Elemen yang berwarna kuning adalah posisi elemen semula ketika semua margin (atas bawah kiri kanan) diberi nilai 0. Itulah mengapa hasil pembagian lebar (125px) dan hasil pembagian tinggi (50px) kemudian di ubah menjadi minus, tujuannya agar posisi titik tengah dari elemen benar-benar berada di tengah-tengah halaman.

jQuery Centering Horisontal dan Vertikal

Penggunaan script jQuery ini sebenarnya untuk menyederhanakan penggunaan kode CSS, sehingga ketika kita ingin memposisikan sebuah elemen tepat di tengah-tengah layar, maka tidak diperlukan perhitungan seperti halnya cara diatas (CSS Centering Horisontal dan Vertikal). jQuery akan melakukan perhitungan sendiri secara otomatis, sehingga tidak perlu lagi menuliskan nilai-nilai (margin, left, top) secara manual. Cukup dengan mendeklarasikan elemen, kemudian integrasikan elemen tersebut dengan jQuery, seperti dibawah ini:

Kode CSS Dibawah ini adalah properti CSS untuk elemen:

.elemen{
    width:250px;
    height:100px;
}

Kode diatas hanya menentukan lebar dan tinggi dari elemen tanpa menentukan posisi elemen terhadap halaman.

Kode jQuery Dibawah ini adalah kode jQuery untuk membuat posisi elemen otomatis di tengah halaman:

$(document).ready(function () {

    $(window).resize(function () {

        $('.elemen').css({
            position: 'absolute',
            left: ($(window).width() - $('.elemen').outerWidth()) / 2,
            top: ($(window).height() - $('.elemen').outerHeight()) / 2
        });

    });

    $(window).resize();

});

Demo jQuery Centering Horisontal dan Vertikal

Kerja Kode jQuery

$(window).resize

Ini terdiri dari 2 kode, kode awal berfungsi untuk merekam lebar dan tinggi halaman yang sedang dibuka secara kontinyu, dan kode yang terakhir untuk menjalankan fungsi secara kontinyu.

$('.elemen').css({

Ini digunakan untuk menambahkan poperti css pada elemen

position: 'absolute'

Ini menambahkan properti position pada elemen

left: ($(window).width() - $('.elemen').outerWidth()) / 2

Jika anda memahami CSS Centering Horisontal dan Vertikal maka kode jQuery inilah yang berfungsi untuk mengambil alih proses perhitungan manual menjadi otomatis. Silahkan perhatikan dengan seksama.

1. left untuk menambahkan properti css pada elemen.
2. ($(window).width() untuk mengambil lebar halaman secara kontinyu kemudian di kurangi...
3. $('.elemen').outerWidth()) / 2 untuk mengambil keseluruhan lebar elemen termasuk margin secara kontinyu kemudian di bagi 2

Demikian selanjutnya dengan top: ($(window).height()-$('.elemen').outerHeight())/2 Selamat mencoba dan semoga berhasil. Happy Blogging :)