Mengekspresikan TI

Kemarin, seperti setiap "Hari Ground Hog" lain, saya sedang mengerjakan beberapa layout CSS / Tableless. Semua berjalan lancar di IE 7, FF 3 dan Chrome, sampai tiba-tiba, saya melihat beberapa un-tidak dapat diketahui margin terlihat hanya di Google Chrome. Meskipun sangat aneh dan worring, Itu adalah beberapa masalah bug / baru yang saya datang di seluruh, ada akhirnya beberapa rempah-rempah dalam pekerjaan duniawi saya. Sedih (tapi bagus) itu bisa diperbaiki dalam beberapa menit dari penyelidikan ...

Pada dasarnya, itu tampak seperti Google Chrome mengabaikan saya Mereset CSS (margin: 0px). Ini sebenarnya disebabkan oleh stylesheet user agent (-webkit-padding-start: 40px). Jadi solusinya adalah untuk mengatur ulang gaya ini dengan menetapkan padding: 0 elemen nakal.
Cara yang baik untuk mencegah masalah ini terjadi pada setiap elemen adalah menggunakan Istirahat CSS global sebagai berikut

* {Margin: 0; padding: 0;}

Apa Pengguna Style Sheets Agen (Spesifikasi)?
Kutipan berikut diambil dari http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , link tindak untuk membaca lebih lanjut tentang Style Sheets User Agent

CSS 1 memperkenalkan ide dengan menyatakan bahwa setiap User Agent (UA, sering 'web browser' atau 'klien web') akan memiliki lembar standar gaya yang menyajikan dokumen dalam akal - tetapi bisa dibilang biasa-biasa saja - cara. CSS 2 mengatakan bahwa agen pengguna sesuai harus menerapkan style sheet default (atau bersikap seolah-olah mereka lakukan) dan bahwa default style sheet agen pengguna harus menyajikan unsur-unsur dari bahasa dokumen dengan cara yang memenuhi harapan presentasi umum untuk bahasa dokumen; CSS 3 adalah kemungkinan dari pikiran yang sama.

Karena spesifikasi CSS menyerahkannya implementasi apakah akan menggunakan "nyata" style sheet untuk tampilan default atau tidak, itu tidak mengherankan bahwa Anda tidak menemukan selembar standar gaya dalam folder instalasi setiap browser. Tidak seperti Microsoft Internet Explorer dan juga Opera, misalnya (dan sejauh yang saya tahu), browser Gecko seperti Firefox dan Netscape Navigator (mencari "html.css") tetapi juga Konqueror membuatnya lebih sederhana untuk memahami gaya standar mereka.

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)

Google mulai orang gerakan prompt untuk membuang IE6 ... By pengguna mengganggu IE6 dengan POPUP di buka halaman ... mungkin bukan ide yang sangat baik ... tapi menjadi pengembang UI, saya harus bergabung dengan band wagon ... satu browser yang kurang untuk saya khawatir tentang Maaf ... egois itu! tapi saya termasuk javascript ini ... (TRY HALAMAN INI DALAM IE6) ...
Hei! dan pada catatan cerah ... Lihat itu adalah tampilan POWER dari JAVASCRIPT .... bahkan dapat menurunkan raksasa (atau sekali itu)

SO ... Bantuan membebaskan dunia dari IE6 dengan satu baris javascript!

http://code.google.com/p/sevenup/

Dengan browser lain untuk mengurus mulai besok! (IE8 keluar dari Negara besok Beta-nya) ... IE6 waktu yang sangat tinggi dengan diberikan Kematian rahmat Panjang Karena nya ... Serikat kita berdiri untuk musim gugur IE6

"IE6 adalah Netscape 4 baru. Hacks dibutuhkan untuk mendukung IE6 semakin dipandang sebagai barang berlebih. Seperti Netscape 4 pada tahun 2000, IE6 dianggap akan menahan web. "

Jeff Zeldman, standar guru

Dan sementara itu bagi mereka seperti saya yang akan dibanjiri dengan panggilan melanggar layout CSS di IE8, di sini adalah kerja lama sekitar / memperbaiki menggunakan Meta Tag (meta http-equiv = "X-UA-Compatible") Anda bisa mencoba ...

Mis-berperilaku IE8: pecah Tata Letak CSS (Target versi browser menggunakan Meta Tag di IE8)

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 ...

 else { window.onload = function() { if (oldonload) { oldonload() } func() } } } fungsi addLoadEvent (fungsi) {var oldonload = window.onload, jika (typeof window.onload = 'fungsi'!) {window.onload = func} 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.

Lain tut cepat. Berikut ini adalah sesuatu yang sederhana dan bagus menggunakan POWER CSS ... tapi concieve sulit (dan itu pasti bukan saya) untuk memulai. Menambahkan Dropshadow, mungkin peice kue bagi banyak dari kita, menggunakan beberapa alat editing gambar seperti Photoshop anf Fireworks dll
Alasan mengapa, saya memilih untuk drop shadow menggunakan CSS adalah bahwa, biasanya saat membuat desain halaman / html dari aplikasi, persyaratan tetap iterasi. Yang saya maksud adalah, Dalam sebuah situs web yang ada dengan banyak gambar, seperti yang menampilkan daftar freinds atau galeri gambar, maka akan sulit untuk memproses ulang seluruh beban gambar yang telah sudah dibongkar untuk menambah atau menghapus bayang-bayang, untuk itu materi.
Jadi Jika Anda telah melakukan sedikit berpikir ke depan sekaligus menciptakan HTMLs untuk menambahkan divisi tambahan atau biasanya situasi ini adalah bahwa Anda memiliki Logika loop menghasilkan ikon ini / thumbnail di XSL, PHP. JAWA atau bahasa pemrograman / script lainnya, Anda dapat menambahkan kapan saja, maka hanya soal acara dan menyembunyikan bayang-bayang menggunakan properti Tampilan CSS, sesuai dengan klien yang terus berubah persyaratan ... aku havn't dilakukan semacam ini berpikir ke depan sebelum ini ... tapi ahev mulai sekarang!

Pada contoh di bawah, gambar asli adalah bayangan bebas dan dropshadows diterapkan sesuai kebutuhan! JUGA, saya telah sedikit tambahan, dengan menggunakan trik-trik Tut saya sebelumnya (Well! ini mungkin adalah berbagai terpendek Tutorial, sehingga hanya dibenarkan menyebut mereka "Tut" 's) tentang Properti Menggunakan Klip CSS untuk memamerkan hanya

Asli Gambar

CSS DropShadow Hasil

Lihat Demo | Unduh sourcefiles

Mengapa saya ingin memahami ini? Humm ...!

Sebagian besar penulis CSS akan setuju bahwa properti Klip CSS mungkin salah satu yang paling sering digunakan un-properti CSS. Itu sangat benar bagi saya juga dan yang paling senang untuk mengabaikan hal itu, sampai aku mulai memodifikasi MooTools DUA Knob (Pin) Komponen Slider (dengan Indikator Range) .

Ada saran yang baik dari salah satu pengguna untuk memodifikasi komponen Komponen Slider menggunakan gambar backgroud terpotong (melawan sebuah divisi lebar variabel) untuk menunjukkan kisaran slider. Jadi tiba saatnya saya untuk memasuki menyenangkan tapi un-charter (untuk saya ofcourse) perairan properti Klip CSS.

Nah! betapa sulitnya bisa? Tidak sama sekali ... YA dan TIDAK. Sintaks untuk menggunakan properti Klip CSS adalah cukup tegak tapi arti / usuage sedikit croocked. Dengan memori seperti saya, setiap kali saya duduk untuk pengerjaan ulang pada Script Slider saya ... saya harus tokeep merujuk kembali ke penggunaan properti CLIP, untuk mengingatkan diri logika bahwa saya telah dibuat dalam script saya .... Oleh karena itu! diperkirakan pena ke bawah, dengan harapan untuk mengingatnya masa depan (dan juga untuk kepentingan mereka yang tampaknya boggled oleh Properti Klip CSS)

Apa Klip CSS lakukan?

Klip adalah bagian dari modul efek visual dari CSS 2.1. Secara sederhana, tugasnya adalah untuk menempatkan jendela terlihat di atas sebuah obyek yang sedang dipotong, maka kliping gambar dan membuat thumbnail tanpa harus membuat file-file tambahan (saya sudah menempatkan fitur ini untuk penggunaan yang lebih baik dalam Komponen Slider )

Menggunakan properti Klip CSS, Anda dapat membuat kliping menggunakan bentuk rect. Seperti banyak Properti CSS lainnya (seperti margin, dll padding), menggunakan rect memerlukan empat koordinat Atas, Kanan, Bawah, Kiri (TRBL). Sifat croocked properti ini mencerminkan bila anda melihat lebih dekat bagaimana klip menghitung wilayah kliping, menggunakan keempat koordinat (mengirim otak menjadi melemparkan untuk sementara waktu). Sekarang untuk membingungkan Anda bagian bawah mulai dari atas, dan kanan dimulai dari kiri. . Anda lihat apa yang saya katakan? .... Oleh karena itu posting ini ...

Ini sedikit kebingungan dapat dengan mudah menghilang, dengan penjelasan visual dari properti Klip / rect CSS seperti di bawah ini!

CSS Klip Persyaratan

Tugas kami sudah mulai adalah untuk klip gambar Miniatur berikut ke gambar persegi mencari (dan juga gambar sudut lebar)

Asli Thumbnal / Gambar	Klip Persyaratan untuk sqaure Thumbmail

CSS Klip Hasil

Lihat Demo | Unduh sourcefiles

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');">

Jika Anda css orang, Anda akan tahu rasa sakit dalam mendapatkan layout Anda bekerja lintas-browser. IE8 adalah satu lagi kunci pas dalam karya-karya untuk pengembang kami. Anywaz! jika Anda memukul atas masalah ini, Seperti yang saya lakukan kemarin, di mana CSS sempurna bekerja di IE7 (dan sebelumnya) dan Firefox tiba-tiba mulai melemparkan amukan di IE8, TRY ini ... Ini baik tampaknya untuk memperbaiki masalah saya untuk saat ini ....

Menggunakan deklarasi Meta, kita dapat menentukan mesin rendering kami ingin IE8 untuk digunakan. Jadi untuk memaksa IE8 untuk membuat sebagai IE7 ... Masukkan Meta Tag berikut ke dalam kepala dokumen Anda: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Secara default Meta IE akan: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
yang akan membuat IE8 membuat halaman menggunakan mode standar baru.

Jika diperlukan, sintaks ini dapat digunakan untuk mengakomodasi untuk browser lain sebagai berikut:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

LEBIH Tentang DOCTYPES:

JIKA Anda belum terbiasa dengan jenis hewan yang disebut "DOCTYPE" ... di sini adalah beberapa membaca cepat
Apa DOCTYPES? Apa BROWSER quirks mode & HUKUM?
Mengatur DOCTYPE dalam XSL

Untuk lebih dalam pemahaman mendalam tentang DOCTYPES, coba kunjungi link ini ...
A List Apart: Perbaiki Situs Anda Dengan DOCTYPE Benar!
A List Apart: Beyond DOCTYPE: Standar Web, Teruskan Kompatibilitas, dan IE8

Catatan: Meskipun banyak dari kita HTML / CSS orang telah mengabaikan pentingnya decleration DOCTYPE dalam dokumen kita, Mengatur DOCTYPE yang tepat, biasanya jawaban untuk masalah browser yang paling silang.

Dengan berbagai Carousels luar sana, banyak Mootools juga, saya masih memutuskan untuk menulis Kelas Carousel saya sendiri, untuk beberapa alasan yang baik
1. Dicari fitur paging (untuk dapat melompat slide tertentu / langkah dalam korsel).
2. Dicari kebebasan dengan penempatan tombol KIRI dan KANAN / link, di mana pun aku suka.
3. Lebih kontrol atas Langkah Slide.

Aku berhasil membuat Carousel baru, dengan fitur di atas ... seperti di bawah ini ... Jangan ragu untuk menyarankan modifikasi yang anda akan membutuhkan!

Contoh saya terlihat seperti ini ... [ View Demo ]

Lihat Demo | Unduh Mootools Carousel Dengan Pager Versi 1.0 (download 1976 kali)

1. Carousel Pager

Anda dapat dengan mudah menambahkan paging untuk korsel Anda, cukup dengan menetapkan bendera paging, yang parater terakhir lewat sekaligus menciptakan instance dari MooCarousel ke true (ingin paging) atau false (donot ingin paging).

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = jumlah slide, sss = geser ukuran langkah

Dan ofcourse Anda dapat mengubah tampilan-n-merasa ini achors paging sesukamu dengan memodifikasi CSS mereka.

Carousel_paging {text-align: right; margin: 5px 10px 0 0;}.
Carousel_paging saat ini, carousel_paging halaman {outline: none; width:.... 15px; height: 15px; line-height: 15px; text-align: center; display: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

Carousel_paging a: hover, carousel_paging saat ini {background: # 4D4D9B; color: # ffffff;}...

Nah! ada masalah kecil sekalipun, Jangkar paging jika diatur, maka akan mendapatkan dihasilkan selalu setelah komponen Carousel. Aku ingin membuatnya dinamis juga, tetapi kemudian hanya untuk menjaga Script untuk meniup keluar dari proporsi, saya memutuskan untuk melewati itu.
Tapi Anda tahu Javascript sedikit, Anda dapat dengan mudah memodifikasi kode generasi paging di kelas MooCarousel untuk menyenangkan kebutuhan Anda.

2. Menyesuaikan Ikon Kiri & Kanan

Anda dapat mengubah PENEMPATAN, GAMBAR atau properti displat dari Tombol Kiri dan Kanan hanya dengan bermain-main dengan CSS. untuk dapat mengubah penempatan dari buttoms Kiri dan Kanan adalah alasan sebenarnya bagi saya untuk Kelas hak kita Carousel saya.
Karena ini Kelas MooCarousel, menerima id itu tombol ini, Anda sebenarnya dapat menempatkan tombol-tombol mana saja di halaman, jika Anda silahkan ... tidak harus dalam hirarki elemen, seperti dalam contoh saya.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; position: relative; width: 23px; height: 20px; float: left; kursor: pointer;}

Carousel_container_r {background-position: 0-38px;}.

Carousel_container_l {background-position: 0-58px;}.

3. Menyesuaikan Langkah Slide

APA SAYA BERARTI LANGKAH Menyesuaikan SAYA SLIDE?
Carousels paling geser penuh dengan dari jendela terlihat. Jadi katakanlah Anda memiliki empat item (seperti dalam contoh saya di atas), akan geser semua empat item. Dengan Komponen Carousel, Anda melewati jumlah slide dan ukuran langkah pilihan Anda.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = jumlah slide, c_sss = geser ukuran langkah

Juga, dalam example1 saya, saya telah calcuted ukuran langkah slide, berdasarkan logika mana, aku tahu jumlah item, lebar pada setiap item dan margin yang diberikan setelah setiap item dalam CSS saya.

/ * Untuk korsel 1 * /

var c1_w = 92; Lebar / / korsel Barang

var c1_n = 10; Nomor / / Total Items korsel Perbandingan

var c1_pp = 4 / / Jumlah perpage Perbandingan Produk korsel

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp; / / sss = geser ukuran langkah

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + .5); / / ns = jumlah slide

c1_sss + = c1_marginFactor; / / sss = geser ukuran langkah, 51 untuk margin

Persyaratan: Mootools 1,2

Lihat Demo | Unduh Mootools Carousel Dengan Pager Versi 1.0 (download 1976 kali)