Uttrykke IT

En annen rask Tut. Her er noe enkelt og fint ved hjelp av kraften CSS ... men var vanskelig concieve (og det sikkert ikke var meg) til å begynne med. Legge Dropshadow, kan være en peice kake for mange av oss, ved hjelp av noen bilderedigeringsprogram verktøy som Photoshop ANF Fyrverkeri etc.
Grunnen, valgte jeg for slagskygge ved bruk av CSS er at vanligvis mens du oppretter en side design / html av en søknad, krav holde gjentar. Hva jeg mener er, i en eksisterende nettside med mange bilder, som de viser freinds liste eller en bildegalleri, vil det være vanskelig å reprosessere hele belastningen av bilder som hadde blitt alt losset å legge til eller fjerne skyggene, for at saken.
Så hvis du har gjort litt fremover tenkning, mens skape HTMLS å legge disse ekstra divisjoner eller vanligvis situasjonen er at du har en Loop Logic genererer disse ikonene / miniatyrer i XSL, PHP. JAVA eller andre programmeringsspråk / skriptspråk, kan du legge det når som helst, da er bare spørsmål om showet og skjule disse skygger ved hjelp av CSS display eiendommen, i henhold til de klientene stadig skiftende krav ... jeg havn't gjort slike fremtidsrettede før dette ... men ahev gang nå!

I eksempelet nedenfor er det opprinnelige bildet skygge gratis og dropshadows brukes som kreves! Også har jeg gått litt ekstra, ved hjelp av triksene av mine tidligere Tut (Well! disse antagelig er kortest rekke veiledninger, så det er bare rettferdiggjøres å kalle dem "Tut" 's) om hjelp CSS Clip Eiendom for briljere bare

Original bilde

CSS DropShadow Resultater

Se demo | Last ned sourcefiles

Hvorfor ønsker jeg å forstå dette?? Humm ...!!

De fleste av CSS forfattere vil være enige om at CSS Clip eiendom er trolig en av de un-brukte CSS egenskaper. Det var så sant for meg også, og var mest glad for å overse det, før jeg begynte å endre MooTools TO Knob (Pin) Slider Komponent (med Range Indicator) .

Det var et godt forslag fra en av komponenten brukerne til å endre Slider Component hjelp klippede backgroud bilder (mot en variabel bredde divisjon) for å indikere glideren serien. Dermed kom min tid til å gå inn i moroa, men FN-chartret (for meg selvsagt) farvann av CSS Clip eiendommen.

Vel! hvor vanskelig det kan være? Ikke mye i det hele tatt ... ja og nei. Syntaksen for å bruke CSS Clip eiendommen er ganske oppreist, men meningen / usuage er litt croocked. Med et minne som min, hver gang jeg sitter å omarbeide på min Slider Script ... har jeg tokeep henvise tilbake til bruken av dette klippet eiendom, for å minne meg selv den logikken som jeg har skapt i manuset mitt .... Derfor! tenkte å pennen ned, med et håp om å huske det i fremtiden (og også til fordel for dem som synes boggled av CSS Clip Eiendom)

Hva gjør CSS Clip?

Clip er en del av den visuelle effekter modulen av CSS 2.1. Enkelt sagt, er dens jobb å plassere et synlig vindu på toppen av et objekt som blir klippet, derav klipping bilder og lage miniatyrbilder uten å måtte opprette flere filer (jeg har allerede lagt denne funksjonen til bedre bruk i Slider Component )

Bruke CSS Clip eiendommen, kan du opprette en klipping med rect form. Som mange andre CSS-egenskaper (som margin, padding etc), ved hjelp rect krever fire koordinater Topp, Høyre, Bunn, Venstre (FEIL). Den croocked natur denne eiendommen reflekterer når du tar en nærmere titt på hvordan klippet beregner klipping regionen, ved hjelp av disse fire koordinater (sender hjernen til en kaste for en stund). Nå å forvirre deg bunnen starter fra toppen, og retten starter fra venstre. . Du ser hva jeg sa? .... Derfor dette innlegget ...

Denne lille forvirring kan lett forsvinne, med denne visuelle forklaring av CSS Clip / rect eiendom som under!!

CSS Clip Krav

Oppgaven vi har begynt å klippe følgende miniatyrbilde til et rettvinklet ser bilde (og også en vidvinkel bilde)

Original Thumbnal / Bilde	Clip Krav til sqaure Thumbmail

CSS Clip Resultater

Se demo | Last ned sourcefiles

Dette spørsmålet streifet meg noen ganger før, da jeg jobbet på steder tidligere også, som brukes til WordPress for å vise blogger eller ny type innhold i noen del av området / portal.Being en nybegynner i PHP og rundt WordPress, holdt jeg procastinating det, tenker "dette er ikke mitt peice av kaken". Endelig! Dette kravet kom upto nesen min, da begynte Diggin rundt litt for løsning.
Jeg ble overrasket over å finne at det egentlig var lettere enn jeg trodde faktisk det var, for å vise en liste med overskrifter eller siste innlegg på en annen side utenfor WordPress-drevne delen, bare ved hjelp av en liten bit av PHP og WordPress API .

Her er hva du skal gjøre: -
Av hensyn til forklaring, antar at området er http://www.inchembur.com/ og du har nyheter seksjon for dette området på http://news.inchembur.com/ (som kjører WordPress). Nå kravet er å vise siste innlegg fra http://news.inchembur.com/ på hjemmesiden til det viktigste området, dvs. http://www.inchembur.com/index.php

Trinn 1: I index.php din legger du til følgende peice av kode, Inkluder WordPress API filen. Du kan legge denne til toppen av siden du vil at innlegget skal vises på.

<? Php
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ('WP_USE_THEMES', false); / / Disbable bruk av WordPress Theme
krever ('/ var / news.inchembur.com / wp-blog-header.php'); / / Ta WordPress API
; // Get Latest Post query_posts ('showposts = 1'); / / Få siste innlegg
>

I ovenstående peice av include, vi får bare den ene nyeste innlegget. Hvis du ønsker å prøve flere varianter gjerne grave seg inn, query_posts() dokumentasjon .

Trinn 2: Nå, i den delen av Index / Home side der du vil vise den nyeste WordPress innlegg fra http://news.inchembur.com , bruker du følgende kode. Unødvendig å si, gjerne annonse dine styling divisjoner, spenn og klasser som per dine design behov.

Trinn 3: Det er ingen Trinn 3 ... Thats det ... du er ferdig!

Hvordan vise en spesifikk post / side i motsetning til siste innlegg: -
Dette kan lett oppnås ved å endre argumentene til query_posts() for å inkludere siden ID eller siden slug

) ; query_posts ('page_id = 7');
) ; query_posts ('pagename = om');

eller Du kan kontrollere antall innlegg:
) ; query_posts (showposts = 3);

Noen ganger for å holde pageweight ned ... vi har delt våre scripts i fragmenter ... Disse javascript fragmenter kan lastes ved behov (på en hendelse eller klikk på en lenke eller knapp osv.).

Laster Javascripts er dynamisk enkel og ganske rett frem som under ...

= “text/javascript” > <Script type = "text / javascript">
funksjon loadNewScript (kilde) {
Var s = document.createElement ('script');
s.setAttribute ('type', 'text / javascript');
s.setAttribute ('src', kilde);
document.body.appendChild (s);
}
</ Script>

og du kan ha følgende samtale koblingen hvor som helst i kroppen, eller du kan få dette skriptet "onLoad" av selve dokumentet ...

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

eller

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

Hvis du er css person, ville du kjenner smerte i å få layoutene arbeider cross-browser. IE8 er enda en skiftenøkkel i verk for oss utviklere. Anywaz! hvis du treffer på dette problemet, som jeg gjorde i går, der perfekt å jobbe CSS i IE7 (og tidligere) og Firefox har plutselig begynt å kaste tantrums i IE8, prøv dette ... det pent syntes å fikse problemene mine for øyeblikket ....

Bruk Meta-erklæringen, kan vi spesifisere rendering motoren vi ønsker IE8 å bruke. Så for å tvinge IE8 til å gjengi som IE7 ... Sett inn følgende Metakode i hodet av dokumentet: -

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

Som standard IE Meta vil være: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
som ville gjøre IE8 gjengi siden ved hjelp av nye standarder modus.

Om nødvendig, kan denne syntaksen brukes til å kompensere for andre nettlesere som følger:

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

MER Om Doctyper:

HVIS du er ennå ukjent med den slags dyr kalt "Doctype" ... her er noen raske lese
Hva er Doctyper? Hva omfatter surfing quirks og STRENGT modus?
Stille DOCTYPE i XSL

For en mer inngående forståelse om Doctyper, prøve å besøke disse linkene ...
A List Apart: Fix Your Site Med riktig DOCTYPE!
A List Apart: Beyond DOCTYPE: webstandarder, Forward kompatibilitet, og IE8

Merk: Selv om mange av oss HTML / CSS folk har vært å neglisjere betydningen av DOCTYPE decleration i våre dokumenter, Stille rett DOCTYPE, er vanligvis svaret til de fleste kryss problemer med nettleseren.

Med en rekke Karuseller der ute, mange for MooTools også, jeg fortsatt besluttet å skrive min egen Carousel klasse, for noen gode grunner
1. Ønsket en personsøker funksjon (for å kunne hoppe et bestemt lysbilde / trinn i karusellen).
2. Ønsket frihet med plassering av Venstre og Høyre / linker, der jeg noen gang vil.
3. Mer kontroll over Slide trinn.

Jeg klarte å lage en ny Carousel, med de ovennevnte funksjoner ... som under ... gjerne foreslå noen endringer du måtte trenge!

Mitt eksempel ser slik ut ... [ Se demo ]

Se demo | Last ned MooTools karusell med Paging Version 1.0 (Nedlastet 1990 ganger)

1. Carousel Personsøker

Du kan enkelt legge til personsøker til karusellen din, ganske enkelt ved å sette paging flagg, som er siste parater passerte mens du oppretter forekomsten av MooCarousel til sann (ønske paging) eller falsk (donot ønsker paging).

Var carousel1 = ny MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = antall lysbilder, sss = lysbilde steg størrelse

Og selvsagt kan du endre utseende-n-følelse av disse personsøk achors som du vil ved å endre deres CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging gjeldende, carousel_paging side {skisse: none; bredde:... 15px; høyde: 15px; linje-høyde: 15px; text-align: center; display: block; float: left; bakgrunn: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging a: hover, carousel_paging nåværende {background: # 4D4D9B; color: # FFFFFF;}..

Vel! det er en liten sak om, sidevekslingen ankere hvis sett, så vil det bli generert alltid etter Carousel komponenten. Jeg ønsket å gjøre det dynamisk også, men da bare for å holde Script for å blåse ut av proporsjoner, bestemte jeg meg for å hoppe over det.
Men du vet litt Javascript, kan du lett endre sidevekslingsfilen generasjon koden i MooCarousel klassen å behage dine behov.

2. Tilpasse Venstre & Høyre Ikoner

Du kan endre plasseringen, bilder eller noen displat eiendom på venstre og høyre knapp bare ved å spille rundt med CSS. å kunne endre plasseringer av Venstre og Høyre buttoms var selve grunnen for meg til høyre for meg vår Carousel Class.
Siden dette MooCarousel klasse, aksepterer id er av disse knappene, kan du faktisk plassere disse knappene hvor som helst på siden, hvis du ber ... det trenger ikke å være i element hierarkiet, som i mitt eksempel.

Var carousel1 = ny 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; stilling: relative; bredde: 23px; høyde: 20px; float: left; markøren: pekeren;}

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

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

3. Tilpasse Slide Steps

Hva mener jeg Brukerdefinere SLIDE trinn?
De fleste Karuseller skyv fulle med av det synlige vinduet. Så sier du hadde fire elementer (som i mitt eksempelet ovenfor), vil den skyve alle de fire elementene. Med denne Carousel Component, passerer du antall lysbilder og steg størrelsen du ønsker.

Var carousel1 = ny MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = antall lysbilder, c_sss = lysbilde steg størrelse

Også i mittnavn1 min har jeg calcuted raset trinnet størrelse, basert på logikk der, vet jeg antall elementer, bredde på hvert element, og marginene som har gitt etter hvert element i CSS min.

/ * For Carousal 1 * /

Var c1_w = 92; / / Carousal element Bredde

Var c1_n = 10; / / Antall sammenligning Carousal Elementer

Var c1_pp = 4 / / Antall sammenligning Carousal Elementer perpage

Var c1_marginFactor = 51;

Var c1_sss = c1_w * c1_pp; / / sss = lysbilde steg størrelse

Var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0,5); / / NS = antall lysbilder

c1_sss + = c1_marginFactor; / / sss = lysbilde skritt størrelse, 51 for marginer

Krav: MooTools 1.2

Se demo | Last ned MooTools karusell med Paging Version 1.0 (Nedlastet 1990 ganger)

MooRating er en enkel (kryss nettleser, selvfølgelig som den bruker makten til MooTools biblioteket), lette og utmerket MooTools basert vurdering løsning. Det er ikke betegnet som "Star Rating", ganske enkelt fordi kunne vurdering bildet være som du velger (jeg har gitt Stjerner, barer og hjerter med nedlastingen, men du kan lage din egen variasjon og bare slippe den i).

Hvordan det ser ut som:

	MooTools Rangering med forskjellige bilder Se demo
	MooTools Rangering med Prosentverdiene Se demo
	MooTools Rangering med brøkverdier Se demo

Last ned Mootols Stjerner Script (Nedlastet 718 ganger)

Rangering data: Heltall, Desimal eller prosentvis
Foreløpig skriptet er laget for å vise de reisende data som hele verdier (1,2,3,4,5), i desimaler (1,24, 3,45 etc) eller i prosenter (12%, 55% osv). Valget å vise data i noen av de nevnte formatene kan settes ganske enkelt ved å endre noen flagg verdier innenfor JavaScript (moorating.js)
I utgangspunktet er det to e to flagg å spille med, for å vise verdier i det formatet du ønsker ...

Var inpercent = false; / / Sett denne flagg til true, hvis du trenger prosentpoeng verdier som skal vises
Var isFractional = false / / Sett denne til true, hvis du ønsker brøkverdier som 1,24, 1,25, 4,56 snarere enn 1,2 ... 5

Og jeg tror ikke det er noen forklaring kreves for dette. Videre. Manuset er svært enkel. Hvis du vet litt javascripting, kan du endre skriptet til å få noen form for verdi vises. For eksempel hvis du ville ha tre desimaler som skal vises ... bare finpusse manuset som under ...

if (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] innerHTML = formatNumber (x, 3);.} / / 2 endres til 3
else {moostartval [i] innerHTML = Math.round (x).;

Oppdatering Rangering Value:
Jeg har ikke gidder skrive noen AJAX skript for å oppdatere Ratings verdi, fordi jeg vet fra min erfaring at ikke alltid gjør det til hensikt å oppdatere RATING så snart brukeren priser noe. Du er fri til å gjøre hva du vil med den nominelle verdien, oppdaterer du den ved hjelp av AJAX eller Send det eller ligger en skjult skjemafelt verdi, som skal leveres med hele skjemaet etc.

funksjon updateRating (id, rating) {
/ / Alert (id + "," + rating);
/ / Gjør alt MED RATING
}

Det er funksjon i javascript som heter "updateRating". Denne funksjonen har blitt passert IDen til vurdering div, å identifisere om hvilke karakterer (hvis det er mer at man stemmer på siden) ble oppdatert, og verdien av rettigheten [updateRating (id, rating)]. Du kan velge å hva du vil med disse verdiene, som jeg nevnte tidligere.

Rating Bilde: Stjerner, Hjerter, barer eller noe du vil
Endre karakter til noen av de ovennevnte typer (stjerner, hjerter osv.) er veldig enkel. Bare opprett et bilde som ligner på en forutsatt og slipp den i. Husk, hvis du endrer navnet på bildet, gjør nødvendige endringer i CSS-filen, se nedenfor.

. Moostar {margin: 0px; padding: 0px; overflow: hidden; bredde: 84px; høyde: 20px; float: left; bakgrunn: url ('stars.gif') repeat-x;}
. Moostar span {float: left; margin: 0px; padding: 0px; display: block; bredde: 84px; høyde: 20px; text-decoration: none; tekst-innrykk:-9000px; z-index: 20;}
.. Moostar curr {background: url ('stars.gif') forlot 25px;}

De fleste rangeringer widgets bruke stjerne og halv-stjerners bilder med musen over arrangementer på hver stjerne. Moo Ratings bruker en enkel sprite bildet som et bakgrunnsbilde for å oppnå de nødvendige visuelle effekter med en svært lav overhead.

Krav: MooTools 1.2
Last ned Mootols Stjerner Script (Nedlastet 718 ganger)

I Firefox ... Noen ganger vil du kanskje har lagt merke til at markøren begynner å blinke på skjermen. Det kan skje når du klikker på et element på siden, en divisjon eller et bilde osv. Dette blinkende markør i nettleservinduet er faktisk en TILGJENGELIGHET funksjon i Firefox kalles 'caret surfing'. Denne funksjonen lar / lar brukerne velge tekst på siden med tastaturet (som vi vanligvis pleier å gjøre med bruk av mus vår).

Vel! hvis du donot ønsker denne funksjonen ... enkelt trykk "F7" for å veksle det til falsk og vice-versa (hvis du vil ha den på). Du kan også skrive "about: config" i adressefeltet (skriv inn "caret" i Filter-boksen) og bare dobbeltklikk for å endre alternativet "accessibility.browsewithcaret" fra "true" (slå cirkumflekstegn surfer på) til "false "(slå cirkumflekstegn surfer OFF)

Jeg hadde vært på utkikk etter en dobbel fastklemt skyveknapp (stolpe med to knotter, minimum og maksimum) bruker MooTools. Selv gjorde jeg finne noen godt gjort dobbelt festet glidebryteren i MooTools forumet, var det eneste problemet at alle disse gliderne dint har det merkede området markør. Endelig! Jeg bestemte meg for å lage min egen. Vel! Jeg gjorde bruke den opprinnelige koden og endre det å ha en skyveknapp bakgrunn som indikerte intervallet valgt visuelt, som i mitt eksempel nedenfor. De blå områdene viser omfanget av verdi valgt.

Vis Versjon 2.2 Demo | Last ned MooTools Double Flyttet Slider Version 2.2 (Nedlastet 11721 ganger)

Du kan veldig enkelt endre utseendet området indikatoren (i blått i eksempelet ovenfor), glidebryteren knotten, glidebryteren spor ved å endre slider.css etter behov.

Du må slippe meg en kommentar hvis du finner det nyttig.

Før vi måtte håndtere CSS for å lage våre sideoppsett, samkjøre noe av innholdet i en tabellcelle virket bare som en lek. Bare still inn på "align" eller "valign" eiendom på bordet for å få plasseringen av ditt valg, stykke kake!
Med CSS-layouter, selv om vi har "vertikal-align" eiendom for elementene, ser det ikke ut til å være så enkelt som "align" eller "valign" egenskaper. For å være mer specifiic den "vertikal-align" aldri ser ut til å løse noen av dine problemer, spesielt hvis er skrive et stykke for kryss-nettleser CSS.

Uten bruk av HTML-tabeller, problemet med sentrering på objekt, det være seg et bilde eller tekst i en inneholder divisjon, har trolig vært hver UI / CSS utviklere mareritt på enkelte punkt. Dette problemet fremskriver ytterligere bekymringer å samkjøre, hvis objektet som skal sentreres er dynamisk i sin natur, dvs. når høyden er variabel (ukjent høyde).

Selv om det er ingen kjent rett frem løsning som ville fungere på tvers av nettlesere vi har å forholde seg til, den løsningen som jeg har forsøkt å komme fram til synes å arbeide i de få nettlesere som jeg har prøvd det i (IE6, IE 7 , FF).

LØSNING:
I nettlesere som Mozilla, Opera og Safari, Den merkelige oppfører "vertikal-align" eiendom kan bringes til sine sanser, bare ved å sette "display" egenskapen til beholdersiden divisjon til "table-cell" (display: table-cell) .

Problemet er fortsatt med IE familie av nettlesere, som vet ennå ikke synes å forstå hva som skal med "table-cell" eiendom og uvitende som de er, de bare ignorere det. Løsningen gitt nedenfor, men enkle, annonser noen flere DOM elementer til HTML for å få ting til å skje.

CSS og HTML ser slik ut
.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/> visninger: 3456 </ div>
</ Div>
</ Div>

Resultatet ser slik ut: -

se demo her | Last ned kildefiler (lastet ned 452 ganger)

TOP Juster 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/> visninger: 1234 </ div>
</ Div>
</ Div>

Resultatet ser slik ut: -

BOTTOM Juster 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/> visninger: 1234 </ div>
</ Div>
</ Div>

Resultatet ser slik ut: -

se demo her | Last ned her

Virker som aldre, siden jeg prøvde å finne en fornuftig løsning på dette problemet justering. Men nå med denne løsningen, føler jeg på litt fred.

Med et håp om at en dag

• vertikal justering eiendom i CSS vil fungere som den gjør i en tabellcelle, UTEN å måtte slå mye rundt grøten
• Minst, sette margin-top: auto og margin-bottom: auto, vil gi som samme resultat som med margin-venstre og marginen til høyre satt til auto
• De Nettleser kriger vil være over en dag.
• Det vil bare én nettleser for ALLE.

Last ned CSS og HTML av ovennevnte løsning her (Nedlastet 452 ganger) .. for forståelighet, er CSS ikke blitt optimalisert

PS: Og forresten, de er miniatyrbilder av noen bilder jeg har klikket ...