Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.05.2014, 15:58
Интересующийся
Отправить личное сообщение для pavelrer Посмотреть профиль Найти все сообщения от pavelrer
 
Регистрация: 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, хочется как то по проше и покороче решить, без огородов.

Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 03.05.2014, 16:21
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от pavelrer
Как то перечислить классы? (борьба за память)
Забыл что-ли? Ок, спасем твою память. Селекторы можно перечислять через запятую: $('.mv, .fx'). Больше не забывай!
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 03.05.2014, 16:25
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Много текста вперемежку с неформатированным кодом. Читать не стал. Думаю никто не станет ))
Накидай тестовый пример например на jsfiddle.net и кратко опиши что тебе не нравится.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #4 (permalink)  
Старый 03.05.2014, 17:10
Интересующийся
Отправить личное сообщение для pavelrer Посмотреть профиль Найти все сообщения от pavelrer
 
Регистрация: 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.
Ответить с цитированием
  #5 (permalink)  
Старый 03.05.2014, 17:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

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

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


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #6 (permalink)  
Старый 03.05.2014, 17:36
Интересующийся
Отправить личное сообщение для pavelrer Посмотреть профиль Найти все сообщения от pavelrer
 
Регистрация: 03.05.2014
Сообщений: 26

Ну думаю так? не знаю
Ответить с цитированием
  #7 (permalink)  
Старый 03.05.2014, 17:52
Профессор
Отправить личное сообщение для jsnb Посмотреть профиль Найти все сообщения от jsnb
 
Регистрация: 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);
        });
      }
    );
Ответить с цитированием
  #8 (permalink)  
Старый 03.05.2014, 17:54
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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

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

Для высоты можешь использовать таблицу с заданной высотой ячеек либо box-sizing:border-box + padding
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #9 (permalink)  
Старый 03.05.2014, 17:56
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Ой, сколько тут извращенцев собралось...pavelrer, поковыряйся с css. Если не осилишь - так и быть, подмогу (если другие не подмогут).
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #10 (permalink)  
Старый 03.05.2014, 18:35
Интересующийся
Отправить личное сообщение для pavelrer Посмотреть профиль Найти все сообщения от pavelrer
 
Регистрация: 03.05.2014
Сообщений: 26

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

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

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

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

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

Еще раз ОГРОМНОЕ СПАСИБО!!!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите пожалуйста вычислить общую сумму katalizator Общие вопросы Javascript 15 22.03.2013 16:26
Помогите пожалуйста правильно написать скрипт raffx Events/DOM/Window 17 16.10.2012 20:31
Функция выдает что-то попало, помогите пожалуйста Jeremen Events/DOM/Window 12 20.08.2012 19:26
помогите пожалуйста с регулярным выражением serhanters Общие вопросы Javascript 8 12.07.2011 19:17
Помогите пожалуйста разобраться Kupu4 Ваши сайты и скрипты 0 21.01.2010 10:44