Ответы пользователя по тегу HTML
  • Реализация автообновления определенного DIV без перезагрузки страницы?

    aliksend
    @aliksend
    Software Engineer
    const updateDiv = () = {
      /* Делаем AJAX запрос. Если используется хоть что-то на клиенте, например jquery, можно написать проще */
      var xhr = new XMLHttpRequest();
      xhr.open('GET', 'updated_div.html', true); // эта страница выдаёт вёрстку нашего дива
      xhr.onreadystatechange =() => {
        if (xhr.readyState != 4) return;
        if (xhr.status != 200) {
          /* Запрос успешен, выводим в div */
          document.getElementById('fon2').innerHtml = xhr.responseText
        } else {
          /* Ошибка запроса, обрабатываем в зависимости от ситуации */
          alert(xhr.responseText);
        }
        setTimeout(updateDiv, 60000); // Ставим таймер на следующее обновление
      }
      xhr.send();
    }
    
    // Вызвать для первого обновления div-а
    updateDiv();


    На самом деле не совсем правильно передавать innerHtml, у вас же скорее всего не обновляется макет, только данные. Тогда можно было бы сделать 'jsx для бедных', вроде такого
    getDivLayout = (data) => {
      return `<a href='${data.url.replace("'", "\\'")}'>${data.text}</a>`;
    }

    и, соответственно, с сервера отправлять json, в onreadystatechange при успешном ответе его парсить и передавать в getDivLayout, результат которого уже вставлять в innerHtml div-а
    Ответ написан
  • Как плавно загружать содержимое?

    aliksend
    @aliksend
    Software Engineer
    Вы уверены что у вас меняется 80% страницы? Неужели на каждой странице свой набор скриптов? Почему-то мне кажется что меняется текстовая часть и один-два скрипта.
    Разделите фронт на изменяемые (динамические) и неизменяемые (статичные) части. Сначала пусть грузится статика, потом AJAX-ом подгружается динамика и отображается. При переходе с сервера загружается только динамическая часть.
    Ответ написан
  • Как раскрыть и закрыть несколько блоков одновременно?

    aliksend
    @aliksend
    Software Engineer
    Для поведения "если хотя бы одна открыта, закрыть все"
    $(function () {
        $('#expand-collapse').on('click',function(){
            var allCollapsed = true;
            $('button[data-toggle="collapse"]').each(function(){
                var objectID=$(this).attr('data-target');
                if($(objectID).hasClass('.collapse')===false)
                {
                    allCollapsed = false;
                }
            });
            $('button[data-toggle="collapse"]').each(function(){
                if (allCollapsed) {
                    $(objectID).collapse('show');
                } else {
                    $(objectID).collapse('hide');
                }
            });
        });
    });


    Для поведения "если хотя бы одна закрыта, открыть все"
    $(function () {
        $('#expand-collapse').on('click',function(){
            var allExpanded = true;
            $('button[data-toggle="collapse"]').each(function(){
                var objectID=$(this).attr('data-target');
                if($(objectID).hasClass('.collapse')===true)
                {
                    allExpanded = false;
                }
            });
            $('button[data-toggle="collapse"]').each(function(){
                if (allExpanded) {
                    $(objectID).collapse('hide');
                } else {
                    $(objectID).collapse('show');
                }
            });
        });
    });


    Честно говоря не тестировал, но если наличие класса "collapse" означает что элемент скрыт, должно работать.
    Ответ написан
  • Почему прозрачный фон занимает место в html?

    aliksend
    @aliksend
    Software Engineer
    Не знаю SCSS и JsBin не захотел работать с вашим кодом, поэтому написать на CSS
    .custom-icon{
      display: block;
      width: 150px;
      height: 150px;
    }
    .icon-room {
      background-image: url('http://pngimg.com/uploads/scratches/scratches_PNG6175.png') no-repeat center;
    }
    .icon-room:hover{
      background-color: lightgray;
      border-radius: 10%;
    }

    Ссылка на пример
    PS Картинка по URL не вместилась в 150х150, но при наведении видно что background меняется
    Ответ написан