I have three rectangles set up like this. I've managed to make them disappear when clicking the close button on the right side of each rectangle, but I'm struggling with getting the remaining rectangles to move upward to fill the empty space. Here's the code I've tried so far:
$(".note-content-right").click(function() {
$(this).parent().removeClass("note-float-view");
var thisDataIndex = $(this).parent().attr("data-index");
$(".note-float").each(function() {
if(($(this).hasClass("note-float-view")) && ($(this).attr("data-index") > thisDataIndex)) {
$(this).animate({
"top" : "-=54px"
});
};
});
});
Unfortunately, it's not working as expected.
If anyone can provide some assistance, that would be greatly appreciated! :)
$(document).ready(function() {
$(".note-float").removeClass("note-under");
loadNote();
});
function loadNote() {
$(".note-float").each(function(index) {
var el = $(this);
setTimeout(function () {
el.addClass("note-float-view");
}, index * 200);
});
}
function unloadNote() {
$(".note-float-view").each(function(index) {
var el = $(this);
setTimeout(function () {
el.removeClass("note-float-view");
}, index * 200);
});
}
$(".note-content-right").click(function() {
$(this).parent().removeClass("note-float-view");
var thisDataIndex = $(this).parent().attr("data-index");
$(".note-float").each(function() {
if(($(this).hasClass("note-float-view")) && ($(this).attr("data-index") > thisDataIndex)) {
$(this).animate({
"top" : "-=54px"
});
};
});
});
$(".load-note").click(function() {
$(".note-float").removeClass("note-under");
$(".note-float").removeClass("note-float-view");
setTimeout(function() {
loadNote();
}, 500);
});.note-float-view {
top: 24px !important;
opacity: 1 !important;
transition: top 1s, margin-bottom 1s, opacity 1s;
}
(note styles and classes here)
</script>