Простой скрипт для установки высоты контейнера в зависимости от высоты окна
Простой скрипт для установки высоты контейнера в зависимости от высоты окна.
Полезен, например, если нужно, чтобы поле текстового ввода было размером во все окно браузера. // set content height depending on window height function Content_AutoHeight(c, mbottom) { c.height($(window).height() - c.offset().top - mbottom); } // add content auto height handler function Add_ContentAutoHeight_handler(c, mbottom) { $(document).ready(function() { Content_AutoHeight(c, mbottom); $(window).bind("resize", function() { Content_AutoHeight(c, mbottom); }); }); } Применение: <textarea id="txtContent" name="txtContent">Text</textarea> <script type="text/javascript">Add_ContentAutoHeight_handler($('#txtContent'), 110);</script> |
Пардон, и ради этого вы ненавязчиво предлагаете подключать отдельную библиотеку, типа jQuery?
|
Да нет, конечно. Просто у меня в проекте используется. Можно и без JQuery...
Я только начал JS изучать. ИМХО полезный пример, а то в инете первое, что находится по теме --- автоматическое расширение текстового поля при вводе... Чиста спортивный интерес, а как бы это выглядело без JQ? |
Roman Koff,
Если только начали учить js, то советую вам сначала не лезть во всякие вреймворки и прочую "дребедень". и ещё вопрос зачем тут стоит функция? Add_ContentAutoHeight_handler а $(document).ready( ? |
Про Add_ContentAutoHeight_handler непонял вопрос. Я ее написал для удобства размещения в коде, а как надо было?
По поводу дребедени --- жизь застваила. Нужен браузерный редактор контента с "ограниченными" возможностями (т.е. доведенный до ума вручную), а велосипед изобретать не хочетсо... Поэтому взял за основу markitup и пытаюсь из него выжать сок... |
Roman Koff,
Каждый должен написать свой wysiwyg, чтобы понять какое это "зло" :) |
Любой редактор с "ограниченными" возможностями, со временем превращается в монстра.
|
Лю-юди! Ау!
html, body, #my-element {width: 100%; height: 100%; margin:0} |
С некоторыми ограничениями
|
inGray,
само собой. Но, похоже по контексту, что нужный элемент будет находиться непосредственно в body |
Цитата:
subzey, это не серьезно, мы же взрослые люди... |
Roman Koff,
вы забыли указать, что вас смущает в данном решении. |
Текстовое поле редактора нужно вписывать в дизайн страницы, а не просто разворачивать во весь экран. Проценты, как правило, не дают необходимой точности.
Попробуйте с помощью этого решения развернуть, к примеру, редактор MarkItUp или CKEditor... |
Т.е. на странице будет прокрутка? Тогда мало толку от высоты 100% -- попробуй ещё попади скролом в нужное место.
|
Вариант в виде плагина к jQuery:
if (jQuery) (function (jQuery) { jQuery.extend(jQuery.fn, { // autoheight autoheight: function (options) { jQuery(this).each(function () { var settings = jQuery.extend({ offset: 20 }, options); var obj = jQuery(this); function _sah() { obj.height(jQuery(window).height() - obj.offset().top - settings.offset); }; //jQuery(window).ready(function () { _sah(); }); jQuery(window).load(function () { _sah(); }); jQuery(window).resize(function () { _sah(); }); }); } }); })(jQuery); Использование, соотв... $('#editor').autoheight({ offset: 50 }); Работает, но есть сомнения, все ли я правильно придумал... |
Часовой пояс GMT +3, время: 02:48. |