stackoom
  简体   繁体   中英

Combine multiple javascript-files on one page

 原文  2012-10-10 09:17:25  6   2    javascript/ jquery/ validation/ carousel

Question

I have almost finished a website, but I'm struggling with combining two different javascript files... If I exclude A, B works. If I exclude B, A works. So there seems no go-between.

I'm trying to combine a JQuery-form validation and a JCarousel. As you can see, I have to exclude the validation script in orde to get the Carousel working...

Isn't there a way to combine both these script? I already tried the $j-trick from JQuery documentation , but with no luck.

I have included the files in this order: 

<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>

2 answers

solution1
 1 ACCPTED  2012-10-10 09:49:13

I can see the problem but not what is causing it. I imagine you're outputting some javascript via PHP but it is coming out above the <html> tag.

If you goto view-source:http://www.YOURDOMAIN.be/new/index.php?page=&action=shout

The html looks like this: 

<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>

solution2
 -1  2012-10-10 09:46:28

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> is wrong use this: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

see the difference it is src.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Searching for best practice to use one mongodb connection in multiple javascript-files Multiple JavaScript files, combine into one How to translate javascript-files in Pylons How to combine requests for multiple javascript files into one http request? Combine multiple javascript files with bower Combine multiple csv files in JavaScript? Why can't I use functions from javascript-files that are imported by require()? Conditionally combining javascript-files as a precompile step (more flexible than what r.js can do) Does this part of Gruntfile combine multiple files to one? Combine requests for multiple PHP files to one request
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM