Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Пожалуйста помогите с высотой. (https://javascript.ru/forum/events/46986-pozhalujjsta-pomogite-s-vysotojj.html)

pavelrer 03.05.2014 15:58

Пожалуйста помогите с высотой.
 
Господа, помогите плиз.
Сразу скажу, не спец в javascript, занимаюсь программированием plc.

Вот какая задача, пишу cgi для plc, страничка ориентирована по центру, тянется по ширине в зависимости от useragenta которы определяет сам плк
Вот так

<script type="text/javascript">
var wi=538;
$(function(){$(".mw").width(wi-20);$("#m").width(wi);$(".fx").width(wi);$(".zz"). width(wi);});
</script> <!-- Делаем ширину в одной переменной -->

В общем просто при загрузки странички одноразыва меняется переменная wi=538
Т.к у меня не веб сервер с страничкой, а страничка формируется в памяти плк из кусков меня это устраивает,
Вот это можно как то записать покороче? $(function(){$(".mw").width(wi-20);$("#m").width(wi);$(".fx").width(wi);$(".zz"). width(wi);});
Как то перечислить классы? (борьба за память)

Далее основной вопрос растягивание по высоте,
Все вроде сделал без скриптов (в опере конечно все плохо, ну и хай на нее) но если у меня контент внутри таблички а она в диве - больше высоты окна все хорошо,
Но вот если меньше, все очень не хорошо.
Сверху и снизу окна у меня две менюшки с фиксированным расположением тут и кроется засада, с верхней все в порядке а вот с нижний если контента мало в таблички
табличка не тянется до конца.
Контент в таблички располагается по середки высоты

<div id="oh">
<table class="zz" cellpadding="12" style="height:100%">

Вот решил как-то так

<script>
var h=window.innerHeight||document.documentElement.cli entHeight;
$(document).ready(function(){$("#oh").height(h - 28)});
</script>

-28 как раз делает мне div id=oh равный высоте окна минус налипающее нижнее меню. Все хорошо
Но это работает только при загрузки странички, а вот при ресайзе не фига не работает, надо F5 жать.

Если вот так

$(document).load(function(){$("#oh").height(h - 28)});

То тут не работает height(h - 28) просто 100%, а может и воще не работает?

Как решить данную задачу? ( на оперу плевать )

Вообще если убрать <div id="oh"> и скрипт и как-то вот в этом

<table class="zz" cellpadding="12" style="height:100%">

Вот это превратить style="height:100%", отнять -28px тож бы подошло, и ресайз бы работал.

Шапка вот такая

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

Без нее таблички тянутся с глюками, почему-то на нее ругается валидатор?

Если вот это <table class="zz" cellpadding="12" style="height:100%"> заменить на <table class="zz" cellpadding="12" height=100%>
Тоже не тянется причем style="height:100%" использую только в одном месте, в остальных height=100% работает.

У меня очень ограничен вес всей странички, из за свойств сокетов plc, хочется как то по проше и покороче решить, без огородов.

Спасибо.

danik.js 03.05.2014 16:21

Цитата:

Сообщение от pavelrer
Как то перечислить классы? (борьба за память)

Забыл что-ли? Ок, спасем твою память. Селекторы можно перечислять через запятую: $('.mv, .fx'). Больше не забывай!

danik.js 03.05.2014 16:25

Много текста вперемежку с неформатированным кодом. Читать не стал. Думаю никто не станет ))
Накидай тестовый пример например на jsfiddle.net и кратко опиши что тебе не нравится.

pavelrer 03.05.2014 17:10

на jsfiddle.net как то криво отображает, или у меня руки крюки.
Вот весь код.
Если открыть эту страничку все ок, если изменить окно по высоте
все плохо, если нажать F5 опять все хорошо.
Хочу ресайз по высоте без F5.

Если выбросить

<script>                                                                                                                 
	var h=window.innerHeight||document.documentElement.clientHeight;
	$(document).ready(function(){$("#oh").height(h -28)});              
</script>


Все хорошо но нижнее меню налипает на контент.

Спасибо.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>PLC</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<meta name="viewport" content="user-scalable=no,width=device-width" />  <!-- Отключаем зум IPhone, IPade -->


<script>                                                                                                                 
	var h=window.innerHeight||document.documentElement.clientHeight;
	$(document).ready(function(){$("#oh").height(h -28)});              
</script>

<script type="text/javascript">var wi=538;$(function(){$(".mw").width(wi-20);$("#m").width(wi);$(".fx").width(wi);$(".zz").width(wi);});</script>  <!-- Делаем ширину в одной переменной -->


<style type="text/css">
body{background:linear-gradient(to top,#fefcea,#f1da36);background:-webkit-linear-gradient(top,#fefcea,#f1da36)}

#di_z{color:#fff;border-color:#aaaaaa;background-color:#444;height:100%}
#di_a{color:#fff;border-color:#aaaaaa;background-color:#ccc;text-align:center}
#m{margin:0 auto}

.fx{position:fixed}
.ft{top:-6px;z-index:2}
.fb{bottom:-6px}
.a,.i,.j{border-width:1px;border-radius:4px;color:#000000;border-color:#aaaaaa;background-color:#eee6CC}
.b,.i{width:45%;text-align:left}
.c,.j{width:22%}
.d,.k,.m,.n,.kx{text-align:center;width:100%}
.e,.k{border-width:2px;color:#fff;border-color:#aaaaaa;background-color:#3336CC}
.f,.m,.kx{border-width:1px;border-radius:5px;color:#fff111;border-color:#aaaaaa;background-color:#3336CC;cursor:default}
.g,.k,.m,.n,.q,.kx{border-style:solid}
.h,.n{border-width:2px;border-radius:5px;padding:1px}
.l,.k,.i,.j,.q{border-radius:5px}
.o,.kx{text-decoration:underline}
.p,.q{width:100%;height:100%}
.kk{background-color:#fff;border-color:#fff;border-width:1px;border-radius:5px}
#c{border-width:1px;color:#fff111;border-color:#aaaaaa;background-color:#fff6CC}

.kx{background-color:#828}

</style>


</head>
<body onselectstart="return false"><div id="m">

<!-- Верхнее меню Begin -->
<div class="fx ft"><table class="mw" align="center"><tr>
<td><table class="m" onMouseOver="className='kx'" onMouseOut="className='m'"><tr><td onClick="document.location='./status.html'">Статус</td></tr></table></td>
<td><table class="m" onMouseOver="className='kx'" onMouseOut="className='m'"><tr><td onClick="document.location='./setting.html'">Настройки</td></tr></table></td>
<td><table class="m" onMouseOver="className='kx'" onMouseOut="className='m'"><tr><td onClick="document.location='./help.html'">Помощь</td></tr></table></td>
</tr></table></div>
<!-- Верхнее меню End -->

<div id="oh">

<table><tr><td> </td></tr></table>

<table class="zz"  cellpadding="12" style="height:100%">

<tr><td>

<table id="c" class="q"><tr><td align="center">

<table class="p d"><tr><td>

<table id="di_z" class="n"><tr><td>

Help content

</td></tr></table>

</td></tr></table>
</td></tr></table>
</td></tr></table>
</div>
<!-- Нижнее меню Begin -->
<div class="fx fb"><table class="mw" align="center"><tr>
<td><table class="m"><tr><td>Copyright © 2014 PLC Systems, Inc.</td></tr></table></td>
</tr></table></div>
<!-- Нижнее меню End -->
</div></body></html>

рони 03.05.2014 17:21

pavelrer,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

pavelrer 03.05.2014 17:36

Ну думаю так? не знаю

jsnb 03.05.2014 17:52

Особо в коде не разбирался, но насколько я понял надо при ресайзе выравнивать элементы так же как оно выравнивается при загрузке. Тогдо можно в верхнем блоке script сделать как-то так:
$(document).ready(
      function(){
        var h=window.innerHeight||document.documentElement.clientHeight;
        $("#oh").height(h -28);
        $(window).resize(function(){
          var h=window.innerHeight||document.documentElement.clientHeight;
          $("#oh").height(h -28);
        });
      }
    );

danik.js 03.05.2014 17:54

Цитата:

Сообщение от pavelrer
Вот какая задача, пишу cgi для plc, страничка ориентирована по центру, тянется по ширине в зависимости от useragenta которы определяет сам плк

Нафига так делать? Это уже ошибка.
Зачем проставлять ширину скриптом? зачем проставлять ширину дочерним элементам, если можно проставить width: 100% в стилях. И то это нужно только абсолютно спозиционированным элементам.
Высоту контента опять же нет смысла на js задавать.

Короче, это извращение делать все это на js. Такие вещи делаются на чистом css.

Для высоты можешь использовать таблицу с заданной высотой ячеек либо box-sizing:border-box + padding

danik.js 03.05.2014 17:56

Ой, сколько тут извращенцев собралось...pavelrer, поковыряйся с css. Если не осилишь - так и быть, подмогу (если другие не подмогут).

pavelrer 03.05.2014 18:35

danik.js - огромное, огромноофигительнобольшое СПАСИБО!
Даже опера победилась.
СПАСИБО!

мне жена тож говорит, что я иногда изврат.. хи хи

Про ширину, пока это единственный способ который мне подходит.
Хочу, шоб моя железка работала не только на пк, но и на мобильниках,
а помимо того на теликах, дуньках, плейстейшинах и.т.д

И на пк мне во всю ширь пока не нужно.

Вы может правы, а может нет?
Заведу еще одну тему по оптимизации трафика, возможно вы увидете от чего так и посоветуете что-то.
Я чурбан в html, css, js.
Что на гуглил то и своял.

Еще раз ОГРОМНОЕ СПАСИБО!!!


Часовой пояс GMT +3, время: 17:34.