Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript Conflict, Scrollbar and Lightbox

    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

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So there's absolutely NO way around it? It's one or the other?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    See post #2.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    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.

  • #7
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    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!
    Last edited by R_Rbnsn; 01-18-2012 at 12:37 AM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •