Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #31 (permalink)  
Старый 30.06.2016, 00:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от alecto
то есть из поста с кодом нужно обновить скрипт?
нет если вы взяли уже из 26 поста, то обновлять ненужно.
Ответить с цитированием
  #32 (permalink)  
Старый 30.06.2016, 08:05
Аспирант
Отправить личное сообщение для alecto Посмотреть профиль Найти все сообщения от alecto
 
Регистрация: 12.11.2014
Сообщений: 84

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

пришлось два раза добавить код коррекции офсета:
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: с описанием вроде разобрался.

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

Последний раз редактировалось alecto, 30.06.2016 в 08:49.
Ответить с цитированием
  #33 (permalink)  
Старый 30.06.2016, 12:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

tooltip в видимой части окна
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;
    }
     #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>

Последний раз редактировалось рони, 30.06.2016 в 12:55.
Ответить с цитированием
  #34 (permalink)  
Старый 30.06.2016, 15:42
Аспирант
Отправить личное сообщение для alecto Посмотреть профиль Найти все сообщения от alecto
 
Регистрация: 12.11.2014
Сообщений: 84

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
помогите разобраться с this uroboros7 jQuery 4 02.01.2015 00:56
Помогите разобраться с калькулятором Maksim858 Ваши сайты и скрипты 1 27.12.2014 13:23
Получение ответа сервера через iframe и xhr. Помогите разобраться. Arconas AJAX и COMET 0 26.02.2013 10:38
Помогите начинающему разобраться с setTimeout Rain Events/DOM/Window 6 09.08.2011 21:18
Помогите разобраться с галереей IMAGIN yana_studio Общие вопросы Javascript 4 12.12.2009 17:24