How to collect few small javascript snippets in one file

Question

this are the snippets and I need them to put in one common file. The idea is to have one extern .js file with all these snippets I tried to copy all the code in one file but it does not work. Is it possible to have more then one $(document).ready(function ?

  <!-- Java Script //-->
           <script type="text/javascript">
              $(".collapse").collapse()
              $('#menu').collapse({
                toggle: false
              })
           </script> <!-- end of navigation -->


           <script type="text/javascript">

              var jump=function(e)
              {
                     //prevent the "normal" behaviour which would be a "hard" jump
                     e.preventDefault();
                     //Get the target
                     var target = $(this).attr("href");
                     //perform animated scrolling

                     $('html,body').animate(
                     {
                     //get top-position of target-element and set it as scroll target
                     scrollTop: $(target).offset().top 
                     //scrolldelay:1 seconds
                     },1000,function()

                     {
                         //attach the hash (#jumptarget) to the pageurl
                         location.hash = target;
                     });
              }


              $(document).ready(function()
              {
                     //$('a[href*=#]').bind("click", jump);
                     $('a[href*=#]').not(document.getElementsByClassName("carousel-control")).bind("click", jump);     
                     return false;
              });

              </script> <!-- // end of smooth scrolling -->


              <!-- // Shows menu after 50px -->
              <script type="text/javascript">

              var fixed = false;

              $(document).scroll(function() {
                  if( $(this).scrollTop() > 25 ) {
                    if( !fixed ) {
                          fixed = true;
                          $('#navigation').css({position:'fixed', display:'inline'});

                      }
                  } else {
                      if( fixed ) {
                          fixed = false;
                          $('#navigation').css({position:'relative', display:'block'});

                      }
                  }
              });

              </script>

Could you writte me how I am gonna do that? Thanks in advance.

score 3 · Answer 1 · answered Feb 21 '14 at 12:06

3

First of all, if you wish to put these snippets into a separate file, you should remove all of the script tags

<script type="text/javascript"> <-- Remove this
  Keep this
</script> <-- Remove this

answered Feb 21 '14 at 12:06

Culme

1,065
13
21

Oh and yes, it is possible to have more than one $(document).ready, but perhaps not ideal. Please see this question: http://stackoverflow.com/questions/1327756/can-you-have-multiple-document-readyfunction-sections – Culme Feb 21 '14 at 12:12

Roman Hocke · Answer 2 · 2014-02-23T10:57:40.040

You can join the snippets in one file, no problem. What may be a problem, is the moment when the scripts are executed. In Your case, this may be the problem:

<script type="text/javascript">
$(".collapse").collapse()
$('#menu').collapse({
    toggle: false
})
</script> <!-- end of navigation -->

This code runs at the moment it is encountered in the HTML code. So the #menu element must be defined in the HTML above this snippet. This is probably not met, when You put Your code in external JS file and include it in < head > part of HTML. Try wrapping this code in

$(document).ready(function() { ... });

score 1 · Answer 3 · answered Feb 21 '14 at 12:16

To achieve this you should remove all script tags from the js file. And yes you can have multiple document.ready blocks but you can wrap whole code snippet in a single document.ready block which is a good practice like:

      $(document).ready(function()
      {
             //$('a[href*=#]').bind("click", jump);
             $('a[href*=#]').not(document.getElementsByClassName("carousel-control")).bind("click", jump);     
      $(".collapse").collapse()
      $('#menu').collapse({
        toggle: false
      })
      var jump=function(e)
      {
             //prevent the "normal" behaviour which would be a "hard" jump
             e.preventDefault();
             //Get the target
             var target = $(this).attr("href");
             //perform animated scrolling

             $('html,body').animate(
             {
             //get top-position of target-element and set it as scroll target
             scrollTop: $(target).offset().top 
             //scrolldelay:1 seconds
             },1000,function()

             {
                 //attach the hash (#jumptarget) to the pageurl
                 location.hash = target;
             });
      }

      var fixed = false;

      $(document).scroll(function() {
          if( $(this).scrollTop() > 25 ) {
            if( !fixed ) {
                  fixed = true;
                  $('#navigation').css({position:'fixed', display:'inline'});

              }
          } else {
              if( fixed ) {
                  fixed = false;
                  $('#navigation').css({position:'relative', display:'block'});

              }
          }
      });

      });
          });

score 0 · Answer 4 · answered Feb 21 '14 at 12:08

0

What does the console tells you.

Perhaps you need to set some ";" in the first snippet.

answered Feb 21 '14 at 12:08

koalabruder

2,794
9
33
40

score 0 · Answer 5 · edited May 23 '17 at 10:26

You can have multiple $(document).ready() but it is not always recommended , check here.

If you are writing JS file you dont need <script> tag, If you are writing it within your html file then you need to write it within script tag

<script type="text/javascript"> 
 //your JS
</script>

but if size of your JS increases it is better to have it in a separate file.

YOUR CODE IN ARRANGED MANNER

$(document).ready(function()
{
    var fixed = false;
    $(".collapse").collapse();

    $('#menu').collapse({
        toggle: false
    })


    var jump = function(e)
    {
        //prevent the "normal" behaviour which would be a "hard" jump
        e.preventDefault();
        //Get the target
        var target = $(this).attr("href");
        //perform animated scrolling

        $('html,body').animate(
                {
                    //get top-position of target-element and set it as scroll target
                    scrollTop: $(target).offset().top
                            //scrolldelay:1 seconds
                }, 1000, function()

        {
            //attach the hash (#jumptarget) to the pageurl
            location.hash = target;
        });
    }

    $(document).scroll(function() {
        if ($(this).scrollTop() > 25) {
            if (!fixed) {
                fixed = true;
                $('#navigation').css({position: 'fixed', display: 'inline'});

            }
        } else {
            if (fixed) {
                fixed = false;
                $('#navigation').css({position: 'relative', display: 'block'});

            }
        }
    });

    //$('a[href*=#]').bind("click", jump);
    $('a[href*=#]').not(document.getElementsByClassName("carousel-control")).bind("click", jump);
    return false;
});

I hope it helps :)

How to collect few small javascript snippets in one file

5 Answers5