Ответы пользователя по тегу JavaScript
  • Как правильно сверстать такой селект?

    @zombtron
    https://jsfiddle.net/x75zLn2a/
    вот вам каркас. Стилизуйте и напичкайте данными.
    Стилизоваться оно должно как угодно, ибо там обычные дивы.
    Инпут скрытый я добавил для того, чтобы не колдовать с отправкой из формы - все по фен-шую, стандартный инпут с name и value.
    Нейм у инпута - это нейм предполагаемого селекта, data-value у дивов - value у option.
    Все свистелки вставляются в div.opt

    Еще завтыкал сделать сворачивание при выборе и при клике вне селекта.
    И нужно еще добавить позиционирование/размеры, чтобы при открытии оно накрывало то, что снизу, а не сдвигало.
    Я думаю, понятно, что и как. Если нет, обращайтесь, подскажу.

    upd:
    https://jsfiddle.net/zombotron/gakqoz2t/3/
    Добавил, что забыл + управление кнопками клавиатуры.
    Конечно жестко велосипедно, зато без кучи зависимостей, что позволяет довольно шустренько работать на слабом ноуте.

    + есть небольшие костыли. Но я не претендую на универсальность решения. Это скорее просто алгоритм.
    Ответ написан
    Комментировать
  • Как перебрать поля формы и присвоить им имена в зависимости от вложенности?

    @zombtron
    В идеале нужно было бы рекурсивно обходить и брать все непосредственные дочерние элементы. Но есть проблема: при 200-300 элементах с 5-6-ю уровнями вложенности будет жесткий тупняк. Поэтому без рекурсии.
    var lev = 0; // level
    var selector = 'html'; // root tag
    var els = document.querySelectorAll(selector);
    var root = els;
    
    while(els.length > 0){
    	for(j=0; j<els.length; j++){
    		// тут колдунство над els[j];
    	}
    	lev++;
    	selector += ' > *'; 
    	els = document.querySelectorAll(selector);
    }


    Этот код перебирает все элементы по уровням. Сначала корень - хтмл, на следующей итерации цикла while - head и body, потом то, что непосредственно вложено в head и body, и т.д.

    Внутри цикла делаете проверку имени тега. Если элемент формы, добавляете ему имя. Колво скобок == уровню вложенности, ну а внутри скобок по усмотрению.
    Ответ написан
    Комментировать
  • Как сделать такой таймлайн?

    @zombtron
    А вот вам велосипед на чистых html+css+js.
    В Хроме и Огнелисе работает. Вроде адаптивно (от 320 до 1280).
    Не прикрутил анимацию, иконки в кружках и для больш. разреш. экрана настроить нима как.
    https://jsfiddle.net/42wb05Lq/2/
    Ответ написан
    Комментировать
  • Возможно ли как то отсортировать теги по их аттрибутам с помощью js?

    @zombtron
    Ну, вот так где-то
    (если с сортировкой строк. для int лень ковырять):
    <div class="memory" memory="128-gb">128-gb</div>
    	<div class="memory" memory="64-gb">64-gb</div>
    	<div class="memory" memory="256-gb">256-gb</div>
    <script>

    unordered = {};
    keys = Array();
    divs = document.querySelectorAll('.memory');
    for(i=0; i<divs.length; i++){
    	keys[i] = divs[i].attributes.memory.nodeValue;
    	unordered[divs[i].attributes.memory.nodeValue] = divs[i];
    	parentCont = divs[i].parentNode;
    	divs[i].remove();
    }
    keys = keys.sort();
    
    for(i=0; i<keys.length; i++){
    	parentCont.appendChild(unordered[keys[i]]);
    }

    </script>
    Ответ написан
  • Как выполнить этот скрипт не используя .onload?

    @zombtron
    Можно конечно вставлять скрипт где-то в середине/конце страницы, но как по мне, скрипты должны быть в шапке. defer="defer" вам поможет:
    <head>
    	<script defer="defer" src='scripts/script.js'></script>
    </head>

    или
    <head>
    	<script defer="defer">

    window.onload = function() {
                    document.getElementById('mobile_main_nav').onclick = function() {
                        openbox('mobile_main_nav_items', this);
                        return false;
                    };
                };
    
                // если блок включен
                function openbox(id, toggler) {
                    var div = document.getElementById(id);
                    if(div.style.opacity == 1) {
                        div.style.height = 0;
                        div.style.opacity = 0;
                        toggler.innerHTML = 'Открыть';
                        toggler.style.background = '#393b3f';
                    }
    
                    // если блок выключен
                    else {
                        div.style.opacity = 1;
                        div.style.height = '155px';
                        toggler.innerHTML = 'Закрыть';
                        toggler.style.background = '#393b3f';
                    }}

    </script>
    </head>
    Ответ написан
    1 комментарий
  • Как открыть новое окно на текущей странице?

    @zombtron
    <a href="#nul" onclick="window.open('http://site.com/page.html ','','Toolbar=1,Location=0,Directories=0,Status=0,Menubar=0,Scrollbars=0,Resizable=0,Width=550,Height=400');">Название</a>


    Такое?
    С параметрами окна сами разбирайтесь. Мне влом их расписывать, да и они вроде как "говорящие".
    Ответ написан
  • Как сделать бесконечное нажатие кнопки на сайте каждый раз когда она становится активной?

    @zombtron
    А вот так:
    function whatDo(){...code...};
    
    function repeat(){
        setTimeout
        (
            function()
            {
                 whatDo();
                 repeat()
            },
            500
        );
    }
    
    repeat();
    Ответ написан
    Комментировать