Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Помогите разобраться с mouseenter / mouseleave и setTimeout (https://javascript.ru/forum/jquery/63330-pomogite-razobratsya-s-mouseenter-mouseleave-i-settimeout.html)

alecto 31.05.2016 23:44

Помогите разобраться с mouseenter / mouseleave и setTimeout
 
Нужно добиться, чтобы действие выполнялось только по истечении заданного интервала мыши.
Т.е., хотелось бы установить интервал, например 0.5с, если указатель мыши находится над элементом меньше этого времени - считаем случайно проводкой и ничего не выполняется.
Если больше - выполняется действие.

Удалось построить следующий код:
$('.view-display-id-page_1').on('mouseenter', '.views-col', function() {
		var tempThis = $(this);
		var TimerInterval = setTimeout(function(){
			$(tempThis).addClass('mouseenter');
			$(tempThis).find('.views-field-title .field-content > a').addClass('mouseenter');
			$(tempThis).find('.views-field-field-spisok-dat .field-content').addClass('mouseenter');
		}, 1000);
	})
 	$('.view-display-id-page_1').on('mouseleave', '.views-col', function() {
		var tempThis = $(this);
			$(tempThis).removeClass('mouseenter');
			$(tempThis).find('.views-field-title .field-content > a').removeAttr('class');
			$(tempThis).find('.views-field-field-spisok-dat .field-content').removeClass('mouseenter');
		clearTimeout(TimerInterval);
	})



Но, в данной реализации срабатывание выполняется всегда, причем если мышка ушла раньше заказанного времени, то начинается некорректная работа переключения классов.

Безрезультатно бьюсь над задачей весь день. Прошу помощи как для совсем для начинающих.

Спасибо

рони 31.05.2016 23:48

alecto,
вопрос почему никогда не сработает строка 14?

alecto 31.05.2016 23:59

хм...
заменил
var TimerInterval = setTimeout(function(){
на
TimerInterval = setTimeout(function(){

вроде заработало!
получается, что переменная была объявлена в одной функции и не была доступна в другой.

насколько будет корректен код без испольщования вара?

рони 01.06.2016 00:00

alecto,
что мешает обьявить переменную в строке ноль

рони 01.06.2016 00:01

alecto,
http://javascript.ru/forum/events/63...i-uslovii.html

alecto 01.06.2016 00:09

мешает недостаток знаний.
благодарствую за подсказки!

сделал так:
var TimerInterval;
	$('.view-display-id-page_1').on('mouseenter', '.views-col', function() {
		var tempThis = $(this);
		TimerInterval = setTimeout(function(){
			$(tempThis).addClass('mouseenter');
			$(tempThis).find('.views-field-title .field-content > a').addClass('mouseenter');
			$(tempThis).find('.views-field-field-spisok-dat .field-content').addClass('mouseenter');
		}, 500);
	})
 	$('.view-display-id-page_1').on('mouseleave', '.views-col', function() {
		var tempThis = $(this);
			$(tempThis).removeClass('mouseenter');
			$(tempThis).find('.views-field-title .field-content > a').removeAttr('class');
			$(tempThis).find('.views-field-field-spisok-dat .field-content').removeClass('mouseenter');
		clearTimeout(TimerInterval);
	})


вроде работает.
спасибо.

рони 01.06.2016 00:18

Цитата:

Сообщение от alecto
сделал так:

ок

Alex_63 01.06.2016 11:21

alecto,
Еще чуть подправил, сократил
var TimerInterval;
$('.view-display-id-page_1').on('mouseenter', '.views-col', function() {
	clearTimeout(TimerInterval);
	var tempThis = $(this);
	TimerInterval = setTimeout(function(){
		tempThis.addClass('mouseenter').find('.views-field-title .field-content > a').addClass('mouseenter');
		tempThis.find('.views-field-field-spisok-dat .field-content').addClass('mouseenter');
	}, 500);
}).on('mouseleave', '.views-col', function() {
	clearTimeout(TimerInterval);
	$(this).removeClass('mouseenter').find('.views-field-title .field-content > a').removeAttr('class');
	$(this).find('.views-field-field-spisok-dat .field-content').removeClass('mouseenter');
});

alecto 29.06.2016 14:39

добрый день.
переделал скрипт, заменив его следующим:

var tempTriger = 0;

		$('.view-tury.view-display-id-page_1 .views-col').mousemove(function(e) {


			if (tempTriger == 0) {
				var tempThis = $(this);
				$("#main").append('<div id="follower">' + $(tempThis).html() + '</div>');
				$('#follower').show();
				tempTriger = 1
			}

      var tempLeft = e.pageX + 325;
      if ( $(window).width() > tempLeft ) {
        $('#follower').offset({
          left: e.pageX + 20,
          top: e.pageY + 30
        });
      } else {
        $('#follower').offset({
          left: e.pageX - 300,
          top: e.pageY + 30
        });
      }

		});

		$('.view-tury.view-display-id-page_1 .views-col').mouseleave(function() {
			$("#follower").remove(); 
			tempTriger = 0
		});


т.е. собрал плавающий за курсором мышки блок, который генерируется при из сетки, при наведении на определенный блок.
эта часть вроде работает.

затем, что бы выключить срабатывание этого кода при случайной проводке мыши, попробовал завернуть его в код таймера, по аналогии выше.
получился следующий код:

var tempTriger = 0;
    var TimerInterval;

		$('.view-tury.view-display-id-page_1 .views-col').mousemove(function(e) {

			var tempThis = $(this);
      TimerInterval = setTimeout(function(){

			if (tempTriger == 0) {
				$("#main").append('<div id="follower">' + $(tempThis).html() + '</div>');
				$('#follower').show();
				tempTriger = 1
			}

      var tempLeft = e.pageX + 325;
      if ( $(window).width() > tempLeft ) {
        $('#follower').offset({
          left: e.pageX + 20,
          top: e.pageY + 30
        });
      } else {
        $('#follower').offset({
          left: e.pageX - 300,
          top: e.pageY + 30
        });
      }

		}, 500);

		});

		$('.view-tury.view-display-id-page_1 .views-col').mouseleave(function() {
			$("#follower").remove(); 
			tempTriger = 0
      clearTimeout(TimerInterval);
		});


но вместо ожидаемого результата получил всего лишь полусекундное запаздывание.
где-то накосячил, но не могу понять где.
помогите пожалуйста.

рони 29.06.2016 15:12

alecto,
лучше бы минимальный макет полностью

alecto 29.06.2016 15:21

простите, не понял, это как?
если о примере - он здесь, только без таймера - центральный блок, сетка
http://astravel.com.ua/
код я тоже весь привел, но посути, мне нужно изолировать от случайно проводки все, что находится внутри функции
$('.view-tury.view-display-id-page_1 .views-col').mousemove(function(e) { ... }

единственное - выношу за таймер переменную
var tempThis = $(this);

иначе без нее не определяются данные внутри функции для элемента, над которым находится курсор.

рони 29.06.2016 15:38

alecto,
а что за мусор в строке 38? пост 9

alecto 29.06.2016 15:41

точно, это условия, чтобы скрипт работал только на главной странице
if (location.href == 'http://astravel.com.ua/') { 
}

но оно никак не влиять на нужный код скрипта
сейчас уберу из поста, чтобы не мешалось.

рони 29.06.2016 16:12

alecto,
вариант
$("#main").append('<div id="follower"></div>');
    $("#follower").hide();
    var TimerInterval;
    $(".view-tury.view-display-id-page_1 .views-col").mousemove(function(e) {
        var tempLeft = e.pageX + 325;
        if ($(window).width() > tempLeft) $("#follower").offset({
            left: e.pageX + 20,
            top: e.pageY + 30
        });
        else $("#follower").offset({
            left: e.pageX - 300,
            top: e.pageY + 30
        })
    }).mouseenter(function() {
        clearTimeout(TimerInterval);
        $("#follower").html($(this).html()).hide();
        TimerInterval = setTimeout(function() {
            $("#follower").show()
        }, 1500)
    }).mouseleave(function() {
        $("#follower").html("").hide();
        clearTimeout(TimerInterval)
    })

рони 29.06.2016 16:25

косметические дополнения к варианту выше
$("#main").append('<div id="follower"></div>');
    $("#follower").hide();
    var TimerInterval;
    $(".view-tury.view-display-id-page_1 .views-col").mousemove(function(e) {
        var tempLeft = e.pageX + 325;
        if ($(window).width() > tempLeft) $("#follower").offset({
            left: e.pageX + 20,
            top: e.pageY + 30
        });
        else $("#follower").offset({
            left: e.pageX - 300,
            top: e.pageY + 30
        })
    }).mouseenter(function() {
        clearTimeout(TimerInterval);
        var tempThis = $(this);
        $("#follower").html(tempThis.html()).hide();
        TimerInterval = setTimeout(function() {
            $("#follower").stop().show();
            tempThis.trigger("mousemove");
        }, 1500)
    }).mouseleave(function() {
        $("#follower").html("").stop().hide();
        clearTimeout(TimerInterval)
    })

alecto 29.06.2016 16:29

спасибо!
вроде заработало, но вот беда...
блок появляется черти где справа внизу.
т.е. на mouseenter появляется горизонтальный скрол, а блока нигде не видно.
только если продолжить движение мышкой - скрол исчезает и появляется блок, где ему и положено быть.
я не сразу понял, где находится блок + неэстетичное прыгание прокруток при каждом наезде на ячейку сетки.

так же пробовал код
$("#follower").offset({
            left: e.pageX - 300,
            top: e.pageY + 30
        })

добавить в mouseenter - не помогло.

пробовал определить начальное положение блока через цсс и напрямую прописывая ему позицию через стайл в скрипте - не помогает, он появляется там, где ему хочется.

мне кажется, вариант с mouseenter не удастся заставить работать, как нужно.

alecto 29.06.2016 16:38

и еще вопрос:
у меня на странице изначально нет плавающего блока, он формируется при наведении на элемент.
так же для него и его контента есть стили.
на mousemove по тригеру создается сам див и происходит его заполнение, на mouseleave - блок полностью удаляется.
я решил, что если содержимое блока полностью генерируется по событию мышки, то смысл его прятать/показывать, поэтому удалил-создал.
или я заблуждаюсь в этом вопросе?

рони 29.06.2016 16:45

alecto,
а так ?
$("#main").append('<div id="follower"></div>');
    $("#follower").hide();
    $(".view-tury.view-display-id-page_1 .views-col").off().mousemove(function(e) {
        var tempLeft = e.pageX + 325;
        if ($(window).width() > tempLeft) $("#follower").offset({
            left: e.pageX + 20,
            top: e.pageY + 30
        });
        else $("#follower").offset({
            left: e.pageX - 300,
            top: e.pageY + 30
        })
    }).mouseenter(function() {
        $("#follower").stop().hide().html($(this).html()).delay(1500).show();
    }).mouseleave(function() {
        $("#follower").html("").stop().hide();
        })

рони 29.06.2016 16:46

Цитата:

Сообщение от alecto
я заблуждаюсь в этом вопросе?

как вам удобнее -- но проще создать 1 раз

alecto 29.06.2016 16:49

#18 срабатывает сразу, как и первоначальном варианте.

рони 29.06.2016 17:16

alecto,
пока больше нечего добавить

alecto 29.06.2016 19:27

Рони, взяв за основу ваш вариант, поигравшись с тригерами и событиями, получился работающий вариант.
Попробовать можно на сайте, ссыдочка в теме есть.
1 - прошу глянуть на код, нет ли в нем явных косяков?

$('.view-tury.view-display-id-page_1 .views-col').on('mouseenter', function(e) {
			var tempThis = $(this);
			TimerInterval = setTimeout(function() {
				$("#main").append('<div id="follower">' + $(tempThis).html() + '</div>');
				tempTriger = 1
			}, 500)
		}).on('mousemove', function(e) {
			if (tempTriger == 1) {
				$('#follower').show();
				tempTriger = 2
			}
			if (tempTriger == 2) {
				var tempLeft = e.pageX + 325;
				if ( $(window).width() > tempLeft ) {
					$('#follower').offset({
						left: e.pageX + 20,
						top: e.pageY + 30
					});
				} else {
					$('#follower').offset({
						left: e.pageX - 300,
						top: e.pageY + 30
					});
				}
			}
		}).on('mouseleave', function(e) {
			clearTimeout(TimerInterval)
			$("#follower").remove(); 
			tempTriger = 0
		});


2 - проблема с передергиваниями скрола и позицией блока решилась, но при смене события на mousemove, если в это время курсор не двигался, то блок не отображается по таймеру, пока не шевельнешь мышкой.
если перетащить включение показа блока в mouseenter - тогда будет прыгание позиции.

3 - в связи с пунктом 2 вопрос: можно ли как-то принудильтельно вызвать событие mousemove, например сдвинуть курсор мышки или еще каким-то образом
в этом месте
TimerInterval = setTimeout(function() {
				$("#main").append('<div id="follower">' + $(tempThis).html() + '</div>');
				tempTriger = 1

чтобы гарантированно произошел показ блока по таймеру.

рони 29.06.2016 20:27

Цитата:

Сообщение от alecto
можно ли как-то принудильтельно вызвать событие mousemove

скорее всего да, но не знаю как

рони 29.06.2016 20:52

alecto,
может взять готовое решение
http://jqueryui.com/tooltip/#custom-content

alecto 29.06.2016 20:58

мне все равно только скриптом плавающий див собирать, да и в код сайта влезть не получится, так что, останусь с тем, что есть. спасибо.

рони 29.06.2016 22:15

easyTooltip всплывающая подсказка с паузой
 
alecto,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <base href="http://astravel.com.ua/" />
  <link rel="stylesheet" type="text/css" href="http://astravel.com.ua/core/assets/vendor/normalize-css/normalize.css">

  <link rel="stylesheet" type="text/css" href="http://astravel.com.ua/themes/astravel/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="http://astravel.com.ua/themes/astravel/css/custom.css">
  <link rel="stylesheet" type="text/css" href="http://astravel.com.ua/themes/astravel/css/base/elements.css">
  <link rel="stylesheet" type="text/css" href="http://astravel.com.ua/sites/default/files/color/astravel-02d29967/colors.css">
  <link rel="stylesheet" type="text/css" href="http://astravel.com.ua/core/themes/stable/css/views/views.module.css">
  <style type="text/css">
    #block-astravel-content {
      width: 700px;
      margin: 0 auto;
    }

 </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script>
 (function ($) {
    $.fn.easyTooltip = function (options) {
        var defaults = {
            xOffset: 10,
            yOffset: 25,
            tooltipId: "easyTooltip",
            clickRemove: false,
            content: "",
            useElement: "",
            source: null,
            pause: 0
        };
        var options = $.extend(defaults, options);
        var content;
        this.each(function () {
            var title = $(this).attr("title");
            $(this).hover(function (e) {
                content = options.content != "" ? options.content : title;
                content = options.useElement != "" ? $("#" + options.useElement).html() : content;
                content = typeof options.source == "function" ? options.source(this) : content;
                $(this).attr("title", "");
                if (content != "" && content != undefined) {
                    $("body").append("<div id='" + options.tooltipId + "'>" + content + "</div>");
                    $("#" + options.tooltipId)
                    .css({"position": "absolute",
                          "top": e.pageY - options.yOffset + "px",
                          "left": e.pageX + options.xOffset + "px",
                          "display": "none"}).delay(options.pause).fadeIn("fast")
                }
            }, function () {
                $("#" + options.tooltipId).remove();
                $(this).attr("title", title)
            });
            $(this).mousemove(function (e) {
                $("#" + options.tooltipId).css({"top": e.pageY - options.yOffset + "px",
                "left": e.pageX + options.xOffset + "px"})
            });
            if (options.clickRemove) $(this).mousedown(function (e) {
                $("#" + options.tooltipId).remove();
                $(this).attr("title", title)
            })
        })
    }
})(jQuery);
$(function() {
    $(".view-tury.view-display-id-page_1 .views-col").easyTooltip({
        source: function(el) {
            return $(el).html()
        },
        tooltipId: "follower",
        pause: 1500
    })
});
  </script>
</head>

<body>

    <div id="block-astravel-page-title" class="block block-core block-page-title-block">


      <div class="content">

  <h1 class="js-quickedit-page-title title page-title">Горящие туры и специальные предложения</h1>


    </div>
  </div>
<div id="block-astravel-content" class="block block-system block-system-main-block">


      <div class="content">
      <div class="views-element-container"><div class="view view-tury view-id-tury view-display-id-page_1 js-view-dom-id-778dd42ea816542b94de8810880c3ca3a8c259c3a185b752139401331a77005e">



      <div class="view-content">
          <div class="views-view-grid horizontal cols-3 clearfix">
            <div class="views-row clearfix row-1">
                  <div title="" class="views-col col-1" style="width: 33.333333333333%;">
            <div class="views-field views-field-field-image"><div class="field-content">  <a href="/tours/207"><img src="/sites/default/files/styles/tury_glavnaa_stranica_200_h_120/public/images/tours/chernogoria.jpg?itok=MZJ3nIBO" alt="" typeof="foaf:Image" class="image-style-tury-glavnaa-stranica-200-h-120" height="141" width="238">

</a>
</div></div><div class="views-field views-field-title"><span class="field-content"><a href="/tours/207" hreflang="ru">Черногория из Харькова. Горящий!</a></span></div><div class="views-field views-field-field-spisok-dat"><span class="views-label views-label-field-spisok-dat">Даты: </span><div class="field-content">03.07.2016 и далее по воскресеньям</div></div><div class="views-field views-field-field-dlitelnost-tura"><span class="views-label views-label-field-dlitelnost-tura">Длительность: </span><div class="field-content">7 ночей / 8 дней</div></div><div class="views-field views-field-field-stoimost-tura"><span class="views-label views-label-field-stoimost-tura">Стоимость: </span><div class="field-content">от 262</div></div><div class="views-field views-field-field-valuta"><div class="field-content">€</div></div>
          </div>
                  <div class="views-col col-2" style="width: 33.333333333333%;">
            <div class="views-field views-field-field-image"><div class="field-content">  <a href="/tours/153"><img src="/sites/default/files/styles/tury_glavnaa_stranica_200_h_120/public/images/tours/at-oludeniz-1.jpg?itok=r9z2C4fM" alt="" typeof="foaf:Image" class="image-style-tury-glavnaa-stranica-200-h-120" height="141" width="238">

</a>
</div></div><div class="views-field views-field-title"><span class="field-content"><a href="/tours/153" hreflang="ru">Новинка! Отдых на Эгейском побережье Турции с вылетом из Харькова!</a></span></div><div class="views-field views-field-field-spisok-dat"><span class="views-label views-label-field-spisok-dat">Даты: </span><div class="field-content">30.06, 04.07, 14.07, 25.07, 04.08, 15.08, 25.08, 05.09, 15.09, 26.09, 06.10, 17.10.2016</div></div><div class="views-field views-field-field-dlitelnost-tura"><span class="views-label views-label-field-dlitelnost-tura">Длительность: </span><div class="field-content">12 дней / 11 ночей, 11 дней / 10 ночей</div></div><div class="views-field views-field-field-stoimost-tura"><span class="views-label views-label-field-stoimost-tura">Стоимость: </span><div class="field-content">от 406</div></div><div class="views-field views-field-field-valuta"><div class="field-content">$</div></div>
          </div>
                  <div class="views-col col-3" style="width: 33.333333333333%;">
            <div class="views-field views-field-field-image"><div class="field-content">  <a href="/tours/242"><img src="/sites/default/files/styles/tury_glavnaa_stranica_200_h_120/public/images/tours/qcycnw4y.jpg?itok=uyXyWU4U" alt="" typeof="foaf:Image" class="image-style-tury-glavnaa-stranica-200-h-120" height="141" width="238">

</a>
</div></div><div class="views-field views-field-title"><span class="field-content"><a href="/tours/242" hreflang="ru">Отель Kaya Palazzo Golf Resort 5* Deluxe - роскошь и великолепие на берегу Средиземного моря Турции!</a></span></div><div class="views-field views-field-field-spisok-dat"><span class="views-label views-label-field-spisok-dat">Даты: </span><div class="field-content">лето 2016</div></div><div class="views-field views-field-field-dlitelnost-tura"><span class="views-label views-label-field-dlitelnost-tura">Длительность: </span><div class="field-content">от 7 ночей / 8 дней</div></div><div class="views-field views-field-field-stoimost-tura"><span class="views-label views-label-field-stoimost-tura">Стоимость: </span><div class="field-content">от 899</div></div><div class="views-field views-field-field-valuta"><div class="field-content">$</div></div>
          </div>
              </div>



      </div>

    </div><div class="more-link"><a href="/tours/hot">Смотреть все горящие туры</a></div>

          </div>
</div>

    </div>
  </div>




</body>
</html>

alecto 29.06.2016 22:50

афигеть! нет слов! работает как часы!!! спасибище!!!!

вот только я уже три раза по ссылке перешел, все облазил, но так и не понял, как вы этот код построили?

я так понимаю, что первая часть кода $.fn.easyTooltip = function (options) { - она должна быть стандартной? а вот дальше - настройка тултипа?

на той страничке совсем не такой пример, и код не такой.

рони 29.06.2016 23:36

Цитата:

Сообщение от alecto
вот только я уже три раза по ссылке перешел

по какой ссылке?

рони 30.06.2016 00:01

alecto,
автор плагина http://cssglobe.com/ уже нет сайта, но примеры живые
http://cssglobe.com/lab/easytooltip/01.html
http://cssglobe.com/lab/easytooltip/02.html
описание на русском
http://www.master-web.info/easytooltip-jquery-plugin/
урок
http://ruseller.com/lessons.php?id=205
и тут
http://javascript.ru/forum/jquery/44...tml#post292304
я немного поменял код и сейчас ещё добавил паузу

alecto 30.06.2016 00:29

благодарю, утром займусь изучением.
Цитата:

я немного поменял код и сейчас ещё добавил паузу
то есть из поста с кодом нужно обновить скрипт?

рони 30.06.2016 00:41

Цитата:

Сообщение от alecto
то есть из поста с кодом нужно обновить скрипт?

нет если вы взяли уже из 26 поста, то обновлять ненужно.

alecto 30.06.2016 08:05

еще обнаружил: сайдбары сайта складываются при уменьшении размера окна, т.е. надо менять офссет таким образом, чтобы плавающий блок никогда не выходил за границы окна, когда нет правостороннего сайдбара.

пришлось два раза добавить код коррекции офсета:
var tempXOffset = 0;
                    if ($(window).width() > (e.pageX + 305 + options.xOffset) ) tempXOffset = 0; else tempXOffset = -300 - options.xOffset;


1
$("body").append("<div id='" + options.tooltipId + "'>" + content + "</div>");
                    var tempXOffset = 0;
                    if ($(window).width() > (e.pageX + 305 + options.xOffset) ) tempXOffset = 0; else tempXOffset = -300 - options.xOffset;
                    $("#" + options.tooltipId)
                    .css({"position": "absolute",
                          "top": e.pageY - options.yOffset + "px",
                          "left": e.pageX + options.xOffset + tempXOffset + "px",
                          "display": "none"}).delay(options.pause).fadeIn("fast")


2
$(this).mousemove(function (e) {
                var tempXOffset = 0;
                if ($(window).width() > (e.pageX + 305 + options.xOffset) ) tempXOffset = 0; else tempXOffset = -300 - options.xOffset;
                $("#" + options.tooltipId).css({"top": e.pageY - options.yOffset + "px",


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


UPD: с описанием вроде разобрался.

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

рони 30.06.2016 12:53

tooltip в видимой части окна
 
alecto,
:write: :)
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <base href="http://astravel.com.ua/" />
  <link rel="stylesheet" type="text/css" href="http://astravel.com.ua/core/assets/vendor/normalize-css/normalize.css">

  <link rel="stylesheet" type="text/css" href="http://astravel.com.ua/themes/astravel/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="http://astravel.com.ua/themes/astravel/css/custom.css">
  <link rel="stylesheet" type="text/css" href="http://astravel.com.ua/themes/astravel/css/base/elements.css">
  <link rel="stylesheet" type="text/css" href="http://astravel.com.ua/sites/default/files/color/astravel-02d29967/colors.css">
  <link rel="stylesheet" type="text/css" href="http://astravel.com.ua/core/themes/stable/css/views/views.module.css">
  <style type="text/css">
    #block-astravel-content {
      width: 700px;
      margin: 0 auto;
    }
     #follower{
        border: 3px rgb(255, 255, 255) solid;
        border-radius: 8px;
      }

 </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script>
jQuery.fn.center = function(event) {
    var w = $(window),
        top = w.height() - this.outerHeight(true) + w.scrollTop() - (event.pageY + 22),
        left = w.width() - this.outerWidth(true) + w.scrollLeft() - (event.pageX + 7);
    this.css("position", "absolute");
    top = top > 0 ? event.pageY + 22 : event.pageY - this.outerHeight(true);
    top < w.scrollTop() && (top = w.scrollTop());
    left = left > 0 ? event.pageX + 7 : event.pageX - this.outerWidth(true);
    left < w.scrollLeft() && (left = w.scrollLeft() + 4);
    this.css("top", top + "px");
    this.css("left", left + "px");
    return this
};
$(function() {
    var tooltip = $("<div>", {
        id: "follower"
    }).appendTo("body");
    $(".view-tury.view-display-id-page_1 .views-col").mousemove(function(event) {
        tooltip.center(event)
    }).mouseenter(function(event) {
        tooltip.html($(this).html()).stop(true, true).delay(800).fadeIn()
    }).add(tooltip).mouseleave(function() {
        tooltip.stop(true, true).delay(500).fadeOut()
    });
    tooltip.mouseenter(function(event) {
        tooltip.stop(true, true)
    })
});
  </script>
</head>

<body>
 <p style=" height: 1000px"></p>
    <div id="block-astravel-page-title" class="block block-core block-page-title-block">


      <div class="content">

  <h1 class="js-quickedit-page-title title page-title">Горящие туры и специальные предложения</h1>


    </div>
  </div>
<div id="block-astravel-content" class="block block-system block-system-main-block">


      <div class="content">
      <div class="views-element-container"><div class="view view-tury view-id-tury view-display-id-page_1 js-view-dom-id-778dd42ea816542b94de8810880c3ca3a8c259c3a185b752139401331a77005e">



      <div class="view-content">
          <div class="views-view-grid horizontal cols-3 clearfix">
            <div class="views-row clearfix row-1">
                  <div title="" class="views-col col-1" style="width: 33.333333333333%;">
            <div class="views-field views-field-field-image"><div class="field-content">  <a href="/tours/207"><img src="/sites/default/files/styles/tury_glavnaa_stranica_200_h_120/public/images/tours/chernogoria.jpg?itok=MZJ3nIBO" alt="" typeof="foaf:Image" class="image-style-tury-glavnaa-stranica-200-h-120" height="141" width="238">

</a>
</div></div><div class="views-field views-field-title"><span class="field-content"><a href="/tours/207" hreflang="ru">Черногория из Харькова. Горящий!</a></span></div><div class="views-field views-field-field-spisok-dat"><span class="views-label views-label-field-spisok-dat">Даты: </span><div class="field-content">03.07.2016 и далее по воскресеньям</div></div><div class="views-field views-field-field-dlitelnost-tura"><span class="views-label views-label-field-dlitelnost-tura">Длительность: </span><div class="field-content">7 ночей / 8 дней</div></div><div class="views-field views-field-field-stoimost-tura"><span class="views-label views-label-field-stoimost-tura">Стоимость: </span><div class="field-content">от 262</div></div><div class="views-field views-field-field-valuta"><div class="field-content">€</div></div>
          </div>
                  <div class="views-col col-2" style="width: 33.333333333333%;">
            <div class="views-field views-field-field-image"><div class="field-content">  <a href="/tours/153"><img src="/sites/default/files/styles/tury_glavnaa_stranica_200_h_120/public/images/tours/at-oludeniz-1.jpg?itok=r9z2C4fM" alt="" typeof="foaf:Image" class="image-style-tury-glavnaa-stranica-200-h-120" height="141" width="238">

</a>
</div></div><div class="views-field views-field-title"><span class="field-content"><a href="/tours/153" hreflang="ru">Новинка! Отдых на Эгейском побережье Турции с вылетом из Харькова!</a></span></div><div class="views-field views-field-field-spisok-dat"><span class="views-label views-label-field-spisok-dat">Даты: </span><div class="field-content">30.06, 04.07, 14.07, 25.07, 04.08, 15.08, 25.08, 05.09, 15.09, 26.09, 06.10, 17.10.2016</div></div><div class="views-field views-field-field-dlitelnost-tura"><span class="views-label views-label-field-dlitelnost-tura">Длительность: </span><div class="field-content">12 дней / 11 ночей, 11 дней / 10 ночей</div></div><div class="views-field views-field-field-stoimost-tura"><span class="views-label views-label-field-stoimost-tura">Стоимость: </span><div class="field-content">от 406</div></div><div class="views-field views-field-field-valuta"><div class="field-content">$</div></div>
          </div>
                  <div class="views-col col-3" style="width: 33.333333333333%;">
            <div class="views-field views-field-field-image"><div class="field-content">  <a href="/tours/242"><img src="/sites/default/files/styles/tury_glavnaa_stranica_200_h_120/public/images/tours/qcycnw4y.jpg?itok=uyXyWU4U" alt="" typeof="foaf:Image" class="image-style-tury-glavnaa-stranica-200-h-120" height="141" width="238">

</a>
</div></div><div class="views-field views-field-title"><span class="field-content"><a href="/tours/242" hreflang="ru">Отель Kaya Palazzo Golf Resort 5* Deluxe - роскошь и великолепие на берегу Средиземного моря Турции!</a></span></div><div class="views-field views-field-field-spisok-dat"><span class="views-label views-label-field-spisok-dat">Даты: </span><div class="field-content">лето 2016</div></div><div class="views-field views-field-field-dlitelnost-tura"><span class="views-label views-label-field-dlitelnost-tura">Длительность: </span><div class="field-content">от 7 ночей / 8 дней</div></div><div class="views-field views-field-field-stoimost-tura"><span class="views-label views-label-field-stoimost-tura">Стоимость: </span><div class="field-content">от 899</div></div><div class="views-field views-field-field-valuta"><div class="field-content">$</div></div>
          </div>
              </div>



      </div>

    </div><div class="more-link"><a href="/tours/hot">Смотреть все горящие туры</a></div>

          </div>
</div>

    </div>
  </div>


<p style=" height: 1000px"></p>

</body>
</html>

alecto 30.06.2016 15:42

Рони, просто нет слов! последний плагин - бомба!!!


Часовой пояс GMT +3, время: 10:33.