Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.08.2012, 11:33
Интересующийся
Отправить личное сообщение для WaMpIr Посмотреть профиль Найти все сообщения от WaMpIr
 
Регистрация: 05.10.2010
Сообщений: 23

Вычисление размера окна браузера и включение в CSS
Доброго дня всем.
Есть задача подогнать div блок под высоту окна браузера (НЕ ПОД РАЗРЕШЕНИЕ МОНИТОРА) и так что бы этот блок подстраивался под разную высоту ОКНА БРАУЗЕРА.
Есть CSS переменная #scroll-pane у которой задано значение height:**px; (% не поддерживаются!)
В нете нашёл такой скрипт, точнее это часть всего скрипта, мне показалось что этого достаточно . Он вычисляет высоту ОКНА БРАУЗЕРА и подставляет это значение в некую 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 (permalink)  
Старый 18.08.2012, 11:43
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от WaMpIr
Но проблема в том, что это значение не подставляется, точнее не заменяет то, что прописано в CSS. Как это можно реализовать?
1. Зачем заменять в css ? - Если тег style прописан на элементе(что и делает скрипт) приоритет стиля у элемента
2. ...
Ответить с цитированием
  #3 (permalink)  
Старый 18.08.2012, 11:55
Интересующийся
Отправить личное сообщение для WaMpIr Посмотреть профиль Найти все сообщения от WaMpIr
 
Регистрация: 05.10.2010
Сообщений: 23

К этому стайлу подключен ещё один скрипт, и если удалить height из стайла, то этот скрипт перестаёт работать, а значение из второго скрипта (вычисление высоты окна) не подставляется.
Код второго скрипта (который перестаёт работать при удалении):
<script type="text/javascript">
 jQuery(function()
 {
 jQuery('#scroll-pane').jScrollPane();
 });
</script>

В таком случае нужно поставить приоритет на скрипт, а не на сам стайл. Что бы и в стайле было прописано некое значение height:**px; (для работы основного скрипта), и при этом поверх него с приоритетом устанавливалось значение высоты окна браузера.
Вот такая вот паутинка. Кто разберётся и поможет, получит пе4еньку.
Ответить с цитированием
  #4 (permalink)  
Старый 18.08.2012, 12:28
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<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>

Последний раз редактировалось Deff, 18.08.2012 в 20:34.
Ответить с цитированием
  #5 (permalink)  
Старый 18.08.2012, 16:04
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Поправил
Скрипт подгонки - должен идти перед Всеми действиями с данным блоком с id = scroll-pane

Для этого Ваш скрипт(с иными деяниями) должен стоять в обрамлении

$(document).ready(function() {
  <!--Тут Ваши коды-->
});


И идти ниже скрипта начальной установки размера

Последний раз редактировалось Deff, 18.08.2012 в 16:08.
Ответить с цитированием
  #6 (permalink)  
Старый 18.08.2012, 17:36
Интересующийся
Отправить личное сообщение для WaMpIr Посмотреть профиль Найти все сообщения от WaMpIr
 
Регистрация: 05.10.2010
Сообщений: 23

Спасибо за помощь, как и обещал, ПЕЧЕНьКО:
Ответить с цитированием
  #7 (permalink)  
Старый 18.08.2012, 18:08
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,470

Это не печенько. Это желание(которого не было) съесть печенько(которого нет). =(
__________________
29375, 35
Ответить с цитированием
  #8 (permalink)  
Старый 06.12.2014, 09:57
Аспирант
Отправить личное сообщение для cyber_bober Посмотреть профиль Найти все сообщения от cyber_bober
 
Регистрация: 12.12.2012
Сообщений: 80

$(document).ready(function() {        

    $('.resize').height($(window).height());
  
    $(window).resize(function() {
        $('.resize').height($(window).height());
         })
    });
Ответить с цитированием
  #9 (permalink)  
Старый 06.12.2014, 10:24
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

<body style="height: 1000px;">

<div style="height: 100vh; background: red;"></div>

</body>


Первичное решение - css. JS-костыль уже подключается в дополнение, для древних браузеров.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #10 (permalink)  
Старый 22.04.2017, 20:59
Аспирант
Отправить личное сообщение для macik Посмотреть профиль Найти все сообщения от macik
 
Регистрация: 17.06.2014
Сообщений: 32

Сообщение от danik.js Посмотреть сообщение
<body style="height: 1000px;">

<div style="height: 100vh; background: red;"></div>

</body>


Первичное решение - css. JS-костыль уже подключается в дополнение, для древних браузеров.
Как все просто ... только сколько браузеров такой финт поддерживают ... ?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение размера окна браузера pv! Общие вопросы Javascript 10 29.09.2019 09:45
Высота страницы по высоте окна браузера Николян (X)HTML/CSS 4 16.01.2014 19:12
Вычисление крайних элементов в видимой области окна Helen Общие вопросы Javascript 1 21.11.2011 18:33
Смена стилей страницы при изменении размера окна браузера goooooch Javascript под браузер 6 19.11.2011 17:49
Реклама по центру окна браузера Макс Элементы интерфейса 2 15.06.2008 00:55