2

I have seen others ask this question but I couldn't find an answer that worked for me. I posted a question a while back and someone sent me this jsFiddle: http://jsfiddle.net/r043v/LgXQX/1/

It does exactly what I need it to and the site says it's perfectly valid, but it's not working when I paste it into my document. I read about the extra invisible characters it will add when you c+p so I used jslint and it said I had gotten rid of them, but it still isn't working.

Here is the code as it is in my page (I started from scratch after it didn't work the first time so that I would be sure nothing else in my code was messing it up)

    <!DOCTYPE html>

<head>
 <link rel="stylesheet" href="style3.css">
<script type=”text/javascript” src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script>
$("#issues > li").click(function () {
    var $img = $("#theimg");
    var $li = $(this);
    var newsrc = "";
    newsrc = $li.data("img");
    if (newsrc === undefined) newsrc = "issue" + $li.index() + ".jpg";

    var loadstep = 0;

    function endstep() { // end of preload or hide
        if (++loadstep === 2) // if the preload is done and hide too, change src and show picture
        $img.attr("src", newsrc).animate({
            opacity: 1
        });
    }

    // preload picture
    var $tmpimg = $("<img/>", {
        src: newsrc
    }).on("load", endstep);
    // hide container picture
    $img.animate({
        opacity: 0
    }, endstep);
    });
</script>

</head>

The css file only has what's in the jsFiddle and the body is copied and pasted from the html section in the fiddle. Any insight would be greatly appreciated!

cherch
  • 27
  • 5
  • Are you loading script in document.ready or after the markup? – elclanrs Jul 17 '13 at 02:49
  • Note that JSFiddle has an option for `onLoad`, `onDomready`, etc. Your fiddle uses `onDomready` while your snippet is equivalent to `No wrap - in `. – Jonathan Lonowski Jul 17 '13 at 02:53
  • I added the document.ready exactly as another user posted below (literally copied and pasted their answer) and it didn't change. I also tried the fiddle with the no wrap option and it still worked on jsFiddle- or does that even matter? – cherch Jul 17 '13 at 03:02

1 Answers1

1

You need to load the script in a $(document).ready() handler. Fiddle adds it for you. Hence it is working there. 

$(document).ready(function () {
    $("#issues > li").click(function () {
        var $img = $("#theimg");
        var $li = $(this);
        var newsrc = "";
        newsrc = $li.data("img");
        if (newsrc === undefined) newsrc = "issue" + $li.index() + ".jpg";

        var loadstep = 0;

        function endstep() { // end of preload or hide
            if (++loadstep === 2) // if the preload is done and hide too, change src and show picture
            $img.attr("src", newsrc).animate({
                opacity: 1
            });
        }

        // preload picture
        var $tmpimg = $("<img/>", {
            src: newsrc
        }).on("load", endstep);
        // hide container picture
        $img.animate({
            opacity: 0
        }, endstep);
    });

});
karthikr
  • 97,368
  • 26
  • 197
  • 188
  • So, just replace that between the tags? – cherch Jul 17 '13 at 02:59
  • Didn't seem to work. Sorry for the simple questions. I'm a student and have been spoiled by teachers fixing things for me. – cherch Jul 17 '13 at 03:04
  • wrap it in ` – karthikr Jul 17 '13 at 03:06
  • just tried that too and it didn't have any effect. If it's of help I am working locally using MAMP. Don't have javascript blocked or anything either. ETA: I have one syntax error in the error console saying "SyntaxError: Expected token '}'" – cherch Jul 17 '13 at 03:07
  • Okay fixed that, but now the error has changed to "ReferenceError: Can't find variable: $" Perhaps I am not loading the library correctly or it is not working on MAMP? – cherch Jul 17 '13 at 03:15
  • If you have more jquery libraries included, you could have issue with the jQuery import. [Check this post](http://stackoverflow.com/questions/4888725/referenceerror-cant-find-variable) – karthikr Jul 17 '13 at 03:17
  • 1
    I just have the one link but I will try another method. Thanks for your time & patience. – cherch Jul 17 '13 at 03:22