Mecha versi 2.6.4 sudah dirilis!

Iframe Preloader

Tabel Konten
  1. HTML 
  2. jQuery 
  3. HTML 
  4. jQuery 
  • Memadukan Konsep jQuery Dialog dengan Iframe Preloader 
  • Kode Selengkapnya 
    1. HTML 
    2. CSS 
    3. jQuery 
  • jQuery Iframe Preloader

    Saya ingin membahas mengenai pertanyaan dari The7Bloggers tentang bagaimana caranya menampilkan iframe pada kotak dialog, tapi isi dari iframe tersebut harus dimuat hanya saat kotak dialog ditampilkan:

    The7Bloggers pada Alam Perwira di Membuat Kotak Dialog dengan jQuery:

    Mas gimana kalau buat iframe, tapi waktu blognya load iframenya ndak ikut load?

    Loadnya itu ketika tombol pembuka jQuery-nya di klik?

    Pertanyaan bagus. Ini mengenai efisiensi muat halaman. Katakanlah, kita memiliki widget Buku Tamu tersembunyi di sidebar yang terbuat dari elemen <iframe>. Tapi kita harap kita bisa menunda pemuatan buku tamu tersebut sampai seorang pengunjung mengeklik tombol pembuka, tautan atau apapun yang menjadi pemicu tampilnya buku tamu tersebut.

    Untuk memuat iframe pada saat suatu pemicu diklik dapat dilakukan dengan dua metode. Pertama, kita bisa membuat elemen <iframe> dengan atribut src kosong, lalu kita set nilai atribut src kosong tersebut saat sebuah tombol diklik:

    HTML 

    <button>Klik!</button>
    <iframe id='dynamicFrame' src=''><iframe>

    jQuery 

    $('button').click(function() {
        $('iframe#dynamicFrame').attr('src', 'http://www.namasitus.com');
    });

    Ke dua, kita bisa menyisipkan elemen <iframe> pada sebuah kontainer (katakanlah #frameContainer) saat sebuah tombol diklik:

    HTML 

    <button>Klik!</button>
    <div id='frameContainer'><div>

    jQuery 

    $('button').click(function() {
        $('#frameContainer').html('<iframe id="dynamicFrame" src="//www.namasitus.com"></iframe>');
    });

    Saya rasa metode yang ke dua ini lebih baik. Karena setidaknya, saat kita ingin membatalkan proses muat iframe, kita bisa melakukannya dengan cara menghilangkan elemen tersebut seperti ini:

    $('button#batal').click(function() {
        $('iframe#dynamicFrame').remove();
    });

    Membatalkan proses muat iframe pada metode pertama sebenarnya juga bisa dilakukan dengan cara menghapus atribut src pada elemen tersebut:

    $('button#batal').click(function() {
        $('iframe#dynamicFrame').removeAttr('src');
    });

    Tapi terkadang metode itu tidak bekerja dengan baik dan iframe masih tetap akan melanjutkan proses muat meskipun tombol pembatal sudah diklik.

    Memadukan Konsep jQuery Dialog dengan Iframe Preloader 

    Sekarang kita akan meletakkan iframe tersebut ke dalam kotak dialog. Di sini Saya tidak akan mencari bahan terlalu jauh. Kita gunakan saja jQuery Dialog yang pernah Saya buat di posting ini untuk kemudian akan kita isi dengan elemen <iframe> di dalamnya.

    Pertama-tama kita harus memodifikasi kerangkanya menjadi seperti ini:

    <!-- Start Dialog Box -->
    <div id="kotak-dialog">
    <h3 class="title">Kotak Dialog<a href="#" class="close">&#215;</a></h3>
        <div class="isi-dialog"><div id="iframeContainer"></div>        <div class="button-wrapper">
                <button class="close">Tutup Kotak Dialog</button>
            </div>
        </div>
    </div>
    <div id="dialog-overlay"></div>
    <!-- End Dialog Box -->

    Pada kode di atas bisa Anda melihat bahwa Saya menyisipkan elemen #iframeContainer. Kita akan menggunakan itu sebagai tempat iframe yang akan kita sisipkan dengan jQuery. Berikutnya perhatikan kode ini:

    //Tampilkan kotak dialog saat .open-dialog diklik
    $('.open-dialog').click(function() {
        $('#kotak-dialog').show();
        $('#dialog-overlay').fadeTo("normal", 0.4);
        return false;
    });

    Kode tersebut hanya berfungsi untuk menampilkan kotak dialog dan overlay saat tombol pemicu (.open-dialog) diklik. tapi yang kita harapkan adalah setelah kotak dialog tampil, jQuery akan mencari elemen #iframeContainer di dalamnya dan setelah itu akan menyisipkan elemen <iframe> pada elemen tersebut. Itu bisa dilakukan dengan memodifikasi kodenya menjadi seperti ini:

    $('.open-dialog').click(function() {
        $('#kotak-dialog').show().find('#frameContainer').html('<iframe src="' + this.href + '"></iframe>');
        $('#dialog-overlay').fadeTo("normal", 0.4);
        return false;
    });

    this.href adalah objek yang menyatakan nilai atribut href pada tautan yang diklik. Kita akan mengunakan pemicu berupa tautan agar kita bisa menyimpan URL iframe pada tautan tersebut, sehingga dengan satu kotak dialog saja, kita bisa membuka lebih banyak halaman di dalam iframe.

    Untuk membatalkan proses muat tidak berbeda dari apa yang sudah Saya nyatakan di atas. Saat tombol .close diklik, sembunyikan kotak dialog dan singkirkan iframe:

    // Saat tombol penutup diklik...
    $('#kotak-dialog .close').click(function() {
        // Hilangkan kotak dialog dengan efek fade-out
        $('#kotak-dialog').fadeOut('normal', function() {
            // Setelah itu singkirkan iframe di dalamnya
            $('iframe', this).remove();
        });
        // Sembunyikan overlay
        $('#dialog-overlay').hide();
        return false;
    });

    Kode Selengkapnya 

    HTML 

    <!-- Start Dialog Box -->
    <div id="kotak-dialog">
    <h3 class="title">Kotak Dialog<a href="#" class="close">&#215;</a></h3>
        <div class="isi-dialog">
    
        <div id="iframeContainer"></div>
    
            <div class="button-wrapper">
                <button class="close">Tutup Kotak Dialog</button>
            </div>
        </div>
    </div>
    <div id="dialog-overlay"></div>
    <!-- End Dialog Box -->

    CSS 

    #kotak-dialog {
      position:absolute;
      top:20%;
      left:50%;
      margin:0px 0px 0px -200px;
      width:400px;
      height:auto;
      background-color:#fff;
      -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
      -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
      box-shadow:0px 1px 2px rgba(0,0,0,0.4);
      z-index:1000;
      display:none;
    }
    
    #kotak-dialog *:focus {
      outline:none;
    }
    
    #kotak-dialog h3.title {
      background-color:#3B5998;
      padding:10px 15px;
      color:#fff;
      font:normal 16px Arial,Sans-Serif;
      margin:0px 0px 0px 0px;
      position:relative;
    }
    
    #kotak-dialog h3.title a {
      position:absolute;
      top:10px;
      right:15px;
      color:#fff;
      text-decoration:none;
      cursor:pointer;
    }
    
    #kotak-dialog .isi-dialog {
      margin:15px;
      font:normal 12px Arial,Sans-Serif;
    }
    
    #kotak-dialog .button-wrapper {
      padding:10px 15px 0px;
      border-top:1px solid #ddd;
      margin-top:15px;
    }
    
    #kotak-dialog .button-wrapper button {
      background-color:#FF0C39;
      border:none;
      font:bold 12px Arial,Sans-Serif;
      color:#fff;
      padding:5px 10px;
      -webkit-border-radius:3px;
      -moz-border-radius:3px;
      border-radius:3px;
      cursor:pointer;
    }
    
    #kotak-dialog .button-wrapper button:hover {
      background-color:#aaa;
    }
    
    #dialog-overlay {
      position:fixed !important;
      position:absolute;
      z-index:999;
      top:0px;
      right:0px;
      bottom:0px;
      left:0px;
      background-color:#000;
      display:none;
    }
    
    
    /* Iframe */
    #iframeContainer iframe {
      width:100%;
      height:300px;
      border:none;
      background-color:#ccc;
      overflow:auto;
    }

    jQuery 

    //<![CDATA[
    $(function() {
        $('.open-dialog').click(function() {
            $('#kotak-dialog').show().find('#iframeContainer').html('<iframe src="' + this.href + '"></iframe>');
            $('#dialog-overlay').fadeTo(400, 0.8);
            return false;
        });
        $('#kotak-dialog .close').click(function() {
            $('#kotak-dialog').fadeOut('normal', function() {
                $('iframe', this).remove();
            });
            $('#dialog-overlay').hide();
            return false;
        });
    });
    //]]>

    Elemen pemicu dibuat dengan sebuah elemen tautan yang memiliki kelas .open-dialog seperti ini:

    <a class="open-dialog" href="//www.namasitus.com">Buka Kotak Dialog</a>

    Lihat Demo

    44 Komentar

    Putra

    nah, maksud saya itu ini mas ^_^
    saya jga pernah nanya di lightbox, tp gak tau mau ngoomongnya gmn :D

    mas, kalu mau 2 iframe jadi satu kayak di cbox itu gmn?? kan kalau di cbox ada kotak form sama kotak main, thanks sebelumnya mas udah banyak mbantu :) \o/ \o/

    #desain alert emotnya kereeen \o/ \o/

    Unknown

    Desain kotak Komentar Tambah Edan, pantes gak pernah nongol sekarang TOmbol Balasnya pun udah edan haduh bang bang kapan aku bisa kayak gini xixixixixi share bang kapan2 nih style kotak komenX biar gak capek2 Ngelayani popUp komen :D

    Taufik Nurrohman

    @Alam Perwira Saya sempat mengecek situsnya, di situ perbedaannya cuma ada di &sec=form dan &sec=main. Sebenarnya ini cukup rumit, tapi semoga saja bisa dipahami perlahan-lahan.
    URL yang akan kita ambil nantinya cuma sampai di awal &sec=main atau &sec=form seperti ini:

    <a class="open-dialog" href="http://www.cbox.ws/box/?boxid=1100969&boxtag=2car98&tid=8760&tkey=2d79c1ab0366ee4e8c21251b049343d0">Tampilkan Buku Tamu</a>

    Setelah itu kita buat dua buah iframe di dalam JQuery .html(). Tapi, supaya lebih mudah lebih baik didefinisikan terlebih dahulu di dalam variabel:

    var secMain = '<iframe src="' + this.href + '&amp;sec=main"></iframe>',
    secForm = '<iframe src="' + this.href + '&amp;sec=form"></iframe>';
    $('#kotak-dialog').show().find('#iframeContainer').html(secMain + secForm);

    &sec=main dan &sec=form Saya taruh belakangan di dalam elemen <iframe>
    Kira-kira begitu <=)

    Taufik Nurrohman

    @system of blog Susah mas, soalnya ini benar-benar harus menyesuaikan diri (kreasi sendiri). Kalau Saya ingin melakukan seperti ini, maka yang Saya lakukan ini cuma berlaku untuk blog ini saja. Jadi kalau misalnya Saya mencoba membuat tutorial mengenai fasilitas thread comment modifikasi ini untuk diterapkan pada blog lain secara universal akan sangat sulit.
    Saya cuma akan memberi satu rahasia: Mengenai pop-up formulir komentar yang muncul sebenarnya tidak ada gunanya sama sekali. Karena inti cara kerja sistem thread commenting versi ini (Saya masih menggunakan versi yang sama) hanya mendeteksi karakter balasan yang notabene terdiri dari karakter-karakter @Nama Pengguna

    Pada prinsipnya, JavaScript cuma mengambil karakter ID dari tautan nama orang tersebut (dalam hal ini misalnya #c8238749066890392459) setelah itu script tersebut akan melakukan tugasnya dengan menyesuaikan ID masing-masing komentar balasan yang ditemukan :W
    Intinya adalah, cari tahu bagaimana cara mendapatkan userID tanpa harus membuka pop-up window :)

    [note]Baca: Kumpulan Blogger Thread-Comment Hack[/note]

    Unknown

    @Taufik Nurrohman Oohhh iya iya kapan2 aku liat2 tapi belum ngerti JS juga si masalahx hehehee iya bang memang susah kalau ngasi tutorial karena kadang kode template berbeda, sip deh kalau begitu

    Putra

    @Taufik Nurrohman wiiw kaget bgt pas mbls comment nya, kayak vanaluv, tpi kalau ini harus dicopas dahulu ^_^ \o/ \o/

    singkatnya saja mas, kalau semisal dilebarin begitu saya masih bingung, wajar masih belom begitu bisa jquery, bisanya cmn ngubah value nya :D

    Taufik Nurrohman

    @Alam Perwira Untuk menyesuaikan lebar kotak dialog ada di dua bagian ini:

    #kotak-dialog {
    ...
    margin:0px 0px 0px -200px;
    width:400px;
    ...
    }

    Sesuaikan nilai width, kemudian yang margin negatif itu nilainya adalah setengah dari width. Tujuannya supaya posisinya tepat di tengah.

    Putra

    @Taufik Nurrohmanbukan gtu maksudnya, kalau yg konten ditengah saya sudah baca postingan mas taufik yg dulu :)

    caranya masang nya wae yg dibls :D tpi tadi saya coba gabungkaan sama script jquery diatas gak work itu mas?? :(

    Putra

    @Taufik Nurrohmanyaudahlah mas, udah bisa kok, tpi pakek web cbox yg khusus bwt chat ^_^ tekape http://al4m-blog.blogspot.com/ :D \o/ \o/

    Taufik Nurrohman

    @Alam Perwira Biar lebih mantap bisa ditambah lagi dengan gambar animasi loading di belakang buku tamu :-bd

    #iframeContainer iframe {
    background:white url('http://reader-download.googlecode.com/svn/trunk/images/nivo-loading.gif') no-repeat 50% 50%;
    }

    Anonim

    Mas aku udah terapin nih, heheheh mantap. Berhasil tapi aku pkek plugin lightbox. Coba mas cek di blog aku? :D

    Anonim

    @Taufik Nurrohman Terima kasih mas, oy saya mau tanya gimana caranya buat search box kayak punya kamu tuh? Aku dari tadi inspect elemen blog kamu dan aku peljari kok kagak bisa2 mas?

    Anonim

    @The7Bloggers Oy mas apakah jQuery ama blogger thread comment.js itu konflik?

    Taufik Nurrohman

    @The7Bloggers Search Box... itu membuatnya memakai Google Custom Search: http://www.google.co.id/cse/

    Oy mas apakah jQuery ama blogger thread comment.js itu konflik?

    Tidak juga kok. Di sini Saya juga sudah memodifikasinya dengan memadukan JQuery untuk efek animasi dan pengambilan data.

    Beben Koben

    hati-hati saja penggunaan script yg lumayan banyak memang di pakai jg oleh pihak blogger. conto variabel iframe nih. blogger banyak menanamkan pemanggilan² melalui script mereka!
    kalo dah bentrok, dan kita nggak ngerti, itu yg repot...hehehe

    nice plugin

    Anonim

    @Taufik Nurrohman Ya mas, aku coba dulu.
    Oya mas, NivoSlider di blog aku kan menggunakan script dari kamu, terus aku sekarang lagi modifikasi NivoSlider aku, tapi kenapa ya tag ini

    <div class='nivo-caption' style='opacity:0.9'></div>

    udah aku tambahin kode css ni:

    
    .nivo-caption{
    position:absolute;
    z-index:77;
    top:5px;
    left:458px;
    background-color: #111;background-image: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background-image: -webkit-linear-gradient(#444, #111); background-image: -o-linear-gradient(#444, #111);background-image: -ms-linear-gradient(#444, #111);background-image: linear-gradient(#444, #111);-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    }
    

    Tapi kalau dibuka di browser/komputer aku efeknya ndak kelihatan, sedangkan kalau dibuka di komputer lain kelihatan efeknya.

    Terus sekarang saya mau menambahkan kode css diatas pada script dari kamu, tapi dibagian mana ya?

    Ni script dari kamu

    http://7bloggers.googlecode.com/files/Nivo-Slider.js

    Taufik Nurrohman

    @Beben Koben Hehe.. ini bukan plugin. Cuma konsep :) Kalau plugin bentuknya seperti ini kang:

    $.fn.bebenKoben = function() {
    // Do your awesome plugin stuff here
    };

    Blogger memang sangat identik dengan Iframe, tapi setidaknya mereka memiliki ID sendiri-sendiri, jadi tidak perlu khawatir :-d

    Taufik Nurrohman

    @The7Bloggers Melihat caption-nya pakai apa? Pakai inspect element ya? :) Elemen asli di bagian dalam sebenarnya tidak ada atribut inline-style seperti itu, tapi karena sudah diset oleh JavaScript di bagian opsi, jadinya browser akan mengeset opacity pada elemen .nivo-caption menggunakan atribut style="":

    $('div.nivoSlider').nivoSlider({captionOpacity:0.8});

    Saya kemarin sudah lihat ada efek gradiasinya kok. Mungkin versi browsernya yang harus diperbaharui karena biasanya ini karena browser tidak mendukung CSS3 Gradient.

    Meletakkan CSS bagaimana ya? Setahu Saya sama saja seperti yang lain :-bd
    Untuk menulis kode panjang letakkan di dalam <i rel="pre"> ... </i>

    [note]Artikel terkait: Konfigurasi JQuery NivoSlider[/note]

    Anonim

    @Taufik Nurrohman Aku pkek browser google chrome 19 mas, hehehehe ya pkek inspect elemen. Wkwkwkwk.

    Owh gitu ya. Trims deh mas Infonya. :-bd

    Anonim

    @The7Bloggers Oy mas, aku udah coba ke google Custom Search. Tapi itu kan buat untuk di page ajah search boxnya kyak ni.

    http://the7bloggers.blogspot.com/2012/02/the7bloggers-custom-search.html

    Yan aq maksud ntu gimana cara membuatnya terpisah mas kyak di blog kamu ini. Apalagi yang aku bingung adalah ni.

    
    <form action='/p/cari-artikel.html' class='searchform' id='cse-search-box'>
    <div class='google-telusur'>
    <input name='cx' type='hidden' value='001138040266307195445:fj4luzedkgy'/>
    <input name='cof' type='hidden' value='FORID:10'/>
    <input name='ie' type='hidden' value='UTF-8'/>
    <input autocomplete='off' class='searchfield' id='q' name='q' onfocus='this.value="";' type='text'/>
    </div>
    </form>

    Yang aku bingung dapet value value ntu dari mana.

    Tolong dijelasin ya cara misahinnya....? heheheheh :-D

    Beben Koben

    @Taufik Nurrohman saya mah kagak tau script...
    tapi kalau di tanya perpustakaan mengenai script and khususnya jQuery, jangan tanya...hsuahsuahushauhsuahuah

    Anonim

    @Taufik Nurrohman Mas saya masih ndak mengerti nih, saya udah baca url dari mas terus aku terapin tuh kode. Kenapa kok ndak muncul ya efeknya....?

    Terus yang dibagian statis page kamu yang ini /p/cari-artikel.html itu diisi apa ya...? Kok ada script ini:

    
    <script src="http://www.google.com/jsapi" type="text/javascript">&lt/script><script type="text/javascript">
    google.load('search', '1', {language : 'id', style : google.loader.themes.V2_DEFAULT});
    google.setOnLoadCallback(function() {
    var customSearchOptions = {};  var customSearchControl = new google.search.CustomSearchControl(
    '001138040266307195445:fj4luzedkgy', customSearchOptions);
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.enableSearchResultsOnly();
    customSearchControl.draw('cse', options);
    function parseParamsFromUrl() {
    var params = {};
    var parts = window.location.search.substr(1).split('\x26');
    for (var i = 0; i < parts.length; i++) {
    var keyValuePair = parts[i].split('=');
    var key = decodeURIComponent(keyValuePair[0]);
    params[key] = keyValuePair[1] ?
    decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) :
    keyValuePair[1];
    }
    return params;
    }
    var urlParams = parseParamsFromUrl();
    var queryParamName = "q";
    if (urlParams[queryParamName]) {
    customSearchControl.execute(urlParams[queryParamName], null,
    {'oq': urlParams['oq'], 'aq': urlParams['aq'],
    'aqi': urlParams['aqi'], 'aql': urlParams['aql'],
    'gs_sm': urlParams['gs_sm'], 'gs_upl': urlParams['gs_upl']});
    }
    }, true);&lt/script>
    

    Bngung aku mas? :P Hehehehehe

    Taufik Nurrohman

    @The7Bloggers Ya, itu untuk meload/memuat halaman Google ke dalam posting. ID halaman Google berbeda-beda, dan itu bisa diset di bagian ini:

    var customSearchControl = new google.search.CustomSearchControl('ID Google Custom Search Kamu', customSearchOptions);

    Terus, mengenai nilai action pada <form> itu diisi URL halaman yang ada script di atas.

    Bayu Handono

    nah bisa ga yah kalo trik ini digunakan buat alamat ini http://ampatico.com/Facebook/iGoogle/7/index
    jadi dalam framenya ada isi tampilan facebooknya

    Taufik Nurrohman

    @Bayu Handono Hmmm... nggak ada isinya T_T Adanya cuma ini:

    <span class="login-btn" id="login-btn"><span id="login-text">Login to Facebook</span></span>

    Bayu Handono

    kalo pengen bikin halaman ini iframe nya kaya gmana mas??
    maaf banyak nanya, sering ngerepotin. hehe :(

    Bayu Handono

    @Bayu Handono http://sekaratmutlak.blogspot.com/2012/01/animasi-loading-dengan-jquery-bagian-2.html :p

    zamaludin abdulah

    @Taufik Nurrohmanterima kasih gan atas pencerahannya, sekarang searchnya bisa di halaman sendiri :D
    bila berkenan kunjungi blog saya ya ;)
    http://zamal-tkj.blogspot.com

    iLab

    mas taufik kok overlay nya gak jalan yaa , iframe udah jalan sempurna nih mohon bimbingan nya

    Taufik Nurrohman

    Coba ganti .fadeTo() jadi .fadeIn()

    $('#dialog-overlay').fadeIn(400);

    Unknown

    Maaf mas, mau tanya, kalo ini kan script buat iframe preloader. gimana caranya kalo untuk embed object preloader yang bekerja sama seperti diatas (diklik baru diload dan dijalankan). misal kode kita adalah < object >< embed scr= blablablab.swf flashvars= blablabla dst >< / object >

    Taufik Nurrohman

    <div id="embed-container"></div>
    <button id="btn">Klik</button>
    function getEmbed() {
    document.getElementById('embed-container').innerHTML = '<embed src="#foo"></embed>';
    }
    document.getElementById('btn').onclick = getEmbed;

    Demo: http://jsfiddle.net/tovic/43eG7/59/

    kd

    hi hompimpa,

    iframeContainer tidak fixed ketika tombol open-dialog ditekan...
    Awak tahu cara penyelesaiannya?

    jsfiddle - http://jsfiddle.net/6jBH7/76/

    Taufik Nurrohman

    Just replace position:absolute with position:fixed. Should works fine:

    #kotak-dialog {
    position:fixed;
    /* the rest... */
    }

    Drawback: Using fixed position for this dialog box will make the contents bellow the screen to be unusable when the height of dialog box exceeds the height of the screen.

    Unknown

    ~x( X@ 7:O :'( :Ozz bingung, coba diterapin ndak berubah

    mungkin masih salah naruh kode-kode nya x@

    Unknown

    permisi. mas... saya mo tanya .. kok iframe lightbox nya gak kluar.. malah langsung buka link situsnya.. .. :-bd

    Unknown

    Permisi mas,,, saya juga mau nanya,,, kenapa iframe lightbox ini tidak berfungsi jika pemuatan halaman belum selesai total,,, Jika diklik pasti langsung menuju link situsnya,, tapi klo proses load halaman sudah selesai lightboxnya berfungsi.... mohon dibalas ea mas taufiq yang ganthenk... :D

    Komentar telah ditutup.