Why this site gets & ldquo; Uncaught TypeError: Can not read the 'animate' property of null & rdquo; when no script has been adjusted?

advertisements

I have not updated scripting this secondary site at work, only database product information. I am a graphic and web designer, with better knowledge of html and css, but less so of javascript.

Web page: http://westcoastnaturals.com/productsdesp.php

The error is causing the javascript section that shows the product information to not render.

Error:
Uncaught TypeError: Cannot read property 'animate' of null
productsdesp.php:85
    at slideShow (productsdesp.php:85)
    at HTMLDocument.<anonymous> (productsdesp.php:68)
    at Function.<anonymous> (jquery-1.3.1.min.js:19)
    at Function.each (jquery-1.3.1.min.js:12)
    at Function.ready (jquery-1.3.1.min.js:19)
    at HTMLDocument.<anonymous> (jquery-1.3.1.min.js:19)

Here is the coding that it is points to for php:85:

$('#gallery .content').html($('#gallery a:first').find('img').attr('rel')).animate({opacity: 0.7}, 400);

And this is the full section.

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        //Execute the slideShow
        slideShow();
    });
    function slideShow() {

        //Set the opacity of all images to 0
        $('#gallery a').css({ opacity: 0.0 });

        //Get the first image and display it (set it to full opacity)
        $('#gallery a:first').css({opacity: 1.0});

        //Set the caption background to semi-transparent
        $('#gallery .caption').css({opacity: 0.7});

        //Resize the width of the caption according to the image width
        $('#gallery .caption').css({ width: $('#gallery a').find('img').css('width') });

        //Get the caption of the first image from REL attribute and display it
        $('#gallery .content').html($('#gallery a:first').find('img').attr('rel')).animate({opacity: 0.7}, 400);

        //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
        setInterval('gallery()', 5000);
    }

‚Äč

Is there something in that coding causing the error? Should I be looking elsewhere for the issue? I am really out of practice with javascript and my web searches aren't getting me far.

Thanks in advance for the help!


The gallery elements seem to be missing from the page and therefore the script is failing to select the elements by their ID and Class: #gallery .content

if there was an element on the page (maybe an entry in the database) then the gallery would appear on the page?