I think i have jquery conflict problem help please

Discussion in 'jQuery' started by macaela, Mar 13, 2012.

  1. #1
    Hi i have a site which a use a slideshow which has its own js files to work and a jquery tabs which also has its own js files, but now since i had both those src files into the head of my page only one works, it seems i cant have both src files.

    I have googled about the jquery conflict function but i just dont think i can get the sintax correct can someone help me out please? thanks in advance
    I've separated the files with html coment ofr better visual the files i need are SLIDESHOW files, and TABS file.

    <!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=utf-8" />
    <title>People Smart Learning</title>
    <link rel="stylesheet" type="text/css" href="stylesheets/main.css" />
    <link rel='stylesheet' id='style-css'  href='slide-show/diapo.css' type='text/css' media='all'>
    <link type="text/css" href="js/jquery-ui-1.8.18.custom.css" rel="stylesheet" />	
    <meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
    
    <!-- START SLIDESHOW FILES  -->
    <script type='text/javascript' src='slide-show/scripts/jquery.min.js'></script>
    <!--[if !IE]><!--><script type='text/javascript' src='slide-show/scripts/jquery.mobile-1.0rc2.customized.min.js'></script><!--<![endif]-->
    <script type='text/javascript' src='slide-show/scripts/jquery.easing.1.3.js'></script>
    <script type='text/javascript' src='slide-show/scripts/jquery.hoverIntent.minified.js'></script> 
    <script type='text/javascript' src='slide-show/scripts/diapo.js'></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
    <script>
    	$(function(){
    		$('.pix_diapo').diapo();
    	});
    </script>
    <!-- END SLIDESHOW FILES FOR  -->
    
    
    <!-- START CONTACT FORM FILES -->
    <script type="text/javascript" src="form/validation/validation.js"></script>
     <script type="text/javascript">
    		var nameError = '<?php echo $error_messages['fullname']; ?>';
    		var emailError = '<?php echo $error_messages['email']; ?>';
    		var telephoneError = '<?php echo $error_messages['telephone']; ?>';
    		var commentError = '<?php echo $error_messages['comment']; ?>';
    	</script> 
    <!-- START CONTACT FORM FILES -->
    
    
    <!--START TAB FILES-->
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
    <script type="text/javascript">
    	$(function(){
    		// Tabs
    		$('#tabs').tabs();
    	});
    </script>
    <!-- END TABS FILES -->
    
    </head>
    HTML:

     
    macaela, Mar 13, 2012 IP
  2. stephan2307

    stephan2307 Well-Known Member

    Messages:
    1,277
    Likes Received:
    33
    Best Answers:
    7
    Trophy Points:
    150
    #2
    which ones works TABS or SLIDESHOW?
     
    stephan2307, Mar 14, 2012 IP
  3. furqanartists

    furqanartists Well-Known Member

    Messages:
    35
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    101
    #3
    jQuery and MooTools both are using $ function. Use the following Code if you want to use MooTools and JQuery together.

    <script type="text/javascript">
    
        var jq = jQuery.noConflict(); // and use jq instead of $
        jq(function(){
            jq('.pix_diapo').diapo();
        });
    
    </script>
    Code (markup):

    ============== OR ===============


    <script type="text/javascript">
    
        jQuery.noConflict();
        jQuery(function($){
            $('.pix_diapo').diapo();
        });
    
    </script>
    Code (markup):
     
    furqanartists, Mar 14, 2012 IP
  4. macaela

    macaela Active Member

    Messages:
    181
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #4
    Thanks that did the job thank you
     
    macaela, Mar 14, 2012 IP
  5. ashwini223

    ashwini223 Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    hi


    This is my link www.peacockbrand.in/demo/version1


    Here i have used <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> for vertical slide down menu and right side in featured products I have used <script type="text/javascript" src="js/external/mootools.js"></script>


    Where both get clashed..


    If i comment jquery-1.4.4.js means right side works fine neither mootools.js are commented vertical slider works fine..


    I want both to work fine..please give me a solution as soon as possible
     
    ashwini223, Sep 28, 2012 IP
  6. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #6
    ashwini, see post #3.
     
    Rukbat, Oct 1, 2012 IP