Karl, for some nicer degradation you could use the first-letter
pseudo-element selector:
p:first-letter {
font: 2.5em/80% serif;
}
And you should include an alt attribute in case users have images disabled:
$('<img />')
.src('/images/alphabet/' + text[0].toLowerCase() + '.gif')
.addClass('fancy-letter')
.attr('alt', text[0]);
.prependTo( firstP );
-- Klaus
Karl Swedberg schrieb:
> On Sep 16, 2006, at 8:48 PM, John Resig wrote:
>
>> Maybe something like this?
>>
>> function swap_letter() {
>> var firstP = $('#main-content p:first-child')[0];
>> var text = firstP.innerHTML;
>>
>> if ( text ) {
>> firstP.innerHTML = text.slice(1).
>> $('<img />')
>> .src('/images/alphabet/' + text[0].toLowerCase() + '.gif')
>> .addClass('fancy-letter')
>> .prependTo( firstP );
>> }
>> }
>>
>> I wish it was just as easy to deal with text as it was the DOM.
>> (Hmm... a new plugin?)
>
> works brilliantly! ( after changing the period to a semicolon in the
> line, " firstP.innerHTML = text.slice(1). " )
>
> Thanks so much, John!
>
> What I like about this drop-cap method is that the HTML stays
> readable for search engines, if that's a concern, and it degrades
> nicely when JavaScript is turned off.
>
> Anyway, I'll write something up on the Learning jQuery blog some time
> this week.
>
> thanks again,
>
> karl
>
> _______________________
> Karl Swedberg
> www.englishrules.com
> www.learningjquery.com
>
>
>
> _______________________________________________
> jQuery mailing list
> [email protected]
> http://jquery.com/discuss/
>
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
