Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.07.2017, 11:26
Интересующийся
Отправить личное сообщение для DjFuntik Посмотреть профиль Найти все сообщения от DjFuntik
 
Регистрация: 15.01.2013
Сообщений: 19

Удаление лишних объектов
Народ поможите пожалуйста. На профи ни капли не придендую, делаю одну штучку себе именно для 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

DjFuntik,
if ((tooltext=tags[j].getAttribute('tooltip')) && tags[j].className != "ready") {tags[j].className = "ready"; ToolTip(tags[j], tooltext) }
Ответить с цитированием
  #3 (permalink)  
Старый 13.07.2017, 12:26
Интересующийся
Отправить личное сообщение для DjFuntik Посмотреть профиль Найти все сообщения от DjFuntik
 
Регистрация: 15.01.2013
Сообщений: 19

Спасибо, я конечно подправил, но результат не тот что требуется.
Предложенный вариант, как я понимаю, вносит изменения в код формирования объектов, т.е. ЕСЛИ ОНИ ЕСТЬ, ТО НЕ СОЗДАВАТЬ НОВЫЕ ПОДОБНЫЕ.
Мне же нужно что-то типа .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, 13.07.2017 в 12:37.
Ответить с цитированием
  #4 (permalink)  
Старый 13.07.2017, 12:30
Интересующийся
Отправить личное сообщение для DjFuntik Посмотреть профиль Найти все сообщения от DjFuntik
 
Регистрация: 15.01.2013
Сообщений: 19

В общем, т.к. sss довольно громоздкое, то через десяток кликов в это самое sss перестают подгружаться картинки из-за того что их просто много, собственно из-за этого таким образом и разбил станицу на части чтобы можно было подгружать остальное содержимое (именно подгружать, а не загружать через новые страницы), хотелось в одной странице менять содержимое
Ответить с цитированием
  #5 (permalink)  
Старый 19.07.2017, 15:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

DjFuntik,
if(document.getElementById('tool_tip') && document.getElementById('tool_tip').parentNode) {document.getElementById('content').removeChild(document.getElementById('tool_tip'))}
Ответить с цитированием
  #6 (permalink)  
Старый 20.07.2017, 07:52
Интересующийся
Отправить личное сообщение для DjFuntik Посмотреть профиль Найти все сообщения от DjFuntik
 
Регистрация: 15.01.2013
Сообщений: 19

Спасибо, но дело в том что, подобная конструкция не сильно помогла, вродь и делает то что нужно, но вот эффект не тот. При таком варианте всплывающие окна работают, но и дивы в отладчике плодятся. А если оставить этот код без условия, то дивы перестают плодиться.... но и всплывающих окон нет, собственно, вероятно из-за этого они и не плодятся, потому что удалены все полностью, или просто не проинициализировались и не добавились....... видимо придётся полностью код выкладывать чтоб на нём можно было бы подправить (а он большой, придётся упрощать)
Ответить с цитированием
  #7 (permalink)  
Старый 20.07.2017, 08:42
Интересующийся
Отправить личное сообщение для DjFuntik Посмотреть профиль Найти все сообщения от DjFuntik
 
Регистрация: 15.01.2013
Сообщений: 19

Привожу сильно порезанный код (только самое необходимое). Можно его воткнуть в файлик 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

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>
Ответить с цитированием
  #9 (permalink)  
Старый 20.07.2017, 11:29
Интересующийся
Отправить личное сообщение для DjFuntik Посмотреть профиль Найти все сообщения от DjFuntik
 
Регистрация: 15.01.2013
Сообщений: 19

Интересно! Эффект кажется достигнут!! Буду проверять, разбираться и пытаться встроить в моё "детище", посмотрим приживётся ли оно.
Спасибо большое за помощь.
Ответить с цитированием
  #10 (permalink)  
Старый 24.07.2017, 13:55
Интересующийся
Отправить личное сообщение для DjFuntik Посмотреть профиль Найти все сообщения от DjFuntik
 
Регистрация: 15.01.2013
Сообщений: 19

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

На самом деле в функции 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)
но чёт это из области фантазёрства мне так кажется...

Последний раз редактировалось DjFuntik, 24.07.2017 в 14:07.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вызов свойств объектов из массива или объекта с параметрами Sanu0074 jQuery 4 22.05.2015 10:18
Как найти точки соприкосновения двух объектов в RaphaelJS Fatalityap Библиотеки/Тулкиты/Фреймворки 3 03.08.2012 16:33
Массив объектов или объект объектов vladlen Общие вопросы Javascript 19 30.10.2010 03:10
удаление объектов и тонкая работа с ними(помогите) digitalbrain Общие вопросы Javascript 4 28.07.2010 21:17
Быстрый поиск объектов Shasoft Общие вопросы Javascript 7 30.07.2009 05:28