Как сделать динамическое увеличение top по клику?

TCloud, тут наверно нужен цикл, в котором у каждого элемента - top будет увеличиваться ?

Как сделать динамическое увеличение top по клику?

TCloud, вот как тут нужно: vintagetechnics.ru

Там при добавлении товара и последующих кликах top у сообщений динамический

Как обновлять таймер по клику?

Сергей, короче я разобрался, спасибо за помощь !

Как обновлять таймер по клику?

Сергей, я сделал: https://test.vintagetechnics.ru/

Но теперь после удаления по таймеру, у меня почему-то нотисы по клику больше не хотят появляться

$.ajax({
  type: 'POST',
  url: m_notice_click.ajax_url,
  data: dataMnot,
  dataType: 'json',
  success: function(data) {
    if (!$('.-notification-box').length) {
      $('body').append('<div class="-notification-box" style="top: 0px;"></div>');
    }
          
    let $html = $(data);

    let name = calcMD5($html.find('.inline-block.-notification-text').text());
          
    if (items[name]) {
      startTimer(items[name]);
    } else { 
      items[name] = $html.find('.-notification-timer');
      $('.-notification-box').append($html);
      startTimer(items[name]);
    }

    console.log(items[name]);
          
    function startTimer(name) {
      let $timer = name;
      timer.stop();
      $timer.css("width", "100%");
      timer.animate({
        width: 0
      }, {
        duration: 5000,
        complete: function() {
             $(this).closest(notTime).remove();
             delete items[name];
              }
            });
          }
        }
    });

Как обновлять таймер по клику?

Сергей, где я ошибаюсь ?

Понять не могу

Как обновлять таймер по клику?

Сергей, вот: https://test.vintagetechnics.ru/

У меня не работает, таймер начинается не 100%

Делал так:

$.ajax({
	type: 'POST',
	url: m_notice_click.ajax_url,
	data: dataMnot,
	dataType: 'json',
	success: function(data) {
		if (!$('.-notification-box').length) {
			$('body').append('<div class="-notification-box" style="top: 0px;"></div>');
		}
					
		let $html = $(data);

		let name = calcMD5($html.find('.inline-block.-notification-text').text());
					
		items[name] = $html.find('.-notification-timer');
					
		console.log(items[name]);
					
		if (items[name]) {
			startTimer(items[name]);
		} else { 
			items[name] = 1;
			$('.-notification-box').append($html);
			startTimer($html.find('.-notification-timer'));
		}
					
		function startTimer(name) {
			let $timer = name;
			timer.stop();
			$timer.css("width", "100%");
			timer.animate({
				width: 0
			}, {
				duration: 5000,
				complete: function() {
				     $(this).closest(notTime).remove();
				     delete items[name];
							}
						});
					}
				}
		});

Как обновлять таймер по клику?

Сергей, правильно ?

var Item = function(name) {
	this.name = name;
}

var items = [];
$('button').on('click', function() {
if (!$('.-notification-box').length) {
	$('body').append('<div class="-notification-box"></div>');
}

	let $html = $(data);
					
	let name = calcMD5($html.find('.inline-block.-notification-text').text());
					
	items[name] = new Item(name);
					
	if (items[name]) {
		startTimer(name);
	} else {
		$('.-notification-box').append($html);
		startTimer(name);
	}

function startTimer(name) {
	 let $timer =  items[name];
	 $timer.stop();
	 $timer.css("width", "100%");
	 $timer.animate(
		{width: 0},
		{duration: 10000,
		 complete: function() {
				$(this).closest('.notice__info').remove();
				delete items[name];
				console.log(`Удален ${name}`);
			}
		}
	);
}
});

Как обновлять таймер по клику?

Сергей,

if (items[name]) {
    // повторно
    startTimer(name);
  } else {
    // вновь
    items[name] = 1;
    var out = `
<div class="notice__info">
  <div class="notice__info-name">
    ${name}
    <div class="notice__timer" data-name="${name}"></div>
  </div>
  <div class="notice__delete">X</div>
</div>`;

    $('.notice').append(out);
    startTimer(name);

Тут по-другому

Как обновлять таймер по клику?

Сергей, а функцию startTimer где запускать ?

Как обновлять таймер по клику?

Сергей, в данном случае у меня будут добавляться только уникальные нотисы, а не все подряд что человек накликает ?

Как обновлять таймер по клику?

Сергей, т.е. типа так ?

let Item = function(name, timer) {
  this.name = name;
  this.timer = timer;
}

const items = [];

if (!$('.-notification-box').length) {
  $('body').append('<div class="-notification-box"></div>');
}

А далее мне нужно апендить data туда уже ?

let $html = $(data);

$('.-notification-box').append($html);

let name = calcMD5($html.find('.inline-block.-notification-text').text());

items[name] = new Item(name, $html.find('.-notification-timer'));

items[name] = $html.find('.-notification-timer');

function startTimer(name) {
  let $timer =  items[name].timer;
  $timer.stop();
  $timer.css("width", "100%");
  $timer.animate(
    {width: 0},
    {duration: 10000,
     complete: function() {
       $(this).closest('.notice__info').remove();
       delete items[name];
       console.log(`Удален ${name}`);
     }
    }
  );
}

Как обновлять таймер по клику?

Сергей, добрый день

А где прописать вывод самого нотиса на страницу ?

https://codepen.io/Genri_Rus/pen/rNNrLwZ

Мне именно нужно, чтобы все нотисы апендились в

<div class="-notification-box" style="top: 0px;"></div>

Как обновлять таймер по клику?

Сергей, хорошо

Спасибо вам огромное, очень сильно выручили !

Как обновлять таймер по клику?

Сергей, т.е. шифрование желательно сделать в угоду экономии пространства ?

Как обновлять таймер по клику?

Сергей, да нет )

Можно даже без шифрования ?

Как обновлять таймер по клику?

Сергей, а эта подойдет ?

https://cdnjs.com/libraries/crypto-js

Как обновлять таймер по клику?

Сергей, ого, это вы сделали как у них примерно реализовано ?

Как обновить анимацию у элемента?

Андрей, в данном случае
this.name = name;

Я могу вместо name, id карточки товара сохранять ?

Вот мой сайт: https://test.vintagetechnics.ru/

У меня у каждого товара есть свой id data-product_id="370"

Т.е. типа так:

var Item = function(id, data) {
     this.id = id;
     this.data = data;
}
const item = new Item(id, data);

Просто с сервера мне приходит вся вёрстка в data через ajax

Как обновлять таймер по клику?

Сергей, хорошо, спасибо большое

Буду разбираться

Как обновить анимацию у элемента?

Андрей, круто !

Спасибо, спасибо вам огромное, не первый раз выручаете !