Solved

Cufon jumps when page loads in IE

Posted on 2010-11-26
15
671 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
  • 10
  • 5
15 Comments
 
LVL 8

Expert Comment

by:Zado
Comment Utility
Attach your source code, please.
Thanks.
0
 

Author Comment

by:Webbo_1980
Comment Utility
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
Comment Utility
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
 
LVL 8

Expert Comment

by:Zado
Comment Utility
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
Comment Utility
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
Comment Utility
No problem, good luck.
P.S. Learn css3, powerful tool, in many cases can replace javascript.
0
 

Author Comment

by:Webbo_1980
Comment Utility
Hi,

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

Thanks.
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 8

Expert Comment

by:Zado
Comment Utility
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
Comment Utility
Please grant the points and close the question, thanks :-)
0
 
LVL 8

Expert Comment

by:Zado
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
* 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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

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.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

771 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now