Jumat, 02 Juli 2010

Slide Out With jQuery Plug-In

Hai...hai...hai, selamat berjumpa kembali pada tradisi Beben si bloglang ganteng kalem :p Kalau tidak berbagi web-web yang oke punya, seperti biasa share trik tutorial yg gaya punya ;)) :)) Kali ini jatuh pada web dimana artikel dan informasinya sangat usefully :x Macam-macam jenis artikelnya sob ;) Ini dia thewebsqueeze :D Beben mau berbagi salah satu trik dari web tersebut mengenai "Slide-Out Feedback Button for the Side of a Webpage"

DEMO

Mantap!!! ;)) Itu buat Feedback, tapi kalo mo pasang apa saja bisa kok asal kreatifitas dikit ;)) Untuk memakai trik ini dibutuhkan 1kg terigu, 5 butir telor, 1kg mentega eh...:D Download terlebih dahulu gambar berikut Picture.

  1. Harus memiliki javascript, minimal versi 1.3.2/jquery.min.js
    2. Letakan script setelah tag <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  2. Kode CSS letakan sebelum kode ]]></b:skin>
    3. #feedback {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    background-color: #0066CC;
    height: 120px;
    width: 360px;
    margin: 0 0 0 -300px;
    }
    #feedback img {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    }
    h3 {
    font-family: Verdana;
    color: white;
    }
    form input, textarea {
    display: block;
    }
  3. Masukan script plug-in sebelum/diatas tag </body>
    4. Bisa juga diletakan bersamaan dg langkah pertama :D script berikut ini.
    <script type="text/javascript">
    $(document).ready(function() {
    var feed = $('#feedback');
    feed.css("display", "block").data("showing", false).children("form").hide()
    feed.children("img").click(function() {
    var t = feed;
    if(t.data("showing") == false) {
    t.animate({
    marginLeft: "0",
    height: "300px"
    }).data("showing", true).children("img").attr("src", "HIDE.PNG").css("top", "100px").siblings().show();
    } else {
    t.animate({
    marginLeft: "-300px",
    height: "120px"
    }).data("showing", false).children("img").attr("src", "FEEDBACK.PNG").css("top", "0").siblings().hide();
    }
    })
    });
    </script>
    Gantilah tulisan yg berwarna biru itu dg gambar yg didownload tadi :-/
  4. Kode HTML letakan diantara tag <body>...</body>
    5. <div id="feedback">
    <h3>Your Title blah blah blah</h3>
    <form>
    <textarea>bleh bleh</textarea>
    <input type="submit" value="Submit">
    </form>
    <img src="FEEDBACK.PNG">
    </div>
  5. Save.
    6. Selamat berkreatifitas dan sampai jumpa lagi di petualangan selanjutnya :-h

Diposting oleh di
Label: , ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)