Solved

Using Jquery, Prototype and Scriptaculous on same page

Posted on 2010-08-23
3
546 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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Form submit issue 11 51
Angular JS question 24 37
Accessing data in JSON response.d 4 26
jqplot Pie Chart 2 11
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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…

763 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

16 Experts available now in Live!

Get 1:1 Help Now