29.06.2016, 17:16
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
|
alecto,
пока больше нечего добавить
|
|
29.06.2016, 19:27
|
|
Аспирант
|
|
Регистрация: 12.11.2014
Сообщений: 84
|
|
Рони, взяв за основу ваш вариант, поигравшись с тригерами и событиями, получился работающий вариант.
Попробовать можно на сайте, ссыдочка в теме есть.
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
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
|
Сообщение от alecto
|
|
можно ли как-то принудильтельно вызвать событие mousemove
|
скорее всего да, но не знаю как |
|
29.06.2016, 20:52
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
|
|
|
29.06.2016, 20:58
|
|
Аспирант
|
|
Регистрация: 12.11.2014
Сообщений: 84
|
|
|
мне все равно только скриптом плавающий див собирать, да и в код сайта влезть не получится, так что, останусь с тем, что есть. спасибо.
|
|
29.06.2016, 22:15
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
|
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>
|
|
29.06.2016, 22:50
|
|
Аспирант
|
|
Регистрация: 12.11.2014
Сообщений: 84
|
|
|
афигеть! нет слов! работает как часы!!! спасибище!!!!
вот только я уже три раза по ссылке перешел, все облазил, но так и не понял, как вы этот код построили?
я так понимаю, что первая часть кода $.fn.easyTooltip = function (options) { - она должна быть стандартной? а вот дальше - настройка тултипа?
на той страничке совсем не такой пример, и код не такой.
|
|
29.06.2016, 23:36
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
|
Сообщение от alecto
|
|
вот только я уже три раза по ссылке перешел
|
по какой ссылке? |
|
30.06.2016, 00:01
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
|
|
|
30.06.2016, 00:29
|
|
Аспирант
|
|
Регистрация: 12.11.2014
Сообщений: 84
|
|
благодарю, утром займусь изучением.
|
Цитата:
|
|
я немного поменял код и сейчас ещё добавил паузу
|
то есть из поста с кодом нужно обновить скрипт? |
|
|
|
