jQuery customizations are not loading smoothly (instead, the original appears and then it is modified)

Question

Hi all -- I am working on a site using the Squarespace CMS system, and have added some simple jQuery to remove some automatically added text that comes up when filtering content (specifically "Entries in" text).

This worked smoothly without any problem until I added Google Translate script into the footer. Now the removal of the "Entries in" text is not smooth -- the "Entries in" text shows up first when the page is loaded and then gets removed, so the it feels a bit jumpy. It seems like the Google Translate script in the footer is causing the interference and I'm worried that it could interfere with any additional jQuery I might add to the site as the project progresses. I'm curious what I can do better to make sure these sorts of customizations load smoothly?

The site I'm working on (in progress) can be viewed at wohf.squarespace.com

the code I have so far is the following in the :

<script src="/storage/Scripts/jquery-1.3.2.min.js"></script>

<script type="text/javascript">
<!--

$(function(){ 

//***************************************
// Remove "Entries In" text
//***************************************
$('.journal-filter-header h2:contains(Entries in)').each(function(){ 
   var str = $(this).html(); 
   $(this).html(str.replace('Entries in','')); 
});


});
-->
</script>

... and the following for Google Translate in the footer:

<div id="footerRight">
<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en'
  }, 'google_translate_element');
}
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"&gt;&lt;/script&gt;
</div>

Again, any help is greatly appreciated!!

Answer 1

You really should try to work out how to change this in your CMS (server side). JavaScript is only intended to help you with dynamic content, not static content.

Answer 2

You could try running your fix-up function directly in a script tag towards the end of the page, and not in a jQuery "ready" context. In other words, have your code run before the page load completes. (This may or may not completely help, of course.)

Answer 3

Have you tried jQuery.getScript() ? You should be able to delay loading the translate script until your 'replace' is done.

http://api.jquery.com/jQuery.getScript/