0

I have a blog that consists of consecutive entries, ie. divs. I have a separate background image for each entry. I want to change background image when a specific div gets visible in the client window. I couldn't figure out how to trigger it.

I think this is not about :visible or .show, all divs are alredy visible. However the page is long due to consecutive entries and I just want to change background image when the page is scrolled and a div get in sight.

Note: A javascript solution would be better by the way, if exists... rather than jQuery

Jorge
  • 17,896
  • 19
  • 80
  • 126
Mehmed
  • 2,880
  • 4
  • 41
  • 62
  • I believe you should be able to check window height, `$(window).height()`, and then check the position of the entry from the top. – ayyp Jul 12 '12 at 20:13
  • Just FYI, a jQuery solution is by nature a Javascript solution. :-) – Elliot Bonneville Jul 12 '12 at 20:15
  • 1
    Your keywords are 'in viewport'. Check out these threads: http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport http://stackoverflow.com/questions/8229291/how-to-check-if-an-element-is-in-the-view-of-the-user-with-jquery – Jen Jul 12 '12 at 20:15
  • I just want to be sure whether there is a built-in solution or not. I don't want to use jQuery, so I wrote that line :) and thanks for the 'viewport' keyword, I am checking those solutions right now. – Mehmed Jul 12 '12 at 20:20
  • Have a google for mutation events. – Simon Catlin Jul 12 '12 at 20:26

1 Answers1

0

I think you need to bind a function to the windows scroll event and validate the div's when the event is fired. $j(document).bind("scroll", function() { //check here });

I found where someone is offering a plugin for this sort of thing too: http://remysharp.com/2009/01/26/element-in-view-event-plugin/

--edit-- here is a similar question and answer: Check if element is visible after scrolling

Community
  • 1
  • 1
ChrisThompson
  • 1,998
  • 12
  • 17