Jquery script not working when uploaded

Question

This is probably a bit of a noob question but seeing as I am a noob when it comes to JQuery I will need some help. Basically, my homebrewed image gallery script works fine when I test it locally, but one uploaded the script jsut doesn't work. I have no clue as to why?

You can see the website here

Here is the JQuery

THE BASIC HTML:

<div id="imagenav">
    <ul>
        <li>
            <a href="">
                <img src="images/thumbs/1.jpg"/>
            </a>
        </li>
        <li>
            <a href="">
                <img src="images/thumbs/2.jpg"/>
            </a>
        </li>
        <li>
            <a href="">
                <img src="images/thumbs/3.jpg"/>
            </a>
        </li>
    </ul>  
</div>

<div id="imagecontainer">
    <div>
        <a class="prev" href="">prev</a>
        <a class="next" href="">next</a>
        <a class="index" href="">X</a><br>
        <img src="images/1.jpg"><br>
        <p>Description: Vestibulum id ligula porta felis euismod semper.</p>
    </div>
    <div>
        <a class="prev" href="">prev</a>
        <a class="next" href="">next</a>
        <a class="index" href="">X</a><br>
        <img src="images/2.jpg"><br>
        <p>Description: Vestibulum id ligula porta felis euismod semper.</p>
    </div>
    <div>
        <a class="prev" href="">prev</a>
        <a class="next" href="">next</a>
        <a class="index" href="">X</a><br>
        <img src="images/3.jpg"><br>
        <p>Description: Vestibulum id ligula porta felis euismod semper.</p>
    </div>
</div>

THE BASIC JQUERY SCRIPT:

 var imagenav= $('#imagenav li a');
 var imagecontainer= $('#imagecontainer');
 var images= $('#imagecontainer div');
 var shader= $('#shader');

 imagenav.click(function (event) {
    event.preventDefault();
    var imageno = imagenav.index(this);
    imagecontainer.fadeIn(300, function(){
            shader.fadeIn(300);
            images.hide(0);
            images.eq(imageno).fadeIn(300);
    });
    return false;
});

Any help would be very much appreciated!

Many thanks!

moonwave99 · Accepted Answer · 2012-09-16 15:53:30Z

2

jQuery did not load on your page:

Uncaught ReferenceError: $ is not defined

due to:

Failed to load resource: the server responded with a status of 403 (Forbidden)

On file http://designbykai.com/test/jquery.js. Just give 755 permissions to such file [via SSH or FTP], or even better link to jQuery via a CDN:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>

You page will load faster by the way.

answered Sep 16, 2012 at 15:53

moonwave99

22.9k3 gold badges48 silver badges71 bronze badges

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

2 Comments

Whymarrh Over a year ago

"or even better link to jQuery via a CDN"? This document begs to differ. I feel that changing the permissions is the "better" way to go.

Ohgodwhy Over a year ago

The only reason we bother with jQuery on a CDN is to show our mobile users love. Some of them have to pay for data, no reason to rape them in the jQuery department.

Roko C. Buljan · Accepted Answer · 2012-09-16 16:00:53Z

1

Your included jQuery script throws an error:

<script src="jquery.js">
    <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
    <html><head>
    <title>403 Forbidden</title>
    </head><body>
    <h1>Forbidden</h1>
    <p>You don't have permission to access /test/jquery.js
    on this server.</p>
    <p>Additionally, a 404 Not Found
    error was encountered while trying to use an ErrorDocument to handle the request.</p>
    <hr>
    <address>Apache/2.2.22 (Unix) mod_ssl/2.2.22 OpenSSL/0.9.8e-fips-rhel5 DAV/2 mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635 mod_fcgid/2.3.6 Server at designbykai.com Port 80</address>
    </body></html> 
</script>

Try this instead:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

And in your code (imagegallery.js) you could preserve the dollar reference to jQuery:

(function($){

   //code here  

})(jQuery);

edited Sep 16, 2012 at 16:00

answered Sep 16, 2012 at 15:53

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

2 Comments

bestfriendsforever Over a year ago

Oh!? I wonder why that has happened? Well that did it! thanks man!

Roko C. Buljan Over a year ago

@bestfriendsforever you're welcome. Good job, now it works flawlessly!

Hazem Salama · Accepted Answer · 2012-09-16 15:54:07Z

0

If you use firebug plugin for firefox you can tell right away that your js is not being downloaded.
It returns "NetworkError: 403 Forbidden - http://designbykai.com/test/jquery.js"

You may want to check that your file exists and its permissions

answered Sep 16, 2012 at 15:54

Hazem Salama

15.2k5 gold badges29 silver badges31 bronze badges

1 Comment

bestfriendsforever Over a year ago

I see! i guess i change the permissions under sharing and permissions in that files' info? Or is it more involved?

Adrien Hingert · Accepted Answer · 2012-09-16 15:55:27Z

0

At the bottom of your script you have the following two lines:

<script src="jquery.js"></script>
<script src="imagegallery.js"></script>

Try putting them at the top of the script
Ensure that js files are indeed within the http://designbykai.com/test/ folder

answered Sep 16, 2012 at 15:55

Adrien Hingert

1,5165 gold badges28 silver badges52 bronze badges

Comments

Dave · Accepted Answer · 2015-02-28 09:22:00Z

0

Right click at jquery.js file > properties > make sure other get permission to 'read only' for this file. I'am using linux but I think it's just the same for windows too. Sorry for my english.

answered Feb 28, 2015 at 9:22

Dave

1

Comments

noel · Accepted Answer · 2012-09-16 15:58:31Z

-1

Line 140...

   <script src="jquery.js"></script>

is wrong.

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

and be sure the file exists and is accessible at the path you are referencing.

edited Sep 16, 2012 at 15:58

answered Sep 16, 2012 at 15:53

noel

2,3593 gold badges27 silver badges42 bronze badges

3 Comments

moonwave99 Over a year ago

type attribute is optional in HTML5.

Quentin Over a year ago

The type attribute is optional in HTML 5 (which the Doctype of the page in question matches), and its absence wouldn't cause the described problem even if it were mandatory (since browsers don't care).

Roko C. Buljan Over a year ago

Your answer is wrong. As you can clearly see he uses: <!DOCTYPE html> (HTML5 standard) so <script> is an perfectly fine.

Collectives™ on Stack Overflow

Jquery script not working when uploaded

6 Answers 6

2 Comments

2 Comments

1 Comment

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

2 Comments

1 Comment

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related