Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Открытие окна с автоматическим изменением размеров

Автор: korob2001 8.5.2005, 03:49

Привет!!!
Пишу хелп для одной формы, возле каждого поля формы есть изображение с буквой ( i ), при нажатии на неё открывается новое окно, для этого окна программа на Perl генерирует HTML код, тело которого содержит только одну таблицу, внутри которой и находится сам хелп. Всё вроде чудно работает, но так как объём помощи для каждого поля разный, соответственно и высота таблицы тоже разная, нужно как-то автоматически изменять размер окна, в зависимости от его содержимого.
Вопрос:
Можно ли каким-нить способом открывать окно, с помощью window.open(), которое будет обхватывать эту таблицу так, что бы вокруг неё не оставалось пустого места???

Заранее спасибо,
Денис

Автор: Aliance 8.5.2005, 09:07

Читаем размеры таблицы, подставляем их в третий аргумент метода:
http://www.quirksmode.org/viewport/compatibility.html
http://forum.vingrad.ru/index.php?showtopic=37271
http://forum.vingrad.ru/index.php?showtopic=2785
http://forum.vingrad.ru/index.php?showtopic=4463
http://forum.vingrad.ru/index.php?showtopic=2786
Там можно найти полезный вещи. Не получится - пиши. И желательно выложи код... Код открытия окна и HTML код, получаемый браузером при обработке perl скрипта

Автор: korob2001 8.5.2005, 10:59

Aliance - да нет, меня не разрешение интересует.
Ладно поясню немного иначе:
Есть некое изображение, на событие Click этого изображения вешаю такой код:

Код


onclick="window.open('/cgi-bin/nl/sys/faq.pl?faq=1','10','width=450 height=280 resizable=no, menubar=no, scrollbars=auto, location=no, status=no, toolbar=no'); return false"

Открывается, к примеру, такая страничка:

Код


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
     <head>
        <title> FAQ</title>
     </head>
<body leftmargin="0" rightmargin="0" bottommargin="0" bgcolor="#ccccff" topmargin="0">
     <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#9999cc">
           <tr><td width="100%" bgcolor="#0000cc">
                   <table width="100%" border="0" cellspacing="0" cellpadding="5">
                           <tr><td>
                              <b class="mnutit">Help page №1</b>
                           </td></tr>
                   </table>
           </td><td width="1" rowspan="2" bgcolor="#000000">
                    <img src="/mob/img/no.gif" width="1">
           </td></tr>
           <tr><td width="100%">
                   <table width="100%" border="0" cellspacing="0" cellpadding="5">
                              <tr><td align="left" bgcolor="#9999cc">
                                    <b><font class='small'>В поле Merk вы должны указать марку
                                      вашего автомобиля, как показано на рисунке ниже:</font></b>
                                     <br><br>
                                    <img src="/mob/faqimg/veld_merk.gif" border='0'>
                                   <br><br>
                                    
                                   <hr color="#0000cc" style="border-weight: 1px" />
                              <form>
                    <input type="button" value="Закрыть окно" onclick="window.close()class="but" />
                   </form>
                  </td></tr>
                  </table>
          </td></tr>
     </table>
</body></html>

Так вот, из первого кода видно, что высота нового окна height=280, а мне нужно что бы эта высота соответствовала высоте таблицы, второго кода, т.е. что бы не оставалось пустого места внизу открываемого окна.

Автор: Aliance 8.5.2005, 13:08

Цитата(korob2001 @ 8.5.2005, 11:59)

да нет, меня не разрешение интересует.

иам не только разрешение. Там есть и размеры блока - например scrollLeft

korob2001
Вот, посмотри, выбири что тебе нужно. Я бы советовал бы scrollHeight:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script type="text/javascript" language="JavaScript">
<!--
function showHeight(id) {
 var table = document.getElementById(id);
 var text = "scrollHeight: "+table.scrollHeight;
 text += "\ninnerHeight: "+table.innerHeight;
 text += "\nclientHeight: "+table.clientHeight;
 text += "\noffsetHeight: "+table.offsetHeight;
 alert(text);
}
// -->
</SCRIPT>
</HEAD>

<BODY>

<TABLE border=1 id="mytable">
<TR>
<TD>111</TD>
<TD>22222</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4444444444</TD>
</TR>
</TABLE>

<BR /><p><INPUT type="button" value="^^^ Посмотреть высоту таблицы ^^^" onclick="showHeight('mytable')" /></p>

</BODY>
</HTML>

Автор: Sardar 8.5.2005, 16:18

korob2001 узнаёшь свою высоту как показал Aliance, либо сам решаешь какая высота лучше, затем вызываем http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/resizeto.asp, тем самым подгоняем размер окна.

Автор: korob2001 9.5.2005, 05:48

Спасибо, вроде немного понял, но видимо не до конца.

Выношу в отдельный файл main.js, такую функцию:

Код


function selfResizer( id ) {
     table = document.getElementById( id );
     h = table.scrollHeight;
     // Так как ширина всегда остаётся 450, изменяю только высоту
     self.resizeTo(450, h);
}

Вешаю её на событие onLoad открываемого окна <body onLoad="selfResizer('s')">, где s - id таблицы, по которой мне нужно отрегулировать размер окна <table id="s">, но почему-то всё эта байда не работает smile

. Думаю проблема в self, насколько я понимаю это объект текущего окна. Пробовал написать последнюю строку и так: window.resizeTo(450, h); smile

Что не так???

Автор: Sardar 9.5.2005, 11:55

self и window указывают на текущее окно(синонимы). Судя по коду всё правильно, как "трабла" себя проявляет?

Автор: korob2001 9.5.2005, 14:05

Во, вроде заработало, просто я тестировал похоже не с тем окном. А почему этот код не изменяет размеры, если окно модальное???

Открываю окно так:

Код


function winOpener( id, urlz ) {
       window.showModalDialog( urlz,[], "dialogHeight: 50px; dialogWidth: 450px; dialogHide: yes; help=no; status=no; edge=raised; unadorned=yes; scroll=no");
       return false;
}

затем в на onLoad только что открытого окна вешаю тот же код:

Код


function selfResizer( id ) {
     table = document.getElementById( id );
     h = table.scrollHeight + 30;
     window.resizeTo(450, h);
}

Но размеры его не изменяются, хотя если заменить строку кода, которая отрывает модальное окно на window.open(.....) (обычное окно), то всё работает.

Просто мне желательно, что бы эти окна открывались как модальные, так как это делаю в виде СПРАВКИ, чел не понял что делать с тем или иным полем, открыл окно, прочитал закрыл.

Автор: Sardar 9.5.2005, 17:09

Цитата(korob2001 @ 9.5.2005, 13:05)

А почему этот код не изменяет размеры, если окно модальное???

Возможно это фича, модальное окно открывается, останавливая исполнение и лочиться в размерах. Попробуй не задать размеры(dialog(Width|Height)) при открытии окна.

Цитата(korob2001 @ 9.5.2005, 13:05)

ак как это делаю в виде СПРАВКИ, чел не понял что делать с тем или иным полем, открыл окно, прочитал закрыл.

Почему справка должна открываться в модальном окне? Представь что я читаю справку и выполняю по шагам, что там написанно, не закрывая окна. С модальным окном так не получиться, йзеру придётся часто окно открывать-читат и закрыватЬ-работать, пока его это не задолбает smile

Автор: Aliance 9.5.2005, 17:14

Да и потом работать они будут только в IE.

Автор: korob2001 9.5.2005, 20:03

Цитата

Попробуй не задать размеры(dialog(Width|Height)) при открытии окна.

Не изменяет размеры модальных окон. smile

Цитата

Почему справка должна открываться в модальном окне?

Каждое поле имеет свою справку, которую генерирует один и тот же Perl скрипт, допустим юзер вызвал справку для первого поля, окно отрылось, он прочитал её и вместо того, что бы закрыть окно справки, он просто уберает с него фокус. Затем он вызывает справку для какого-нить следующего поля, но так как окно уже открыто, справка загрузится в это окно, проблема в том, что оно так и остаётся свёрнутым, информация в нём правда меняется, но нужно не забыть, что окно было опущено, а не закрыто. Иначе он даже не заметит, что справка была вызвана и показана.
Я вот думал сначала, узнать открыто ли окно спавки или нет, если да, то загружать в него следующую справку и тут же переводить на него фокус. Тогда спавка будет появляться не зависимо от того было ли окно свёонуто или закрыто. Затем подумал ещё чуток и вот до чего додумался:
Так как код, который изменяет размеры окна, вызывается из открываемого окна, т.е. этот код:

Код


function selfResizer( id ) {
     table = document.getElementById( id );
     h = table.scrollHeight + 30;
     window.resizeTo(450, h);
}

То решил при каждом вызове данной функции просто переводить фокус на текущее окно, т.е. на окно справки.

Код


function selfResizer( id ) {
     self.focus();
     table = document.getElementById( id );
     h = table.scrollHeight + 30;
     window.resizeTo(450, h);
}

Теперь даже если окно было свёрнуто, а не закрыто, то при последующем вызове оно получает фокус, что и было нужно. Потому нужда в модальных окнах отпала сама собой.

Всем большое спасибо, очень помогли.

Автор: Aliance 9.5.2005, 21:19

Цитата(korob2001 @ 9.5.2005, 21:03)

Используй обычные окна. Просто глянь http://forum.vingrad.ru/index.php?showtopic=44559 и там есть то, что тебе нужно:

Код


var newWindow;
function makeNewWindow(url) {
    if (!newWindow || newWindow.closed) {
        newWindow = window.open(/* твои параметры */);
    } else {
        // окно уже существсует => просто передаем ему фокус
        newWindow.focus();
    }
}

Автор: korob2001 9.5.2005, 21:59

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

Код


function selfResizer( id ) {
     self.focus();
     table = document.getElementById( id );
     h = table.scrollHeight + 30;
     window.resizeTo(450, h);
}

Эта функция висит на событии onLoad, документа, который подгружается в окне. Другими словами, если окно уже открыто, то при клике на следующей кнопке HELP в него загружается нужная справка. Текущее, т.е. окно в котором выводится сама справка, получает фокус и затем меняет свои размеры в зависимости от размера единственной таблицы текущего документа. Если же окно было закрыто, то просто открывается окно со справкой, затем оно получает фокус и меняет свои размеры.

Всё работает на ура. ;))))
Ещё раз спасибо.

Автор: Vigoroso 10.4.2008, 12:15

Не могу подогнать размер содержимого под размер окна,
т.е. всякий раз при генирации странички она может быть наполнена различным кол-ом онформации,
я не знаю её отчный размеров,
как сделать так чтобы каждый раз окно рисовалось красиво?

Автор: bars80080 10.4.2008, 12:54

вообще это нормально, что информация подстраивается под размер окна, а не наоборот
если вы знаете объём инфо, то можно при открытии окна задавать предполагаемые размеры, если не знаете, то можно js определить, скажем местоположение контрольного блочка, т.е.

информация выводится в окне в каком-нибудь диве

Код

<div id="info">
help information help information help information help information help information 
help information help information help information help information help information 
<div id="control"></div>
</div>

определяем положение блока control (вроде offsetTop), и ресайз окна в нужную сторону

Автор: Vigoroso 10.4.2008, 14:03

Цитата(bars80080 @ 10.4.2008, 12:54)

Код

<div id="info">
help information help information help information help information help information 
help information help information help information help information help information 
<div id="control"></div>
</div>

определяем положение блока control (вроде offsetTop), и ресайз окна в нужную сторону

хорошая идея, сейчас попробую

Автор: Vigoroso 10.4.2008, 14:24

если бы только offsetTop рабоат в IE smile