Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

First off, I think I may have some syntax errors, but I don't know where since most of this code is copy paste from JQuery then modified for my needs...

$(document).ready(function() { 

var stage = $(".gallery");
var stageoffset = stage.offset();
var stageleft = stageoffset.left + 600;
var lastimage = $("img:last");
var imageoffset = lastimage.offset();
var imageleft = imageoffset.left;

if(imageleft > stageleft) {
    alert("Passed to the right.");
}

function gallery () {
    $("#image").animate({"margin-left":"+=100px"}, 1000, "linear");
}
setInterval(gallery, 1000);
});

Second, here is a JSFiddle...

http://jsfiddle.net/dHezM/2/

I know that the animation code is right, because that works fine. Since it is not running, I assume there is a syntax error. However, I'm pretty new to JQuery, and I can't find it.

The point of this code is to move the images, then when they leave the container to the right, the script will alert a message. Eventually, I will use this trigger to delete the last image, and clone it in front to produce a carousel. But, that's later. Am I implementing this code right?

Thanks in advanced!

share|improve this question
1  
"First off, I think I may have some syntax errors, but I don't know where" The browser will happily tell you where. Just look in the console for the handy error messages. The console is accessible from the browser's menus. F12 opens the dev tools on most browsers, and the console is one of the tabs in the dev tools. – T.J. Crowder 1 hour ago
1  
For one thing, you can't use - in a JavaScript variable name. E.g., stage-offset is an invalid variable name. I recommend reading some basic JavaScript tutorials. – T.J. Crowder 1 hour ago
1  
you variable names are wrong . you cannot use and hyphen "-" in variable names – Kiran Ruth R 1 hour ago
That is excellent information, let me change that. :D – Allenph 1 hour ago
That was the syntax error, thanks! Any idea what I'm doing wrong otherwise? – Allenph 1 hour ago

1 Answer

up vote 0 down vote

It's not enough to check if the image is out of the box at document.ready. You can use the progress function on animate to get notified about every step of the animation. Then you include your check in that function (DEMO).

$(document).ready(function() { 
    var stage = $(".gallery");
    var stageoffset = stage.offset();
    var stageleft = stageoffset.left + 600;
    var lastimage = $("img:last");

    function gallery () {
        $("#image").animate({"margin-left":"+=100px"}, {duration: 1000, easing: "linear", progress: checkBox});
    }
    var interv = setInterval(gallery, 1000);

    function checkBox() {   
        if(!(typeof lastimage.offset() === 'undefined'))
        {
            var imageoffset = lastimage.offset();
            var imageleft = imageoffset.left;
            if(imageleft > stageleft) {
                lastimage = lastimage.prev()
                alert("Passed to the right.");
            }
        } else {
            clearInterval(interv);
        }
    }
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.