Форум

DjFuntik · #1 (**permalink**) 12.07.2017, 11:26

Народ поможите пожалуйста. На профи ни капли не придендую, делаю одну штучку себе именно для IE (не пинайте за него), она работает, НО, как всегда есть своё НО.

В шапке пишу такой код (кратко суть - при наведении на картинку рисует её увеличенное изображение)

ToolTip.offsetX = - (10 + IMG_size + 10)
ToolTip.offsetY = 17

function ToolTip(obj, text)
{
 if (!obj || obj.nodeType != 1) { throw "Illigal argument exception" }
 var tip = document.createElement("DIV")
 tip.className = 'tool_tip'
 tip.innerHTML = "<CENTER>Моё окно</CENTER>"
 tip.style.top = 10
 tip.style.left = 10
 document.body.appendChild(tip)

 obj.onmouseout = function (ev)
  { tip.style.visibility = 'hidden' }
 obj.onmousemove = function(ev)
  {
   tip.style.visibility = 'visible'
   if (window.event) ev = window.event
   if(ev.clientX+20+tip.offsetWidth+18 > document.body.clientWidth) { ToolTip.offsetX =- tip.offsetWidth - 20 } else { ToolTip.offsetX = 20 }
   if(ev.clientY+10+tip.offsetHeight+0 > document.body.clientHeight) { ToolTip.offsetY =- tip.offsetHeight - 10 } else { ToolTip.offsetY = 10 }
   tip.style.left = ev.clientX + document.body.scrollLeft + ToolTip.offsetX
   tip.style.top = ev.clientY + document.body.scrollTop + ToolTip.offsetY 
  }
}

function initToolTips()
{
  // предположительно тут надо как-то удалять старые объекты, прежде чем создавать новые

 var tags, tooltext
 for(var i = 0; i < arguments.length; i++)
  {
   tags = document.body.getElementsByTagName(arguments[i])
   for (var j = 0; j < tags.length; j++)
    if ((tooltext=tags[j].getAttribute('tooltip'))) { ToolTip(tags[j], tooltext) }
  }
}

В теле страницы скриптом вписываю картинку(и)

sss.innerHTML("<IMG tooltip='" + screens + "' src='" + screens + ".jpg'>")
....
initToolTips("img") // для инициализации всплывающих окошек

Ну и вот это самое тело формируется динамически по клику повторно переписывается через innerHTML с последующей инициализацией. Зачем так реализовано это не обсуждается, т.к. этот пример очень сильно обрезан для демонстрации только основного кода. А теперь суть самой проблемы!!!
При первой инициализации в теле страницы (если смотреть отладчиком) появляется DIV, ну как бы всё хорошо,так и должно быть. При повторной инициализации в теле страницы уже два DIV`а, ну и так далее по нарастающей. Т.к. истестна я гружу не только одну картинку, а большой объём контента, то страница разрастается очень сильно (видно только в отладчике, внешне всё замечательно) и сжирает кучу ресурсов. Потому предполагаю, что при инициализации надо как-то убирать ранее добавленные объекты!
Не силён вообще я пока что в этом, я только учусь, поможите

рони · #2 (**permalink**) 12.07.2017, 16:48

DjFuntik,

if ((tooltext=tags[j].getAttribute('tooltip')) && tags[j].className != "ready") {tags[j].className = "ready"; ToolTip(tags[j], tooltext) }

DjFuntik · #3 (**permalink**) 13.07.2017, 12:26

Спасибо, я конечно подправил, но результат не тот что требуется.
Предложенный вариант, как я понимаю, вносит изменения в код формирования объектов, т.е. ЕСЛИ ОНИ ЕСТЬ, ТО НЕ СОЗДАВАТЬ НОВЫЕ ПОДОБНЫЕ.
Мне же нужно что-то типа .removeChild, чтобы ранее добавленное через appendChild() удалять, перед тем как новые добавлять на страницу.
Чувствую, надо поподробнее описать сам код.

<HTML>
<HEAD>
<SCRIPT language=JavaScript>

ToolTip.offsetX = - (10 + IMG_size + 10)
ToolTip.offsetY = 17

function ToolTip(obj, text)
 { ... см.пост №1 ... }

function initToolTips()
{
 var tags, tooltext
 for(var i = 0; i < arguments.length; i++)
  {
   tags = document.body.getElementsByTagName(arguments[i])
   for (var j = 0; j < tags.length; j++)
    if ((tooltext = tags[j].getAttribute('tooltip')) && tags[j].className != "ready")
     { tags[j].className = "ready"; ToolTip(tags[j], tooltext) }
   }
}

function proc(n)
{
 //тут естестно не одна картинка, а довольно большая страница формирующаяся динамически
  text = "<IMG tooltip='" + screens + "' src='screens"+n + ".jpg'>"
  sss.innerHTML = text
  initToolTips("img") // для инициализации всплывающих окошек на обновлённом содержимом страницы
}
</SCRIPT>
</HEAD>

<BODY>
<IMG scr="screens1" onCklick=proc(1)>
<IMG scr="screens2" onCklick=proc(2)>
<IMG scr="screens3" onCklick=proc(3)>
<DIV id='sss'></DIV>
<SCRIPT language=JavaScript>proc(1)<SCRIPT> <!-- чтоб сразу п1 выполнился-->
</BODY>
</HTML>

DjFuntik · #4 (**permalink**) 13.07.2017, 12:30

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

рони · #5 (**permalink**) 19.07.2017, 15:57

DjFuntik,

if(document.getElementById('tool_tip') && document.getElementById('tool_tip').parentNode) {document.getElementById('content').removeChild(document.getElementById('tool_tip'))}

DjFuntik · #6 (**permalink**) 20.07.2017, 07:52

Спасибо, но дело в том что, подобная конструкция не сильно помогла, вродь и делает то что нужно, но вот эффект не тот. При таком варианте всплывающие окна работают, но и дивы в отладчике плодятся. А если оставить этот код без условия, то дивы перестают плодиться.... но и всплывающих окон нет, собственно, вероятно из-за этого они и не плодятся, потому что удалены все полностью, или просто не проинициализировались и не добавились....... видимо придётся полностью код выкладывать чтоб на нём можно было бы подправить (а он большой, придётся упрощать)

DjFuntik · #7 (**permalink**) 20.07.2017, 08:42

Привожу сильно порезанный код (только самое необходимое). Можно его воткнуть в файлик HTML и открыть браузером. Предназначен только для IE8 !! (без вариантов, только так).
При такой реализации если смотреть через отладчик, то после вызова proc(n) в сам документ добавляется несколько узлов DIV, при последующем вызове proc(n+1) добавляется ещё несколько узлов DIV и так каждый раз. В результате страница разрастается, отображается только то что требуется, а в отладчике присутствуют ВСЕ добавленные узлы. Хотелось бы чтоб при очередном вызове proc() не просто создавались новые узлы, а предварительно удалялись старые узлы!

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<STYLE>
IMG {border-width:0px; margin: 3px; align: center}
.tool_tip {	border-right: 1px solid; border-top: 1px solid; visibility: hidden; font: 900 15px tahoma; border-left: 2px solid; border-bottom: 2px solid; letter-spacing: 2px; position: absolute}
</STYLE>
<SCRIPT language=JavaScript>
ToolTip.offsetX = - (10 + 400 + 10)
ToolTip.offsetY = 17

function ToolTip(obj, text)
{
 if (!obj || obj.nodeType != 1) { throw "Illigal argument exception" }
 var tip = document.createElement("DIV")
 tip.className = 'tool_tip'
 tip.innerHTML = "<CENTER><FONT size=+3>"+text+"</FONT><BR><IMG height=400 width=400 src='"+text+".jpg'><IMG height=400 width=400 src='"+text+".jpg'></CENTER>"
 tip.style.top = 10
 tip.style.left = 10
 document.body.appendChild(tip)
 obj.onmouseout = function (ev)
  { tip.style.visibility = 'hidden' }
 obj.onmousemove = function(ev)
  {
   tip.style.visibility = 'visible'
   if (window.event) ev = window.event
   if (ev.clientX+20+tip.offsetWidth+18 > document.body.clientWidth) { ToolTip.offsetX =- tip.offsetWidth-20 } else { ToolTip.offsetX = 20 }
   if (ev.clientY+10+tip.offsetHeight+0 > document.body.clientHeight) { ToolTip.offsetY =- tip.offsetHeight-10 } else { ToolTip.offsetY = 10 }
   tip.style.left = ev.clientX + document.body.scrollLeft + ToolTip.offsetX
   tip.style.top = ev.clientY + document.body.scrollTop + ToolTip.offsetY
  }
}

function initToolTips()
{
//if(document.getElementById('tool_tip') && document.getElementById('tool_tip').parentNode) { document.getElementById('content').removeChild(document.getElementById('tool_tip')) }
 var tags, tooltext
 for(var i = 0; i < arguments.length; i++)
  {
   tags = document.body.getElementsByTagName(arguments[i])
   for (var j = 0; j < tags.length; j++)
    if ((tooltext = tags[j].getAttribute('tooltip')) && tags[j].className != "ready") { tags[j].className = "ready"; ToolTip(tags[j], tooltext) }
  }
}

var colon = new Array()
function proc(js)
{
 switch (js)
  {
   case "62": colon = ["66","А","Б","В","Г","Д"]; break
   case "96": colon = ["98","Д","Б","В","Г","А"]; break
   case "01": colon = ["04","А","Г","В","Б","Д"]; break
  }
 os = ""
 for (var i = 1; i < colon.length; i++) { os += "<IMG tooltip='" + colon[i] + "' src='" + colon[i] + ".jpg'>" }
 ts.innerHTML = "<DIV id='content'>" + os + "</DIV>"
 initToolTips("img")
}
</SCRIPT>
</HEAD>

<BODY>
<IMG src='screens1.jpg' onClick=proc('62')> <IMG src='screens2.jpg' onClick=proc('96')> <IMG src='screens3.jpg' onClick=proc('01')>
<DIV id='ts'>Область загрузки<DIV><SCRIPT language=JavaScript>proc('62')</SCRIPT>
</BODY>
</HTML>

рони · #8 (**permalink**) 20.07.2017, 10:50

DjFuntik,

<!DOCTYPE html>

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <style>
  IMG{
    border-width:0px;
    margin:3px;
    align:center;
  }

  .tool_tip{
    border-right:1px solid;
    border-top:1px solid;
    visibility:hidden;
    font:900 15px tahoma;
    border-left:2px solid;
    border-bottom:2px solid;
    letter-spacing:2px;
    position:absolute;
  }
  </style>
  <script>

ToolTip.offsetX = -(10 + 400 + 10);
ToolTip.offsetY = 17;

var arrT = [], arrImg = [];

function ToolTip(obj, text) {
    if (!obj || obj.nodeType != 1) throw "Illigal argument exception";
    var tip = document.createElement("DIV");
    arrT.push(tip);
    tip.className = "tool_tip";
    tip.innerHTML = "<CENTER><FONT size=+3>" + text + "</FONT><BR><IMG height=400 width=400 src='" + text + ".jpg'><IMG height=400 width=400 src='" + text + ".jpg'></CENTER>";
    tip.style.top = 10;
    tip.style.left = 10;
    document.body.appendChild(tip);
    obj.onmouseout = function(ev) {
        tip.style.visibility = "hidden"
    };
    obj.onmousemove = function(ev) {
        tip.style.visibility = "visible";
        if (window.event) ev = window.event;
        if (ev.clientX + 20 + tip.offsetWidth + 18 > document.body.clientWidth) ToolTip.offsetX = -tip.offsetWidth - 20;
        else ToolTip.offsetX = 20;
        if (ev.clientY + 10 + tip.offsetHeight + 0 > document.body.clientHeight) ToolTip.offsetY = -tip.offsetHeight - 10;
        else ToolTip.offsetY = 10;
        tip.style.left = ev.clientX + document.body.scrollLeft + ToolTip.offsetX;
        tip.style.top = ev.clientY + document.body.scrollTop + ToolTip.offsetY
    }
}
var colon = new Array;

function proc(js) {
    for (var i = 0; i < arrT.length; i++) {
        arrT[i].parentNode.removeChild(arrT[i]);
        arrImg[i].parentNode.removeChild(arrImg[i])
    }
    arrT = [], arrImg = [];
    switch (js) {
        case "62":
            colon = ["66","А","Б","В","Г","Д"];
            break;
        case "96":
            colon = ["98","Д","Б","В","Г","А"];
            break;
        case "01":
            colon = ["04","А","Г","В","Б","Д"];
            break
    }
    
    for (var i = 1; i < colon.length; i++) {
        var img = document.createElement("img");
        arrImg.push(img);
        img.src = colon[i];
        ts.appendChild(img);
        ToolTip(img, colon[i])
    }
};
  </script>

  <title></title>
</head>

<body>
  <img src='screens1.jpg' onclick="proc('62')">
  <img src='screens2.jpg' onclick="proc('96')">
  <img src='screens3.jpg' onclick="proc('01')">

  <div id='ts'></div><script>proc('62')</script>
</body>
</html>

DjFuntik · #9 (**permalink**) 20.07.2017, 11:29

Интересно! Эффект кажется достигнут!! Буду проверять, разбираться и пытаться встроить в моё "детище", посмотрим приживётся ли оно.
Спасибо большое за помощь.

DjFuntik · #10 (**permalink**) 24.07.2017, 13:55

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

На самом деле в функции proc(js) вместо SWITCH(js) прописана процедура RunJava, а в файле загружаемом этой функцией прописан не массив, а функция с этим самым массивом вместо аргумента, т.е. вот так stroka (["66","А","Б","В","Г","Д"]) (опять же строк таких много и массив сам по себе тоже большой, и аргументы только для упрощения указал как буквы односимвольные)

function proc(js) {
    for (var i = 0; i < arrT.length; i++) {
        arrT[i].parentNode.removeChild(arrT[i]);
        arrImg[i].parentNode.removeChild(arrImg[i])
    }
    arrT = [], arrImg = [];
    os = ""
    [B]RunJava(resurs)[/B]
[I]//    switch (js) {
//        case "62": colon = ["66","А","Б","В","Г","Д"]; break;
//        case "96": colon = ["98","Д","Б","В","Г","А"]; break;
//        case "01": colon = ["04","А","Г","В","Б","Д"]; break
//    }[/I]

    for (var i = 1; i < colon.length; i++)
     {
        var img = document.createElement("img");
        arrImg.push(img);
        img.src = colon[i]+".jpg";
        ts.appendChild(img);
        ToolTip(img, colon[i])
    }
  ts.innerHTML = os
}

function RunJava(resurs)
{
 var b = fso.FileExists(resurs)
 if (b) { eval(fso.OpenTextFile(resurs, 1, 0).ReadAll()) }
}

function stroka(colon)
{
// тут формируется строка таблицы с картинками из массива colon. (опять же не все элементы массива содержат картинку)
os += "содержимое"
}

файл resurs.js

stroka ([["66","#"],["+","А1"],["+","Б1"],["-","В8"],["-","Г4"],["+","Д5"]])
stroka ([["67","#"],["+","А2"],["-","Б3"],["+","В7"],["+","Г9"],["-","Д1"]])
stroka ([["68","#"],["+","А3"],["+","Б5"],["-","В1"],["+","Г2"],["+","Д8"]])

вот как раз те которые "-" они без картинок.
пытался в процедуру stroka() добавить после каждого добавляемого IMG дописать
var img = document.createElement("img");
arrImg.push(img);
img.src = mmm+".jpg";
ts.appendChild(img);
ToolTip(img, mmm)
но чёт это из области фантазёрства мне так кажется...

Форум

Справочник

Discord чат

Курсы javascript