Solved

Cufon jumps when page loads in IE

Posted on 2010-11-26
15
675 Views
Last Modified: 2012-05-10
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
Comment
Question by:Webbo_1980
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 5
15 Comments
 
LVL 8

Expert Comment

by:Zado
ID: 34219908
Attach your source code, please.
Thanks.
0
 

Author Comment

by:Webbo_1980
ID: 34224992
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
 
LVL 8

Expert Comment

by:Zado
ID: 34233437
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
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 
LVL 8

Expert Comment

by:Zado
ID: 34234768
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
 

Author Comment

by:Webbo_1980
ID: 34243338
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
 
LVL 8

Expert Comment

by:Zado
ID: 34248459
No problem, good luck.
P.S. Learn css3, powerful tool, in many cases can replace javascript.
0
 

Author Comment

by:Webbo_1980
ID: 34253703
Hi,

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

Thanks.
0
 
LVL 8

Expert Comment

by:Zado
ID: 34253732
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
 
LVL 8

Expert Comment

by:Zado
ID: 34317451
Please grant the points and close the question, thanks :-)
0
 
LVL 8

Expert Comment

by:Zado
ID: 34384826
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
 

Author Comment

by:Webbo_1980
ID: 34385322
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
 
LVL 8

Expert Comment

by:Zado
ID: 34389802
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
 

Author Comment

by:Webbo_1980
ID: 34389910
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
 
LVL 8

Expert Comment

by:Zado
ID: 34390021
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
 
LVL 8

Accepted Solution

by:
Zado earned 500 total points
ID: 34390024
* 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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses

615 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question