Question

I’m having issues with using the Javascript Coin Slider (great download fr/: this workshop). I am attaching 2 screen shots. One is of the file working in chrome, and the second is the same file hosted on my server at the same time. This is my first time really playing around with JQuery, so I am not sure if there is something I am just overlooking? I’ve already exhaustively looked at all my relative links to make sure they are all syntax and semantically correct.

Help please!

Here is the HTML / Js:

<div id="coin-slider">
<a href="team/index.html"><img src="img/jq/1.jpg" /></a>
<a href="history/index.html"><img src="img/jq/2.jpg" /></a>
<a href="planning/index.html"><img src="img/jq/3.jpg" /></a>
<a href="fun/index.html"><img src="img/jq/4.jpg" /></a>
<a href="girls/index.html"><img src="img/jq/5.jpg" /></a>
<a href="tour/index.html"><img src="img/jq/6.jpg" /></a>
  <script type="text/javascript">
    $(document).ready(function() {
      $('#coin-slider').coinslider({ width:959, height:325, navigation: false, delay: 4000, spw:10, sph:6, sdelay: 50, effect: 'rain' });
        });
      </script>
</div>

…and my head call:

<!-- JQuery Coin Slider image display and transition inclusions -->
  <script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="js/coin-slider.min.js"></script>

Answer 1

If you check your error console you’ll see the following error: Uncaught TypeError: Object [object Object] has no method 'coinslider'

This indicates that the coinslider script hasn’t loaded. If you check the source though, you can see that the javascript file did load (the file) correctly.

This then leads you to assume that it didn’t load the file at the correct time.

Checking your source again shows that you don’t have the coinslider initialisation wrapped into a document.ready call and so the calls are out of order.

Solution: Wrap up the coinslider initialisation into a document.ready function so that jQuery and everything else is available and you’ll find that it’ll all start working.

Bonus notes: The reason why it is working locally but not on the server is that locally there’s almost no delay in loading the file. You don’t have to wait for it to download over the internet and so it essentially runs in the order that you provide in the source. For example (simplified a bit to help explain):

We have 2 files that we are including: jQuery.js and coinslider.js and we are including them in that order (jQuery first).

Our coinslider.js file references jQuery and needs jQuery to load before it can execute.

Let’s assume for the sake of this example that both js files are located on the same server, but that the jQuery.js file is a lot larger than the coinslider.js file. Due to that file size, the jQuery.js file takes a lot longer to download than the coinslider.js file (in reality, it depends on not only the filesize, but also where the server is located in the world – latency – and also the speed of the internet between you and the server).

Let’s say that the 2 download requests (1 for jQuery.js and 1 for coinslider.js) get sent at essentially the same time (time 0seconds). jQuery.js takes 5 seconds to download and coinslider.js takes 2 seconds to download.

At time 1 seconds: both files are still downloading.

At time 2 seconds: coinslider.js has finished downloading and gets executed.

At time 5 seconds: jQuery.js has finished downloading and gets executed.

Because there isn’t any code to tell the browser to now execute coinslider.js right away, it gets run at time 2 seconds and fails because jQuery.js hasn’t been executed yet.

By wrapping a document.ready function around the coinslider.js initialisation, we tell the browser to wait until everything is ready before executing, and so it will wait until the 5 second mark by which time jQuery will be available and everything will be good.

Happy fun party times can then occur 🙂

Edit to code
Looks like there was some syntax issues with the including of the scripts (you can’t have <script> tags within other <script> tags.

I don’t remember what the original version was like, but with what it is currently change…

<!-- JQuery Coin Slider image display and transition inclusions -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"><script type="text/javascript">
    $(document).ready(function() {
      $('#coin-slider').coinslider({ width:959, height:325, navigation: false, delay: 4000, spw:10, sph:6, sdelay: 50, effect: 'rain' });
        });
      </script></script>
  <script type="text/javascript" src="js/coin-slider.min.js"><script type="text/javascript">
    $(document).ready(function() {
      $('#coin-slider').coinslider({ width:959, height:325, navigation: false, delay: 4000, spw:10, sph:6, sdelay: 50, effect: 'rain' });
        });
      </script></script>

To:

<!-- JQuery Coin Slider image display and transition inclusions -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#coin-slider').coinslider({ width:959, height:325, navigation: false, delay: 4000, spw:10, sph:6, sdelay: 50, effect: 'rain' });
});
</script>

Also, on ~line 93 of your source, you have the following within the <div id="coin-slider">

<script type="text/javascript">
        $(document).ready(function() {
          $('#coin-slider').coinslider({ width:959, height:325, navigation: false, delay: 4000, spw:10, sph:6, sdelay: 50, effect: 'rain' });
        });
</script>

Delete it.