0

I use tinyscrollbar.js with custom fonts on my website. The problem that the script executes before the loading of the custom fonts is complete which results in wrong calculation of content height and part of the content is cut down at the end of the scrolling area.

The only solution that i found for this is to load the script using window.load() instead of document.ready() function.

The problem at this solution is that the scrollbar will not work until all the page is loaded including images that is not part of the main content inside the scrolling area.

I thought about using the load event on the fonts url but again there is a font file for each browser, so this will not work either. any help plz.

alhoseany
  • 761
  • 9
  • 28

2 Answers2

2

The best solution i have found for this is to load tinyscrollbar on document ready and update it on window load.

<script type="text/javascript">
   jQuery(document).ready(function() {
        jQuery('#scrollbar1').tinyscrollbar({ sizethumb: 50 });
    });
   jQuery(window).load(function () {
        jQuery('#scrollbar1').tinyscrollbar_update();
    });
</script>
alhoseany
  • 761
  • 9
  • 28
0

You could try setting a timeout on the tinyscrollbar.js. Just adjust the "400" number until it loads at the right time.

$(document).ready(function() {
setTimeout(function() {
//Call tinyscrollbar here   
}, 400)
});

An even better way would be to wait until the exact moment when the fonts are loaded. For example, TypeKit provides three callbacks, one of which will allow you to call another script as soon as the fonts have all loaded: http://blog.typekit.com/2010/10/18/more-control-with-typekits-font-events/.

If you're using Typekit, this is the example they provide:

<script type="text/javascript" src="http://use.typekit.com/xxxxxxx.js"></script>
<script type="text/javascript">
 try {
   Typekit.load({
     loading: function() {
       // Javascript to execute when fonts start loading
     },
     active: function() {
       // Javascript to execute when fonts become active
     },
     inactive: function() {
       // Javascript to execute when fonts become inactive
     }
   })
 } catch(e) {}
 </script>

You'd want to call tinyscollbar when TypeKit is in the active state.

coryetzkorn
  • 666
  • 2
  • 8
  • 21
  • the timeout will be different from user to use and page to page depending on internet connection and amount of content in the page. i also use @font-face in css. so there is no callback. thanks. – alhoseany Oct 09 '12 at 04:50
  • oh right on... this post may be helpful to you http://stackoverflow.com/questions/5680013/how-to-be-notified-once-a-web-font-has-loaded – coryetzkorn Oct 09 '12 at 04:53