Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.06.2012, 07:32
Новичок на форуме
Отправить личное сообщение для vhlamm Посмотреть профиль Найти все сообщения от vhlamm
 
Регистрация: 22.06.2012
Сообщений: 2

offset: начальное смещение изображения за границу фрейма
Здравствуйте. помогите разобраться. есть скрипт "Tinytips - jQuery", в котором при наведение всплывают подсказки. У меня оформлено это в виде меню ресторана. При наведение курсора на одно из блюд, справо в фиксированном месте плавно появляется изображение этого блюда. (скриншоты прилагаются)
раз
два
А проблема вот в чем. При первом наведение фотография смещается вверх, за границу фрейма. При втором и последующем наведение изображение уже на положенном месте. При перезагрузки страницы история повторяется. Смещается только yOffset (по вертикали), горизонталь (хOffset) стабильна всегда. Все повторяется под разными браузерами.

//Смещения для подсказки подбираются так, чтоды она была центрирована над элементом, но 
			// размещалась так, чтобы не перекрывать элемент.
			var yOffset = (tinyTip.height() - 300);
			var xOffset = (tinyTip.width() - 710);
			
			// Получаем координаты элемента с подсказкой и делаем новую копию,
			// так что мы сохраняем оригинал нетронутым.
			var pos = $(this).offset();
			var nPos = pos;
			
			// Добавляем смещение для позиции подсказки
			nPos.top = yOffset;
			nPos.left = pos.left - xOffset;
			
			// Устанавливаем для подсказки абсолютное позиционирование и высокое значение z-index, 
			// а затем размещаем ее в нужное место и показываем.
			tinyTip.css('position', 'absolute').css('z-index', '1000');
			tinyTip.css(nPos).fadeIn(animSpeed);
			
		}, function() {
			
			$(this).attr('title', tText);
		
			// Плавно скрываем подсказку, когда курсор мыши перемещается с элемента,
			// и удалаем ее из структуры DOM.
			tinyTip.fadeOut(animSpeed, function() {
				$(this).remove();
			});
Изображения:
Тип файла: jpg Меню.jpg (8.2 Кб, 4 просмотров)
Тип файла: jpg Меню(2).jpg (14.1 Кб, 2 просмотров)

Последний раз редактировалось vhlamm, 22.06.2012 в 07:51.
Ответить с цитированием
  #2 (permalink)  
Старый 23.06.2012, 05:17
Новичок на форуме
Отправить личное сообщение для vhlamm Посмотреть профиль Найти все сообщения от vhlamm
 
Регистрация: 22.06.2012
Сообщений: 2

UP
Ответить с цитированием
  #3 (permalink)  
Старый 23.06.2012, 05:26
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

vhlamm,
Сообщение от vhlamm
  // Получаем координаты элемента с подсказкой и делаем новую копию
1. Попробуйте добавить на исходную всплывающую подсказку класс сразу в момент наведения(до разворачивания) , и выставить для этого класса css=> 'position:absolute заблаговременно в стиле;
Даж не так - Посколь класс у неё уже есть
Цитата:
.tinyTip:hover {
position:absolute;
}
Думаю при наведении на исходную подсказку, она при развертывании Вам скролл фрейма и смещает

Последний раз редактировалось Deff, 23.06.2012 в 07:28.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Загрузка изображения из фрейма во фрейм Hardip Events/DOM/Window 0 10.03.2012 13:23