Question

EDIT: iam using ajax to load text in my content that is why onload on head is not applicable.

I have an almost complete project here
http://sandbox.littlegraffyx.com/bible/test2.html (enter gen 1:1 on bottom left to start)

The only problem I have is to ensure that my main div where the main text is displayed is fully loaded before I call a function that will autofit the text content on the window.

There are times that my autofit function is working and there are times it isn’t and the only reason I can think of why it’s not working is maybe the div isn’t fully loaded yet when I call the function.

echo "<div id=\"verse\">" . $bcontent . "</div>";

echo "<script type='text/javascript'>
    scaleQuote();";
echo "</script>";

The scalequote sample is found in my other question here

Adjust size based on height (vertical length)

Here are the searches I made and I can’t see how can I apply the solutions offered in these post in my case that is why I am asking one myself. Hoping I will not be down voted for “lack of research”

How do I run a function only when a div gets loaded?

getting the height and width of a div after loading info into it from an external source with jquery

thanks in advance and sorry for my english

File references

http://pastebin.com/wwQumwKJ – my JS file

http://pastebin.com/FnyST8iz – my html file

http://pastebin.com/BYfSUjQJ – my css file

Except from getting the database contents, my php file is pretty much what is posted above.

Answer 1

Short answer

Inside your MovePrevious() function, add scaleQuote(); inside the Ajax’s callback:

document.getElementById("versePlace").innerHTML=xmlhttp.responseText;
scaleQuote(); //<-- here

Long Answer

You’re using standard JS on your Ajax calls. Standard Ajax calls such as yours, which simply places the response HTML inside an element with innerHTML does not execute any script tags inside of the response text. It’s different than jQuery’s append/appendTo methods, which parse any script tags inside of your response text and executes it upon being added to the DOM.

Why does it work “most of the time” then?

Because your MoveNext() function already has a scaleQuote(); function call inside of its callback.