Javascript Conflict, Scrollbar and Lightbox

R_Rbnsn · 01-13-2012, 05:53 PM

Hi,

I'm just putting the finishing touches on my new website and decided to include a custom scroll bar to really finish off the look of a couple of pages.

I've managed to implement it successfully into one of my pages, however on another it seems to be a bit hit and miss as to whether it works in different browsers. After some experimentation I think I've managed to determine that the problem is that the javascript for the custom scrollbar is conflicting with some other javascript on the same page (lightbox image viewer).

I came to this conclusion as prior to adding the custom scrollbar lightbox worked fine, and now after adding the addition javascript for the scrollbar lightbox has stopped working (and the scrollbar is hit and miss as to whether it works). In addition as I say, I have implemented the scrollbar into a different page (which doesn't have any other javascript to conflict with) which seems to work fine.

Here's the page prior to adding the new scrollbar and with lightbox working:

Here's the page with the scrollbar added and lightbox not working:

The code that I suspect is conflicting is as follows:

Code:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Ryan Robinson | Gear</title>
<!-- lightbox script -->
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>
<!-- scrollbar script -->
<link rel="stylesheet" href="scrollbar/css/scrollbar_gear.css" type="text/css" media="screen"/>	
<script type="text/javascript" src="scrollbar/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="scrollbar/js/jquery.tinyscrollbar.min.js"></script>
<script type="text/javascript">
		$(document).ready(function(){
			$('#scrollbar1').tinyscrollbar();	
		});
</script>

I could be wrong, but considering they work separately but whenever I put them together one or both stops it leads me to believe this must be the problem.

Anyone have any idea of how I might fix this?
(PS. I am still a bit of a noob when it comes to code, so please make any suggestions as simple as possible!)

Thanks

Philip M · 01-13-2012, 06:38 PM

If you try using the search feature of this forum, you will find that this is quite a common problem. Using two different Javascript frameworks (jQuery and prototype) very often causes conflicts which unfortunately cannot be resolved. Remedy - use only one framework.

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

R_Rbnsn · 01-13-2012, 08:43 PM

So there's absolutely NO way around it? It's one or the other?

Philip M · 01-14-2012, 07:34 AM

See post #2.

R_Rbnsn · 01-17-2012, 01:46 PM

Fixed, with both working

http://www.ryanrobinsonguitarist.co.uk/gear.html

To anyone else having the same issue of trying to use Lightbox with other Javascript, use Slimbox instead.

VIPStephan · 01-17-2012, 05:12 PM

Your statement is misleading. It sounds like you fixed it with using both, jQuery and prototype, but actually you just exchanged the prototype based overlay script with a jQuery based script, so that you just use jQuery. There is a jQuery lightbox plugin, by the way.

Generally you can say that there is a jQuery plugin for everything you find on the internet. So whenever you find something that’s not jQuery and would cause conflicts, just search for a jQuery plugin using the same terms.

R_Rbnsn · 01-18-2012, 12:32 AM

Quote:

Originally Posted by VIPStephan

Your statement is misleading. It sounds like you fixed it with using both, jQuery and prototype, but actually you just exchanged the prototype based overlay script with a jQuery based script, so that you just use jQuery. There is a jQuery lightbox plugin, by the way.

Generally you can say that there is a jQuery plugin for everything you find on the internet. So whenever you find something that’s not jQuery and would cause conflicts, just search for a jQuery plugin using the same terms.

Apologies, I didn't mean to be misleading. Obviously what I meant was that I got it working using the two elements I wanted to include (the custom scrollbar and a lightbox image viewer), even if it is a different version of the same thing.

I just wanted to show to anyone else that might come across this thread having the same problem that here IS a solution to having both elements. The original replies to the post left me feeling discouraged and that it was totally impossible to achieve, so I was just glad to proclaim that I had managed it!