2012-10-10 44 views
0

我已经几乎完成了一个网站,但我正在努力结合两个不同的JavaScript文件...如果我排除A,B的作品。如果我排除B,则A有效。所以似乎没有中间人。在一个页面上结合多个javascript文件

我想结合一个JQuery表单验证和一个JCarousel。正如你所看到的,我必须排除orde中的验证脚本才能使Carousel工作...

是不是有办法将这两个脚本结合起来?我已经tried the $j-trick from JQuery documentation,但没有运气。

我已经包含在这个顺序中的文件:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

<script type="text/javascript" src="includes/js/jquery-1.6.min.sliding.js"></script> 
<script type="text/javascript" src="includes/js/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="includes/js/hover.js"></script> 
<script type="text/javascript" src="includes/js/jquery.jcarousel.js"></script> 

<!-- js links --> 
<script type="text/javascript" src="includes/js/coda.js"></script> 
<script type="text/javascript" src="includes/js/placeholder.js"></script> 
<script language="javascript" src="includes/js/popup/modal.popup.js"></script> 

<script type="text/javascript" src="includes/notify/js/jquery.noty.js"></script> 

<!-- THIS MUST BE COMMENTED OTHERWISE THE CONTACT SLIDER DOENS'T WORK!! 

    MUST FIX!!! 

    <script type="text/javascript" src="includes/js/form/jquery.validationEngine-nl.js" charset="utf-8"></script> 
    <script type="text/javascript" src="includes/js/form/jquery.validationEngine.js" charset="utf-8"></script> 

    <script src="includes/lightbox/lightbox.js"></script> 

--> 

<script src="includes/lightbox/lightbox.js"></script> 

<!-- JQuery UI --> 
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script> 
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script> 
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script> 
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script> 
+0

你是否只包含jQuery一次?并在两个插件? (不应该多次包含jQuery) – charlietfl

+0

指向该网站或jsfiddle的链接将非常棒。 – CharliePrynn

+0

请看看我的编辑你的意见:) – Michiel

回答

1

我可以看到问题,但不是什么导致它。我想你正在通过PHP输出一些javascript,但它会在<html>标签之上出现。

如果您转到视图出处:http://www.YOURDOMAIN.be/new/index.php页= &行动=喊

的HTML如下:

<script> 
       $(document).ready(function(){noty({"text":"Uw shout is succesvol toegevoegd.", 
       "layout":"top","type":"success","animateOpen":{"height":"toggle"}, 
       "animateClose":{"height":"toggle"},"speed":500,"timeout":5000, 
       "closeButton":true,"closeOnSelfClick":true,"closeOnSelfOver":false,"modal":false});});</script><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<meta http-equiv="Content-Type" content="text/html; charset=ISO 8859-1" /> 

    <!-- favicon --> 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 

    <!-- css links --> 
    <link rel="stylesheet" type="text/css" href="styles/styles.css" /> 
    <link rel="stylesheet" type="text/css" href="styles/skin.css" /> 

    <link rel="stylesheet" type="text/css" href="includes/js/form/css/validationEngine.jquery.css" /> 
    <link rel="stylesheet" type="text/css" href="includes/lightbox/lightbox.css" /> 
    <link rel="stylesheet" type="text/css" href="includes/notify/css/jquery.noty.css"/> 
    <link rel="stylesheet" type="text/css" href="includes/notify/css/noty_theme_default.css"/> 
    <link rel="stylesheet" type="text/css" href="includes/js/jquery-ui/development-bundle/themes/base/jquery.ui.all.css"> 
    <link rel="stylesheet" type="text/css" href="includes/js/jquery-ui/development-bundle/demos/demos.css"> 
    <link rel="stylesheet" type="text/css" href="includes/js/jquery-ui/development-bundle/jquery-ui-timepicker.css"> 

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 


    <script type="text/javascript" src="includes/js/jquery.easing.1.3.js"></script> 
    <script type="text/javascript" src="includes/js/hover.js"></script> 
    <script type="text/javascript" src="includes/js/jquery.jcarousel.js"></script> 

    <!-- js links --> 

    <script type="text/javascript" src="includes/js/coda.js"></script> 
    <script type="text/javascript" src="includes/js/placeholder.js"></script> 
    <script language="javascript" src="includes/js/popup/modal.popup.js"></script> 

    <script type="text/javascript" src="includes/notify/js/jquery.noty.js"></script> 
    <script type="text/javascript" src="includes/js/form/jquery.validationEngine-nl.js" charset="utf-8"></script> 
    <script type="text/javascript" src="includes/js/form/jquery.validationEngine.js" charset="utf-8"></script> 

    <script src="includes/lightbox/lightbox.js"></script> 

    <!-- JQuery UI --> 
    <script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script> 
    <script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script> 
    <script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script> 
    <script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script> 
    <script type="text/javascript"> 
     function mycarousel_initCallback(carousel) { 
      // Disable autoscrolling if the user clicks the prev or next button. 
      carousel.buttonNext.bind('click', function() { 
       carousel.startAuto(0); 
      }); 

      carousel.buttonPrev.bind('click', function() { 
       carousel.startAuto(0); 
      }); 

      // Pause autoscrolling if the user moves with the cursor over the clip. 
      carousel.clip.hover(function() { 
       carousel.stopAuto(); 
      }, function() { 
       carousel.startAuto(); 
      }); 
     }; 

     jQuery(document).ready(function() { 
      jQuery('#mycarousel').jcarousel({ 
       auto: 2, 
       wrap: 'last', 
       initCallback: mycarousel_initCallback 
      }); 
     }); 
    </script> 

    <script> 
     $(function(){ 
      $('.leader_picture').contenthover({ 
       overlay_background:'#000', 
       overlay_opacity:0.8 
      }); 
     }); 
    </script> 

    <script language="javascript"> 
     $(document).ready(function() { 

      //Change these values to style your modal popup 
      var align = 'center';         //Valid values; left, right, center 
      var top = 100;           //Use an integer (in pixels) 
      var width = 500;          //Use an integer (in pixels) 
      var padding = 10;          //Use an integer (in pixels) 
      var backgroundColor = '#FFFFFF';      //Use any hex code 
      var source = 'includes/php/popup.php';     //Refer to any page on your server, external pages are not valid 
      var borderColor = '#333333';       //Use any hex code 
      var borderWeight = 4;         //Use an integer (in pixels) 
      var borderRadius = 5;         //Use an integer (in pixels) 
      var fadeOutTime = 300;         //Use any integer, 0 = no fade 
      var disableColor = '#666666';       //Use any hex code 
      var disableOpacity = 40;        //Valid range 0-100 
      var loadingImage = 'lib/release-0.0.1/loading.gif';  //Use relative path from this page 

      //This method initialises the modal popup 
      $(".modal").click(function() { 
       modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage); 
      }); 

      //This method hides the popup when the escape key is pressed 
      $(document).keyup(function(e) { 
       if (e.keyCode == 27) { 
        closePopup(fadeOutTime); 
       } 
      });  
     }); 
    </script> 
</head> 
+0

确实!这是'滑动'文件。我离开了那个,现在它就像魅力一样运作!谢谢! – Michiel

+0

太棒了,很高兴我能帮到你。 – CharliePrynn

-1

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 是错误的 使用这样的: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

看出其中的差别是SRC。

+0

为什么? – Michiel

+0

你错过了http:我认为 –

相关问题