On May 13, 10:21 am, Wizzud <[EMAIL PROTECTED]> wrote:
> Sounds to me like you should be considering rewriting your wrapping code to
> traverse the dom tree below the target div, rather than treating the whole
> inner html as a single element. This would solve your problem of not
> wrapping things like form elements, etc, and would mean that you were
> actually doing lots of replaces but only on text nodes, which (presumably)
> has less chance of clashing with your animations. Also, any changes become
> progressive rather than all-at-once. Since you don't give any indication of
> what these animations might be, or why they are needed to run from page
> load, its difficult to determine the level of interference.

Thanks for the reply, but I don't think you've quite understood the
problem I'm having.

I have a senario where there are two functions attached to $
(document).ready - One function sets teh AJAX request for keywords in
motion, the other one starts animations running on the page.  The
problem occurs when the AJAX request completes and the div innerHTML
replace occurs while the animation is part way through the process of
running.  All kinds of nasty side-effects occur when this happens, in
all my test browsers.  The most obvious one is that the animations
stall before completing.  I also seem to get other odd side effects,
like the .ready event seems to keep firing over and over and sends the
browser CPU usage through the roof until I unload the page.  As these
problems happen in all browsers I'm assuuming it's my fault.  I think
messing around with the .html or .text properties of the nodes
directly would just cause the above described behaviour to manifest
itself again.  even if it didn't then I doubt it'd work in safari.
Granted the current version doesn't either but that is a problem I
would love to solve.

I suspect doing proper DOM traversal and node creation is the right
way to go but I don't know if your posted code is the way to go.  What
I think I need to do is:

If the node is a text node
1) Locate a keyword inside a text node.
2) If I find it, then create a new text node that contains everything
up to the match.
3) Create a hyperlink node after the first text node that contains a
text node rquivilant to my match.
4) create another text node after the hyperlink node that contains all
the text that follows on from after the keyword to the end of the text
node.
5) Set the newly created hyperlink's href, events, etc
Repeat the process on the newly created text node that follows the
newly created hyperlink so that I catch all occurances
If the node is something other than a text node and is not a node of a
type I don't want to do matching inside (hyperlink, form control,
script etc) then examine the children of that node recursivly and do
the hyperlink creation process on them.

However, there is also time pressure and until I can rewrite the code
to work in a proper DOM friendly way, a simple fix to stop the two
scripts from tripping over each other will do.  As the innerHTML
replacement during an animation seems to trigger the problem what I
need is something like this:

Each script checks for the other's presence.

If the animation script fails to find the innerHTML script then create
your own document.ready event.  If you do find the innerHTML script
then do nothing.

If the innerHTML script finds the animation script then create a ready
that fires the ajax process and which on completion does the search
and replace first, then starts the animations once this is complete.
If it doesn't find the animation script then it simply does the AJAX
stuff on document.ready.


Reply via email to