Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 25.10.2019, 15:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,076

ozoro,
зачем вам эта переменная? используется в функции? так напишите во второй строке название этой функции.
Ответить с цитированием
  #12 (permalink)  
Старый 25.10.2019, 15:25
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,143

var a = x; //default value
$(window).on("load resize", function() {
    a = 1;
});

//other function
......
Ответить с цитированием
  #13 (permalink)  
Старый 25.10.2019, 17:58
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 54

рони,
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, 26.10.2019 в 01:58.
Ответить с цитированием
  #14 (permalink)  
Старый 25.10.2019, 21:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,076

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>
Ответить с цитированием
  #15 (permalink)  
Старый 25.10.2019, 22:12
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 54

рони,
Благодарю, то что нужно!
Ответить с цитированием
  #16 (permalink)  
Старый 25.10.2019, 22:14
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 54

рони,
Подскажи еще, как окно просмотра запускаемого кода на этом форуме делать большей высоты чем в дефолтном варианте?
Ответить с цитированием
  #17 (permalink)  
Старый 25.10.2019, 22:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,076

ozoro,
[html run  height=500]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #18 (permalink)  
Старый 26.10.2019, 02:09
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,263

Сообщение от ozoro
то что нужно!
Потом после таких «то, что нужно!» приходится ещё решать тривиальные вещи путём нагромождения костылей или переделать по нормальному!

Я вам рекомендую использовать CSS-свойство columns, с которым вы можете легко и грамотно разделить своё содержимое на колонки, не делая перестановок в DOM.

Или если вы всё-таки хотите написать плагин, то не делайте перестановок в DOM, которые ломают селекторы, нумерацию и пр. Визуальные изменения должны происходить при помощи CSS, HTML не для раскрасок. Вы можете себе позволить перестановки только если не планируется напрямую работать с разметкой, в противном случае много багов, осложнении и ошибок предвидится.

Думаешь, если кусок кода написал, то никто ничего не поймёт?

Последний раз редактировалось Malleys, 26.10.2019 в 02:19.
Ответить с цитированием
  #19 (permalink)  
Старый 27.10.2019, 02:38
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 54

Malleys,
Прислушаюсь к твоему мнению, возможно так и сделаю, уже думал об этом. Только вот в ie9 не поддерживается свойство columns, а пока что, думаю, еще надо его поддерживать...
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать чтобы меню не закрывалось при изменении высоты? Befref Общие вопросы Javascript 4 06.09.2017 14:46
Поведение "плавающей" боковой колонки при изменении размеров окна браузера Schwab Элементы интерфейса 3 03.05.2016 22:17
Как узнать максимальную высоту блока? frost18 Элементы интерфейса 11 22.10.2013 04:07
Добавление нужного css-файла в html страницу в зависимости от ширины окна браузера UglyDemon Общие вопросы Javascript 1 24.12.2010 10:30
Как сделать? При выходе мышкой за пределы окна браузера, начинает грузится другая стр alb Events/DOM/Window 13 01.09.2010 12:19