title: How do i run/call javascript function in javascript file from html file?
body: <p>This is the html file conent:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;!--
  --&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script src="java_script.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" type="text/css" href="carousel.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="vertical_slider.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="glow-effect.css"&gt;
          &lt;script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;title&gt;TODO supply a title&lt;/title&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div&gt;TODO write content&lt;/div&gt;
  
          &lt;div id="wrapper"&gt;
      &lt;div id="carousel-wrapper"&gt;
          &lt;img id="shadow" src="img/gui/carousel_shadow.png" /&gt;
          &lt;div id="carousel"&gt;
              &lt;span id="pixar"&gt;&lt;img src="img/large/pixar.jpg" /&gt;&lt;/span&gt;
              &lt;span id="bugs"&gt;&lt;img src="img/large/bugs.jpg" /&gt;&lt;/span&gt;
              &lt;span id="cars"&gt;&lt;img src="img/large/cars.jpg" /&gt;&lt;/span&gt;
              &lt;span id="incred"&gt;&lt;img src="img/large/incred.jpg" /&gt;&lt;/span&gt;
              &lt;span id="monsters"&gt;&lt;img src="img/large/monsters.jpg" /&gt;&lt;/span&gt;
              &lt;span id="nemo"&gt;&lt;img src="img/large/nemo.jpg" /&gt;&lt;/span&gt;
                          &lt;span id="radar"&gt;&lt;img src="img/large/radar002665.png" /&gt;&lt;/span&gt;
              &lt;span id="rat"&gt;&lt;img src="img/large/rat.jpg" /&gt;&lt;/span&gt;
              &lt;span id="toystory"&gt;&lt;img src="img/large/toystory.jpg" /&gt;&lt;/span&gt;
              &lt;span id="up"&gt;&lt;img src="img/large/up.jpg" /&gt;&lt;/span&gt;
              &lt;span id="walle"&gt;&lt;img src="img/large/walle.jpg" /&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="thumbs-wrapper"&gt;
          &lt;div id="thumbs"&gt;
              &lt;a href="#pixar" class="selected"&gt;&lt;img src="img/small/pixar.jpg" /&gt;&lt;/a&gt;
              &lt;a href="#bugs"&gt;&lt;img src="img/small/bugs.jpg" /&gt;&lt;/a&gt;
              &lt;a href="#cars"&gt;&lt;img src="img/small/cars.jpg" /&gt;&lt;/a&gt;
              &lt;a href="#incred"&gt;&lt;img src="img/small/incred.jpg" /&gt;&lt;/a&gt;
              &lt;a href="#monsters"&gt;&lt;img src="img/small/monsters.jpg" /&gt;&lt;/a&gt;
              &lt;a href="#nemo"&gt;&lt;img src="img/small/nemo.jpg" /&gt;&lt;/a&gt;
                          &lt;a href="#radar"&gt;&lt;img src="img/small/radar002665resized.jpg" /&gt;&lt;/a&gt;
              &lt;a href="#rat"&gt;&lt;img src="img/small/rat.jpg" /&gt;&lt;/a&gt;
              &lt;a href="#toystory"&gt;&lt;img src="img/small/toystory.jpg"  /&gt;&lt;/a&gt;
              &lt;a href="#up"&gt;&lt;img src="img/small/up.jpg" /&gt;&lt;/a&gt;
              &lt;a href="#walle"&gt;&lt;img src="img/small/walle.jpg" /&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;a id="prev" href="#"&gt;&lt;/a&gt;
          &lt;a id="next" href="#"&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm calling both files the css and javascript. java_script.js and vertical_slide.css
  If i'm adding the javascript to the html file inside script tags it will work fine.
  But once i moved the javascript to a new file( java_script.js ) it's not working the jquery i see thei mages not in places and nothing is working. </p>
  
  <p>I did inspect elements and it dosn't show any errors but it's not working.</p>
  
  <p>This is the javascript file content:</p>
  
  <pre><code>(function test() {
  
      ('#carousel').carouFredSel({
          responsive: true,
          circular: false,
          auto: false,
          items: {
              visible: 1,
              width: 200,
              height: '56%'
          },
          scroll: {
              fx: 'directscroll'
          }
      });
  
      ('#thumbs').carouFredSel({
          responsive: true,
          circular: false,
          infinite: false,
          auto: false,
          prev: '#prev',
          next: '#next',
          items: {
              visible: {
                  min: 2,
                  max: 6
              },
              width: 150,
              height: '66%'
          }
      });
  
      ('#thumbs a').click(function() {
          ('#carousel').trigger('slideTo', '#' + this.href.split('#').pop() );
          ('#thumbs a').removeClass('selected');
          (this).addClass('selected');
          return false;
      });
  
  });
  </code></pre>
  
  <p>I added to the function the word test.
  Before it, it was only (function () {
  Also in the javascript file all the functions had a $ before but i removed them all since i got errors on them saying $ not defined.</p>
  
  <p>And last the css file:</p>
  
  <pre><code>html, body {
      height: 100%;
      padding: 0;
      margin: 0;
  }
  body {
      //background: url(img/gui/bg_glare.png) top center no-repeat #bcc;
  }
  html &gt; body {
      min-height: 600px;
  }
  body * {
      font-family: Arial, Geneva, SunSans-Regular, sans-serif;
      font-size: 14px;
      color: #333;
      line-height: 22px;
  }
  
  #wrapper {
      position: absolute;
      width: 50%;
      left: 25%;
      top: 150px;
  }
  #carousel-wrapper {
      padding-bottom: 10px;
      position: relative;
  }
  #carousel, #thumbs {
      overflow: hidden;
  }
  #carousel-wrapper .caroufredsel_wrapper {
      border-radius: 10px;
      box-shadow: 0 0 5px #899;
  }
  
  #carousel span, #carousel img,
  #thumbs a, #thumbs img  {
      display: block;
      float: left;
  }
  #carousel span, #carousel a,
  #thumbs span, #thumbs a {
      position: relative;
  }
  #carousel img,
  #thumbs img {
      border: none;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
  }
  #carousel img.glare,
  #thumbs img.glare {
      width: 102%;
      height: auto;
  }
  
  #carousel span {
      width: 512px;
      height: 512px;
  }
  
  #thumbs-wrapper {
      padding: 20px 40px;
      position: relative;
  }
  #thumbs a {
      border: 2px solid #899;
      width: 150px;
      height: 100px;
      margin: 0 10px;
      overflow: hidden;
      border-radius: 10px;
  
      -webkit-transition: border-color .5s;
      -moz-transition: border-color .5s;
      -ms-transition: border-color .5s;
      transition: border-color .5s;
  }
  #thumbs a:hover, #thumbs a.selected {
      border-color: #566;
  }
  
  #wrapper img#shadow {
      width: 100%;
      position: absolute;
      bottom: 0;
  }
  
  #prev, #next {
      background: transparent url('img/gui/carousel_nav.png') no-repeat 0 0;
      display: block;
      width: 19px;
      height: 20px;
      margin-top: -10px;
      position: absolute;
      top: 50%;
  }
  #prev {
      background-position: 0 0;
      left: 10px;
  }
  #next {
      background-position: -19px 0;
      right: 10px;
  }           
  #prev:hover { 
      background-position: 0 -20px;               
  }
  #next:hover {
      background-position: -19px -20px;               
  }
  #prev.disabled, #next.disabled {
      display: none !important;
  }
  </code></pre>
  
  <p>I think the css file is fine no need to change anything in the code but the problem is with the javascript. When it was in the html file it was working fine now when it's in the java_script.js file it's not working.</p>