Search code examples
javascriptasp.nethtmlinternet-explorercufon

Cufon causing an delay in internet explorer

I'm using an externally rendered control to create an menu on a webpage. The control is coming from an cms system and can't be modified. When calling Cufon.replace() to change the font of the menu items provided we notice an flickering effect in IE8, like there is some sort of delay. In FireFox 4 and Chrome this effect isn't visible. I've read other topics on stackoverflow about it, but none seem to look similar to this problem. It only occurs on hovering over the menu item.

We're familiar with the fact the Cufon needs to be called straight after the html-element of which the font needs to be changed. Is this still necessary? Or do I need to call a Cufon.Now() somewhere? What is causing the flickering effect here when I hover about the menu-items?

<cc1:MenuBuilder ID="Mainmenu" MenuName="Mainmenu" runat="server" CssClass="menubar-nav-list" UseDiv="true" ShowLevels="1" />
<script language="javascript" type="text/javascript">
    Cufon.replace('#Mainmenu .menuitem', { fontFamily: 'DIN Eng', hover: true });
</script>
Solution

  • You have to execute the following code right after the <body> tag.

    <script type="text/javascript">Cufon.now();</script>

    And then call

    Cufon.replace('#Mainmenu .menuitem', { fontFamily: 'DIN Eng', hover: true });

    or simply

    Cufon('#Mainmenu .menuitem', { fontFamily: 'DIN Eng', hover: true });

    The Cufon.now is doing the trick. For more information read the documentation. In this documentation they say to use it before the </body> but we found that this doesn't fix all the flickering problems but right after the <body> does.