Multiple JQuery elements on a page not working when placed together

Question

I am designing a website with Jquery Zweather feed from yahoo. I wanted to make the large image a gallery that faded to the next image.

I tried adding the jcobb basic-slider. The slider worked PERFECT, but the Jquery Zweather feed stopped working. I thought that this might have to do with the jcobb basic-slider "trigger" that went in the outermost div, or it might have something to do with the library.

I abandoned using the slider, but I would still like to use it. Can you put more than one Javascript/Jquery items on a page? What if one item has a "trigger, but the other does not? If you are curious, the site I am working on is:

www.orangeburgcounty.org/countyWebsite/index.asp

Answer 1

There are a few things you can try to get this working.

1. Be sure your script is being pulled into the page, one way to check is by using the 'sources' tab in the Chrome Debugger and searching for the file else in the html head section

2. Be sure that you've included the datatale script after you've included jQuery, as it is most certainly dependant upon that.

3. Check whether jQuery is included properly and once only.

4. Watch out for jQuery conflicts. There is some other library which is overridding $, so your code is not working because $ is not an alias for jQuery anymore. You can use jQuery.noConflict() to avoid conflicts with other libraries on the page which use the same variable $.

5. Check Chrome/FireBug developer tools for JS errors.