messager. Сообщение в центре веб-странички.

[baytuch]

Вобщем, хочу написать небольшой скриптец, для своего сервера, который бы сообщал пользователю о возможной паузе при ожидании ответа. Например, я отсылаю почту, использую SMTP - сервер компании "Киевстар", который предоставляется для мобильных пользователей. Времмя отправки сообщения около 40 секунд. Ну, представте, зашли Вы на сайт, отправляете почту, а сервер долго не отвечает... Как и решил: нужна небольшаю програмка, которая бы сообщала пользователю о возможном ожидании. Например, такой вариант: пользователь отправляет почту. Нетерпеливо ждет)))... Ну, и, скажим, секунд через десять, ему в центре экрана высвечивается сообщение "пожалуйста подождите - обработка запроса". Тем самым сообщая пользователя о том, что процесс продолжается, но нужно немножко подождать. Вот...
Короче, полный ажур, но не могу вычислить разрешение рабочей области браузера... Точнее, не знаю как... Использовал для этой цели:
var x=screen.width
var y=screen.hight
Но, результатом этого свойства есть фактически рачим работы видеокарты, что не совсем подходит...

Вот примерный ( черновой ) вариант самого скрипта:

var i=0;
var mas="Обработка запроса - пожалуйста подождите";
var x=200;
var y=200;
var x_org=screen.width;
var y_org=screen.height;
var x=x_org/2-200;
var y=y_org/2-10;

function a(){
document.all.td.innerHTML=mas+"."
};
function b(){
document.all.td.innerHTML=mas+".."
};
function c(){
document.all.td.innerHTML=mas+"..."
};

function massage(){
i++
if (i>=3) { i=0 };
if ( i==0 ) { a() };
if ( i==1 ) { b() };
if ( i==2 ) { c() };
document.all.td.style.backgroundColor="#CCAAAA";
}

window.setTimeout("window.setInterval('massage()',500)",10000);

document.all.info.style.left=x;
document.all.info.style.top=y;

Вобщем, вопрос пока один: как узнать разрешение рабочей зоны браузера? Подскажите пожалуйста?..
На метод window.setTimeout особо не обращайте внимание. Использовал для примера...

[dobs]

А не проще дивом сделать с абсолютным позиционированием?

[bj]

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

Код: Выделить всё

<script type="text/javascript">
//IE5+, Mozilla 1.0+, Opera 7+

function getClientWidth()
{
  return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
}

function getClientHeight()
{
  return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
}

</script>

P.S. Наверное проще сделать таблицу с одной ячейкой растянуть ее на 100% во все стороны и затем поместить сообщение в центре этой ячейки (align=center valign=middle) обо всем остальном позаботится браузер

[baytuch]

Ok... Получил значение...

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

[baytuch]

Попытался оптимизировать. Вот что получилось:

JavaScript:

var mas="Обработка запроса - пожалуйста подождите";
var i=0;
var x_client=document.body.clientWidth;
var y_client=document.body.clientHeight;
var x=x_client/2-175;
var y=y_client/2-10;

function a(){
document.all.td.innerHTML=mas+"."
};
function b(){
document.all.td.innerHTML=mas+".."
};
function c(){
document.all.td.innerHTML=mas+"..."
};
function massage(){
i++;
if (i>=3) { i=0 };
if ( i==0 ) { a() };
if ( i==1 ) { b() };
if ( i==2 ) { c() };
}
function start(){
document.all.mas.style.left=x;
document.all.mas.style.top=y;
document.all.td.style.backgroundColor="#CCDDAA";
window.setInterval('massage()',500);
}

window.setTimeout("start()",10000);

html:

<table width="350" class="mas" id="mas">
<tr>
<td id="td" class="td">
</td>
</tr>
</table>

CSS:

.mas{
position:
absolute;
top: 0;
left: 0;
}

.td{
background-color: #FFFFFF;
}

Только еще не знаю, как сделать бардюрчик с помощью JavaScript... ( Так как нет такого у меня в учебнике ). Пропробую пошуршать в гугле...

[ArniXXX]

Я так понимаю речь идет об отправке формы на AJAX?

Если да то не вижу смысла все так усложнять.

1. Подключаем плагин JQuery http://jquery.com/
2. Подключаем плагин http://jquery.malsup.com/form/

Кстати файлы тоже сабмитит.

3. Где там наш my.js пишем

Код: Выделить всё

$("#myid").ajaxForm({ 
  success: function(msg){
	if(parseInt(msg)!=0)
  	{
       	// Ответ получен	   
               }
 beforeSubmit: function(msg){
	if(parseInt(msg)!=0)
  	{
       	// Блок будет запущен перед отправкой  
               }
}
 });

Собственно я не против писать все JS на каждый случай самому, но просто у меня лично это не раз уже вызывало сбои. Потому склонен использовать JQuery

[baytuch]

А что вы имеете ввиду под "усложнять"?.. Тут до AJAX'a, как до неба... Опять перемудрил... Попробую еще упростить, например, собрать несколько пользовательских функций во едино... А то как то громоздко смотритца. Хотя, зато так легче модифицировать...

ArniXXX, за библиотеку спасибо... Хотя, мне кажется, оно у меня уже есть. Просто, не дошел туда еще...

[ArniXXX]

А что вы имеете ввиду под "усложнять"?..

Усложнять в том плане что єти и многие другие задачи уже решены в таких иблиотеках как JQuery. Там все в ООП, шансов обозвать свою переменную одинаково с системной и потом чухаться день нету. Да и вобще кросбраузерность дикая штука, а об этом разработчики тоже позаботились. Вот собственно о чем я ...

[baytuch]

Да... С переменной - жесть...
А я префиксы добавляю. Ну, типа mas_x, mas_y... А вообще, Вы правы... Хотя так хочеться написать что-то свое... С нуля... Аж клава чешится... Пока копаюсь в фюжине... Этот скриптик для него, собственно... По повуду кросбраузерности, могу сказать, что меня эта вещь дико бесит, неужели невозможно придерживаться одного стандарта. Бардак какой-то... Стараюсь нечего не мудрить и сисать просто...

[baytuch]

Все... Доработал скриптик... Больше, методом "научнгого тыка" так как так и не нашел документально, как воздействоывть на ширирну рамки с JavaScript'а... Но, я обратил внимание, что большенство "переменных" имею схожие написание с CSS... То есть ширина рамки
border-width: 1 , например.

Почему-то, не удается изменить значение параметра, не указав, придваритель, его значение в CSS... На этом и застрял...

Скрипт :
var mas="Обработка запроса - пожалуйста подождите";
var i=0;
var x_client=document.body.clientWidth;
var y_client=document.body.clientHeight;
var x=x_client/2-175;
var y=y_client/2-10;

function a(){
document.all.td.innerHTML=mas+"."
};
function b(){
document.all.td.innerHTML=mas+".."
};
function c(){
document.all.td.innerHTML=mas+"..."
};
function massage(){
i++;
if (i>=3) { i=0 };
if ( i==0 ) { a() };
if ( i==1 ) { b() };
if ( i==2 ) { c() };
}
function start(){
document.all.mas.style.left=x;
document.all.mas.style.top=y;
document.all.td.style.backgroundColor="#CCDDAA";
document.all.mas.style.borderColor="black";
document.all.mas.style.borderWidth="1";
window.setInterval('massage()',500);
}

window.setTimeout("start()",10000);

CSS:
.mas{
position:
absolute;
top: 0;
left: 0;
border-color: #000000;
border-width: 0;

}

.td{
background-color: #FFFFFF;
}

html:
<table width="350" class="mas" id="mas" border="1">
<tr>
<td id="td" class="td">
</td>
</tr>
<table>

Пол ночи просидел, но доработал... Цацка, конечно... Но задача выполнена

[bj]

Почему-то, не удается изменить значение параметра, не указав, придваритель, его значение в CSS... На этом и застрял...

js может поменять только инлайн стили.

[baytuch]

Почему-то, не удается изменить значение параметра, не указав, придваритель, его значение в CSS... На этом и застрял...

js может поменять только инлайн стили.

Да?.. Спасибо, что подсказали, а то...
Прямо так в своей книжке такого не нашол. Но описано, что можно изменить значение... Ну, теперь знаю...

[baytuch]

А вот так, примерно, все это работает:
http://www.mobiluch.pl.ua/pages/massager/

[baytuch]

Во фюжен интегрировал так:
в панель футера добовил это:
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width='350' class='mas' id='mas' border='1'>
<tr>
<td id='td' class='td'>
</td>
</tr>
<table>\n";
echo "<script type='text/javascript' src='".THEME."massager.js'></script>";


CSS:
.mas{
position: absolute;
top: 0;
left: 0;
border-color: #000000;
border-width: 0;
background-color: #000000;
}

.td{
background-color: #000000;
}

Ну, и создал файл со свмим скриптом под именем massager.js соответственно...

[baytuch]

Ребята, подскажите, а событие объекта windows onbeforeunload давно паявилось ( именно этим событием инициируется скрипт ? Просто, по моему, на старой Opera ( 8.54 ) не работает... ( не работает "вертелка" в панели управления хостингом. Именно там и подсмотрел ).
Ну, у меня так записано:
windows.onbeforeunload = start;