Тема: ajax + js.tooltip
Показать сообщение отдельно
  #5 (permalink)  
Старый 29.06.2017, 12:08
Интересующийся
Отправить личное сообщение для graf_vorontsov Посмотреть профиль Найти все сообщения от graf_vorontsov
 
Регистрация: 13.06.2017
Сообщений: 14

да, есть метод
ну я его поидее и вызываю, но видимо не там где надо
есть метод PCL_TooltipUpdate()
и есть PCL_TooltipInit() (но PCL_TooltipUpdate() вызывается в нём)
попробовал вызывать PCL_TooltipUpdate() в конце </body>
Код:
<script type="text/javascript"> PCL_TooltipUpdate(); </script>
не работает

// Для каких элементов устанавливать подсказки
var tooltiptags = ['a', 'img', 'span'];

var tooltip_lehgth=0;
var show=false;

// Показать всплывающую подсказку
function PCL_TooltipShow(e) {
    // Получить событие
    var e = e ? e : window.event;

    var doc = document.documentElement;
    var body = document.body;

    // Получить текущие координаты мыши
    // Используется короткий метод определения IE от Gareth Heyes
    if ("\v" == "v") {
        var mouse_x = e.clientX;
        if (doc.clientLeft) { mouse_x -= doc.clientLeft; }
        if (doc && doc.scrollLeft) { mouse_x += doc.scrollLeft; }
        if (body && body.scrollLeft) { mouse_x += body.scrollLeft; }
        var mouse_y = e.clientY;
        if (doc.clientTop) { mouse_y -=doc.clientTop; }
        if (doc && doc.scrollTop) { mouse_y += doc.scrollTop; }
        if (body && body.scrollTop) { mouse_y += body.scrollTop; }
    }
    else {
        var mouse_x=e.pageX;
        var mouse_y=e.pageY;
    }

    var my_width = 0;
    var my_height = 0;

    // Получить размеры видимой области экрана
    if (typeof(window.innerWidth) == 'number') {
        my_width = window.innerWidth;
        my_height = window.innerHeight;
    }
    else if (doc && (doc.clientWidth || doc.clientHeight)) {
        my_width = doc.clientWidth;
        my_height = doc.clientHeight;
    }
    else if (body && (body.clientWidth || body.clientHeight)) {
        my_width = body.clientWidth;
        my_height = body.clientHeight;
    }

    var tmpdd = document.getElementById('tooltipdiv');
    var rr = document.getElementById('rulediv');

    // Если подсказка еще не показывается, то расчитать ее размеры
    if (!show) {
        // Если ширина "рулетки" больше заданного размера, то установить
        // ширину подсказки заданного размера, иначе установить ширину
        // "рулетки". Это устраняет искажение размера tooltip'а у края
        // экрана или в горизонтально прокрученной области.
        if (rr.offsetWidth>tooltip_lehgth) {
            // Скорректировать ширину подсказки, чтобы не было пустого места справа
            rr.style.width=tooltip_lehgth+'px';
            var old_rheight=rr.offsetHeight;
            var new_rwidth=tooltip_lehgth;
            while (true) {
                rr.style.width=new_rwidth+'px';
                if (rr.offsetHeight>old_rheight) {
                    new_rwidth++;
                    break;
                }
                new_rwidth--;
                if (new_rwidth==0) { break; }
            }
            if (new_rwidth==0) { new_rwidth=tooltip_lehgth; }
            tmpdd.style.width=new_rwidth+'px';
            tmpdd.style.whiteSpace='normal';
        }
        else {
            tmpdd.style.width='auto';
            tmpdd.style.whiteSpace='nowrap';
        }
    }

    // Относительное смещение по вертикали
    var scrollY = 0;
    if (doc && doc.scrollTop) {
        scrollY = doc.scrollTop;
    }
    else if (body && body.scrollTop) {
        scrollY = body.scrollTop;
    }
    else if (window.pageYOffset) {
        scrollY = window.pageYOffset;
    }
    else if (window.scrollY) {
        scrollY = window.scrollY;
    }

    // Относительное смещение по горизонтали
    var scrollX = 0;
    if (doc && doc.scrollLeft) {
        scrollX = doc.scrollLeft;
    }
    else if (body && body.scrollLeft) {
        scrollX = body.scrollLeft;
    }
    else if (window.pageXOffset) {
        scrollX = window.pageXOffset;
    }
    else if (window.scrollX) {
        scrollX = window.scrollX;
    }

    mouse_y-=scrollY;
    mouse_x-=scrollX;

    // Получить размеры tooltip'а
    var div_width = tmpdd.offsetWidth;
    var div_height = tmpdd.offsetHeight;
  
    // Расчитать новые координаты tooltip'а
    if (mouse_y+div_height+40>my_height) {
        var new_y = my_height-div_height-20;
    }
    else {
        var new_y = mouse_y+20;
    }
    if (mouse_x+div_width+40>my_width) {
        var new_x = my_width-div_width-20;
    }
    else {
        var new_x = mouse_x+20;
    }

    // Если подсказка получается поверх курсора, то сместить ее влево
    if (new_x<mouse_x && new_y<mouse_y) {
        var new_x = mouse_x-10-div_width;
    }
    
    with (tmpdd) {
        // Установить новые координаты tooltip'а
        style.left=(new_x+scrollX)+'px';
        style.top=(new_y+scrollY)+'px';
        // Убирает неприятное мерцание в Opera
        style.visibility = 'visible';
    }
    show=true;
}

// Обработчик наведения курсора мыши на элемент
function PCL_TooltipMouseOver(e) {
    var x = e.target ? e.target : e.srcElement;
    var tmpdd = document.getElementById('tooltipdiv');
    // Записать текст подсказки в основной и вспомогательный DIV
    do {
        var tmp=x.getAttribute('tooltip');
        if (typeof tmp=='string' && tmp!='') {
            tmpdd.innerHTML=tmp;
            break;
        }   
        else {
            x=x.parentNode;
            if (!x) { return false; }
        }
    } while (true);   
    
    var rr = document.getElementById('rulediv');
    rr.style.whiteSpace='normal';
    rr.style.width='auto';
    rr.innerHTML=tmpdd.innerHTML;
}

// Обработчик ухода курсора мыши с элемента
function PCL_TooltipMouseOut(e) {
    var tmpdd = document.getElementById('tooltipdiv');
    // Спрятать подсказку
    tmpdd.style.visibility = 'hidden';
    // Подсказка не показывается
    show=false;
}

// Обновление tooltip'ов на странице, например при первом вызове скрипта
// или после использования ваших функций AJAX
function PCL_TooltipUpdate() {
    for (var i=0; i<tooltiptags.length; i++) {
        var element = document.getElementsByTagName(tooltiptags[i]);
        for (var j=0; j<element.length; j++) {
            var x=element[j];
            // Если установлен атрибут alt или title, то установить наш обработчик
            if ((typeof(x.alt)=='string' && x.alt!='') ||
                (typeof(x.title)=='string' && x.title!='')) {
                // Создать дополнительный атрибут 'tooltip' и записать в него значение
                if (typeof(x.title)=='string' && x.title!='') {
                    x.setAttribute('tooltip',x.title);
                    x.tooltip=x.title;
                }
                else {
                    x.setAttribute('tooltip',x.alt);
                    x.tooltip=x.alt;
                }
                // Обнулить атрибуты alt и title, чтобы подсказка не дублировалась
                // штатными средствами браузера
                x.setAttribute('alt','');
                x.alt='';
                x.setAttribute('title','');
                x.title='';

                // Установить для элемента обработчики событий по наведению,
                // перемещению и уходу курсора мыши
                if (x.addEventListener) {
                    x.addEventListener("mouseover", PCL_TooltipMouseOver, false);
                    x.addEventListener("mousemove", PCL_TooltipShow, false);
                    x.addEventListener("mouseout", PCL_TooltipMouseOut, false);
                }
                else {
                    x.attachEvent("onmouseover", PCL_TooltipMouseOver);
                    x.attachEvent("onmousemove", PCL_TooltipShow);
                    x.attachEvent("onmouseout", PCL_TooltipMouseOut);
                }
            }
        }
    }
    // При обновлении и инициализации принудительно спрятать подсказку
    var tmpdd = document.getElementById('tooltipdiv');
    tmpdd.style.visibility = 'hidden';
}

// Инициализация скрипта. Эта функция должна вызываться по событию
// onload или находиться в самом конце страницы

function PCL_TooltipInit() {
    // Установить ширину подсказки, по умолчанию 300
    tooltip_lehgth=(typeof(arguments[0])!='number'?300:arguments[0]);
    if (tooltip_lehgth<10) { tooltip_lehgth=300; }

    var need_to_create = false;
    if (!(tooltipDiv=document.getElementById('tooltipdiv'))) {
        var tooltipDiv = document.createElement("DIV");
        need_to_create = true;
    }
    with (tooltipDiv) {
        setAttribute('id','tooltipdiv');
        className = 'tooltip';
        style.position = 'absolute';
        style.top='0px';
        style.left='0px';
        style.opacity = '.95';
        style.filter = "alpha(opacity:95)";
        style.zIndex=9999;
        style.visibility = 'hidden';

        innerHTML='&nbsp;';
    }
    
    if (need_to_create) {
        // Добавить на страницу плавающий DIV с подсказкой
        document.getElementsByTagName('body')[0].appendChild(tooltipDiv);
    }

    need_to_create = false;
    if (!(ruleDiv=document.getElementById('rulediv'))) {
        var ruleDiv = document.createElement("DIV");
        need_to_create = true;
    }
    with (ruleDiv) {
        setAttribute('id','rulediv');
        className = 'tooltip';
        style.position = 'absolute';
        style.zIndex=0;
        style.top='0px';
        style.left='0px';
        style.visibility = 'hidden';
        innerHTML='&nbsp;';
    }
    if (need_to_create) {
        // Добавить на страницу вспомогательный DIV для расчета нужного
        // размера окна подсказки
        document.getElementsByTagName('body')[0].appendChild(ruleDiv);
    }

    // Инициализировать tooltip'ы на странице
    PCL_TooltipUpdate();
}
Ответить с цитированием