0

I am building some code to try and have something happen when an image is within view, then reset the counter when the image isnt in view and have that same thing happen again if the image returns to view.

I have the code working to recognize when the image comes into view and do something, but then when I add the code to reset the counter when the image is out of view the whole thing stops working.

html:

<div style="height: 2000px">
<img  height="320px" width= "240px" id="pbr" src="http://i47.tinypic.com/33bztj8.jpg" alt="image 1">
<img height="320px" width= "240px" id="pbrglow" src="http://i48.tinypic.com/2ykduvl.jpg" alt="image 2">
<button id="button">click to reset</button>
</div>

css:

#pbr {
    position: absolute;   
    top: 500px;
    z-index: 0;
}
#pbrglow {
    position: absolute;             
    display: none;
    top: 500px;
    z-index: 1;

}
#button {
    position: absolute;
    top: 850px;
    z-index: 3;
}

javascript:

var y = $("#pbr").offset().top;
var eventsFired = 0;

$(window).scroll(function() {
    var y = $("#pbr").offset().top;
    var scrollY = $(window).scrollTop();
    if (scrollY + 100 > y && eventsFired == 0) {
        eventsFired++;
        alert(eventsFired);
    }
});


$("#button").on("click", function() {
    var scrollYY = $(window).offsetTop();
    if (eventsFired == 1) {
        alert("happened");
        eventsFired = 0;
    }
}

Here is the jsfiddle with the code

Once I remove the code starting in $("#button")... the code works, but with this in the code doesnt.

P.S. this is a website I need to work on iOS.

8
  • I know you said you are targeting iOS, but have you tried it in other browsers? Which does it work in, and where does it not work? Any JS errors in the console?
    – Matt
    Nov 12, 2012 at 20:56
  • the reason I am running it on iOS is becuase this is being used as a demo I am showing someone on my phone. I keep getting an error saying: ReferenceError: resetfunction is not defined @ fiddle.jshell.net/_display/:1. Not sure why it says I am not defining the function. updated jsfiddle - jsfiddle.net/esegev1/ZwJpw/7
    – Eric_S
    Nov 12, 2012 at 21:41
  • In your example, your html has resetfunction() being called when the button is clicked. But you never define resetfunction anywhere. And my comment about iOS wasn't that you should not be using iOS, but that you can test on a non-iOS browser to help diagnose problems.
    – Matt
    Nov 12, 2012 at 21:44
  • So thats what I am a bit unclear about. down in the javascript, where I have the code function resetfunction(), isnt that defining the function? Sorry I am pretty new still. I changed the jsfiddle - jsfiddle.net/esegev1/ZwJpw/9
    – Eric_S
    Nov 12, 2012 at 21:50
  • I see no reference at all to function resetfunction()
    – Matt
    Nov 12, 2012 at 21:53

1 Answer 1

0

That's because your #button click handler is throwing an error:

Uncaught TypeError: Object [object Object] has no method 'offsetTop'

You can see it on the jsFiddle page if you have a console open (you can enable the console for mobile Safari via Settings->Safari->Developer).

That problem is that $(window) doesn't have an offsetTop() method. If you get rid of that line (and you don't need it anyway, since you're never using scrollYY), everything works.

3
  • Thanks Amit. I removed the offsetTop() line but it still doesn't work. I also realized I wasn't calling the function from the html button. but now that I added that code its still not working. when I click the button under the image it should open an alert. Would you mind looking at the updated jsfiddle and see if you see any issues. thanks. jsfiddle.net/esegev1/ZwJpw/7
    – Eric_S
    Nov 12, 2012 at 21:19
  • This is what I'm getting when I click the button -- [13:23:49.415] ReferenceError: resetfunction is not defined @ fiddle.jshell.net/_display/:1. not sure how I need to "define" it.
    – Eric_S
    Nov 12, 2012 at 21:23
  • The error happens because the browser can't find resetfunction. Perhaps normally (i.e. not inside a jsFiddle) it might work as you've got it, bc resetfunction would be part of the global scope. But, even if it were to work, putting and calling functions through the global scope is not very good form. It's better to take out the onclick="resetfunction();" bit, and subscribe to the button click event via javascript: $('button').click(resetfunction); (just add this line somewhere in your code). Also, you ought to wrap all the code in $.ready(function() { /* all your code here */ });
    – meetamit
    Nov 12, 2012 at 22:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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