SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 separate javascript overriding one another

    I am using the "lightbox" effect to open my images which uses javascript. I am also using jQuery for the changing banner at the top of the page. Ever since I put the jQuery script in, the "lightbox" script stopped working. When I remove the jQuery script, the "lightbox" script works again. Obviously they are conflicting for some reason. I have included the relevant code below. Can anyone see why this is happening? Thanks.

    HTML 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>
    <!-- TemplateBeginEditable name="Head" -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Company</title>
    <link href="../include/global.css" rel="stylesheet" type="text/css" />
    <!-- TemplateEndEditable -->
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    
    </head>
    
    <body>
    <center>
    <!-- Top Start --> 
    <div class="top"> 
    	
        </div>
       
    <!-- Top End -->
    <div class="wrapper2">
     
    <!-- jQuery Start -->
    	
    <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
    
    <script type="text/javascript">
    
    function slideSwitch() {
        var $active = $('#slideshow IMG.active');
    
        if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
    
        // use this to pull the images in the order they appear in the markup
        var $next =  $active.next().length ? $active.next()
            : $('#slideshow IMG:first');
    
        // uncomment the 3 lines below to pull the images in random order
        
         // var $sibs  = $active.siblings();
         // var rndNum = Math.floor(Math.random() * $sibs.length );
        // var $next  = $( $sibs[ rndNum ] );
    
    
        $active.addClass('last-active');
    
        $next.css({opacity: 0.0})
            .addClass('active')
            .animate({opacity: 1.0}, 1000, function() {
                $active.removeClass('active last-active');
            });
    }
    
    $(function() {
        setInterval( "slideSwitch()", 5000 );
    });
    
    </script>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    The prototype library demands the use of the $ variable, so you should tell jQuery to release it after you've finished using it.

    See: http://api.jquery.com/jQuery.noConflict/

    You can do it with:

    Code javascript:
    jQuery.noConflict();
    jQuery(function($) {
        setInterval( "slideSwitch()", 5000 );
    });

    The only potential trouble is, will the slideSwitch function retain knowledge of the passed $ variable when it's being set that way?

    One potential solution is to pass setInterval a function that knows about the $ variable:

    Code javascript:
    jQuery.noConflict();
    jQuery(function($) {
        setInterval(function ($) {
            return function () {
                slideSwitch();
            };
        }($), 5000);
    });

    This hasn't been tested this yet, but see how it goes.

    Failing that, you can use jQuery instead of $ for a guaranteed solution.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply. I tried adding the below snippet of code, but the jQuery slideshow didn't work. What do you mean I can use jQuery instead of $ for a guaranteed solution? Sorry, Javascript isn't my strong point.
    HTML Code:
    jQuery.noConflict();
    jQuery(function($) {
        setInterval(function ($) {
            return function () {
                slideSwitch();
            };
        }($), 5000);
    });

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Mr.Canuck View Post
    Thanks for the reply. I tried adding the below snippet of code, but the jQuery slideshow didn't work. What do you mean I can use jQuery instead of $ for a guaranteed solution? Sorry, Javascript isn't my strong point.
    HTML Code:
    jQuery.noConflict();
    jQuery(function($) {
        setInterval(function ($) {
            return function () {
                slideSwitch();
            };
        }($), 5000);
    });
    That's because even though the returned function knows about the jQuery value of $, by the time the slideSwitch function is run the prototype one takes over.

    Use this instead, where you pass $ to the slideSwitch function:

    Code javascript:
    function slideSwitch($) {
        ...
    }
    jQuery.noConflict();
    jQuery(function($) {
        setTimeout(function () {
            slideSwitch($);
        }, 1000 );
    });

    It's either that, or you change the slideSwitch function so that jQuery is used instead of $
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again for the reply (I think we're getting close). Below is what I now have, and it is working, but the jQuery slideshow stops on the 2nd slide (there are a total of 7 slides that it runs through). Any idea on why it stops after the 2nd slide?

    HTML Code:
    <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
    
    <script type="text/javascript">
    
    function slideSwitch($) { 
    
        var $active = $('#slideshow IMG.active');
    
        if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
    
        // use this to pull the images in the order they appear in the markup
        var $next =  $active.next().length ? $active.next()
            : $('#slideshow IMG:first');
    
        // uncomment the 3 lines below to pull the images in random order
        
         // var $sibs  = $active.siblings();
         // var rndNum = Math.floor(Math.random() * $sibs.length );
        // var $next  = $( $sibs[ rndNum ] );
    
    
        $active.addClass('last-active');
    
        $next.css({opacity: 0.0})
            .addClass('active')
            .animate({opacity: 1.0}, 1000, function() {
                $active.removeClass('active last-active');
            });
    }
    jQuery.noConflict();
    jQuery(function($) {
        setTimeout(function () {
            slideSwitch($);
        }, 5000 );
    });
    
    </script>

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Yes. In my testing code I am using setTimeout so that I don't become harassed and depressed by the constant bombardment of testing alerts.

    You can set it back to setInterval so that it continues to trigger all of the time.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You just solved my problem 100%. Thanks a lot buddy!! I REALLY appreciate it


Bookmarks

Posting Permissions

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