Как динимически определять ВЫСОТУ блока при изменении ширины окна браузера?
Подскажите, как динимически определять высоту блока при изменении ширины окна браузера.
При изменении ширины браузера (это происходит, например, при повороте мобильного устройства), высота блока может меняться. Следующий код определяет высоту только при загрузке страницы, при изменении ширины значение высоты не меняется.
var h = parseInt($('.selector').innerHeight());
Заранее, благодарю! |
$(window).resize(function() {тут})
|
ozoro,
$(window).on("resize", ....) |
laimas,
рони, Благодарю, то что нужно. |
laimas,
рони, Можно ли эту функцию сделать и для загрузки страницы и для resize одновременно? |
$(window).on("load resize", function() {
});
|
Malleys,
Благодарю! |
laimas,
рони, Malleys, Подскажите, как из этой функции, передать значение переменной в другую функцию?
$(window).on("load resize", function() {
// переменная со значениями 1 или 2, изменяющаяся в зависимости от ширины окна браузера
var a = 1;
});
Нужно значение этой переменной передавать в другую функцию? |
В данном случае только вызывать эту функцию или определять переменную как глобальную.
|
Если делать глобальной переменную, то за пределами функции выдает ошибку: ReferenceError: a is not defined
<script>
$(window).on("load resize", function() {
// переменная со значениями 1 или 2, изменяющаяся в зависимости от ширины окна браузера
a = 1;
});
console.log(a);
</script>
А как вызвать такую функцию, чтобы выводилось только значение этой переменной? Пробовал по разному, но ничего не выходит. |
ozoro,
зачем вам эта переменная? используется в функции? так напишите во второй строке название этой функции. |
var a = x; //default value
$(window).on("load resize", function() {
a = 1;
});
//other function
......
|
рони,
laimas, Так как предложил laimas не получается, тем более уже пробовал так,... значение переменной функция не изменяет, выдает дефолтное значение, а если не объявлять за пределами функции, то выдает ошибку: ReferenceError: a is not defined. В общем этот тема в продолжение этой темы, думал здесь спрошу одно, там другое, но что-то получилось не очень. Выкладываю код здесь. Если функцию или код вызова (настройки функции), которую помог сделать рони, добавить в:
$(window).on("load resize", function() {
// код функции или ее вызова от [b]рони[/b]
});
То при каждом ресайзе создается пустой блок внутри такого же блока... и так до бесконечности... Вот такая фигня получается: <div class="cs1"> <ul class="column-list-js"> <li class="column-listxxx-0 column-list"> <ul> <li class="column-listxxx-0 column-list"> <ul> <li class="column-listxxx-0 column-list"> <ul> <li class="column-listxxx-0 column-list"> <ul> <li class="column-listxxx-0 column-list"> <ul> <li class="column-listxxx-0 column-list"> <ul> <li class="column-listxxx-0 column-list"> <ul> <li> Пункт #1</li> <li>Пункт #2</li> <li>Пункт #3</li> <li>Пункт #4</li> <li>Пункт #5</li> <li>Пункт #6</li> <li>Пункт #7 <ul> <li>Пункт #7.1</li> <li>Пункт #7.2</li> <li>Пункт #7.3</li> <li>Пункт #7.4</li> <li>Пункт #7.5</li> </ul> </li><li>Пункт #8 <ul> <li>Пункт #8.1</li> <li>Пункт #8.2</li> <li>Пункт #8.3</li> </ul> </li> <li>Пункт #9</li> <li>Пункт #10</li> <li>Пункт #11 <ul> <li>Пункт #11.1</li> <li>Пункт #11.2</li> <li>Пункт #11.3</li> <li>Пункт #11.4</li> <li>Пункт #11.5</li> <li>Пункт #11.6</li> </ul> </li> <li>Пункт #12</li> <li>Пункт #13</li> <li>Пункт #14</li> <li>Пункт #15</li> <li>Пункт #16</li> <li>Пункт #14</li> <li>Пункт #15</li> <li>Пункт #16</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> Помогите поправить, чтобы не создавались такие пустые блоки при ресайзе. Вот запускаемый код:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Column Lists</title>
<meta name="description" content="">
<style>
.cs1 li {
width:100%;
padding: 2%;
margin: 35px;
outline: 1px dotted dodgerblue;
}
.column-list-js{
padding: 0 10px;
border:1px solid #000;
display: flex;
}
.column-list{
flex: 1;
list-style: none
}
</style>
</head>
<body>
<br>
<div class="cs1">
<ul class="column-list-js">
<li> Пункт #1</li>
<li>Пункт #2</li>
<li>Пункт #3</li>
<li>Пункт #4</li>
<li>Пункт #5</li>
<li>Пункт #6</li>
<li>Пункт #7
<ul>
<li>Пункт #7.1</li>
<li>Пункт #7.2</li>
<li>Пункт #7.3</li>
<li>Пункт #7.4</li>
<li>Пункт #7.5</li>
</ul>
</li>
<li>Пункт #8
<ul>
<li>Пункт #8.1</li>
<li>Пункт #8.2</li>
<li>Пункт #8.3</li>
</ul>
</li>
<li>Пункт #9</li>
<li>Пункт #10</li>
<li>Пункт #11
<ul>
<li>Пункт #11.1</li>
<li>Пункт #11.2</li>
<li>Пункт #11.3</li>
<li>Пункт #11.4</li>
<li>Пункт #11.5</li>
<li>Пункт #11.6</li>
</ul>
</li>
<li>Пункт #12</li>
<li>Пункт #13</li>
<li>Пункт #14</li>
<li>Пункт #15</li>
<li>Пункт #16</li>
<li>Пункт #14</li>
<li>Пункт #15</li>
<li>Пункт #16</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
// var sz = 0; //default value
$(window).on("load resize", function() {
var sz = 1;
//other function
;(function( $ ) {
$.fn.columnlist = function ( options ) {
options = $.extend( {}, $.fn.columnlist.defaults, options );
return this.each(function () {
var
$list = $( this ),
size = options.size || $list.data( 'columnList' ) || 1,
$children = $list.children( 'li' ),
lis = $list.find( 'li' ),
$length = lis.length ,
$column = [],
num = 0,
k = 0;
$children.each(function(i, li) {
var len = $('li', li).length + 1;
k += len;
if(k >= $length / size) {
$column[num] = i;
++num;
--size;
$length -= k;
k = 0;
}
else $column[num] = i;
});
k = 0;
$column.forEach(function(n, i) {
$li = returnColumn( i );
$ul = $('<ul />').appendTo($li);
num = $children.slice(k, n + 1);
k = n + 1;
num.appendTo($ul);
$list.append($li)
})
});
function returnColumn ( inc ) {
return $('<li class="' + options.incrementClass + inc + ' ' + options[ 'class' ] + '"></li>');
}
};
$.fn.columnlist.defaults = {
'class' : 'column-list',
incrementClass : 'column-list-'
};
})( jQuery );
// настройки
$('ul.column-list-js').columnlist({
size : sz, // значение переменной - количество колонок
'class' : 'column-list',
incrementClass : 'column-listxxx-'
});
});
</script>
</body>
</html>
|
ozoro,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Column Lists</title>
<meta name="description" content="">
<style>
.cs1 li {
width:100%;
padding: 2%;
margin: 35px;
outline: 1px dotted dodgerblue;
}
.column-list-js{
padding: 0 10px;
border:1px solid #000;
display: flex;
}
.column-list{
flex: 1;
list-style: none
}
</style>
</head>
<body>
<br>
<div class="cs1">
<ul class="column-list-js">
<li> Пункт #1</li>
<li>Пункт #2</li>
<li>Пункт #3</li>
<li>Пункт #4</li>
<li>Пункт #5</li>
<li>Пункт #6</li>
<li>Пункт #7
<ul>
<li>Пункт #7.1</li>
<li>Пункт #7.2</li>
<li>Пункт #7.3</li>
<li>Пункт #7.4</li>
<li>Пункт #7.5</li>
</ul>
</li>
<li>Пункт #8
<ul>
<li>Пункт #8.1</li>
<li>Пункт #8.2</li>
<li>Пункт #8.3</li>
</ul>
</li>
<li>Пункт #9</li>
<li>Пункт #10</li>
<li>Пункт #11
<ul>
<li>Пункт #11.1</li>
<li>Пункт #11.2</li>
<li>Пункт #11.3</li>
<li>Пункт #11.4</li>
<li>Пункт #11.5</li>
<li>Пункт #11.6</li>
</ul>
</li>
<li>Пункт #12</li>
<li>Пункт #13</li>
<li>Пункт #14</li>
<li>Пункт #15</li>
<li>Пункт #16</li>
<li>Пункт #14</li>
<li>Пункт #15</li>
<li>Пункт #16</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
// var sz = 0; //default value
//other function
;(function( $ ) {
$.fn.columnlist = function ( options ) {
options = $.extend( {}, $.fn.columnlist.defaults, options );
return this.each(function () {
var
$list = $( this ),
size = options.size || $list.data( 'columnList' ) || 1,
$children = $list.children( 'li' ),
lis = $list.find( 'li' ),
$length = lis.length ,
$column = [],
num = 0,
k = 0;
$children.each(function(i, li) {
var len = $('li', li).length + 1;
k += len;
if(k >= $length / size) {
$column[num] = i;
++num;
--size;
$length -= k;
k = 0;
}
else $column[num] = i;
});
k = 0;
$column.forEach(function(n, i) {
$li = returnColumn( i );
$ul = $('<ul />').appendTo($li);
num = $children.slice(k, n + 1);
k = n + 1;
num.appendTo($ul);
$list.append($li)
})
});
function returnColumn ( inc ) {
return $('<li class="' + options.incrementClass + inc + ' ' + options[ 'class' ] + '"></li>');
}
};
$.fn.columnlist.defaults = {
'class' : 'column-list',
incrementClass : 'column-list-'
};
})( jQuery );
$(window).on("load resize", function() {
var sz = window.innerWidth > 800 ? 2 : 1;
$('ul.column-list-js').find(".column-list > ul > li").unwrap().unwrap();
$('ul.column-list-js').columnlist({
size : sz, // значение переменной - количество колонок
'class' : 'column-list',
incrementClass : 'column-listxxx-'
});
});
</script>
</body>
</html>
|
рони,
Благодарю, то что нужно! |
рони,
Подскажи еще, как окно просмотра запускаемого кода на этом форуме делать большей высоты чем в дефолтном варианте? |
ozoro,
[html run height=500] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Цитата:
Я вам рекомендую использовать CSS-свойство columns, с которым вы можете легко и грамотно разделить своё содержимое на колонки, не делая перестановок в DOM. Или если вы всё-таки хотите написать плагин, то не делайте перестановок в DOM, которые ломают селекторы, нумерацию и пр. Визуальные изменения должны происходить при помощи CSS, HTML не для раскрасок. Вы можете себе позволить перестановки только если не планируется напрямую работать с разметкой, в противном случае много багов, осложнении и ошибок предвидится. Думаешь, если кусок кода написал, то никто ничего не поймёт? |
Malleys,
Прислушаюсь к твоему мнению, возможно так и сделаю, уже думал об этом. Только вот в ie9 не поддерживается свойство columns, а пока что, думаю, еще надо его поддерживать... |
| Часовой пояс GMT +3, время: 18:58. |