I have a set of DIV elements, all sharing the same class (.ms-acal-item). My goal is to determine the position of each one, compare it with the one above, and adjust it downward if necessary. This is to address an issue on a SharePoint 2013 calendar where event tiles are overlapping. Here's the code I've written so far:
$(function() {
$('.ms-acal-item').each(function(i, obj) {
var tile = jQuery(this);
var prev = tile.prev();
var prevPos = prev.position();
var tilePOs = tile.position();
var curTop = parseInt(tilePos.top);
var newTop = parseInt(prevPos.top) + 30;
if(curtop !== newTop){
tile.css('top', newTop);
}
});
});
Here is an example of how the content generated by SharePoint looks: https://i.sstatic.net/ZGS0S.jpg
Each tile is 20px high and positioned absolutely in-line. The aim is to compare the position of each tile with its predecessor and move it down by 30px if needed (20px for the tile and 10px between them). However, my current code doesn't seem to be having any effect on the tile positions.
What could I be doing incorrectly?