views:

47

answers:

2

I have the following html on a page:

<h1 class="theme-color-3">Knowledge Portal Site</h1>

This is rendered dynamically.I dont want the word Site after 'Knowledge Portal'.I dont know where the word Site is hardcoded,so i wrote the following jquery code to remove that word.

$(document).ready(function() {
  $('h1.theme-color-3').html($('h1.theme-color-3').html().replace('Site',''));

});

But the problem is that because this code executes only after the whole page has finished loading,the word Site shows for some time and then disappears. Is there a way to prevent that ?

Thank You

A: 

You can use CSS to set the element to display:none, but that would leave those with javascript turned off without the element at all.

Basically there is no good solution.

Mark
+2  A: 

Place a <script> element right after the <h1> element, like so:

<h1 class="theme-color-3">Knowledge Portal Site</h1>
<script type="text/javascript">
$('h1.theme-color-3').text($('h1.theme-color-3').text().replace('Site',''));
</script>

This will ensure the script is processed immediately after the element is parsed, so make sure the jQuery script is in the <head> or at least further up the document. Also, use text() instead of html() if you're not applying HTML. It's more efficient.

Andy E