Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Cufon jumps when page loads in IE

Posted on 2010-11-26
15
Medium Priority
?
676 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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
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 2000 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

704 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