alecto,
пока больше нечего добавить |
Рони, взяв за основу ваш вариант, поигравшись с тригерами и событиями, получился работающий вариант.
Попробовать можно на сайте, ссыдочка в теме есть. 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 чтобы гарантированно произошел показ блока по таймеру. |
Цитата:
|
|
мне все равно только скриптом плавающий див собирать, да и в код сайта влезть не получится, так что, останусь с тем, что есть. спасибо.
|
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> |
афигеть! нет слов! работает как часы!!! спасибище!!!!
вот только я уже три раза по ссылке перешел, все облазил, но так и не понял, как вы этот код построили? я так понимаю, что первая часть кода $.fn.easyTooltip = function (options) { - она должна быть стандартной? а вот дальше - настройка тултипа? на той страничке совсем не такой пример, и код не такой. |
Цитата:
|
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 я немного поменял код и сейчас ещё добавил паузу |
благодарю, утром займусь изучением.
Цитата:
|
Часовой пояс GMT +3, время: 10:53. |