Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,746
    Thanks
    18
    Thanked 155 Times in 146 Posts

    JS animation and text rendering in IE 7

    Lately, I'm noticing a not so pleasant side effect of IE 7's new "ClearType" feature...the ClearType feature can be found under 'Internet Options', under 'Advanced', as a checkbox labeled 'Always use ClearType for HTML'.

    if you have 'Always use ClearType for HTML' checked (I think it's on by default?), JS animation effects that manipulate sizable amounts of HTML text using the setTimeout() function are choppy....If you uncheck this option, the animation works fine (smoothly)...

    It obviously has something to do with the browser laboring over redrawing the text during the animation....

    I see this as a problem if you assume more and more people will be using IE 7, and most are likely to have this option turned on....

    Does anyone know of a way to eliminate this problem without disabling the ClearType feature?

    Thanks.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,746
    Thanks
    18
    Thanked 155 Times in 146 Posts
    I actually ran into this problem the other day when helping somebody on here...Try running the following code in IE 7....then try running it in FF...and here is the code:

    Code:
    <!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" lang="en" xml:lang="en" dir="ltr">
    
    <head>
    
    <title>Nav Menu</title>
    
    <style type="text/css">
    <!--
    
    body
    {
        margin:0;
    }
    
    #top
    {
        background-color:#333;
        font:bold 26px Arial,Helvetica;
        text-align:center;
        color:#fff;
        position:absolute;
        top:5px;
        left:50%;
        width:800px;
        height:150px;
        margin-left:-400px;
    }
    
    #top p
    {
        margin:110px 0 0 0;
    }
    
    #top a, .submenu a
    {
        color:#fff;
    }
    
    #bottom
    {
        background-color:#eee;
        font:16px/22px Arial,Helvetica;
        position:absolute;
        left:50%;
        width:800px;
        margin-left:-400px;
        z-index:900;
    }
    
    #bottom p
    {
        margin:25px 20px;
    }
    
    .submenu
    {
        background-color:#aaa;
        font:22px Arial,Helvetica;
        text-align:center;
        color:#fff;
        position:absolute;
        top:155px;
        left:50%;
        width:800px;
        height:65px;
        margin-left:-400px;
    }
    
    .submenu p
    {
        margin:15px 0 0 0;
    }
    
    -->
    </style>
    
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    
    </head>
    
    <body>
    
    <div id="top">
        <p><a href="#">Home</a> | <a href="#" onclick="submenu('Activities');">Activities</a> | <a href="#">Cost</a> | <a href="#" onclick="submenu('Local');">Local</a> | <a href="#">Contact</a></p>
    </div>
    
    <div id="submenu_container">
        <div id="Activities" class="submenu" style="z-index:500">
            <p><a href="#">Quads</a> | <a href="#">Horse Trekking</a> | <a href="#">Off Road Driving</a> | <a href="#">Paintball</a></p>
        </div>
        <div id="Local" class="submenu" style="z-index:500">
        <p><a href="#">Pubs</a> | <a href="#">Hotels</a> | <a href="#">Restaurants</a></p>
        </div>
    </div>
    
    <div id="bottom" style="top:155px">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio. Pellentesque pharetra, velit quis molestie lacinia, quam sem interdum urna, vel aliquet dolor tellus eget massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in nibh. Donec non purus. Etiam ut sem sed quam dapibus porta. Nam consequat congue dolor. Morbi id felis. Aliquam nibh. Etiam sollicitudin, augue accumsan cursus adipiscing, est justo imperdiet neque, in gravida wisi neque at ante. Nulla at tortor. Donec elementum tristique pede. Mauris in erat. Nullam posuere sem et felis. Aliquam consequat bibendum ante. Sed vel magna in urna aliquet aliquet. Sed feugiat, lectus nec fringilla dignissim, elit diam tristique arcu, eu consequat erat augue eu nibh.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio. Pellentesque pharetra, velit quis molestie lacinia, quam sem interdum urna, vel aliquet dolor tellus eget massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in nibh. Donec non purus. Etiam ut sem sed quam dapibus porta. Nam consequat congue dolor. Morbi id felis. Aliquam nibh. Etiam sollicitudin, augue accumsan cursus adipiscing, est justo imperdiet neque, in gravida wisi neque at ante. Nulla at tortor. Donec elementum tristique pede. Mauris in erat. Nullam posuere sem et felis. Aliquam consequat bibendum ante. Sed vel magna in urna aliquet aliquet. Sed feugiat, lectus nec fringilla dignissim, elit diam tristique arcu, eu consequat erat augue eu nibh.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio. Pellentesque pharetra, velit quis molestie lacinia, quam sem interdum urna, vel aliquet dolor tellus eget massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in nibh. Donec non purus. Etiam ut sem sed quam dapibus porta. Nam consequat congue dolor. Morbi id felis. Aliquam nibh. Etiam sollicitudin, augue accumsan cursus adipiscing, est justo imperdiet neque, in gravida wisi neque at ante. Nulla at tortor. Donec elementum tristique pede. Mauris in erat. Nullam posuere sem et felis. Aliquam consequat bibendum ante. Sed vel magna in urna aliquet aliquet. Sed feugiat, lectus nec fringilla dignissim, elit diam tristique arcu, eu consequat erat augue eu nibh.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio. Pellentesque pharetra, velit quis molestie lacinia, quam sem interdum urna, vel aliquet dolor tellus eget massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in nibh. Donec non purus. Etiam ut sem sed quam dapibus porta. Nam consequat congue dolor. Morbi id felis. Aliquam nibh. Etiam sollicitudin, augue accumsan cursus adipiscing, est justo imperdiet neque, in gravida wisi neque at ante. Nulla at tortor. Donec elementum tristique pede. Mauris in erat. Nullam posuere sem et felis. Aliquam consequat bibendum ante. Sed vel magna in urna aliquet aliquet. Sed feugiat, lectus nec fringilla dignissim, elit diam tristique arcu, eu consequat erat augue eu nibh.</p>
    </div>
    
    <script type="text/javascript">
    <!--
    
    var mainObj = document.getElementById('bottom');
    var lastSubID = "";
    var currentSubID;
    
    function submenu(id)
    {
        var navObj = document.getElementById(id);
        currentSubID = id;
    
        if (lastSubID == "")
        {
            resetZIndex();
            navObj.style.zIndex = parseInt(navObj.style.zIndex) + 5;
            moveNavDown(id,null);
        }
        else if (lastSubID == id)
        {
            resetZIndex();
            navObj.style.zIndex = parseInt(navObj.style.zIndex) + 5;
            moveNavUp(id,null);
        }
        else if (lastSubID != id)
        {
            moveNavUp(lastSubID,1);
        }
    }
    
    function moveNavDown(id,changeNav)
    {
        if (changeNav == 1)
        {
            resetZIndex();
            var navObj = document.getElementById(id);
            navObj.style.zIndex = parseInt(navObj.style.zIndex) + 5;
        }
    
        if (parseInt(mainObj.style.top) < 220 - 5)
        {
            mainObj.style.top = parseInt(mainObj.style.top) + 10 + "px";
            setTimeout('moveNavDown("'+id+'",'+changeNav+')',50);
        }
        else
        {
            lastSubID = id;
        }
    }
    
    function moveNavUp(id,changeNav)
    {
        if (parseInt(mainObj.style.top) > 155 + 5)
        {
            mainObj.style.top = parseInt(mainObj.style.top) - 10 + "px";
            setTimeout('moveNavUp("'+id+'",'+changeNav+')',50);
        }
        else
        {
            lastSubID = "";
            if (changeNav == 1)
                moveNavDown(currentSubID,changeNav);
        }
    }
    
    function resetZIndex()
    {
        var subArr = document.getElementById('submenu_container').getElementsByTagName('div');
    
        for (i=0; i<subArr.length; i++)
        {
            subArr[i].style.zIndex = '500';
        }
    }
    
    -->
    </script>
    
    </body>
    
    </html>
    Last edited by chump2877; 02-09-2007 at 05:05 PM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #3
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I really don't see much difference between the browsers (tried IE6&7, FF1.5,&2, Opera 9). And if you change the setTimout time from 50 to 1 it runs smoother which means the browser isn't running at full speed. If you are having a problem maybe it is machine specific for that one feature.

    david_kw

  • #4
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,746
    Thanks
    18
    Thanked 155 Times in 146 Posts
    i can't figure it out....normally, my experience has been that IE renders animation the smoothest of all the browsers....but this ClearType option really slows it down on my machine....Disable ClearType, and it works like a charm...

    Also, taking the timer down to 1 instead of 50 doesn't seem to help...

    I have 1GB of RAM and a fast enough CPU...maybe it's my video card?....Does IE 7 have greater system requirements than other browsers?....seems possible (i.e., Vista sounds like a real resource hog)....but I seem to meet and exceed the minimum system requirements....grrr
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •