I was playing with sIFR 3 for a client's project and I was trying to use the :first-letter CSS selector inside the sIFR replaced flash text. If I get it right this is not supported so I made the following hack:
Suppose that we have the following markup:
Inside the head part of the html page (or in an external js file that is loaded before the sIFR activation) I put this small script:
Now, all we have to do when we call sIFR.replace is to add the following CSS rule:
Let's wrap it up now, shall we?
Obviously, for the above to work you will need the appropriate swf files and a basic knowledge of how to use sIFR. For more info you can take a look at this tutorial.
Disclaimer: I know this is not the cleanest solution possible but it's a quick and dirty way of getting the functionality you want on some specific headings, etc... Please don't copy & paste the previous snippet cause there are high chances that it won't work! Customize it for your own needs and requirements and let me know of any recommendations/suggestions :)
Subscribe to:
Post Comments (Atom)
2 comments:
yo Nikos,
this sound interesting.
I Wanted to implement it in Drupal. Using the Dynamic Redner Plugin and sifr 3.
Could you describe more how to implement. Is the span necessary?
Like your script.
I made some modifications to be able to adjust more elements.
$('div#container h1 a').each(function(index){
var original_content =$(this).text();
var with_fake_first_letter = '<span class="first-letter">' +
original_content.slice(0, 1) +'</span>' +
original_content.slice(1, original_content.length - 1);
$(this).html(with_fake_first_letter);
});
Post a Comment