Snygga till rubrikerna med jQuery
2008-09-30 - javascript, jquery
0
Jag har lagt till en liten söt jQuery-funktion på sandman.net för att snygga till rubrikerna lite. Den är löjligt enkel. Vi börjar med CSS-koden:
H2 {    font-family: Helvetica, Arial, sans-serif;    color: #333;    text-transform: uppercase;    font-weight: bold;    font-size: 24px;    line-height: 28px; } H2 > DIV {    color: #336699;    line-height: 33px;    font-size: 35px; }
Så H2 får ett visst utseende, och sen om det finns en DIV inuti H2:an så får den ett eget utseende. Så koden:
<H2>Snygga till<DIV>rubrikerna med jQuery</DIV></H2>
Ska alltså se ut så här:
snyggatill
Så här ska det se ut
Och här är jQuery-koden som gör det:
$("H2").each(function(text){    var text = $(this).text();    parts = text.split(" ");    if (parts.length > 3){       var first = parts[0] + " " + parts[1];       parts.splice(0, 2);       var second = parts.join(" ");       $(this).html(first + "<div>" + second + "</div>");    } });
Vad den gör är att den helt enkelt kollar om rubriken innehåller fler än tre ord, och om den gör det så tar den alla ord efter dom två första och lägger till en annan stilmall helt enkelt. Det går ju att anpassa efter eget bevåg förstås. Sen om just detta är snyggt är ju upp till var och en att avgöra.
Vill man inte använda jQuery så kan man faktiskt uppnå en liknande effekt med CSS bara, genom att använda pseudo-elementet "first-line". Då ser CSS-koden ut så här:
H2 {    font-family: Helvetica, Arial, sans-serif;    color: #003366;    text-transform: uppercase;    font-weight: bold;    color: #336699;    line-height: 33px;    font-size: 35px; } h2::first-line {    font-size: 24px;    line-height: 28px;    color: #333; }
Vad som händer då är att den första raden av rubriken är mindre och i en annan färg, så man ser bara effekten på långa rubriker som går över på två rader. Jag ville helst att det skulle bara vara på de två första orden så jag valde att testa det med jQuery, får se om jag går tillbaka till CSS-metoden bara senare.
Får lite välbehövlig hjälp att fixa med elen i verkstaden
Improvisationsteater på Västmanlandsteatern. Lika delar pinsamt och skoj :)
Har ryggskott som börjar bli bättre. Nyser nu på morgonen och det hugger till i ryggen och gör ont som fan. Kollapsar på golvet, och när jag reser mig upp så har jag råkat få igång Siri som tror sig ha hört detta. Ok, det gör ont som fan, men jag är ok, Siri :)
Har en trappa hemma som måste renoveras, menrenoveringskit är dyra som tusan, tanken är att jag ska bygga eget renoveringskit, får se hur det går…
Bakbunden
Även en ordentlig geringsfräs för att kunna bygga hållbara trappnosar
Har införskaffat mig en planopress inför kommande bordsprojekt samt ett test för en trapprenovering.
Byggde en pokalhylla till dotterns alla danspokaler
Pricken över i:et :)
Bakbord
Nytt projekt på gång, bakbord till svärfar :)
“Gå och lägg dig” - ”Nej jag kollar på TV med Leia” :)
Extrabord till jul
Extrabord till julafton klart! Byggvideo kommer inom kort på min youtube :)
Weehoo, jag har en egen stämpel nu. Det ni!
Bordskiva oljad och vaxad, ben borstade och betsade. Kanske blir ett bord till slut?
Bordsskiva betsad. Ska slipas/borstas och sen oljas.
Renoverat vardagsrumsbord
Favoritbild från dansuppvisningen igår
Bordsskiva limmad, hyvlad, slipad och sen borstad. Betsning nästa
Limmar bordsskiva
Nattduksbord
PanPastel-porträtt
Crock Pot
PanPastel
Tron för Sigge
Road Trip Italien!
Verkstad Remake
Jonas och Jenna
Brud som chillar
Showing off
Undressing
Touch thyself
Hot Love
Profilporträtt
Resa utan kamera?
Paus
Supernöjd med folieringen!
Bilen ska folieras!
Ny såg
PHP och BankID
Jack Skellington
Verkstadsplaner
Magnettavla
Verandatak och grillhörna!
Vardagsrumsbord
Knivblock
Kökshylla
Ny ikon för karta
PC-bygge
Kerlee 35mm f/1.2
Objektivhylla
Natalie Dormer
Hållare till kattmatsskålar
Hälsningar från Norge
With a little help from my friends...
The Most Incredible Fantasy Maps You've Ever Seen
Cityfestivalen
Mitakon Speedmaster 50mm/f0,95
10 minuter vatten
Sony A7R II
Petzval 58 Bokeh Control Art Lens
Scrawlrbox
Nya skärmar till jobbet
Nikon Df - ny leksak
Boba Fett
First Order Storm Trooper
Mikisen
#inlineditbutton