In my current project, the users need to post articles which may include programming codes. I wanted the code block (pre block) to expand on hover to its full width so that you don't have to scroll the contents to see the entire code.

I was using mb hoverIntent() function but a problem came. I wanted the jquery to execute only if the code block's width is larger than width of the content:

Please see the code and suggest changes:

var contentwidth = $("pre").contents().width();
var blockwidth = $("pre").width();
if(contentwidth > blockwidth) {
 $("pre").hoverIntent(
 function(){
     $(this).animate({width:contentwidth},200); //contentwidth
     $(this).css({'z-index':'auto','background':'#ddd'});
  },
  function(){
     $(this).animate({width:blockwidth},100);
  });
}