Hi there,
The problem is that you are swapping out the contents of div#main_wrapper before the slideshow has had a chance to load.
Wrapping this in document.ready, doesn’t work (I guess the slideshow is still loading), so as a hack, I added a call to setTimeout which then worked.
Here’s the code:
jQuery(document).ready(function() {
setTimeout(function() {
jQuery('#main_wrapper').html(jQuery('#main_wrapper').html().replace(tsd1a, tsd1aTip).replace(tsd1b, tsd1bTip).replace(tsd2, tsd2Tip).replace(tsd, tsdTip).replace(it, itTip).replace(pl, plTip).replace(scl, sclTip).replace(wc, wcTip).replace(ltc, ltcTip).replace(cb, cbTip).replace(at, atTip).replace(bt, btTip).replace(ccl, cclTip).replace(gsd, gsdTip).replace(ip, ipTip).replace(mtDNA, mtDNATip).replace(nDNA, nDNATip).replace(bm, bmTip).replace(wt, wtTip).replace(et, etTip));
}, 3000);
if(jQuery("#sp_classification").length != 0) {
jQuery('#sp_classification').html(jQuery('#sp_classification').html().replace(/(ESA)/g,'<a href="#" class="clickTip" title="<a href=\\'http://theturtleroom.com/educational-resources/esa\\' target=\\'blank\\'>U.S. Endangered Species Act (ESA)</a>">$1</a>'));
jQuery('#sp_classification').html(jQuery('#sp_classification').html().replace(/(CITES)/g,'<a href="#" class="clickTip" title="<a href=\\'http://theturtleroom.com/educational-resources/cites\\' target=\\'blank\\'>Convention on International Trade in Endangered Species of Wild Fauna and Flora (CITES)</a>">$1</a>'));
}
});
However, this is not a clean solution.
The page is very JavaScript heavy and you have things firing all over the place.
If I was you, I would try and tidy up the code.
I know you don’t always have total control of this in WordPress, but maybe try and collate all of your JavaScript into one place and work out if you actually need all of the files you are including.
The same goes for the CSS.
I hope this helps.
Thanks, Pullo. That makes sense and even helps explain why one browser loads it all fine and the other doesn’t. I’ll put it in my file and test it out once I get home this afternoon. Thanks again.
I’m going to be doing a relatively major overhaul for March, along with a new theme, and I’m hoping to be able to clean the excess junk out during that process.
You’ve been a huge help to me with this JavaScript stuff.
The way wordpress does things can make these things less-than-clean, since plugins and the theme have code like css and js located in different places. Should be interesting to see what I can do with locating it all better.
Well, it most certainly works. Thanks again.
Cool!
Thanks for taking the time to follow up!
So, there seems to be one small detail not working…with the delay on, it won’t seem to read the CSS for the tooltips.
They should look like this:
Instead, they look like this:
Hi reedbird8,
At the very bottom of your page you have this:
<script type="text/javascript" src="http://theturtleroom.com/otherassets/ToolTip/tooltipfunction-footer.js"></script>
Try removing the following lines from this file and inserting them directly before the closing body tag of your HTML document, between two script tags, like this:
<script>
jQuery('#main_wrapper').html(jQuery('#main_wrapper').html().replace(tsd1a, tsd1aTip).replace(tsd1b, tsd1bTip).replace(tsd2, tsd2Tip).replace(tsd, tsdTip).replace(it, itTip).replace(pl, plTip).replace(scl, sclTip).replace(wc, wcTip).replace(ltc, ltcTip).replace(cb, cbTip).replace(at, atTip).replace(bt, btTip).replace(ccl, cclTip).replace(gsd, gsdTip).replace(ip, ipTip).replace(mtDNA, mtDNATip).replace(nDNA, nDNATip).replace(bm, bmTip).replace(wt, wtTip).replace(et, etTip));
if(jQuery("#sp_classification").length != 0) {
jQuery('#sp_classification').html(jQuery('#sp_classification').html().replace(/(ESA)/g,'<a href="#" class="clickTip" title="<a href=\\'http://theturtleroom.com/educational-resources/esa\\' target=\\'blank\\'>U.S. Endangered Species Act (ESA)</a>">$1</a>'));
jQuery('#sp_classification').html(jQuery('#sp_classification').html().replace(/(CITES)/g,'<a href="#" class="clickTip" title="<a href=\\'http://theturtleroom.com/educational-resources/cites\\' target=\\'blank\\'>Convention on International Trade in Endangered Species of Wild Fauna and Flora (CITES)</a>">$1</a>'));
}
</script>
And then I’m back to the gallery not appearing…
Oops, sorry, I forgot the call to setTimeOut.
You should include that as well.
<script>
jQuery(document).ready(function() {
setTimeout(function() {
jQuery('#main_wrapper').html(jQuery('#main_wrapper').html().replace(tsd1a, tsd1aTip).replace(tsd1b, tsd1bTip).replace(tsd2, tsd2Tip).replace(tsd, tsdTip).replace(it, itTip).replace(pl, plTip).replace(scl, sclTip).replace(wc, wcTip).replace(ltc, ltcTip).replace(cb, cbTip).replace(at, atTip).replace(bt, btTip).replace(ccl, cclTip).replace(gsd, gsdTip).replace(ip, ipTip).replace(mtDNA, mtDNATip).replace(nDNA, nDNATip).replace(bm, bmTip).replace(wt, wtTip).replace(et, etTip));
if(jQuery("#sp_classification").length != 0) {
jQuery('#sp_classification').html(jQuery('#sp_classification').html().replace(/(ESA)/g,'<a href="#" class="clickTip" title="<a href=\\'http://theturtleroom.com/educational-resources/esa\\' target=\\'blank\\'>U.S. Endangered Species Act (ESA)</a>">$1</a>'));
jQuery('#sp_classification').html(jQuery('#sp_classification').html().replace(/(CITES)/g,'<a href="#" class="clickTip" title="<a href=\\'http://theturtleroom.com/educational-resources/cites\\' target=\\'blank\\'>Convention on International Trade in Endangered Species of Wild Fauna and Flora (CITES)</a>">$1</a>'));
}
}, 2000);
});
</script>
And the tooltips are back to not reading the css…haha. wow. So, for whatever reason, the timeout doesn’t seem to play with with reading the css…doesn’t make any sense to me.
I’m also curious as to why IE9 doesn’t care if the timeout is there or not, but Chrome needs it to run the gallery. Strange to me.
Strange, that worked for me.
Then one last thing to try.
Try inserting the entire contents of tooltipfunction-footer.js between two script tags directly before the closing body tag of your HTML document.
Let me know if that works.
Nope. Wouldn’t even run the tooltips at all like that, not really sure why, but it wouldn’t.
oye.
So, I’ve set everything back to how it was before changing this all around. I may just look for a different Gallery solution here. I’ll have to put some thought into the next step.
Hi there,
I managed to get the gallery and the tooltips working by wrapping the call to initiate the galleria plugin in setTimeOut instead.
Line 427:
<script type="text/javascript">
jQuery(document).ready(function() {
setTimeout(function() {
jQuery("#galleria-1").galleria({ width: 574, height: 436, thumbnails: true, autoplay: 0});jQuery(".galleria-container").css("background", "#efefef");
}, 2000);
});
</script>
Does this work for you?
If not I can post a demo somewhere.
Edit: I shoul also mention that you can then remove the setTimeOut from tooltipfunction.js
BINGO!
Wow…nice! Thanks again! You’re good at this stuff. I definitely owe you for all the help you’ve given me!
My pleasure.
I’m glad we could get it sorted out in the end 
I even downloaded Firefox today to see how it was reacting there. It was a problem not just on the webkit browsers, it seems. So I’m very glad its working now, since a lot of traffic comes from firefox and the webkit browsers!
Yeah, browser testing can be a real pain, but if you’re fortunate enough to know what technology your visitors are using, that certainly helps!