Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Penanganan JavaScript pada Peramban yang Menonaktifkan JavaScript

Ini adalah tentang bagaimana cara kita menangani masalah-masalah umum yang akan timbul pada situs-situs yang membutuhkan pengaktifan JavaScript. Katakanlah kita memiliki sebuah menu navigasi bertingkat dengan efek JavaScript. Namun biasanya syarat yang harus kita penuhi agar efek animasi berjalan dengan baik adalah dengan menghilangkan setiap item yang akan ditampilkan/disembunyikan dengan efek JavaScript:

nav ul ul {
  display:none;
}

Anda bisa mempelajari maksud dari kode di atas pada artikel ini.

Tidak masalah (bahkan sebuah keharusan) jika kita menghilangkan elemen dengan deklarasi display:none karena JavaScript selalu bisa menampilkannya dengan efek yang baik. Tapi bagaimana jika JavaScript dinonaktifkan?

Opsi pada peramban Firefox: Menonaktifkan JavaScript
Menonaktifkan JavaScript

Kita tidak membicarakan tentang mengapa mereka melakukan itu, tapi katakanlah jika itu dilakukan, apa yang akan terjadi?
Yang terjadi adalah sub-sub menu navigasi yang seharusnya muncul saat induk menu disorot akan mati karena tidak ada mesin yang bisa membuat mereka muncul kecuali JavaScript. Dan sekarang JavaScript telah dinonaktifkan.

Hal yang biasanya kita lakukan adalah menuliskan sebuah pesan yang akan muncul hanya jika JavaScript dinonaktifkan. Itu bisa dilakukan dengan <noscript>:

<noscript>
    <div id="js-message">Anda harus mengaktifkan JavaScript untuk melihat halaman ini!</div>
</noscript>

Dan mungkin sedikit kode CSS untuk membuatnya tampak sebagai tabir yang akan menutupi seluruh layar:

#js-message {
  position:fixed !important;
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
  z-index:999;
  background-color:black;
  padding-top:120px;
  font:bold 100px Arial,Sans-Serif;
  color:red;
  text-align:center;
}

Tapi Saya rasa cara itu tidak sepenuhnya keren jika setiap kali kita menonaktifkan JavaScript, sebuah tabir/overlay besar akan muncul menutupi seluruh layar. Kita harap kita bisa memberikan fallback yang baik tanpa harus menghilangkan apa yang seharusnya bisa kita lihat. Kita mencoba untuk melihat kepada CSS.
Kita harap, jika JavaScript dinonaktifkan, maka CSS bisa menggantikannya untuk menampilkan/menyembunyikan elemen dengan baik, meski dengan efek yang sangat terbatas.
Berikut ini adalah sebuah kerangka menu navigasi bertingkat sederhana. Terdiri dari empat menu utama dan dua level submenu:

<nav>
    <ul>
        <li><a href="#">Beranda</a></li>
        <li><a href="#">Profil</a>
            <ul class="fallback">
                <li><a href="#">Dropdown 1</a></li>
                <li><a href="#">Dropdown 2</a></li>
                <li><a href="#">Dropdown 3</a>
                    <ul class="fallback">
                        <li><a href="#">Dropdown 1</a></li>
                        <li><a href="#">Dropdown 2</a></li>
                        <li><a href="#">Dropdown 3</a></li>
                        <li><a href="#">Dropdown 4</a></li>
                    </ul>
                </li>
                <li><a href="#">Dropdown 4</a></li>
            </ul>
        </li>
        <li><a href="#">Jurnal</a></li>
        <li><a href="#">Komentar</a></li>
    </ul>
</nav>

Seperti yang Anda lihat bahwa Saya menambahkan kelas/class fallback pada masing-masing anak menu (tidak harus bernama fallback. Itu hanya contoh).
Kelas tersebut akan kita gunakan pada kode CSS hanya jika JavaScript dinonaktifkan. Dalam artian: Kita akan menghilangkan kelas tersebut dengan JavaScript saat JavaScript diakifkan. Dan ini bisa dilakukan dengan cara yang sangat sederhana:

$('nav ul.fallback').removeClass('fallback');

Pada dasarnya inilah yang akan kita lakukan: Saat JavaScript dinonaktifkan, kita harap kita bisa mengakses elemen yang menghilang untuk ditampilkan dan disembunyikan dengan CSS tanpa harus mengganggu animasi JavaScript saat JavaScript diaktifkan. Itu bisa dilakukan dengan cara bergiliran. Saat JavaScript diaktifkan, kita harap kita bisa memberikan efek animasi yang baik saat sub-sub menu ditampilkan dan disembunyikan:

$('nav li').hover(function() {
    $(this).children('ul').sliedDown('fast');
}, function() {
    $(this).children('ul').slideUp('fast');
});

Namun saat JavaScript dinonaktifkan, kita tetap bisa memastikan bahwa sub-sub menu tersebut bisa tampil dan hilang dengan baik:

nav li ul {
  display:none;
}

nav li:hover > ul.fallback {
  display:block;
}

Gambaran Selengkapnya

Ini adalah gambaran selengkapnya. Saat JavaScript diaktifkan, maka kita akan menghilangkan kelas fallback pada semua elemen <ul>:

$('nav ul.fallback').removeClass('fallback');

Dengan begitu kode CSS pada bagian ini tidak akan bisa menampilkan dan menyembunyikan sub-sub menu, karena kelas fallback pada elemen submenu sudah menghilang:

nav li ul {
  /* ... */
  display:none;
}

nav li:hover > ul.fallback {
  display:block; /* Ini sudah tidak berlaku lagi, karena class="fallback" telah dihilangkan */
}

Namun itu tidak mengapa, karena saat ini JavaScript sedang diaktifkan, maka efek animasi JavaScript bisa kita dijalankan:

$('nav li').hover(function() {
    $(this).children('ul').slideDown('fast');
}, function() {
    $(this).children('ul').slideUp('fast');
});

Dan saat JavaScript dinonaktifkan, maka fungsi-fungsi animasi dalam JavaScript tidak akan bekerja. Diutamakan pada bagian ini, sebagai perhatian utama kita:

$('nav ul.fallback').removeClass('fallback');

Oleh karena itu kelas fallback akan tetap berada pada tempatnya. Sehingga kode CSS pada bagian ini akan bekerja:

nav li:hover > ul.fallback {
  display:block;
}

Coba Anda buka halaman ini kemudian perhatikan bahwa saat ini efek animasi .slideDown() dan .slideUp() masih bisa bekerja. Setelah itu nonaktifkan JavaScript pada peramban Anda dan segarkan halaman tersebut. Anda akan melihat bahwa sub-sub menu masih bisa ditampilkan dan disembunyikan meski dengan efek yang sangat terbatas:

Lihat Demo

Kode Selengkapnya

HTML

<nav>
    <ul>
        <li><a href="#">Beranda</a></li>
        <li><a href="#">Profil</a>
            <ul class="fallback">
                <li><a href="#">Dropdown 1</a></li>
                <li><a href="#">Dropdown 2</a></li>
                <li><a href="#">Dropdown 3</a>
                    <ul class="fallback">
                        <li><a href="#">Dropdown 1</a></li>
                        <li><a href="#">Dropdown 2</a></li>
                        <li><a href="#">Dropdown 3</a></li>
                        <li><a href="#">Dropdown 4</a></li>
                    </ul>
                </li>
                <li><a href="#">Dropdown 4</a></li>
            </ul>
        </li>
        <li><a href="#">Jurnal</a></li>
        <li><a href="#">Komentar</a></li>
    </ul>
</nav>

CSS

nav {
  font:bold 12px Arial,Sans-Serif;   
  background-color:black;
  margin:0px 0px;
  padding:0px 0px;
}

nav ul {
  margin:0px 0px;
  padding:0px 0px;
  display:block;
  position:relative;
  height:30px;
}

nav li {
  margin:0px 0px;
  padding:0px 0px;
  float:left;
  display:inline;
  list-style:none;
  position:relative;    
}

nav li a {
  display:block;
  margin:0px 0px;
  padding:0px 14px;
  color:white;
  text-decoration:none;
  line-height:30px;
  height:30px;
}

nav a:hover {
  background-color:#456;   
}

nav ul ul {
  width:120px;
  height:auto;
  position:absolute;
  top:100%;
  left:0px;
  z-ndex:10;
  background-color:black;    
  display:none;
}

nav ul ul li {
  float:none;
  display:block;   
}

nav ul ul ul {
  top:0px;
  left:100%;
}

/* CSS Fallback */
nav li:hover > ul.fallback {
  display:block;   
}

jQuery

$(function() {
    // Singkirkan class "fallback" pada anak <ul>
    // sehingga kode nav li:hover > ul.fallback {display:block;} tidak akan bekerja.
    $('ul.fallback').removeClass('fallback');

    // Lakukan seperti biasa mulai dari sini...
    $('nav#nav li').hover(function() {
        $(this).children('ul').slideDown('fast');
    }, function() {
        $(this).children('ul').slideUp('fast');
    });
});

Lainnya

Selain itu, beberapa elemen seperti panel juga lebih banyak mengutamakan .hide() atau .css('display', 'none') untuk menyembunyikannya dibandingkan dengan menuliskan display:none secara langsung dengan CSS. Ini akan membuat panel tertutup saat JavaScript diaktifkan dan bisa terbuka saat sebuah pemicu (misalnya tombol) diklik. Tapi saat JavaScript dinonaktifkan, tombol-tombol tersebut tidak lagi berfungsi untuk membuka/menutup panel, sementara panel yang tadinya tertutup kini akan tetap terbuka. Kelihatannya memang jelek, tapi setidaknya kita masih tetap bisa melihat isinya.

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 0 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!