Пожалуйста помогите с высотой.
Господа, помогите плиз.
Сразу скажу, не спец в 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, хочется как то по проше и покороче решить, без огородов. Спасибо. |
Цитата:
|
Много текста вперемежку с неформатированным кодом. Читать не стал. Думаю никто не станет ))
Накидай тестовый пример например на jsfiddle.net и кратко опиши что тебе не нравится. |
на 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,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Ну думаю так? не знаю
|
Особо в коде не разбирался, но насколько я понял надо при ресайзе выравнивать элементы так же как оно выравнивается при загрузке. Тогдо можно в верхнем блоке 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);
});
}
);
|
Цитата:
Зачем проставлять ширину скриптом? зачем проставлять ширину дочерним элементам, если можно проставить width: 100% в стилях. И то это нужно только абсолютно спозиционированным элементам. Высоту контента опять же нет смысла на js задавать. Короче, это извращение делать все это на js. Такие вещи делаются на чистом css. Для высоты можешь использовать таблицу с заданной высотой ячеек либо box-sizing:border-box + padding |
Ой, сколько тут извращенцев собралось...pavelrer, поковыряйся с css. Если не осилишь - так и быть, подмогу (если другие не подмогут).
|
danik.js - огромное, огромноофигительнобольшое СПАСИБО!
Даже опера победилась. СПАСИБО! мне жена тож говорит, что я иногда изврат.. хи хи Про ширину, пока это единственный способ который мне подходит. Хочу, шоб моя железка работала не только на пк, но и на мобильниках, а помимо того на теликах, дуньках, плейстейшинах и.т.д И на пк мне во всю ширь пока не нужно. Вы может правы, а может нет? Заведу еще одну тему по оптимизации трафика, возможно вы увидете от чего так и посоветуете что-то. Я чурбан в html, css, js. Что на гуглил то и своял. Еще раз ОГРОМНОЕ СПАСИБО!!! |
Цитата:
|
Зачем проставлять ширину скриптом? зачем проставлять ширину дочерним элементам
Косяк в софарях вылезит на разных аппледевайсах, там косяк с расчетам ширины! |
media queries - СПАСИБО, пробежал, буду изучать
но не сегодня. Еще раз большое спасибо! |
Цитата:
|
Danik.js –не могли бы вы связаться со мной по почте nwlux@yandex.ru, не могу понять что с личкой, есть ком.предложения.
СПАСИБО. Косяк в 4 iphone (шоб было меньше глюков устанавливаем ширину чуть меньше, возможно это из-зи ios7) Хотя, я прилаживал свой код, может и у меня косяк, но на остальных девайсах все ок, на 4s тож все путем.!? |
СПАСИБОО Еще раз за код
Я, уже говорил что в js лузер Не льзя ли как-то шоб везде работало, оптимизировать var=h – он как-бы повторяется? Да и вот это $("#oh").height(h -28); Действие повторяется дважды Борьба за байты! Спасибо. (не совсем понимаю структуру языка js) |
как тут задать вопрос?
|
pavelrer, не смеши. Если хочешь сделать действительно что-то полезное, то:
1) таблицы нахуй. Ничего кроме тормозов от них нету. 2) Джаваскрипт нахуй. CSS в разы быстрей работает. Тем более на мобилках. Сделай блин нормальный макет на дивах и будет все норм. |
Цитата:
Псевдокласс :hover не слыхал? Тег <a href="./settings.html"> не видал? |
Цитата:
|
Прошу не обижаться на грубые мои комменты. Просто говнокод меня выводит из себя ))
|
table class="m" onMouseOver="className='kx'" onMouseOut="className='m'"><tr><td onClick="document.location='./setting.html'">Настройки</td></tr></table></td>
это херня, согласен – сказал же что не хрена в вебе не шррю – лузер! Это воще так было писано, внимание на енто обращать не надо. Блин, да если мы про мобилки говорим то jQuery выкинуть в топку - это первое че надо сделать. Цеплять джаваскрипт на 10 000 строк кода тупо чтобы использовать одну засраную функцию width()? Глупее действий не придумать )) Вот об этом и хотел создать тему по оптимизации библиотеки jQuery Я сказал, что ни гу-гу! Пытаюсь как могу! Интересно мля. <a href="./settings.html"> - слыхал не слыхал. Я ж сказал CGI и тем более объяснил на каких девайсах это должно работать! <a href="./settings.html"> - ни когда не будет работать в системах где нет мышки и клавиатуру, а только один ПДУ! Вот и все. Не ну мож и будет работать, но так нахер криво, не поймешь на че ты стрелоками навел! Получим вот енту фигню table class="m" onMouseOver="className='kx'" onMouseOut="className='m'"><tr><td onClick="document.location='./setting.html'">Настройки</td></tr></table></td> Но в моем коде она плвторяется До оптимизации onMouseOver="className='kx'" onMouseOut="className='m' еще не дошел. Ну не судите строго, критики побольше, авось погуглю и научусь! (яж на форум для ентого и пришел, за помощью!!! СПАСИБО.) Спасибо. |
Просто говнокод меня выводит из себя
Да, я для того и обратилься на форум, шоб из гавнокода превратиь в чистый код! Я оптимизирую свою страничку, не только под браузеры ПК, мобайл девайсы, но и под девайсы с уе….ыми браузерами типа дюны,плейстейшен, спутник-рес-под linux – обрезки, да еще и без кэш! Это не ваб сайт! Я, конечно и лошпен в ентом деле но как-то осили вот это .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} До этого <!-- Верхнее меню 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 --> Пока не добрался, но блин просто через ссылку в браузераз без клавы и мыши с ПДУ подругому не выходит. Хочется вот это class="m" onMouseOver="className='kx'" onMouseOut="className='m' дерьмо в один класс собрать. Спасибою |
Цитата:
Ты ща вообще понял о чем заявил? Что, мол, ссылка, основополагающий элемент в HTML и вебе, не будет где-то там работать? А вот зато onclick, который обрабатывается на JavaScript - скриптовом языке, который появился в вебе гораздо позже и по сути не является обязательным и может быть отключен пользователем - вот оно то наверняка заработает ))) Притом что у тебя твой <td> даже фокуса получить не сможет ))) Если ты имеешь ввиду о визуализации наведения, то открой для себя псевдокласс :hover Цитата:
|
Сори не правильно выразил.
<table class="m" onMouseOver="className='kx'" onMouseOut="className='m'"> Так делаю для наведения, как-раз для ПДУ. А вот это <td onClick="document.location='./status.html'">Статус</td> Для того чтоб ссылка была вся область <td>, иначе трудновато пальчиком на маленьких мобилках в текстовую ссылку тыкать. Про :hover знаю, просто сначала сделал так, конечно наверное переделаю (че сгуглил то своял). А чем ПДУ отличается от мышки с точки зрения веб-страницы? Да ни чем, просто в некоторых браузерах на экране курсор, и стрелочками на пульте водишь, а в некоторых курсора нет, просто прыгаешь по ссылкам как tab ом в винде. Может тогда нужно писать onRemoteControlOver ? не понял что-это. media queries – блин здорово но вот тут уж нужен совет. Переделывать или нет. Как уже говорил, ограниченна память, да вобщем то не память а размер пакета в цикле отдачи, т.е браузеру я могу отдать 1500 байт за 80мсек, ежли Моя страничка больше чем 1500байт то не закрывая сокет просто дописываю остаток, и все ок. при этом на каждые 1500 байт тратиться шаг мах 80мс. Идея какая есть основная страничка которую вы уже видели, она загрузилась при обращении HOST далее просто заставочка 1-2 сек (Css затемнение + hello типа того) В это время при помощи скрипта подгружается контент, при переходе по ссылкам, просто подгружается контент в то поле которое вы мне растягивали. Таким образом я отделю трафик скриптов, стилей и основных таблиц от контента. Так вот ширина моя исполняется всего один раз, стоит ли в media queries переделывать, ведь скриптом просто текст короче. Хотя скриптом мне надо Высчитывать к каждому девайсу свою ширину, и вводить как константы – тож бред. Да наверное media queries надо делать. Из выше сказанного видно что борьба за память а как не крути <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> Подгружать надо, да и еще причем с железки а не из инета. Тут тож вроде как каша если не делать подгрузку контента к основной страничке через скрипт то при перемещении По менюшки jquery придется грузить при каждом переходе. Понятно что jquery браузер загрузит в кэш, но как я понял не во всех случаях это будет случаться, так что подгрузка должна избавить от проблемы грузить jquery несколько раз. А вот как уменьшить размер jquery.min.js возможно ли это. Т.е яж в своей странички использую не весь функционал jquery. Нет ли каког инструмента типа подставляешь в него все свои скрипты, он это все читаем берет jquery и выкидывает от туда все ненужное и он уже не 100килобайт а 50? Былобы хорошо. Спасибо. |
Цитата:
Цитата:
Цитата:
Цитата:
Еще раз: сделай нормальную html-разметку на div'ах и без скриптов. |
Еще раз: сделай нормальную html-разметку на div'ах и без скриптов.
Тут, начал делать, нужна помощь. Начнем вот с чего, тот скрипт с ресайзом который вы мне докрутили работает на всех броузерах, он меня очень устраивает. Но ежли можно сделать без скрипта лучше без него. С вашем скриптом даже опера работает. Можно ли будет сделать тянучку по высоте на DIV ах, которая работала бы во всех браузерах? Из верхнего и нижнего меню уже уменьшил кол-во таблиц <!-- Begin --> <div class="fx ft"><table class="mw d"><tr> <td><div class="m" onMouseOver="className='kx'" onMouseOut="className='m'"><a href="./in.html">Выходы</a></div></td> <td><div class="m" onMouseOver="className='kx'" onMouseOut="className='m'"><a href="./out.html">Выходы</a></div></td> <td><div class="m" onMouseOver="className='kx'" onMouseOut="className='m'"><a href="./setting.html">Настройки</a></div></td> <td><div class="m" onMouseOver="className='kx'" onMouseOut="className='m'"><a href="./help.html">Помощь</a></div></td> </tr></table></div> <!-- End --> Одну пришлось оставить, если делать DIV так чтоб они располагались в горизонте, просто стиль становиться длиннее. (:hover пока не приладил) Но уже уйдя от нескольких табличек, немного байтиков скоротал. Основной вопрос в шапке Было <!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" /> Сейчас сделал так <!DOCTYPE HTML><HTML><HEAD> <meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251"> В общем заметил что валидатор начинает ругаться на код после изменения шапки, причем на всякие высоты больше всего. Допустим в последним варианте <table align="center"> ему уже не нравиться. Причем на некоторые вещи типа <body onselectstart="return false"> ругается а в первом случаи нет?! С какой шапкой лучше работать? Пока гуглил нашел вот такое #content>table>tbody>tr>td { border: 10px solid blue; width: 50%; } Не подскажете, что это, куда будет передан этот стиль? Спасибо. |
| Часовой пояс GMT +3, время: 00:47. |