JavaScript/JQuery "Clash"

[Pullo]

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>

[reedbird8]

And then I'm back to the gallery not appearing...

[Pullo]

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>

[reedbird8]

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.

[Pullo]

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.

[reedbird8]

Nope. Wouldn't even run the tooltips at all like that, not really sure why, but it wouldn't.

oye.

[reedbird8]

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.

[Pullo]

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

[reedbird8]

BINGO!

Wow....nice! Thanks again! You're good at this stuff. I definitely owe you for all the help you've given me!

[Pullo]

My pleasure.
I'm glad we could get it sorted out in the end

[reedbird8]

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!

[Pullo]

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!