Reputation: 374
I am using this ligature.js script to add ligatures to my site: http://code.google.com/p/ligature-js/
The problem I am having is I want to only apply it to certain class names because if it gets applied to some system fonts, other than the web font I am loading in, the ligature characters do not appear in Windows.
The docs say to implement it on specific elements using:
ligature(false, document.getElementById('myMemoirs'));
How can I use this to apply it to different classes, like .site-title, or use jquery to do this? Thanks in advance.
Upvotes: 0
Views: 365
Reputation: 41
We're using this jQuery solution in a Drupal base theme (works great BTW) and have it set to target multiple selectors as shown below. Is there an easy way to turn off the ligature replacement on certain selectors with an override script in some of our sub-themes? Our sub-themes inherit our base theme scripts, but we don't always want ligature replacement on all the previously defined elements.
$.each($('h1, h2.site-name, .node-page h2, .node-page h3, .node-page h4'), function(index, element) {
ligature(false, element);
});
Upvotes: 1
Reputation: 673
If you look at the ligatures source code you will notice that it only supports passing one element as the second argument, but it does support going through all of the passed elements children to apply ligatures. You can apply ligatures to multiple elements by going through them in a loop calling the function with one element at a time.
var siteTitle = document.getElementsByClassName('site-title');
var elemLength = siteTitle.length;
while(elemLength--) {
ligature(false, siteTitle[elemLength]);
}
OR with jQuery
$.each($('.site-title'), function(index, element) {
ligature(false, element);
});
But probably the best way to do this would be by refactoring the function to process multiple elements.
Upvotes: 1