03.05.2014, 15:58
|
Интересующийся
|
|
Регистрация: 03.05.2014
Сообщений: 26
|
|
Пожалуйста помогите с высотой.
Господа, помогите плиз.
Сразу скажу, не спец в 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, хочется как то по проше и покороче решить, без огородов.
Спасибо.
|
|
03.05.2014, 16:21
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
Сообщение от pavelrer
|
Как то перечислить классы? (борьба за память)
|
Забыл что-ли? Ок, спасем твою память. Селекторы можно перечислять через запятую: $('.mv, .fx'). Больше не забывай!
__________________
В личку только с интересными предложениями
|
|
03.05.2014, 16:25
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
Много текста вперемежку с неформатированным кодом. Читать не стал. Думаю никто не станет ))
Накидай тестовый пример например на jsfiddle.net и кратко опиши что тебе не нравится.
__________________
В личку только с интересными предложениями
|
|
03.05.2014, 17:10
|
Интересующийся
|
|
Регистрация: 03.05.2014
Сообщений: 26
|
|
на 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>
Последний раз редактировалось pavelrer, 03.05.2014 в 17:51.
|
|
03.05.2014, 17:21
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
pavelrer,
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
03.05.2014, 17:36
|
Интересующийся
|
|
Регистрация: 03.05.2014
Сообщений: 26
|
|
Ну думаю так? не знаю
|
|
03.05.2014, 17:52
|
Профессор
|
|
Регистрация: 15.03.2014
Сообщений: 561
|
|
Особо в коде не разбирался, но насколько я понял надо при ресайзе выравнивать элементы так же как оно выравнивается при загрузке. Тогдо можно в верхнем блоке 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);
});
}
);
|
|
03.05.2014, 17:54
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
Сообщение от pavelrer
|
Вот какая задача, пишу cgi для plc, страничка ориентирована по центру, тянется по ширине в зависимости от useragenta которы определяет сам плк
|
Нафига так делать? Это уже ошибка.
Зачем проставлять ширину скриптом? зачем проставлять ширину дочерним элементам, если можно проставить width: 100% в стилях. И то это нужно только абсолютно спозиционированным элементам.
Высоту контента опять же нет смысла на js задавать.
Короче, это извращение делать все это на js. Такие вещи делаются на чистом css.
Для высоты можешь использовать таблицу с заданной высотой ячеек либо box-sizing:border-box + padding
__________________
В личку только с интересными предложениями
|
|
03.05.2014, 17:56
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
Ой, сколько тут извращенцев собралось...pavelrer, поковыряйся с css. Если не осилишь - так и быть, подмогу (если другие не подмогут).
__________________
В личку только с интересными предложениями
|
|
03.05.2014, 18:35
|
Интересующийся
|
|
Регистрация: 03.05.2014
Сообщений: 26
|
|
danik.js - огромное, огромноофигительнобольшое СПАСИБО!
Даже опера победилась.
СПАСИБО!
мне жена тож говорит, что я иногда изврат.. хи хи
Про ширину, пока это единственный способ который мне подходит.
Хочу, шоб моя железка работала не только на пк, но и на мобильниках,
а помимо того на теликах, дуньках, плейстейшинах и.т.д
И на пк мне во всю ширь пока не нужно.
Вы может правы, а может нет?
Заведу еще одну тему по оптимизации трафика, возможно вы увидете от чего так и посоветуете что-то.
Я чурбан в html, css, js.
Что на гуглил то и своял.
Еще раз ОГРОМНОЕ СПАСИБО!!!
|
|
|
|