Scrollable DIV; check which div inside is scrolled to

Question

I am working on a calender.

The structure is simple: The outer div #calender contains all the date-fields with class .field and ID as #DD-MM-YYYY. Now, I want the month name on top ("January") to February when the user scrolls past the #01-02-2015 DIV and so on... So the month name is dynamic.

Question: HOW do I detect which div is scrolled to?

Answer 1

You can't really know which div is scrolled to. You can compare the original location of a div (relative to document), and see if the scrolled window has reached that location.

window.pageYOffset will give you the number of pixels the document has already scrolled to, whenever it is requested. Now what you'll need is to attach an event listener to the scroll event, give it the relative-to-document-top location of #01-02-2015 div, and checks to see if window.pageYOffset is greater than that. If it is, you can replace the month name. If it's less, you can replace it back.

To know the #01-02-2015 div's offset relative to document, you can jquery's offset() function, or try out the following and let me know if it works:

function getOffsetTop(element){
    var offsetTop = 0;
    do {

      if ( !isNaN( element.offsetTop ) )
          offsetTop += element.offsetTop;
    } while( element = element.offsetParent );

    return offsetTop;
}

(Adapted from finding element's position relative to the document )

** EDIT **

So, as you say the getOffsetTop function works. At page load, you'll want to get the locations/offsets of all the .first div's, and let's assume you also gave them a class or data-id with the specific month. So, let's start by creating an array of these values, like:

var firsts = document.querySelectorAll('.first');
var array = []
for(var i=0;i<firsts.length;i++)
    array.push({month:firsts[i].getAttribute('data-id'), offset:getOffsetTop(firsts[i])});

Now you have an array that looks like [{month:'january',offset:214},{month:'february',offset:462}...].

Again, without looking at code, I'm thinking you will need to have a global (or anyway declared outside the scroll function) variable, declared at load time, that stores the index of the current month being looked at (assuming window.pageYOffset is zero then, you can start with array[0]). The scroll function will need to keep checking against the array item before and after this month to see if either of those scroll points are being reached, and if so, change the div content as you need, and also update the currentMonth variable. Something like:

var currentMonth = 0;
window.onscroll = function(){
    var index = currentMonth;
    if(array[index-1] && window.pageYOffset < array[index-1].offset)){
         // change the specific div's innerHTML to that of previous one. You can also target a particular `first` by using document.querySelector('.first[data-id="'+array[index].month+"]'):
         currentMonth = currentMonth - 1;
    }

    else if(array[index+1] && window.pageYOffset > array[index+1].offset)){
         // change the div to next one
         currentMonth = currentMonth + 1;
    }
}

I haven't tested any of this but let me know how you make out, or if the console throws errors.

** EDIT3 **: MDN reference (link) recommends using window.pageYOffset instead of window.scrollY for cross-browser compatibility, so I've updated my answer.

Answer 2

You could use .offsetTop to check the current y position of each cell, calculate which row is currently shown on top, and then check the current month through its id.

for (var i=0; i < rows.length; i++) {
    // Select the last day, incase the first few days are still from the previous month
    var lastcell = rows[i].querySelector(".field:last-of-type");

    // Check if offsetTop is smaller than 100 (leave some error margin)
    if (lastcell.offsetTop < 100) {
        var id = lastcell.attribute("id").split("-");
        var month = id[1];
        // Update month
    }
}

Answer 3

I would calculate it on base of .field height and current scroll of #calendar. Current scroll of div you can get with the following code:

var position = document.getElementById('calendar').scrollTop;

Answer 4

Add hidden divs as separators between each month (use css for this). Maybe each month should start on new (css) line. Then you can detect which month you are into by getting the scroll offset of the calendar and see between which separators is in. Assuming you know the offset of each separator or you can loop through with jQuery and the get the one that is closer.

UPDATE:

Between the dates of each month add a hidden separator div e.g <span class="month-separator"></span>. Then these separators by definition will have different offsets (since the dates of a whole month are between each one of them). Then when user scrolls, compute the current offset loop through each separator and see if the offset is close to one of them:

pseudo-code:

var calendarScroll = calendar.pageYOffset; // compute this
var whichMonth = 1; // start with january, i.e 1st month
// for each month separator
$('.month-separator').each(function(index){
   // break when encountering the month that is not yet scrolled to
   if ($(this).offset().top > calendarScroll) 
   {
      whichMonth = index;
      return false; // break from each loop
   }
});

You will probably want to put the code above inside the scroll handler like the window.onscroll event handler (e.g see example with sticky header on scroll here).

Answer 5

Assuming you already have your code in place that highlights the next date on scroll, you probably have a handle on the next date that will be highlighted. A simple approach would be on scroll, get the value of the highlighted div (should be the date). If the value === 1, it's the first of a new month so display the next month.

To get the next month, you could store an array of all months and then iterate over the array. If the current iteration is equal to the current month on the calendar, return the next element of the array

function getNextMonth(current_month) {
    var month_array = [
        'January',
        'February',
        'March',
        'etc'
    ];
    $.each(month_array, function(month, foo) {
        if(month == current_month) {
            return month_array[($.inArray(current_month, month_array) + 1) % month_array.length];
        }
    });
}

var calendar = $('calendar');

calendar.hover(function() {
    calendar.scroll(function() {
        //Your logic to change highlighted div
        var current_date = $('#datediv').val(),//However you are selecting your current date div
            month = $('#month_div');
        if(current_date === 1) {
            var next_month = getNextMonth(month);
            month.val(next_month);
        }
    });
});

Honestly though, from a user standpoint it would be odd to scroll through dates on a calendar like that. With most calendars I've seen, scrolling will change the month. That may be a better design method for you unless you have to do it the way you're doing it now.