www.webdeveloper.com
Results 1 to 3 of 3

Thread: Function conflict

  1. #1
    Join Date
    Apr 2011
    Posts
    7

    Function conflict

    Hi,

    I have a website on which i want to run two pieces of Jquery, the problem is whilst both work fine individually once they are placed together they stop working, and i think it must be because they conflict as they both call the same function.

    below are the two individual pieces of javascript.

    Code:
        //avoid conflict with other script
        $j=jQuery.noConflict();
     
        $j(document).ready(function($) {
     
    	//this is the floating content
    	var $floatingbox = $('#floating-box');
     
    	if($('#body').length > 0){
     
    	  var bodyY = parseInt($('#body').offset().top) - 20;
    	  var originalX = $floatingbox.css('margin-left');
     
    	  $(window).scroll(function () { 
     
    	   var scrollY = $(window).scrollTop();
    	   var isfixed = $floatingbox.css('position') == 'fixed';
     
    	   if($floatingbox.length > 0){
     
    	      $floatingbox.html("srollY : " + scrollY + ", bodyY : " 
                                        + bodyY + ", isfixed : " + isfixed);
     
    	      if ( scrollY > bodyY && !isfixed ) {
    			$floatingbox.stop().css({
    			  position: 'fixed',
    			  left: '50%',
    			  top: 20,
    			  marginLeft: -500
    			});
    		} else if ( scrollY < bodyY && isfixed ) {
    		 	  $floatingbox.css({
    			  position: 'relative',
    			  left: 0,
    			  top: 0,
    			  marginLeft: originalX
    		});
    	     }		
    	   }
           });
         }
      });
    and the second peice of code:

    Code:
    $(document).ready(function(){
    	$(".toggle_container").hide();
    	$("h2.expand_heading").toggle(function(){
    		$(this).addClass("active"); 
    		}, function () {
    		$(this).removeClass("active");
    	});
    	$("h2.expand_heading").click(function(){
    		$(this).next(".toggle_container").slideToggle("slow");
    	});
    	$(".expand_all").toggle(function(){
    		$(this).addClass("expanded"); 
    		}, function () {
    		$(this).removeClass("expanded");
    	});
    	$(".expand_all").click(function(){
    		$(".toggle_container").slideToggle("slow");
    	});
    });
    Now when these two items of code are on the same page they just simply stop working. I am fairly new to javascript and so do not have a great amount of experience but i was wondering if it was related to the fact that both use ready function. If so is there away around this?.

    Any suggestions would be greatfully appreciated.

    Thanks

    Lee

  2. #2
    Join Date
    Jan 2005
    Posts
    356
    Quote Originally Posted by leest View Post
    Hi,

    I have a website on which i want to run two pieces of Jquery, the problem is whilst both work fine individually once they are placed together they stop working, and i think it must be because they conflict as they both call the same function.
    So just put the body of each within the same function call...

  3. #3
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    In your first script, you made "$j" -- rather than just "$" -- the reference to jQuery. So when your second script tries to use "$", it will throw an error.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles