Hoppa direkt till innehåll

Snygga till rubrikerna med jQuery

2008-09-30 - javascript, jquery
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:
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.
Mer i Tutorials
Expos  Stickies
Bygg MySQLqueries automatiskt
Mail Processing
Snygga till rubrikerna med jQuery
Min feed
Fixa transparenta PNGbilder i Internet Explorer 6
Rkna tid med PHP
Nyckelord: javascript eller jquery
Javascript library converts Flash to HTML5
Skapa snyggare tooltips med jQuery
Snygga till rubrikerna med jQuery
jQuery
Nytt projekt på gång: Ljussablar som ljuskälla
Hemma-Spa klart!
Alien: Romulus
Börjar likna en bar!
Reglar på plats
Rivning pågår!
Mjölner!
Örnen börjar bli redo för Sweden Rock
Utebar!
Mixtejp
Norrsken
Kan ha "råkat" skaffa något på Sci-Fi-mässan
Recension: Steam Hotell
Det börjar ta form med hemma-spa:et
Rostfärg och IKEA-lampa
Create a physical book from my digital book
Survey Island
Someone is trying to sell my map!
Julkalender
Myst book updated
Recension: Yasuragi Ryokan Hanare
Recension: Ad Astra
Ny tatuering - midgårdsormen!
Minnestal till en kaffekopp
Förlovade
Sweden Rock 2023
Ny nummerskylt för huset
Fix i husbilen
Grubbelgubbe
Uppdateringar i verkstaden!
Måla med rostfärg
Vårfix i trädgården
Jung Kook
Pappaskämt och annan humor
Bilder på spelbordet när det används
Använda laserskäraren för att skapa innehål...
Julklappar med laserskärare
Budget-Spa
Nyckelskåp
Fjällkaffe
1/20 DeLorean Time Machine
Caso Outdoor Cooler
Minikyl Coca Cola
Verktygsvagn med verktyg, 161 delar
CSS filters for background images
Huset ommålat!
Skiss för tatuering
Spelbordet klart
Laser cutting my Myst Island
We Can Do It