Question

Please help. This code works locally but not after I upload it to the remote server. It does not seem to be a cdn issue because I put an alert statement in as a test. The second statement is for a separate page and it works there. I am referencing the jQuery via cdn at the bottom of my html page with a link to my javascript file below that. Any help would be greatly appreciated.

$(document).ready(function () {
    $('.thmb').hover(function () {
        var x = $('.thmb').index(this);
        $('.info_art').eq(x).toggleClass("hover-animation");
    });
    $('.thmbs_pdg_div a').click(function (evt) {
        evt.preventDefault();
        var divname = this.name;
        $("#" + divname).show().siblings().hide();
    });
});

Here is the code I added at the end of the html page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="javascript/jquery-1.8.2.min.js">  <\/script>')</script>
<script type="text/javascript" src="javascript/artwork.js"></script> 

Here is the url of the page: http://www.kipdeeds.com/artwork_page.html

Some additional information about the page that is not working: There are seven categories and the text for each category are sprites (e.g. “on paper”, “new art”, etc.). When one hovers the position should shift revealing a new image of the text with an arrow icon. The program I was writing would allow the corresponding image icons to enact the same affect in the sprite displaying the text.

For now I will not alter the code until I get feedback (ideas better than mine).

Answer 1

Your JS is fine.

The problem is the disparity with your CSS and your images. Here’s you’re CSS:

a.art_paper {
    background: url("../assets/artwork_page/on_paper.gif") repeat scroll 0 0 transparent;
    display: block;
    height: 20px;
    margin-top: 33px;
    width: 95px;
}

a:hover, #artwork_main_div .hover-animation {
    background-position: 0 -100px;
}

Her’s your image: (95px x 20px)

You are infinitely repeating your background-image, which happens to be 20px high. When the .hover-animation class is active, it’s sliding the background down by 100px, which takes you the 5th (100/20=5) vertical iteration of the image… which looks exactly like the original.