Comments on: Fancy Drop Cap – Part 2

By: Karthic

Karthic — Tue, 11 May 2010 21:40:38 +0000

Hi Karl, I am using this fancy letter on my aspx page. I am unable to get the code to wrap the first letter of all the paragraph inside the div..I saw the demo of the new jquery Fancy Letter Plugin but still i wasn't able to implement it. i am using the below code. I am using your alphabets folder container the images of all the letters. I am able to get the image for the first letter of the first paragraph but i need that for all the paragraph in the div. I know the jquery fancy letter plugin wraps all the first letter of paragraph in span tag but i am not able to implement that. Can you send me the sample page using the fancy letter plugin?



$(document).ready(function(){
  swap_letter();  

    
});

function swap_letter() {
  var first_paragraph = $('#content')[0];
  if (!first_paragraph) return false;
  var node = first_paragraph;
  while (node.childNodes.length) {
    node = node.firstChild;
  }

  var text = node.nodeValue;
  var first_letter = text.substr(0,1);
  var match = /[a-zA-Z]/.test(first_letter);
  if ( match ) {
    node.nodeValue = text.slice(1);
    $('')
        .attr('src','images/alphabet/' + first_letter.toLowerCase() + '.gif')
        .attr('alt',first_letter)
        .addClass('fancy-letter')
        .prependTo( first_paragraph ); 
  }
}





img.fancy-letter {

  margin: 2px 2px 2px 0;
}

By: 6 Useful Coding Solutions For Designers And Developers - Smashing Magazine

6 Useful Coding Solutions For Designers And Developers - Smashing Magazine — Mon, 23 Nov 2009 12:42:18 +0000

[...] [...]

By: molokoloco

molokoloco — Wed, 14 Oct 2009 23:06:37 +0000

Hi,

Today this is not work for me in FF3.5...
When i manipulate DOM, css don't apply..

By: Karl Swedberg

Karl Swedberg — Mon, 20 Oct 2008 00:04:04 +0000

Hi Dan,
Nope, no reason at all. charAt will work just as well. Probably a better choice.

By: Dan Phillimore

Dan Phillimore — Wed, 15 Oct 2008 21:24:17 +0000

Is there any particular reason why Line 13:
var first_letter = text.substr(0,1);
Is not:
var first_letter = text.charAt(0);
? Just wondering. Cheers

By: Karl Swedberg

Karl Swedberg — Sat, 04 Oct 2008 13:48:32 +0000

Hi Kenneth,
I have no idea what’s up. Are you using Firefox with Firebug so you can see what’s happening? Are you getting an error message? Do you have a page you can link to so we can see the problem?

By: Kenneth

Kenneth — Sat, 04 Oct 2008 03:19:49 +0000

I for the life of me cannot seem to get this script to work… I don’t know what I am doing wrong. I have Jquery and your script in place. I have your alphabet files and still… nuthin. What’s up??

By: Karl Swedberg

Karl Swedberg — Tue, 02 Sep 2008 20:37:08 +0000

Nick, the issue that Wojciech and Craig were referring to was accessibility when JS is enabled, not graceful degradation. Screen readers that take JS into account would read out the image’s alt attribute and then “hat’s all there is to it.”

By: Nick

Nick — Tue, 02 Sep 2008 20:20:37 +0000

Wouldn’t the source just show:

That's all there is to it!</strong>

because jquery is applied on the fly? Then if javascript was disabled, it would just show up as a letter formatted like the rest of the paragraph. Seems like the span wouldn’t be necessary.

By: Craig

Craig — Sat, 17 May 2008 13:31:02 +0000

Thank you Karl!!!