Mengganti Address Bar Setelah Ajax Request

Setelah melakukan ajax request, tentu saja Anda akan melihat address bar tidak berubah. Karena memang tidak ada reload halaman yang akan mengubah address bar.

Untuk dapat mengubah address bar setelah ajax request, Anda bisa menambahkan fungsi javascript ini setelah melakukan ajax request :

window.history.pushState("object or string", "Title", "/url-baru");

Berikut ini contoh implementasi nya pada jQuery ajax request :

$.ajax({
 "type":"get",
 "url":"http://same-site/a/b/c/",
 "success":function(html) {
  $("body").html(html);
  if("http://same-site/a/b/c" != window.location) {
    window.history.pushState({path: "http://same-site/a/b/c"}, "", "http://same-site/a/b/c/");
 });

Selanjutnya, ketika user klik back pada browser mereka, untuk sementara tidak ada aksi yang terjadi. Untuk ini kita perlu menambahkan event popstate pada window.

$(window).bind("popstate", function() {
  $.ajax({
    "type": "get",
    "url": location.pathname,
    "success": function(html) {
        $("body").html(html);
    }
  });
});

CSS Pada XUL Component

Pada dasarnya semua component xul bisa saja disisipi CSS, tetapi ada kondisi dimana komponen tersebut tidak dapat menerima CSS. Contohnya pada textbox atau button biasanya tidak dapat dipercantik dengan css seperti berikut :

#same-textbox {
     border:1px solid #D9D9D9;
     border-top:1px solid #C0C0C0;
}
#same-button {
     border:1px solid #DCDCDC;
     background:#F2F2F2;
}

Sehingga tampilannya tetap seperti aslinya.

Untuk dapat menyisipkan semua style dari css, Anda bisa menambahkan -moz-appearance: none; pada css agar gecho tidak meng-aplikasikan style standar pada komponen tersebut.

Bentuk CSS-nya nanti akan menjadi seperti ini :

#same-textbox {
     -moz-appearance: none;
     border:1px solid #D9D9D9;
     border-top:1px solid #C0C0C0;
}
#same-button {
     -moz-appearance: none;
     border:1px solid #DCDCDC;
     background:#F2F2F2;
}

Menangani Overflow Pada Elemen HTML

Untuk kondisi tertentu, ada kemungkinan value yang disimpan dalam suatu komponen HTML akan keluar dari batas yang sudah ditentukan. Contohnya seperti ini :

Iniadalahtextyangterlalupanjangsehinggamenyebabkanoverflow.

Sehingga hasilnya mungkin akan seperti ini :

Iniadalahtextyangterlalupanjangsehinggamenyebabkanoverflow.

Untuk menanganinya, kita dapat menggunakan syntx Overflow, sehingga kelebihan text yang terdapat didalam element HTML tersebut disembunyikan, atau dibuatkan scroll sehingga tidak mengganggu keberadaan element lain.

Contohnya seperti ini :

Iniadalahtextyangterlalupanjangsehinggamenyebabkanoverflow.

Sehingga hasilnya mungkin akan seperti ini :

Iniadalahtextyangterlalupanjangsehinggamenyebabkanoverflow.

Beberapa properties yang dapat dipasangkan dengan syntax overflow adalah sebagai berikut :

.classname {
    overflow:visible;
    overflow:hidden;
    overflow:scroll;
    overflow:auto;
    overflow:inherit;
}

Beberapa contoh penggunaanya :
Contoh 1:

.classname {
    overflow:hidden;
}

Hasil :

Iniadalahtextyangterlalupanjangsehinggamenyebabkanoverflow.

Contoh 2:

.classname {
    overflow:scroll;
}

Hasil :

Iniadalahtextyangterlalupanjangsehinggamenyebabkanoverflow.

Contoh 3:

.classname {
    overflow:auto;
}

Hasil :

Iniadalahtextyangterlalupanjangsehinggamenyebabkanoverflow.

Untuk mengatur posisi scroll, Anda mungkin bisa menambahkan properties "-x" atau "-y" setelah syntax overflow.
Contohnya :

.class {
    overflow:[value]; // Akan membuat scroll sesuai kebutuhan elemen;
    overflow-x:[value]; // Akan membuat scroll jika overflow ke arah horizontal;
    overflow-y:[value]; // Akan membuat scroll jika overflow ke arah vertical;
}