Home/ Questions/Q 8652717
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T14:22:23+00:00

I have almost finished a website, but I’m struggling with combining two different javascript

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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