Mengekspresikan TI

Punya masalah aneh, di mana sepotong Javascript bekerja dengan baik di semua browser sebagai oz IE bar biasa Sederhana ... itu, tapi karena naskah tidak ditulis oleh saya, Butuh waktu untuk debug ini "Objek tidak mendukung properti atau metode" kesalahan yang hanya IE muntah. Mungkin! Jika saya menulis script, saya tidak akan menjumpai kesalahan ini sama sekali, karena tidak campuran nama variabel saya dengan bidang Id :).

Masalah: Objek tidak mendukung properti atau metode (pada baris 3)

function funzoneSP(){ document.getElementById('video_id').style.visibility="hidden"; shortdesc = document.getElementById('shortdesc').value; .... } 

Solusi:
Kesalahan yang dihasilkan pada thirdrow dalam contoh di atas (Jalur 3 ... "shortdesc = document.getE ...."). Saya mencoba semua jenis hal-hal bodoh, yang aku nggak bahkan layak disebutkan di sini dan akhirnya coba tebak! hanya mengubah var shortdesc ke sesuatu yang lain menyingkirkan kesalahan. Pada dasarnya! Nama variabel harus berbeda dari fieldID

Ini sekolah yang lama, tapi seperti biasa itu adalah suplemen memori saya ...
Jadi dinonaktifkan = "true" dan dinonaktifkan = "false" sama? Ya
... Jangan percaya, juga! thats cara itu ... di sini adalah beberapa penjelasan singkat ...
"Cacat" adalah atribut dari setiap elemen bentuk / lapangan dan karenanya dapat menerima nilai apapun sifatnya.

Selama atribut ini hadir, unsur ini akan dinonaktifkan terlepas dari nilainya. untuk misalnya.
<input type="text" value="This adalah disabled" disabled>
<input type="text" value="This adalah disabled" disabled="disabled">
<input type="text" value="This adalah disabled" disabled="true">
<input type="text" value="This adalah disabled" disabled="false">

Semua hal di atas akan membuat bidang formulir ini "CACAT".

Cukup tidak memberikan atribut "CACAT" terus Lapangan "sangat dimungkinkan" ... seperti di bawah ini

<input type="text" value="This tidak disabled" />

Ingat "Setiap nilai (atau tidak ada nilai sama sekali) dari atribut cacat, browser akan membuat itu cacat". Untuk menjaga hal-hal yang jelas dalam pikiran kita W3C menganjurkan agar kita menggunakan cacat = "cacat" dalam situasi ini.

Ini adalah perbedaan meskipun ketika kita menggunakan atribut ini di javascript ...

document.form.element.disabled = true; / / elemen akan dinonaktifkan
document.form.element.disabled = false; / / elemen akan diaktifkan

Argumen di atas juga berlaku untuk atribut-atribut dan elemen:

• diperiksa (radio button dan checkbox)
• dipilih (opsi)
• nowrap (td)

Heres lain peice sedikit tipu daya Javascript yang saya harus menggali sekitar karena situasi commaned itu. Dalam salah satu situs web saya, saya memiliki situasi ini di mana saya harus menerapkan "windows.onload" dua kali. Hal pertama yang akan datang ke pikiran yang berpengalaman seperti saya (saya harus jujur ​​mengatakan itu, karena aku telah menggunakan Kerangka javascript dan perpustakaan, saya telah forgotton melakukan hal-hal sederhana sendiri ... menyedihkan tapi benar), adalah metode berikut ...

 window.onload = onloadfn1;
 window.onload = onloadfn2;
 window.onload = onloadfn3;
 dll ..

Maaf untuk mengatakan tetapi, ini tidak akan bekerja ... tidak ingin membahas ilmu eksekusi Javascript banyak ... tapi menurut pengalaman baru, hanya fungsi terakhir (onloadfn3) sakit akan benar-benar dijalankan.

Dalam situasi normal, tidak seperti saya (yang saya akan membicarakan sedikit kemudian) ... Anda bisa melakukan satu dari berikut ini untuk melakukan fungsi onload mutliple ....

ATAU sesuatu seperti ini

 fungsi doOnLoad () {
         onloadfn1 ();
         onloadfn2 ();
         onloadfn3 ();
 }
 window.onload = doOnLoad;

Untuk situasi saya saat ini, saya tidak dapat menggunakan salah satu di atas ...
Mengapa saya perlu memanggil windows.onload dua kali, bukan yang memanggil dua fungsi dalam fungsi onload tunggal? Berikut adalah cepat melihat pernyataan masalah saya ...

"Halaman My Site disusun seperti tema WORDPRESS .... yaitu ada header.php dan footer.php umum yang akan dimasukkan ke semua halaman situs. Ada fungsi onload implementaion di footer.php untuk melakukan beberapa fungsi onload umum. DAN ada beberapa halaman yang perlu sesuatu onload mereka sendiri, selain dari yang dilakukan oleh fungsi onload umum. Jika saya menetapkan fungsi callback langsung ke handler window.onload, akan over-naik callback sebelumnya ditetapkan dalam footer.php "

.... Apakah masalah saya dipahami ?

Nah! ada beberapa solusi yang saya temukan. Mereka semua sangat mirip dan terutama implementions dari solusi yang diberikan oleh Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Solusi:

Cukup tambahkan kode javascript ke situs ...

 fungsi addLoadEvent (fungsi) {
     var oldonload = window.onload;
     if (typeof window.onload = 'function') {
        window.onload = fungsi
     } Else {
        window.onload = function () {
            if (oldonload) {
                   oldonload ()
           }
           func ()
        }
    }
 }

Dan menyebutnya bukan "windows.onload" biasa

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Kode lebih untuk berjalan di * buka halaman
 }); 

Keuntungan dari potongan kode ini ...
1. Terutama, It memungkinkan Anda memiliki beberapa peristiwa windows.onload, yang disebut dari bagian-bagian terpisah dari kode Anda, tanpa overridding definisi sebelumnya
2. Hal ini sangat mengganggu. Dapat ditempatkan dalam sebuah file dengan script Anda yang lain atau dalam file terpisah.
3. Ia bekerja bahkan jika window.onload sudah diatur.

Kadang-kadang untuk menjaga pageweight turun ... kita telah memisahkan script kami menjadi fragmen ... Fragmen javascript dapat dimuat sebagai dan bila diperlukan (pada sebuah peristiwa atau di klik link atau tombol dll).

Javascripts pemuatan dinamis sederhana dan cukup lurus ke depan seperti di bawah ini ...

= “text/javascript” > <Jenis script = "text / javascript">
fungsi loadNewScript (source) {
var s = document.createElement ('script');
s.setAttribute ('jenis', 'text / javascript');
s.setAttribute ('src', sumber);
document.body.appendChild (s);
}
</ Script>

dan Anda dapat memiliki link panggilan berikut mana saja di tubuh, atau Anda dapat memiliki script ini "onLoad" dari dokumen itu sendiri ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A href = "javascript: loadNewScript ('myDynamicScript.js');"> Muat Script Dinamis </ a>

atau

<body onload="loadNewScript('myDynamicScript.js');">

Bukan berarti hanya ada beberapa lightbox yang dapat Anda temukan ketika Anda google. Masalah dengan sebagian besar lightboxes yang saya temukan adalah bahwa mereka semua tampaknya menggunakan satu atau kerangka JAVASCRIPT berat lainnya berat seperti jQuery, Prototype, MooTools dan sejenisnya. Mereka semua keren dan megah mencari. Tapi Jika kebutuhan Anda adalah "TAPI Aku INGIN SCRIPT lightbox SEDERHANA DAN RINGAN UNTUK SITUS SAYA", maka di sini adalah;

Beberapa fitur bagus lightbox ini

1. Sangat ringan
   a. 4KB Script ketika dikemas (8 kb membongkar)
   b. 2 kb CSS
   c. Beberapa baris HTML untuk wadah lightbox
2. Sederhana untuk memahami dan melaksanakan
3. Dapat memiliki beberapa lightboxes pada halaman yang sama.
4. Wadah lightbox sama digunakan untuk menunjukkan, isi yang berbeda (yang terpisah dimasukkan sebagai divisi tersembunyi di halaman), tergantung pada link / option yang diklik.
5. Secara otomatis pusat sendiri, dengan mempertimbangkan semua faktor-faktor seperti, tinggi Window dan lebar (resolusi layar), jumlah halaman gulir dan tinggi dari isi lightbox itu
6. Diuji di IE 7 & FF

Lihat Demo |
Ambil Lightbox Sumber Zip (download 1801 kali)

jo.js, jo_pack.js [versi dikemas]: - satu set sederhana JAVASCRIPT OBJECTS [JO], yang berisi elemen, jendela dan skrip dokumen positioning. Anda dapat membuka JO.JS jika Anda ingin mendapatkan tangan Anda kotor dengan beberapa Javascripting Lanjutan, menciptakan fungsi abstrak, memperluas sifat unsur dan semacamnya. Jika Anda tidak terlalu banyak dalam Javascripting, Biarkan saja.

lightbox.js, lightbox_pack.js [versi dikemas]: - Mengandung script kotak manajer cahaya. Jika Anda adalah halaman desainer, juga bertanggung jawab dengan menerapkan lightbox pada halaman, Anda perlu memahami LightBoxManager tersebut. LightBoxManager pada dasarnya berisi showLightBox hanya dua fungsi dan closeLightBox.

lightbox.css: - Jika Anda tahu CSS, Anda dapat memutar sekitar dengan lightbox.css untuk menyesuaikan tampilan-n-merasa lightbox.css

index.html: Contoh pelaksanaan lightbox dengan dua isi yang berbeda

lb_underlay_bkg.png: - Ini adalah cahaya / Simi gambar transparan yang digunakan latar belakang untuk mendasari lightbox [mendasari adalah lapisan bawah lighbox, yang mencegah pengguna dari mengklik entitas lain pada halaman, sementara lightbox terbuka]. Anda dapat menggunakan gambar atau bahkan warna yang solid untuk tujuan ini, tergantung pada desain halaman dan kebutuhan.

icon_lb_close.gif: - Gambar untuk menangani lightbox dekat di kanan atas dari kotak cahaya. Bisa menggunakan gambar apapun sesuai desain

Lihat Demo |
Ambil Lightbox Sumber Zip (download 1801 kali)

Silakan beritahu kami memiliki komentar dan umpan balik ...

Yah, aku harus mengatakan, tidak seperti sepotong berguna ilmu pengetahuan, tetapi jika Anda seorang Web Developer, mungkin akan berguna, suatu hari nanti (atau akan?). Berikut ini adalah bookmarklet kecil, yang memungkinkan untuk mengedit halaman web untuk situs apapun.
Dan Sorry! Anda dapat menyimpan hasilnya pada komputer lokal Anda saja.

javascript: document.body.contentEditable = 'benar'; document.designMode = 'on'; kekosongan 0

Banyak kali kita merasa perlu untuk menulis hacks Browser specfic (meskipun bukan praktik yang baik, kita pengembang UI harus resor untuk kejahatan tersebut sampai Perang Browser besar datang untuk gencatan senjata). Sebelumnya, saya telah disebutkan dalam artikel ini Untuk Anda IES Hanya , bagaimana menulis potongan CSS yang akan dapat dilihat oleh browser IE <IE7 saja.

Kemarin, saya punya kasus, di mana saya ingin menulis beberapa FireFox spesifik CSS potongan. Nah! Saya tidak yakin jika ada kode CSS untuk ini, tetapi ada HTML. ADA CATCH A MESKIPUN, ini bagian dari validasi HTML lulus doesnot HTML. Tapi, anywaz! Jika Anda terjebak buruk atau seperti itu, tidak memiliki hal-untuk validasi (terkadang kita harus kejam), Anda bisa menggunakan berikut untuk menyatakan link ke stylesheet FF saja atau bahkan hanya kode CSS dalam blok ini. Kode ini

<comment> Masukan Anda FireFox hanya HTML / CSS / Script di sini </ komentar>

misalnya
<comment>
<style>
/ * Styles hanya untuk FF * /
fieldset {border: 1px # dddddd padat;}
</ Style>
</ Komentar>

I "m senang untuk saat ini ...

Berikut adalah cara cepat untuk memperluas Obyek Javascript Array asli, hanya untuk melakukan itu ...

Array.prototype. removeItem =function(str) {
for(i=0; i<this.length ; i++){
if(escape(this[i]).match(escape(str.trim()))){
this.splice(i, 1); break;
}
}
return this;
}


Jadi sekarang Anda dapat melakukan sesuatu seperti ini ...

var animals= new Array("dog","lion","cat","tiger","elephant");
animals. removeItem ('tiger');

Sekarang array hewan akan mengandung "anjing", "singa", "kucing", "gajah";

PS: Dan di sini adalah Prototipe String Potong juga ...

String.prototype.trim=function(str) {
str = this != window? this : str;
return str.replace(/^\s+/g, '').replace(/\s+$/g, '');
}

Nikmati ....

Sertakan itu JavaScript di Bawah Dokumen HTML

Jika Anda tidak memiliki document.write (atau generasi dinamis dari isi halaman dengan menggunakan javascripts) untuk memasukkan bagian dari konten halaman di script Anda, pindahkan script termasuk pernyataan ke bagian bawah halaman, sebelum akhir dari tag BODY.
Spesifikasi HTTP/1.1 menunjukkan bahwa browser men-download tidak lebih dari dua komponen secara paralel per nama host. Jika Anda melayani gambar Anda dari beberapa hostname, Anda bisa mendapatkan lebih dari dua download terjadi secara paralel. Sementara naskah adalah men-download, bagaimanapun, browser tidak akan memulai setiap download lainnya, bahkan pada nama host yang berbeda.
Ada juga cara untuk secara dinamis membuat node SCRIPT dan memuat script remote setelah halaman dibuka menggunakan AJAX.

Externalise Anda di JavaScript

Menggunakan file eksternal JavaScript akan mengakibatkan loading lebih cepat dari halaman karena file-file JavaScript di-cache oleh browser. 'Inline JavaScript dalam dokumen HTML bisa didownload setiap kali dokumen HTML yang diminta. Ini sebenarnya bisa mengurangi jumlah permintaan HTTP yang dibuat tetapi kemudian meningkatkan ukuran dokumen HTML. Eksternal JavaScript di-cache oleh browser, ukuran dokumen HTML berkurang tanpa meningkatkan jumlah permintaan HTTP.
Harap dicatat bahwa, jika pengguna di situs Anda memiliki pandangan beberapa halaman per sesi dan banyak dari halaman Anda kembali menggunakan script yang sama dan stylesheet, ada potensi manfaat yang lebih besar dari file eksternal cache.

Pack Anda File Javascript

Dalam kasus javascripts, tidak seperti CSS, file bisa berderak menggunakan beberapa algoritma standar yang akan memberikan ukuran file yang berkurang dari sekedar menghapus spasi atau tab. Contoh javascript pembungkus dapat ditemukan di sini http://dean.edwards.name/packer/

Menyingkirkan setiap Script Duplikat

Hal ini sangat tidak biasa yang seluruh script mungkin diduplikasi, tapi review dari sepuluh situs web AS menunjukkan bahwa dua dari mereka mengandung script diduplikasi. Gandakan script tapi jelas mengurangi kinerja dengan menciptakan permintaan yang tidak perlu HTTP dan terbuang eksekusi JavaScript.
Juga, dalam banyak kasus, meskipun nama-nama skrip yang berbeda, ada kemungkinan script duplikat dari halaman yang sama karena ukuran tim dan jumlah script.

Minimalkan mengakses elemen DOM di mana mungkin

Mengakses elemen DOM dengan JavaScript lambat sehingga untuk memiliki halaman lebih responsif, Anda harus:
• Cache referensi ke elemen diakses
• Perbarui node "offline" dan kemudian menambahkannya ke pohon
• Hindari memperbaiki tata letak dengan JavaScript

Pisahkan Perilaku dari Konten dan Presentasi

Sama seperti kita Presentasi terpisah (CSS / XSLT) dari Konten (XHTML / XML), kita juga harus memisahkan Perilaku (Javascript). Ini disebut Javascript tidak mengganggu. Sama seperti kita membuat link ke file CSS eksternal, kita harus link ke file javascript eksternal.

Alih-alih perilaku coding keras ke konten (misalnya onmouseover, onclick, dll), perilaku harus dinamis ditambahkan ke elemen, kelas, dan elemen unik (ID) menggunakan DOM. Dokumen dasar, isi, harus berisi hanya valid XHTML / XML dan javascript tidak.
Javascript harus menambah konten dengan menambahkan perilaku. Konten tersebut harus tetap berguna dan dapat digunakan tanpa javascript (atau tanpa dukungan javascript penuh).

Pada beberapa kesempatan, saat melakukan layout halaman dengan divisi popup / lightboxes / Tips sebagainya kami menemukan situasi dimana objek Formulir beberapa SELECT terjadi menjadi di bawah Divisi POPUP, dengan desain dan itu menunjukkan melalui .... YUK!

Nah! Anda dapat dengan mudah FIX ini dengan menyesuaikan Z-INDEX Anda nilai tepat untuk FF dan IE7. Tapi Good Old (pun intended) IE6 tidak berperilaku sebagaimana dimaksud .... Acara SELECT BOX melalui, bahkan setelah Anda menerapkan beberapa Z-INDEX drastis tinggi nilai-nilai ke Divisi PopUp Anda ... Nyebelin!

Tidak ada perbaikan untuk masalah ini, tetapi ada, saya yakin, lebih dari beberapa cara untuk bekerja-masalah ini, Tapi Im sini untuk memberitahu Anda solusi yang paling sederhana yang saya gunakan, yang bekerja dengan baik bagi saya, di sebagian besar kasus ....

"HIDE THE BOX ROUGE SELECT KETIKA ANDA MENAYANGKAN POPUP"

Cukup dalam potongan skrip Anda di mana Anda menunjukkan popup, tambahkan sepotong script untuk menetapkan visibilitas Kotak SELECT untuk "Tersembunyi"

document.getElementById ('my_select') style.visibilty = "tersembunyi".;

Dan ingat untuk mengatur kembali di TUTUP Divisi PopUp Anda

document.getElementById ('my_select') style.visibilty = "terlihat".;

dimana "my_select" adalah ID dari Kotak iritasi SELECT

Semoga ini bisa membantu ...

PS. Ada pilihan lain seperti ofcourse dinamis positionining sebuah IFRAME (ukuran yang sama seperti Anda PopUp) di bawah DIV Popup ... ini bekerja dengan baik juga, tapi ditambah dengan banyak Elemen DOM, script dan Sakit kepala. Saya telah menggunakan solusi ini juga, dan Jika Anda memerlukan bantuan dengan pilihan ini, jangan beritahu saya. Akan senang untuk membantu!