| WaMpIr | 18.08.2012 17:36 |
Спасибо за помощь, как и обещал, ПЕЧЕНьКО:
Вычисление размера окна браузера и включение в CSS
Доброго дня всем.
Есть задача подогнать div блок под высоту окна браузера (НЕ ПОД РАЗРЕШЕНИЕ МОНИТОРА) и так что бы этот блок подстраивался под разную высоту ОКНА БРАУЗЕРА. Есть CSS переменная #scroll-pane у которой задано значение height:**px; (% не поддерживаются!) В нете нашёл такой скрипт, точнее это часть всего скрипта, мне показалось что этого достаточно :haha: . Он вычисляет высоту ОКНА БРАУЗЕРА и подставляет это значение в некую CSS переменную (в моём случае #scroll-pane)
<script>
$(document).ready(function() {
function divresize('#scroll-pane') {
var windowHeight = $(window).height();
$('#scroll-pane').css('height', windowHeight);
}
});
</script>
Но проблема в том, что это значение не подставляется, точнее не заменяет то, что прописано в CSS. Как это можно реализовать? Весь скрипт:
$(document).ready(function() {
function divresize(block, headerHeight, footerHeight) {
var windowHeight = $(window).height(); //определяем высоту окна браузера
$(block).css('height', windowHeight - headerHeight - footerHeight); //устанавливаем высоту блока(равно высоте окна за вычетом шапки и подвала)
}
divresize('#right', 150, 100); //вызываем функцию изменения размера блока
$(window).bind("resize", function(){ //при изменении размера окна вызываем функцию
divresize('#right', 150, 100);
});
});
Второй скрипт, который тоже пытался запустить(Конечно же вместо background-position подставлял height, а вместо #total ставил свою переменную):
<script language="JavaScript">
<!--
if (document.body.clientWidth <= '1024') {
document.write ('<link href="style1024.css" rel="stylesheet" type="text/css">');
}
$(function() {
if($(window).height()<1050) {
$('#total').css('background-position', 'center -220px');
}
});
//-->
</script>
Спасибо. |
Цитата:
2. ... |
К этому стайлу подключен ещё один скрипт, и если удалить height из стайла, то этот скрипт перестаёт работать, а значение из второго скрипта (вычисление высоты окна) не подставляется.
Код второго скрипта (который перестаёт работать при удалении):
<script type="text/javascript">
jQuery(function()
{
jQuery('#scroll-pane').jScrollPane();
});
</script>
В таком случае нужно поставить приоритет на скрипт, а не на сам стайл. Что бы и в стайле было прописано некое значение height:**px; (для работы основного скрипта), и при этом поверх него с приоритетом устанавливалось значение высоты окна браузера. Вот такая вот паутинка. Кто разберётся и поможет, получит пе4еньку. |
<script type="text/javascript" src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>
<body style="width:100%;height:100%;">
<style id="Style_scroll-pane" type="text/css">
#scroll-pane{
border:1px red solid;
width:33px;
height:120px; //Тут ставите свою первоначальную Высоту
}
</style>
<div id="scroll-pane">asdas</div>
<script>
$(document).ready(function() {
function divresize(a) {
var windowHeight = $(window).height();
var b=$(a).html();
$(a).html(b.replace("height:120","height:"+windowHeight)) //120 - та же первоначальная Высота
} divresize('#Style_scroll-pane') //Cелектор для стиля данного элемента
});
</script>
|
Поправил
Скрипт подгонки - должен идти перед Всеми действиями с данным блоком с id = scroll-pane Для этого Ваш скрипт(с иными деяниями) должен стоять в обрамлении
$(document).ready(function() {
<!--Тут Ваши коды-->
});
И идти ниже скрипта начальной установки размера |
Спасибо за помощь, как и обещал, ПЕЧЕНьКО:
|
Это не печенько. Это желание(которого не было) съесть печенько(которого нет). =(
|
$(document).ready(function() {
$('.resize').height($(window).height());
$(window).resize(function() {
$('.resize').height($(window).height());
})
});
|
<body style="height: 1000px;"> <div style="height: 100vh; background: red;"></div> </body> Первичное решение - css. JS-костыль уже подключается в дополнение, для древних браузеров. |
Цитата:
|
| Часовой пояс GMT +3, время: 16:58. |