jQuery scrollbar conflicts with hit counter script (document.write)

Question

I'm currently trying to install this custom scroller on my tumblr blog: http://manos.malihu.gr/jquery-custom-content-scroller/ It all works perfectly until I added a text hit counter to my blog and my entire content disappeared.

Here's the jQuery for the custom scrollbar:

<script>
$(document).ready(function() {
     $('body').mCustomScrollbar({
        theme: 'dark-thin',
        scrollButtons: true,
    });      
});
</script> 

And here's the script of the text hit counter:

<script language="JavaScript">
    var fhsh = document.createElement('script');
    var fhs_id_h = "2423608";
    fhsh.src = "http://freehostedscripts.net/ocount.php?site="+fhs_id_h+"&name= &a=1";
    document.head.appendChild(fhsh);
    document.write("<span id='h_"+fhs_id_h+"'></span>");
</script>

I'm pretty sure it's the "document.write" method that is causing the problem. But I don't know if there's any way to fix this problem? Any help will be much appreciated.

Answer 1

The problem is indeed your use of document.write. It should be avoided where possible.

Instead you can use jQuery to add the span - just ensure you run this code once the ready event has fired on the document:

$('body').append('<span id="h_' + fhs_id_h + '"></span>');