Problèmes avec Cufon et IE6/7/8

Question

Je travaille sur une reskin de ce site, mais j'ai un problème étrange avec Cufon. Cela fonctionne parfaitement avec les éléments html tels que H1, H2 etc. mais ne fonctionne pas du tout aveC# ID et classes.

Quelqu'un peut-il offrir des idées? Merci d'avance.

Answer 1

Pas de problème, celui-ci est facile à réparer. Il suffit de réorganiser vos balises de script dans la tête du document. jQuery doit être chargé avant Cufon.

Explication: Cufon va essayer d'utiliser si n'est pas détecté une bibliothèque comme jQuery document.getElementsByTagName native du navigateur, même si la bibliothèque est chargée après charges CUFON. En chargeant jQuery en premier, Cufon le détectera, et tous vos appels au Cufon.replace(); utiliseront jQuery.

Sur une note de côté, Holy HTTP HTTP Requests Batman!

<script src="/www/include/js/cufon.js" type="text/javascript"></script> 
<script src="/www/include/js/aller.js" type="text/javascript"></script> 
<script src="/www/include/js/ebrima.js" type="text/javascript"></script> 
<script src="/jss/jquery/jquery.js" type="text/javascript"></script> 
<script src="/jss/jquery/jquery.form.js" type="text/javascript"></script> 
<script src="/jss/jquery/jquery.livequery.js" type="text/javascript"></script> 
<script src="/jss/jquery/jquery.selectboxes.js" type="text/javascript"></script> 
<script src="/jss/jquery/nyroModal/js/jquery.nyroModal.js" type="text/javascript"></script> 
<script src="/jss/jquery/ui-1.7/jquery-ui-1.7.min.js" type="text/javascript"></script> 
<script src="/jss/jquery/jClock/jquery.jclock.js" type="text/javascript"></script> 
<script src="/jss/jquery/jquery.cp.util.js" type="text/javascript"></script> 
<script src="/jss/jquery/jquery.bgiframe.js" type="text/javascript"></script> 
<script src="/jss/jquery/jquery.ajaxQueue.js" type="text/javascript"></script> 
<script src="/jss/jquery/jquery.thickbox.js" type="text/javascript"></script> 
<script src="/jss/jquery/jquery.autocomplete.js" type="text/javascript"></script> 
<script src="/jss/jquery/jquery.timers.js" type="text/javascript"></script> 
<script src="/jss/flash/swfobject.js" type="text/javascript"></script> 
<script src="/jss/jquery/jquery.juitter.js" type="text/javascript"></script> 
<script src="/master/www2/include/js/functions.js" type="text/javascript"></script> 
<script src="/www/include/js/functions.js" type="text/javascript"></script> 
<script src="/master/www2/include/js/load_ready.js" type="text/javascript"></script> 
<script src="/www/include/js/load_ready.js" type="text/javascript"></script> 
<script src="/www/include/js/jquery.simplyscroll-1.0.4.js" type="text/javascript"></script> 

Vous devriez vraiment compiler les dans un seul fichier de script pour des raisons de performance. Vous devriez voir les temps de téléchargement des pages réduits d'un ordre de grandeur (guesstimate). Vous pouvez également utiliser la bibliothèque jQuery Google's hosted CDN. En outre, il semble que vous utilisiez jQuery 1.3 avec le plugin LiveQuery. jQuery 1.4 devrait être capable de gérer tout sans avoir besoin d'un plugin.

Side Note # 2:

Toutes vos semblables appels de méthode CUFON peuvent être combinés en un seul, et cela se produira également mieux:

// Instead of this: 
Cufon.replace('h1', { fontFamily: 'Ebrima' }); 
Cufon.replace('h2', { fontFamily: 'Ebrima' }); 
Cufon.replace('h3', { fontFamily: 'Ebrima' }); 
Cufon.replace('h4', { fontFamily: 'Ebrima' }); 
Cufon.replace('h5', { fontFamily: 'Ebrima' }); 
Cufon.replace('h5', { fontFamily: 'Ebrima' }); // I assume you meant h6 here 

// Just do this: 
Cufon.replace('h1, h2, h3, h4, h5, h6', { fontFamily: 'Ebrima' });