Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 680
  • Last Modified:

Cufon jumps when page loads in IE

Hi,
I'm having a problem with cufon when I load a page in IE it takes a while for the cufon to be applied.

I am specifying the classes to be defined in a cufon-setup.js file.

Can any one let me know how they would resolve this.

Thanks
0
Webbo_1980
Asked:
Webbo_1980
  • 10
  • 5
1 Solution
 
ZadoCommented:
Attach your source code, please.
Thanks.
0
 
Webbo_1980Author Commented:
Hi,

I've inclued the code from the following files:
cufon-setup.js:

 
// Cufon Setup - cufon-setup.js file
Cufon.replace('#side-content h3, #side-content span, .product #inner-content ul.add-info li div.fleft h3, .birthday #inner-content p.important, #inner-content h3, #oneColRelatedProducts h2, .productDetail H3, .productdescprice, legend, .fromPrice, .contactnum h2', { fontFamily: 'Hedley New Lt' });
Cufon.replace('#sub-menu a, #sub-menu h3, ul.shop-products li .img-bg span, .categoryBox', { fontFamily: 'James Fajardo', hover: true });
Cufon.replace('.product #inner-content h2, #inner-content2 h1, #side-content h3 strong, .birthday #inner-content h1, .clothing #inner-content h1, .product h1, .productTitle ', { fontFamily: 'Hedley New Rg' });
Cufon.replace('#cartmenu li, #searchmenu li', { fontFamily: 'Hedley New Lt', hover: true });

Open in new window


 master page

 
<%@ Master Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="Project Description" />
    <meta name="keywords" content="Project Keywords" />
    <title></title>
    <!-- stylesheets -->
    <link rel="stylesheet" type="text/css" media="screen,projection" href="/css/style.css" />
    
    
    
    
    
    
    <!-- jquery -->
    <script type="text/javascript" src="/js/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="/js/script.js"></script><script type="text/javascript" src="/js/jquery.jNice.js"></script>
    <script type="text/javascript" src="/js/inputform.js"></script>
    <script type="text/javascript" src="/js/easySlider1.7.js"></script>
    <script type="text/javascript" src="/js/cufon-yui.js"></script>
    <script type="text/javascript" src="/js/Hedley_New_Lt_300-Hedley_New_Rg_700.font.js"></script>
    <script type="text/javascript" src="/js/James_Fajardo_400.font.js"></script>
    <script type="text/javascript" src="/js/cufon-setup.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // init slides
            $("#slides").easySlider({
                auto: true,
                continuous: true,
                prevId: 'lharrow',
                nextId: 'rharrow'
            });
        });
    </script>
    <!-- conditions -->
    <!--[if lte IE 7]><style media="screen,projection" type="text/css">@import "/css/ie.css";</style><![endif]-->
    <!--[if IE 6]>
		<script type="text/javascript" src="/js/dd_belatedpng_0.0.8a-min.js"></script>
		<script type="text/javascript" src="/js/iefix.js"></script>
	<![endif]-->
        

</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
      <!-- sof header -->
    <div class="header">
        <div id="headwrap" class="clearfix">
            <div id="logo" class="fleft">
                <asp:ContentPlaceHolder ID="Logo" runat="server">
                </asp:ContentPlaceHolder>
            </div>
            <div id="topmenu" class="fright">
                
                <div id="mainnav">
                    <asp:ContentPlaceHolder ID="navigation" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
            </div>
        </div>
    </div>
    <!-- eof header -->
    <!-- sof wrap -->
    <div id="wrap">
        <div id="wrapper">
            <div id="slide-container">
                <div id="slides">
                    <asp:ContentPlaceHolder ID="MainBanner" runat="server">
                    </asp:ContentPlaceHolder>
                </div>



               
            </div>
            <div id="content">
                <div id="homecontent">
                    <div id="homecat">
                        <ul class="clearfix">
                            <li class="cat" id="homecat-1">
                                <asp:ContentPlaceHolder ID="CTA1" runat="server">
                                </asp:ContentPlaceHolder>
                            </li>
                            <li class="cat" id="homecat-2">
                                <asp:ContentPlaceHolder ID="CTA2" runat="server">
                                </asp:ContentPlaceHolder>
                            </li>
                            <li class="cat" id="homecat-3">
                                <asp:ContentPlaceHolder ID="CTA3" runat="server">
                                </asp:ContentPlaceHolder>
                            </li>
                            <li class="cat" id="homecat-4">
                                <asp:ContentPlaceHolder ID="CTA4" runat="server">
                                </asp:ContentPlaceHolder>
                            </li>
                            <li class="cat" id="homecat-5">
                                <asp:ContentPlaceHolder ID="CTA5" runat="server">
                                </asp:ContentPlaceHolder>
                            </li>
                        </ul>
                        <div class="clear">
                        </div>
                    </div>
                    <div class="clear">
                    </div>
                </div>
                <div class="clear">
                </div>
            </div>
        </div>
        <div class="clear">
        </div>
    </div>
    <!-- eof wrap -->
    <!-- sof footer -->
    <div id="footwrap">
        <div id="footer">
            <div class="footerlinks">
                <asp:ContentPlaceHolder ID="leftFooter" runat="server">
                </asp:ContentPlaceHolder>
                <div class="clear">
                </div>
            </div>
                       <div class="clear">
            </div>
                  </div>
        <div class="clear">
        </div>
    </div>
    <!-- eof footer -->
    <script type="text/javascript">        Cufon.now(); </script>
    </form>
</body>
</html>

Open in new window


Thanks,

Webbo
0
 
ZadoCommented:
Here's very similar problem:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26427599.html
Your code seems ok to me, you apply cufon at the end of your code which is proper action, try what experts suggested in above link to make your page loading faster:
- check your images and try to reduce size;
- check if you need all your scripts or check the content of the scripts, try to reduce the content if possible;
- move your js scripts to the end of page (before </body> tag), to load them at last;
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
ZadoCommented:
Here you go, cufon is quite old technique, you can use simple CSS (css3) to have exactly same effect and much less code, will work quicker for sure. Answer for your question is here:
http://net.tutsplus.com/tutorials/html-css-techniques/11-classic-css-techniques-made-simple-with-css3/
at point 4.Fancy font.
Try it.
0
 
Webbo_1980Author Commented:
Hi Zada,

Many thanks - I've take a look at @Font-face however the site no longer exists which is a little bit of an issue.

I've tried playing around with the cufon and its still happening.

Thanks,
0
 
ZadoCommented:
No problem, good luck.
P.S. Learn css3, powerful tool, in many cases can replace javascript.
0
 
Webbo_1980Author Commented:
Hi,

Are there any alternatives to @font-face, as this site no longer exists to embed your fonts from?

Thanks.
0
 
ZadoCommented:
You can download font and embed it from your location, for example:

<style type="text/css">  
@font-face {  
  font-family: 'Loyal';  
  src: url('fonts/loyal.ttf');  
}  
<!-- then use it: -->
.font {  
  font-family: Loyal;  
  font-size: 20px;  
}  
</style> 

Open in new window


@font-face is the newest and easiest technique.
0
 
ZadoCommented:
Please grant the points and close the question, thanks :-)
0
 
ZadoCommented:
To be clear here: I'm not asking for grant the points to me, but generally.
If you have a problem with any suggestion from experts or nothing works with your expectation, please let us know, so we will continue work on solution for you, thanks.
0
 
Webbo_1980Author Commented:
Hi Zado,

Sorry about not replying - I've not been around recently.

I've now tried @font-face and this is great however I'm still getting the flicker in firefox and google - do you have any ideas on how to resolve this?

Also @font-face isn't compatible with firefox 3, is there an easy way in which we coiuld revert to cufon in these circumstances?

Many thanks.
0
 
ZadoCommented:
You need to choose I affraid:
- font-face: working in newer browsers only, but simple code and newest standard
- cufon: working in all standard browsers, but much more code and older standard.

Not sure you can make some script to choose font-face by default and if it doesn't work, use cufon, maybe, but I don't have any idea for this, sorry.
0
 
Webbo_1980Author Commented:
Hi Zado,

In looking into @font-face I have come across something called Modernizr, and this allows you to detect the browser, and from here I understand that you can select a fall back onto cufon - but its just how (which I'm having problems with) - see - http://www.modernizr.com/docs/ its the first item on the list.

Here it mentioned you call have a fall back to cufon - so any help with its implementation would be greatly appreciated!

I'm a newbie withJS...

Thanks for your continued help.
0
 
ZadoCommented:
Nice one, I didn't know about Modernizr before, I think you keep @font-face in your css, but add the following code to your html document within <head> tags:

Modernizr._fontfaceready(function(bool){
  if (!bool) getScript('/js/cufon-setup.js',function(){
    Cufon.now();
  });
});

Open in new window

0
 
ZadoCommented:
* with <script> tags obviously:
<script type="text/javascript">
Modernizr._fontfaceready(function(bool){
  if (!bool) getScript('/js/cufon-setup.js',function(){
    Cufon.now();
  });
});
</script>

Open in new window

0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 10
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now