Показать сообщение отдельно
  #1 (permalink)  
Старый 06.04.2015, 13:01
Интересующийся
Отправить личное сообщение для tegs89 Посмотреть профиль Найти все сообщения от tegs89
 
Регистрация: 11.06.2014
Сообщений: 10

Всплытие окна через DOM при mouseenter
Друзья, у меня очень трепетный вопрос, надеюсь на вашу помощь.

Есть календарик событий, когда в 1 день происходит несколько событий, при наведении на число это события всплывают в окошке а также сверху справа пишеться сколько событий за день (в нашем случае 1 июля).
Но проблема в том что при наведении на количество события - окошко тоже всплывает, и при дальнейшем движении на число закрываеться, так быть не должно.
Количество события в день вставляеться в
<span class="quantity_articles">' . $data->id . '</span>
.
Все сложено в 1 тег <td>. Прилагаю код php + jquery + скрин

Здесь происходит вывод числа календарика если событий за день больше 1.

print sprintf('<td class="event" align="center" style="color:white; background-image:url(../../img/calendar/draft-design-calendar278.jpg); background-repeat:no-repeat;background-position: center; background-size:30px;"><span class="quantity_articles">' . $data->id . '</span><div class="short_desc"></div>%d', $day);


А вот собственно и jquery который отвечает за обработку:

$('.event').mouseenter(function(){
		
			var short_desc = 1;
			var get_all = $(this).children('.get_all').text();
			if(!$(this).children().first().next().next().hasClass('Holyday')) {
				var field = $(this).children('.short_desc');
				var cat = $(this).children().first().next().next().text();
				var date = $(this).children('.date1').text();
				$(this).children('.short_desc').css('opacity', '0.8');

					$.post('ajax_calendar.php', {date:date, cat:cat, get_all:get_all, short_desc:short_desc}).done(function(data){
						field.html(data);
						field.stop(true,true).stop(true,true).show();
						// field.css('opacity', '0.8');
						// $('.short_desc').text('111111111111');
						// $(this).html("<div style='position:absolute; z-index:999; border: 1px solid black'>11111</div>")
						// alert(data);
					});
			}
	})


$('.event').mouseout(function(){

		$(this).children('.short_desc').stop(true,true).hide(300);
		
	setTimeout(function(){
			$('.short_desc').hide(300);
		},1);
	})

})
Изображения:
Тип файла: jpg 22.jpg (685.8 Кб, 5 просмотров)

Последний раз редактировалось tegs89, 06.04.2015 в 13:03.
Ответить с цитированием