Solved

Using Jquery, Prototype and Scriptaculous on same page

Posted on 2010-08-23
3
548 Views
Last Modified: 2012-05-10
Hi all,

I have a problem - I have a complex website that uses navigation drop down menu with jquery for added effects. But on some pages, I want to use the Lightview plugin www.nickstakenburg.com/projects/lightview/ but it conflicts with Jquery so I am stuck.

Ive seen various workarounds mentioning Jquery no conflict but there are so many I dont know which to choose and also I dont know if the script goes on the HTML page, in the prototype.js file, the scriptaculous file, or the jquery file or all of them.

HELP!!
0
Comment
Question by:intangiblemedia
3 Comments
 
LVL 15

Accepted Solution

by:
SRigney earned 250 total points
ID: 33503480
http://api.jquery.com/jQuery.noConflict/

The jQuery noConflict is a method that you need to call after including jQuery but before including prototype and Scriptaculous.

It will mean that every time you have $() it will use Prototype, so if you expect to have jquery behavior you will have to explicitly change your code to
jQuery()


If you are already using jQuery a better solution will be to find a jQuery plugin that is similar to the lightview plugin then you won't have to worry about multiple libraries conflicting with each other.

jQuery lightbox is similar.  http://leandrovieira.com/projects/jquery/lightbox/
0
 

Assisted Solution

by:pboucher1960
pboucher1960 earned 250 total points
ID: 33503566
Hi,

First of all, you should read this information: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

I would recommand setting up jQuery.noConflict() in all of your pages and calling jQuery functions through the jQuery().someThing syntax instead of the usual $().someThing.

Do not forget to declare the javascript libraries in the right order in the header of your pages.  In your case, it would be prototype, Scriptaculous and jQuery in third position.

Hope this help!

Pierre Boucher
0
 

Author Comment

by:intangiblemedia
ID: 33612139
Thanks guys, in the end I did not use the solution as I had re write the navigation of the site due to another issue.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Angular - data is there but why isn't search working? 51 56
Regular Expression 1-100 with two digits 15 21
Split in Javascript 5 30
Error in script 11 44
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

919 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now