Typeface.js :hover workaround

A while ago I wrote a sIFR vs Typeface.js article, and ever since then I’ve seen hits to my site from people searching for a :hover workaround for Typeface. Here’s a limited solution. It’s using jQuery, but you could easily adapt this method to use another library (or none at all). I’ll admit this isn’t the most eloquent solution in the world, but this proved to be functional, so I thought I’d share.

var typefacehover = function (){                            
  $(".typeface-js").each(function(){
    //Get all the classes for an element. 
    var elementStyles = $(this).attr('class');
    elementStyles = elementStyles.split(' ');
    //Run through them and check for a :hover color property.
    var hoverColor;                                
    for (var i in elementStyles){                                        
      var temp = getCSSColor('.'+elementStyles[i]+':hover');                           
      if(temp) {
        hoverColor = temp;                                        
      }
    }
    if(hoverColor){
      var element = $(this).html();
      //Duplicate the element, create a new hover version of the element (hidden) and add a container to each one so that we can distinguish between the two.
      var hoverElement = '<div class="typeface-js-hover" style="color:'+hoverColor+';display:none">'+element+'</div>';
      element = '<div class="typeface-js-nohover">'+element+'</div>';
      var newElement = element + hoverElement;
      $(this).html(newElement);
 
      //Add the event listener. You could do fade transitions here if you wanted to be fancy.
      $(this).hover(
        function(){
          $(".typeface-js-nohover",this).hide();
          $(".typeface-js-hover",this).show();
        },
        function(){
          $(".typeface-js-nohover",this).show();
          $(".typeface-js-hover",this).hide();
        });
    }
  });
}
 
 
//Kudos: http://www.mail-archive.com/jquery-dev@googlegroups.com/msg03390.html
var getCSSColor = function(selector){                            
  var re = new RegExp('(^|,)\\s*'+selector.toLowerCase()+'\\s*(,|$)');
  var color;                            
  $.each ($.makeArray(document.styleSheets), function(){
    $.each (this.cssRules || this.rules, function(){    
      if (re.test(this.selectorText)) {                                        
        color = this.style.color;                                        
      }
    });
  });
  return color;
}

I hope to find the time to develop a more robust solution in the future. Let me know if this was helpful!

Share and Enjoy:
  • Print
  • Digg
  • Google Bookmarks
  • email
  • StumbleUpon

Date: Monday, April 19th, 2010
Category: Web Dev

  • I think this works better.... and in all browsers... It's a little jquery patch I wrote after I found this post.
    Just copy it somewhere after the DOM is ready. (jquery.ready())
    What the problem is, is that :hover not a css pseudo selector is, but a event state. So it only gives the right color on mouse over.
    The fix is, rebuild the element on mouse over, so you find the right color. The rebuild is only done the first time you role over it. After reading the typeface rource, I found the render method to fix the text in the new color. Done is my meshup. Have fun with it.



        $(".typeface-js a,a.typeface-js").hover(
            function(){
                if(!$(this).hasClass('typeface-js-hover-checked')){
                    $(this).wrapInner('<span class="typeface-js-normal"></span>').append($('<span class="typeface-js-hover"></span>').text($(this).text()).css('color',$(this).css('color'))).addClass('typeface-js-hover-checked');
                    _typeface_js.renderDocument();
                }
                $(this).find('.typeface-js-normal').hide();
                $(this).find('.typeface-js-hover').show();
            },
            function(){
                $(this).find('.typeface-js-normal').show();
                $(this).find('.typeface-js-hover').hide();
            }
        );
  • Javier Romero
    Can you post a working html/css example?
  • Jadranko Dragoje
    It does not work in IE. Also your regex does not work when you have parent class in css (example: .main-menu .item:hover).
blog comments powered by Disqus
  • « Older Entries
  • Newer Entries »

Copyright © 2009 Rajeev Singh