Solved

Using Jquery, Prototype and Scriptaculous on same page

Posted on 2010-08-23
3
560 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
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)

724 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