Grow your CSS skills. Land your dream job.

JQuery Best Practices

  • # April 12, 2010 at 10:41 am

    So I’ve been religiously following Chris and some other sources in my quest to learn JQuery. I am a front-end guy (photoshop, HTML and CSS). But, hey, this JQuery stuff seems so simple that even I could do it. For the most part it is pretty straightforward and most of the issues I’ve encountered have answers to them on some forum somewhere. What I’ve noticed a lot of people having issues with (including myself) and what I have yet to see a clear answer to is what to do when scripts (or calls to different JQuery library versions) interfere or overwrite each other. For example, you might want "organic tabs" and a "slideshow" on the the same HTML page, but they won’t work together. Individually they run great. You check your code, you change the order of the scripts on the page, etc. , you go your web sources, but everyone seems to have partial answers or answers that just don’t work.

    Is there a Jquery best practices resource that would explain why this happens or how you should include javascript and calls to Jquery libraries so these conflicts don’t happen?

    Can you just not run so many jquery calls on one page?

    Should I stick to front-end development and leave the Javascript to the experts?

    Thank you.
    -John

    # April 13, 2010 at 11:44 am

    jQuery IS for front end people (In my opinion) :lol:
    I’m still new to the whole jQuery thing, but I usually don’t run into problems with scripts conflicting. If something does conflict and I’ve changed the load order, etc. I then have a quick look at the code to see if I can quickly debug it. If I can’t, I either google for something else that would do the task or look for a tutorial and try and create my own one.
    I don’t know what other people do.

    You can run lots of jQuery calls. There must be something within organic tabs (I’ve seen quite a few people have the problem) that doesn’t play well with other scripts. As I’m typing this I’m recalling a case where someone had this problem with organic tabs, but he loaded 2 different jQuery versions (1.3.2 and 1.4.2. One before each of the two scripts) and that somehow fixed the problem (I have no idea how or why).

    # April 14, 2010 at 11:47 am

    I actually found some answers on this (thanks to Chris Coyier for his help).

    You should only be using one version of Jquery per page. This was my biggest issue. So don’t call in version 1.3.2 and 1.4.2 on the same page. Version 1.4.2 should cover anything that is in 1.3.2.

    Also, in your header you should order:
    1)style sheet call
    2)library call (jquery 1.4.2 for example)
    3) specific script calls (spasticNav.js for example)

    Also, if you need to use another JavaScript library alongside jQuery you can use jQuery.noConflict()
    http://api.jquery.com/jQuery.noConflict/
    I will not pretend that I am expert enough to understand this method, but it might prove useful down the road.

    # April 14, 2010 at 1:04 pm

    I replied to you a couple of days ago about that, I guess you haven’t checked the reply yet lol. At least you solved your problem.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".