working with multiple javascripts

Question

I have a project with some javascripts. One image viewer, a carrousel, some toggle and now I need to make a pop-up form. But when I insert the javascript for pop-up... is stop working. How can I make all work? or any hint to help me create a pop-up form (instead of this I use now). Thanks in advance

this is the script in header

<script src="js/jquery-2.0.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/fancybox/jquery.fancybox.css"> 
<link rel="stylesheet" href="css/bootstrap-lightbox.min.css">
<link rel="stylesheet" href="css/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="css/owl-carousel/owl.theme.css"> 
<script type="text/javascript">
    $( document ).ready(function() {
        $(".toggleControl").click(function(){ 
            $(this).siblings(".toggleDiv").slideToggle(1000);
            $(this).children().children( ".collapse-expand" ).toggleClass( "collapse-ico" );
            $(this).children().children( ".collapse-expand" ).toggleClass( "expand-ico" );
        });
    });     //document.ready end
</script>
<script src="js/popjs.js"></script>
<link rel="stylesheet" href="popupwindow.css">
<script src="popupwindow.js"></script>

<script type="text/javascript">
$(document).ready(function () {

$('#newsletter').click(function (e) {
e.preventDefault();
$('#modal-content').popUpWindow({
action: "open", // open or close
modal: true, // modal mode
size: "large", // large, medium or large
buttons: [{
text: "x",
click: function () {
this.close();
}
}]
});
});

});
</script>

this is the script in footer

<script src="js/jquery-2.0.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/fancybox/jquery.fancybox.js" type="text/javascript"></script>
<script src="js/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="js/fancybox/jquery.mousewheel-3.0.6.pack.js" type="text/javascript"></script>
<script src="js/okzoom.js"></script>
<script src="js/owl.carousel.js"></script>
<script type="text/javascript">
    $( document ).ready(function() {
        $("#owl-example").owlCarousel({
            items : 4
        })
    });
</script>    
<script type="text/javascript">
      $(document).ready(function() {
          $('#pro-img-carousel').carousel({
            interval: 10000
          })
          $('#carousel-pro-img').carousel ({
              interval:8000
          })
        });
</script>   
    <script type="text/javascript">
      $(function(){
          $('.example').okzoom({
            width: 100,
            height: 100,
            border: "1px solid black",
            shadow: "0 0 5px #000"
          });
      });   
    </script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.fancybox').fancybox();
        $(".fancybox-effects-d").fancybox({
            padding: 0,
            openEffect : 'elastic',
            openSpeed  : 150,
            closeEffect : 'elastic',
            closeSpeed  : 150,
            closeClick : true,
            helpers : {
                overlay : null
            }
        });
    });
    </script> 
    <script>
    $(document).ready(function() {
    function random(owlSelector){
    owlSelector.children().sort(function(){
    return Math.round(Math.random()) - 0.5;
    }).each(function(){
    $(this).appendTo(owlSelector);
    });
    }
    $("#owl-demo").owlCarousel({ 
    navigation: true,
    navigationText: [
    "<img src='images/left.png' alt='' class=''>",
    "<img src='images/right.png' alt='' class=''>"
    ],
    beforeInit : function(elem){
    random(elem);
    }
    });
    });

  </script>

Your including jquery (2 versions) a total of 3 times, bootstrap twice and you have umpteen different $(document).ready(...) calls. — Jamiec
– Jamiec, Commented Mar 10, 2015 at 9:36
check the console for errors and don't have to many scripts. Every script tag u have starts the compiler. Merge them. And check the console. — CyberFox
– CyberFox, Commented Mar 10, 2015 at 9:36

Sergii Shvager · Accepted Answer · 2015-03-10 09:38:55Z

2

At first, you included jquery 3 times, bootstrap 2 times. One time will be enought.

answered Mar 10, 2015 at 9:38

Sergii Shvager

1,2669 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

enguerranws Over a year ago

Totally true, but it sounds like a comment, not an answer :)

Amr Elgarhy · Accepted Answer · 2015-03-10 09:35:50Z

0

Since you are using Bootstrap, will be good to use this http://getbootstrap.com/javascript/#modals

answered Mar 10, 2015 at 9:35

Amr Elgarhy

69.2k70 gold badges193 silver badges312 bronze badges

Collectives™ on Stack Overflow

working with multiple javascripts

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related