[jQuery] DOM friendly link creation
I had previously written a javascript that scans a div inside a HTML
document for keywords and then wraps those words in hyperlinks, as
part of adynamic help system. This worked by modifying the innerHTML
of the div in question. This approach worked but had a few problems,
namely that you had to be careful you didn't accidentally try to wrap
links around form elements, tag attributes and other such things, and
that it didn't work in Safari.
I did a recode recently that made use of the jQuery library. It cut
the line count of the script in half but it still worked in
fundamentally the same way as before, by doing regex search and
replace on the .html() of the target div.
I then had the job of writing other scripts that would do various jobs
on our site, and this was where I hit a serious snag. Some jQuery
animation effects were to be included on $(document).ready, as the
search and replace script did. No problem, I thought, because jQuery
queues events up for you, but unfortunately not.
The link wrapper is set to fire before the animation effects begin,
but it tends to complete while the animations are still in progress
(the link wrapper fetches the keywords to look for through AJAX so
there's a slight but definite lag between the script starting and the
links being added) and as the animation effect is taking place on an
element inside the innerHTML of the div the link wrapper is working on
it causes the animation to stall and the browser CPU usage to shoot up
to 100%.
I can only guess that when the innerHTML gets replaced by the link
wrapper the element the animation is being applied to ceases to exist
for a moment before returning.
I could get the link wrapper to fire the animation to begin once it
has completed or to get the animation to fire the link wrapper when
the animation finished with function callbacks of course, but then the
two scripts would become co dependant. One would need the other to
run to start it, even though the page in question may not need it.
Would it be possible to do what I want with an approach other than
regexing on the HTML inside my target div? A way to turn text in the
document into links in a DOM friendly way would be the best bet, and
it might also allow the link wrapper to work in safari.
Failing that, is there a way that I can get each script to check for
the other's existence and wait for the other to complete before
running if it finds it? For example, I assume there is soem way to
tell if there's an animation in progress. If so how can I get one
script to check for an animation in progress and wait for it to end if
it finds one?