SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 37
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript/JQuery "Clash"

    I think I have a clash between two scripts I'd like to run together.

    However, I know very little about this language. Anyone be willing to look at a couple files and see if there is a fix to prevent the clash?

    Thanks in advance.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Yup, sure thing.
    Would be great if you could post a link to the page and if no one gets there before me, I'll have a look at it tomorrow morning (+9 hours from now)

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Yup, sure thing.
    Would be great if you could post a link to the page and if no one gets there before me, I'll have a look at it tomorrow morning (+9 hours from now)
    Great. Thanks again.

    This is the one I NEED to work.

    http://theturtleroom.com/wp-content/...js/variable.js

    It operates a function in the new area of the site. The product option on this page: http://theturtleroom.com/product/turtle-hotpad/

    The option select works in IE9, but not in Chrome. (it has a background function for creating these variable products which only works in Chrome, not IE9)


    The files it is clashing with are (one of?) these:

    http://theturtleroom.com/wp-content/...slider_init.js
    http://theturtleroom.com/wp-content/...classic.min.js
    http://theturtleroom.com/wp-content/...alleria.min.js

    These operate galleries like on this page: http://theturtleroom.com/projects/st...emys-dorsalis/

    These galleries work in IE9, but not in Chrome.

    It seems that IE9 and Chrome give different priorities to the two JQuery plugins, thus why different things work on each browser. Anyway, the makers of the shop plugin agree that its a clash between these two items.

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    41
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi reedbird8

    It has nothing to do with the javascript. The problem you're having is that you can't "click" on the select-field, right?
    That's because the div with the class "product_meta" is actually over the select-field. (I used Firebug for Firefox to find the problem)

    If you just change the following CSS in "frontend.css" (It fixes this problem, but it might create other lay-out problems on other pages, so be sure to check some of your pages )
    Code CSS:
    div.product div.product_meta, div.product div.variations_button {
        clear: left;
    }

    to

    Code CSS:
    div.product div.product_meta, div.product div.variations_button {
        clear: both;
    }

    The select-fields works fine for me now

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That was only one of the issues. If that's all it takes to fix that one, then that's pretty simple. Thanks...it is fixed!

    However, those galleries I mentioned toward the bottom of the post aren't working because of the clash as well. So it turns out then, the clash is simply between a backend function and a front-end function. There is a button in the admin area of a plugin that does NOT work in IE9, but works in Chrome. Where those scrollers I mentioned work in IE9, but NOT in Chrome.

    I'll adapt my original request to what still needs fixed:


    This is the one I NEED to work.

    http://theturtleroom.com/wp-content/...js/variable.js

    It operates an admin function (Creating varations of the variable product type) in the shop I'm building for the site. The function is only working in Chrome, not IE9.

    The files it is clashing with are (one of?) these:

    http://theturtleroom.com/wp-content/...slider_init.js
    http://theturtleroom.com/wp-content/...classic.min.js
    http://theturtleroom.com/wp-content/...alleria.min.js

    These operate galleries like on this page: http://theturtleroom.com/projects/st...emys-dorsalis/

    These galleries work in IE9, but not in Chrome.

    It seems that IE9 and Chrome give different priorities to the two JQuery plugins, thus why different things work on each browser. Anyway, the makers of the shop plugin agree that its a clash between these two items.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Howdy,

    The problem is with the file "tooltipfunction-footer.js" at the bottom of the page.
    Commenting this line out makes everything work in Chrome.

    The reason it's throwing an error, is that in line 83 of the file, jQuery is trying to call replace on the contents of a div with the id of "sp_classification". This div however doesn't exist on the page.

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, how can I have it call that line when it exists on a page and not on another page?

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Do you mean that the div#sp_classification exists on some pages, but not others?

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Do you mean that the div#sp_classification exists on some pages, but not others?
    right

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Use this:

    Code JavaScript:
    if($("#sp_classification ").length != 0) {
      alert("The div exists. Give me a free turtle");
    }


  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Oh, looking at your code that should be:
    Code JavaScript:
    if(jQuery("#sp_classification ").length != 0) {
      alert("The div exists. Give me a free turtle");
    }

  12. #12
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    haha! Thanks again, Pullo! You're great!

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Pleasure, as always.

  14. #14
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doesn't seem to fix, though....the gallery still doesn't show up on Chrome...

    http://theturtleroom.com/projects/st...emys-dorsalis/

  15. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Does removing the script entirely make the gallery work?

    Edit: I've just looked at line 83 of tooltip-footer.js and it looks like you haven't changed anything.

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Also, I notice you are using W3 Total Cache.
    This is probably why you are not seeing the changes.
    Try deactivating the plugin while you are debugging stuff.

  17. #17
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It does work if I remove it...

    I did change it...it now looks like this:

    Code:
    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>'));
    }

  18. #18
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK...so it works if this whole chunk is removed. Any idea how to fix it?

    Code:
    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>'));
    	}

    I won't be able to do any more work til this afternoon or tomorrow morning now. Thanks again, Pullo.

  19. #19
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Hi,
    could you put up a link to a page which is not working (you seem to have removed the offending code from the original).
    Then'll be happy to take a closer look.

  20. #20
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi,
    could you put up a link to a page which is not working (you seem to have removed the offending code from the original).
    Then'll be happy to take a closer look.
    Sorry, I had to step away from my machine. That chunk of code is back in the file. I don't think I'll get a chance to look at anything again until later today.

  21. #21
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    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:
    Code JavaScript:
    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.

  22. #22
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  23. #23
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, it most certainly works. Thanks again.

  24. #24
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Cool!
    Thanks for taking the time to follow up!

  25. #25
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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:
    tooltip-correct.png

    Instead, they look like this:
    tooltip-wrong.png


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •