Ga izražava

Sam bio u potrazi za dvokrevetnu zabodena klizač (slider s dvije ručice, minimalne i maksimalne) koristeći mootools. Iako, ja sam naći nekoliko dobro učinio dvostruko zabodena klizač u mootools forumu, jedini problem je da sve to klizače utisak imaju odabranog raspona marker. Konačno! Odlučio sam napraviti moj vlastiti. Dobro! Ja sam koristiti izvorni kod i mijenjati imati klizača pozadinu koja je naznačeno raspon odabrane vizualno, kao u mom primjeru u nastavku. Plavi područja označava raspon vrijednosti odabrani.

Prikaži verziju 2.2 Demo | Preuzimanje Mootools Dvokrevetna Pinned Slider inačice 2.2 (Downloaded 11587 puta)

Možete vrlo lako promijeniti izgled i dojam raspon pokazatelja (u plavo u gornjem primjeru), klizač tipku, klizač staze mijenjanjem slider.css prema potrebi.

Ne ispadne mi komentar ako vam je koristan.

Prije nego što smo morali nositi sa CSS-om za stvaranje naše izgleda stranice, poravnavanje neki sadržaj unutar ćelije tablice činilo samo dječja igra. Jednostavno postavite "poravnati" ili "valign" vlasništvo stolom za poravnanje po vašem izboru, komad torte!
S CSS rasporedima, iako imamo "vertikalna-align" svojstvo elemenata, to ne činiti se biti kao jednostavan kao "poravnavanje" ili "valign svojstva". Da bi se više specifiic "okomiti-align" nikad ne izgleda kao da se riješi bilo koji od vaših problema, pogotovo ako se napisati komad cross-preglednik CSS.

Bez korištenja HTML tablicama, Problem sa središtem na objektu, bilo da je slika ili neki tekst unutar sadrže podjele, je vjerojatno bio svaki UI / CSS developera noćna mora u nekom trenutku. Ovaj problem se dodatno extrapolates svoje brige usklađivanja, ako se objekt u središtu je dinamičan u prirodi, tj. kada njegova visina je promjenjiva (nepoznata visina).

Iako ne postoji poznati ravno naprijed rješenje koje će raditi preko raspon preglednicima moramo baviti, rješenje da sam pokušao doći do čini se da rade u nekoliko preglednicima da sam ga pokušao u (IE6, IE 7 , FF).

RJEŠENJE:
U preglednicima kao što su Mozilla, Opera i Safari, čudno ponašaju "okomiti-align" imovina može dovesti k pameti, jednostavno postavljanjem "pokazivati" svojstvo sadrže podjele na "stol-stanice" (display: table-cell) .

Problem i dalje ostaje s obitelji IE preglednika, koji je, još uvijek ne čini se da razumjeti što sa "Tablica stanica" imovine i neznanju kao što su oni, oni su samo ga ignorirati. Rješenje dano u nastavku, iako jednostavne, oglasi nekoliko više DOM elemenata u HTML kako bi se stvari događaju.

CSS i HTML izgleda ovako
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> Views: 3456 </ div>
</ Div>
</ Div>

Rezultat izgleda ovako: -

prikaz demo ovdje se | download source Files (Downloaded 451 puta)

TOP Poravnaj CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> stajališta: 1234 </ div>
</ Div>
</ Div>

Rezultat izgleda ovako: -

DONJA Poravnaj CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> stajališta: 1234 </ div>
</ Div>
</ Div>

Rezultat izgleda ovako: -

prikaz demo ovdje | Preuzmite ovdje

Činiti se poput dobi, budući da sam pokušava pronaći razumno rješenje ovog problema poravnanje. Ali sada s ovim rješenjem, osjećam se kao kod malo mira.

Uz nadu da će jednog dana

• vertikalnom usklađivanje imovine u CSS će raditi kao da se u ćeliji tablice, bez da tuku čak oko grma
• Barem, postavljanje margina-top: Auto-bottom margin: auto, dat će isti rezultat kao što je s margina-lijevi i desni rub postavljeni na auto
• Ratovi preglednik će biti više od jednog dana.
• Tu će se samo jedan browser za sve.

Preuzmite CSS and HTML iz gornjeg rješenja ovdje (Downloaded 451 puta) .. za razumljivosti, CSS nije optimizirana

PS: I usput, to su sličice nekih slika sam kliknuo ...

CSS za Non-IE browserima: Njegova nije vijest za CSS developera koji, CSS djece selektora poput donjem primjeru, ne činiti se to funkcionirati u IE.

npr. div> {span neki css}, to znači da "kada span element dijete (a ne unuka ili veliki Grand dijete i sl.) od dijeljenja elementa".

Ali mi smo koristili ovaj CON u našu korist. Povijesno gledano, dijete izbornik se koristi za skrivanje CSS naredbe od IE. Jednostavno postavljanje html>body ispred bilo koje CSS zapovjedne IE će ga ignorirati:

html>body .foo { CSS commands go here ;}

Ovo funkcionira jer <body> je uvijek dijete <html> - može, naravno, nikada neće biti unuka ili praunuče od <html> .

Sada da IE 7 razumije dijete odabir, morate umetnite praznu komentarom u neposredno nakon što je veći od znaka IE 7 onda neće razumjeti ovaj odabir (tko zna zašto!), Te će stoga u potpunosti ignoriraju ovu CSS naredbu.:

html> /**/ body .foo { CSS commands go here ;}

Ako već niste vidjeli to i prije, imaju pročitajte sljedeće, kao i

• Uvjetno Komentari: Samo za vaše IES-dio Duex
• CSS hack: Javascript, CSS, HTML za Firefox
• Za vašu IES Samo

Kao i obično, jedan od mnogih nekih čudnih problema sa IE i to se mora redova u TOP 10 u IE Igra riječima.

PROBLEM IZJAVA (Ovo je bio moj problem, možda imate slične misbehaviors):
Imam mnogo DIV je na stranici s klase "sectionhead", što je ništa drugo nego naslov dijela na stranici. Tako sam neki stil izgleda kao ovaj

. Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px;}

Div je svijetlo siva bar s nekim crnim tekstom. Što se događa u IE je neke od tih sekcija zaglavlja prikazuju ok, ali neki su nevidljivi, sve dok se pomičete stranice ili kliknite na nešto na stranici itd. Negdje oni imaju tendenciju da nestanu kad kliknete na 'alt' ključ kada stranica dolje ili se pomaknite s trake za pomicanje. Oni se ponekad čini da se ponovno pojaviti kada se ponovno (F5) stranice. Sam kratko savršeno jednostavan DIV s nekim jednostavnim stilom ponaša loše.
Što bi moglo uzrokovati takvu čudno ponašanje? Dobro! Iskreno, pojma!!

MOGUĆE RJEŠENJE:
Opet ne pitajte me zašto, ali u mnogim slučajevima taj problem ima tendenciju da nestanu kada dodate Pozicija: u odnosu na prikrati ponašaju elementi stila, kao što je ovaj

. Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px; položaj: relativna}

Čudno, ali što reći? Bog Blagoslovi me od IE!

I DO Podijeli s SAD, ako je imao slične probleme.

Nije da postoji samo nekoliko Lightbox je da možete pronaći kada google. Problem s većinom od lightboxes koje sam našao je da su svi oni kao da koristite jedan ili drugi težinom kao JavaScript okvire jQuery, Prototype i MOOTOOLS i voli. Oni su svi cool i swanky tražite. No, ako je vaš zahtjev "Ali ja želim jednostavan i lagani Lightbox skriptu za moje stranice", onda ovdje je;

Neki lijepo značajke ovog Lightbox

1. Vrlo lagan
   . 4KB skripti kada pakirane (8 KB nespreman)
   b. 2 kb CSS
   c. Nekoliko redaka HTML-a za Lightbox kontejner
2. Jednostavan za razumijevanje i provedbu
3. Može imati više Lightboxes na istoj stranici.
4. Isto Lightbox kontejner se koristi za pokazati, drugačiji sadržaj (koji se zasebno uključeni skrivenih odjeljaka po stranici), ovisno na link / mogućnost da se kliknuli.
5. Automatski centri, uzimajući u obzir sve čimbenike kao što su, visine i širine prozora (Razlučivost zaslona), stranica dođite iznos i visina sadržaja Lightbox
6. Ispitano u IE 7 i ff

Pregled Demo |
Preuzmite Lightbox Izvor Zip (Downloaded 1797 puta)

jo.js i jo_pack.js [pakiran verzija] - jednostavan set JavaScript OBJEKTE [JO], koji sadrži element, prozor i dokumenata pozicioniranja skripte. Možete otvoriti JO.JS ako želite da biste dobili vaše ruke prljave s nekim naprednim Javascripting, stvarajući apstraktne funkcije, koja se širi elemenata svojstva i takve. Ako niste previše u Javascripting, ostavite ga na miru.

lightbox.js, lightbox_pack.js [upakiran verzija] - Sadrže svjetlo skripte okvira upravitelja. Ako ste stranica dizajner, i odgovoran je s implementacijom u Lightbox na stranici, morate razumjeti LightBoxManager. LightBoxManager u osnovi sastoji od samo dvije funkcije showLightBox i closeLightBox.

lightbox.css: - Ako znate CSS, možete se poigrati s lightbox.css prilagoditi pogled-n-osjećati lightbox.css

index.html: Uzorak provedba Lightbox s dva različita sadržaja

lb_underlay_bkg.png: - To je svjetlo / slični transparentni prikaz koji se koristi pozadinu za Lightbox podloge [podloge sloj ispod lighbox, koji sprečava korisnik iz kliknete bilo koji drugi subjekt na stranici, a Lightbox je otvoren]. Možete koristiti bilo koju sliku ili čak solid boja za tu svrhu, ovisno o dizajnu stranice i zahtjev.

icon_lb_close.gif: - slika za blisku Lightbox ručkom na gornjem desnom kutu light box. Možete koristiti bilo koju sliku po dizajnu

Pregled Demo |
Preuzmite Lightbox Izvor Zip (Downloaded 1797 puta)

Molimo Vas da nas imaju svoje komentare i povratne informacije ...