Ki ga izraža

Sem iskal za brezplačno zabodena drsnika (drsnik z dvema gumbi, najkrajši in najdaljši) z uporabo mootools. Čeprav, sem našel nekaj dobro opravljeno dvojno zabodena drsnik na forumu mootools, samo problem je bil, da so vsi ti drsniki Trud je izbrano marker. Končno! Odločil sem se, da ustvarite svoj lasten. No! Jaz sem uporabo izvirno kodo in jo spremeniti, da imajo drsnik ozadje, ki je navedeno območje izbran vizualno, tako kot v mojem primeru spodaj. V BLUE področja kaže obseg vrednosti izbrane.

Poglej Različica 2.2 Demo | Download Mootools Double Lepljivek drsnik različice 2.2 (Downloaded 11596 krat)

Enostavno lahko spremenite videz in občutek območju kazalca (v modri v zgornjem primeru), drsnik gumb se drsnik progo s spreminjanjem slider.css kot je potrebno.

Ne spusti me komentar če se vam zdi, da je koristno.

Preden smo se morali ukvarjati z CSS, da ustvarite svoje postavitve strani, uskladi nekaj vsebine znotraj celice tabele zdelo Preprosto otroška igra. Preprosto nastavite "uskladiti" ali "valign" premoženje v tabeli, da imajo s poravnavo po vaši izbiri, kos torte!
Pri postavitvah CSS, čeprav imamo "navpično poravnati" premoženje za elemente, se ne zdi, da je tako enostavno, kot "uskladiti" ali "valign" lastnostmi. Če želite biti bolj specifiic "navpično poravnati" nikoli ne zdi, da reši vse vaše težave, še posebej, če so napisali kos CSS navzkrižno brskalnika.

Brez uporabe HTML tabel, problem centriranje na objektu, naj bo to slika ali del besedila, ki vsebuje v oddelku, je verjetno že vsak UI / CSS razvijalci nočna mora na neki točki. Ta problem še extrapolates na skrbi za poravnavo, če je predmet, ki se centered je dinamičen v naravi, to je, če je njegova višina je spremenljiva (neznano višina).

Čeprav ni znano, naravnost naprej rešitev, ki bi deloval po različnih brskalnikih, jih moramo obravnavati, je rešitev, da sem poskušal priti do ne zdi, da dela v nekaj brskalnikov, ki sem jo poskušala v (IE6, IE 7 , FF).

REŠITEV:
V brskalnikih, kot so Mozilla, ki Opera in Safari, ki čudno obnaša "navpično poravnati" premoženje je mogoče vložiti na svoje čute, le z nastavitvijo "Display" last vsebujejo delitev na "namizni celice" (zaslon: table-cell) .

Problem še vedno ostaja v IE družine brskalnikov, ki še ne zdi, da jasno, kaj morajo s "tabela celic" premoženje in ne poznajo, saj so, samo prezreti. Rešitev je navedeno spodaj, čeprav preprostih, oglasov nekaj več elementov DOM v vašem HTML, da bi se stvari zgodijo.

CSS in HTML izgleda takole
.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/> ogledov: 3456 </ p>
</ P>
</ P>

Rezultat izgleda takole: -

ogled demo tukaj plinov v prenosu izvorne datoteke (Downloaded 451 krat)

TOP Poravnava 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/> pogledov: 1234 </ p>
</ P>
</ P>

Rezultat izgleda takole: -

BOTTOM Poravnava 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/> pogledov: 1234 </ p>
</ P>
</ P>

Rezultat izgleda takole: -

ogled demo tukaj | Download tukaj

Izgleda, starosti, ker sem poskušal najti razumno rešitev za ta problem usklajevanja. Ampak sedaj s to rešitvijo, počutim se malo na miru.

Z upanjem, da nekega dne

• navpična poravnava, premoženje, CSS bo delovala tako kot to počne znotraj celice tabele, ne da bi veliko v bližini grmovja
• Najmanj, v katerem margin-top: avto in margin-bottom: avto bo, da je enak rezultat kot pri margin-left in margin-right nastavljeno na avto
• V brskalnika vojne bodo čez nekaj dan.
• Na voljo bo samo en brskalnik za VSE.

Prenesite CSS in HTML zgornje rešitve tukaj (Downloaded 451 krat) .. za razumljivosti, je CSS ni optimizirana

PS: In mimogrede, to so sličice nekaj slik ki sem jih kliknili ...

CSS za Non-IE brskalniki: Njena ni novic za razvijalce CSS, da CSS selektorji Child, kot je na primer spodaj, ne zdi, da dela v IE.

npr div> span {nekaj css}, to pomeni, da "ko span element je otrok (in ne vnuk ali super grand otrok itd) ob delitvi elementa".

Ampak smo to konvencijo v našo korist. V preteklosti je bil otrok selektor uporablja za skrivanje CSS ukazov od IE. Preprosto z dajanjem html>body se bo pred vsako CSS ukaz IE prezreti:

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

To deluje, ker <body> je vedno otrok <html> - to seveda ne more biti nikoli vnuk ali pra-vnuk od <html> .

Zdaj, ko IE 7 razume otrok izbiro, boste morali vstaviti prazno oznako komentarjev, v neposredno po več kot znak IE 7 pa ne bo razumel to izbiro (kdo ve zakaj!?) In bo zato v celoti prezreti ta ukaz CSS.:

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

Če še niste videli to prej, imajo preberete tudi naslednje

• Pogojni Komentarji: Za vašo IES Le-dela Duex
• CSS hack: Javascript, CSS, HTML za Firefox samo
• Za vašo IES Only

Kot ponavadi, eden od mnogih nekaj čudnih težav z IE in to treba je uvršča v TOP 10 IE quirks.

PROBLEM IZJAVA (To je bil moj problem, morda imate podobne misbehaviors):
Imam veliko DIV je na stran z razreda "sectionhead", ki je nič drugega kot naslov odseka na strani. Tako sem nekaj stil videti takole

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

Div je svetlo sivo bar z nekaj črno besedilo. Kaj se zgodi v IE, je nekatere od teh odsekov glave so prikazani v redu, nekateri pa so nevidni, dokler se pomikate po strani ali pa kliknite na nekaj strani, itd Včasih se nagibajo k izginili, ko boste kliknili na tipko »Alt želiš, ko stran navzdol ali se pomaknite z drsnega traku. Včasih se zdi, da znova pojavijo, ko osvežite (F5) strani. Skratka sem popolnoma preprosta DIV z nekaj preprostega stila obnaša BAD.
Kaj bi lahko povzročilo takšno nenadzorovano vedenje? No! Odkrito povedano, pojma nima!

MOŽNA REŠITEV:
Še enkrat, ne sprašuj me zakaj, ampak v veliko primerih ta problem ponavadi izginejo, ko dodate položaj: v primerjavi z MIS z vedenjem elementov slog, kot to

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

Čudno, ampak kaj naj rečem? Bog me je Bless od IE!

IN DO DELEŽ z nami, če bi imeli podobne težave.

Saj ne, da obstaja le malo Lightbox-jev, ki jih lahko najdete, ko google. Vprašanje z večino lightboxes da sem našel je bilo, da vse je zdelo, da uporabljajo eno ali drugih težkih okvire JavaScript teže, kot so jQuery, prototip, MOOTOOLS in podobno. Vsi so kul in šopirjenje videti. Toda, če vaša zahteva je, "A rad preprosto in Lahka pošta scenarij svojem mestu", potem je tukaj;

Nekaj ​​lepih lastnosti tega Lightbox

1. Zelo lahka
   a. 4KB skriptov, ko pakirane (8 kb razpakirati)
   b. 2 kb CSS
   c. Nekaj ​​vrstic HTML za posodo pošta
2. Enostavno razumeti in izvajati
3. Imajo lahko več Lightboxes na isti strani.
4. Enako Lightbox Posoda se uporablja za prikaz, drugačno vsebino, ki je vključena kot ločeno skrite delitve na stran), odvisno od povezave / opcije, ki je kliknil.
5. Samodejno centrov, ob upoštevanju vseh dejavnikov, kot so, višino in širino Window (ločljivost zaslona), stran se pomaknite znesek, višina vsebine Lightbox
6. Testiran v IE 7 in FF

Poglej Demo |
Prenesite Lightbox Vir Zip (Downloaded 1797 krat)

jo.js in jo_pack.js [pakirani version]: - preprosto množica objektov JavaScript [UL], ki vsebuje elementov, ki okno in skripte položaja dokumentov. Odprete lahko JO.JS, če želite, da bi dobili vaše roke umazane z nekaj Napredno Javascripting, ustvarjanje abstraktnih nalog, razširitev lastnosti elementov in take. Če ni preveč v Javascripting, ga pusti pri miru.

lightbox.js, lightbox_pack.js [zapakirane version]: - Vsebuje svetlobne skripte upraviteljev polje. Če ste stran oblikovalec, odgovoren tudi z izvajanjem osebni album na strani, morate razumeti LightBoxManager. LightBoxManager v bistvu vsebuje le dve funkciji showLightBox in closeLightBox.

lightbox.css: - če veste, CSS, lahko igral s lightbox.css, da prilagodite videz-n-počutili lightbox.css

index.html: Vzorec izvajanje Lightbox z dveh različnih vsebin

lb_underlay_bkg.png: - To je lahka / podob pregledno sliko, ki se uporablja ozadje za podlogo pošta [podlogo plast pod lighbox, ki preprečuje uporabniku, s klikom na katero koli drugo osebo, na strani, medtem ko je odprt Lightbox]. Uporabite lahko katero koli sliko ali celo trdne barve za ta namen, odvisno od strani oblikovanja in zahteve.

icon_lb_close.gif: - slike za tesno ročaj pošta v zgornjem desnem kotu svetlobe polje. Lahko uporabite katero koli sliko, kot vsak model

Poglej Demo |
Prenesite Lightbox Vir Zip (Downloaded 1797 krat)

Prosimo vas, da nam je vaše komentarje in povratne informacije ...