Ответы пользователя по тегу HTML
  • Как принудительно выбрать элемент в окошке?

    @lolzqq
    HTML,CSS,JS,PHP
    Михаил, js вам сделает только такое если этого достаточно, то ваш код на jquery $(selector).attr('selected','');, на чистом js elem.setAttribute('selected', '')
    Т.е. если вам не надо полностью симулировать работу мышью со стороны пользователя - то пожалуйста.
    Ответ написан
    Комментировать
  • Не проверяет номер телефона. В чем ошибка?

    @lolzqq
    HTML,CSS,JS,PHP
    Упрощённо работает так
    Ответ написан
    Комментировать
  • Как сверстать блок, плавно появляющийся из ниоткуда и отодвигающий контент?

    @lolzqq
    HTML,CSS,JS,PHP


    Если хотите, чтобы блок расширялся от центра в стороны, ещё нужно анимировать стили left и top
    Ответ написан
    Комментировать
  • Как "правильно" добавить форму для регистрации на сайте?

    @lolzqq
    HTML,CSS,JS,PHP
    Зайдите на сайты известных компаний, да поглядите через веб-инструменты. В чём проблема-то.
    Ответ написан
  • Правильно ли я назвал классы и сделал структуру HTML?

    @lolzqq
    HTML,CSS,JS,PHP
    По композиции луну бы сделать закреплённой жёстко, чтобы на движения мыши не реагировала.
    А классы - главное чтобы система была какая-то, так-то называйте их как угодно

    Ругается на значение аттрибута as="fonts" - должно быть as="font" MDN

    Попробуйте уменьшить размер окна браузера по ширине - на первом экране должно кое-что броситься в глаза.
    Я вот это увидел. Мне не понравилось.
    rdaCkvI6lng.jpg?size=1019x991&quality=96&sign=31a23406ec46f82b7daeaafa2e868c9e&type=album

    Ну и качество вырезанной вампирши оставляет желать лучшего.
    Ответ написан
  • Как можно перевести сайт на wordpress. В файлах темы?

    @lolzqq
    HTML,CSS,JS,PHP
    самописно это выглядит примерно так:
    - в functions.php темы прописываете функцию, определяющую язык страницы (можно организовать по поиску поддомена в текущем url, по поиску папки в url страницы, по параметрам GET или POST запроса, по языку браузера пользователя через $_SERVER["HTTP_ACCEPT_LANGUAGE"])
    - в шаблонах темы, где выводятся ваши поля используете эту функцию-определитель языка и выводите данные из бд на нужном языке, используя url нужной статьи. (например создать страницу вашсайт.ру/articles/skovorodki-ru, рассказывающую про сковородки на русском языке и создать её клон, но уже с url вашсайт.ру/articles/skovorodki-en для английского языка )
    - для дефолтных элементов wordpress, woocommerce и других плагинов, выводящих текст замену текста производить с помощью фильтров

    встроенным функционалом wordpress-multisite:
    - как это включить: кодекс вордпресс
    - как это работает: фактически вы создаёте пустые клоны своего основного сайта, крепящиеся или к поддоменам или к подпапкам. У клонов будет общий дизайн, общие плагины и общая база данных пользователей (общая авторизация на всех сайтах сети) и никакого контента + собственные 6 таблиц в вашей основной бд под контент этого сайта-клона. Весь остальной контент будете сами копировать и переводить вручную или с помощью плагинов.

    плагинами:
    - ищите плагины типа такого multilanguage

    самописный перевод на ajax с помощью javascript:
    - это как самый первый вариант, только перевод будет запрашиваться на стороне клиента у сервера, полученные переведённые строки будут расставляться средствами javascript в нужные вам элементы страницы без перезагрузки страницы.
    Ответ написан
    2 комментария
  • Как во время скрола скрыть черный блок?

    @lolzqq
    HTML,CSS,JS,PHP
    С помощью Intersection Observer API
    Ответ написан
    Комментировать
  • Как разместить несколько блоков рядом по горизонтали css?

    @lolzqq
    HTML,CSS,JS,PHP
    display: inline-block;
    Ответ написан
    Комментировать
  • Событие Change нужно сделать зависимые списки, и при выборе последнего должна выдаваться разная цена, как это сделать?

    @lolzqq
    HTML,CSS,JS,PHP
    Не знаю, должна ли быть связь между кол-вом комнат и площадью, при выборе именно площади - стоимости выдаёт разные, соответственно придуманным мной тарифам. Количество комнат в этом примере не учитывается.

    Код закомментировал, где в него влез и что-то переписал/добавил
    <!doctype html>
    <html lang="ru">
    <head>
      <meta charset="utf-8" />
      <title></title>
    
    </head>
    
    <body>
    <div class="select-locations select">
       <label for="location" class="location-label">Расположение</label>
    	<select class="select-street select-location" name="select-street" id="select-street" required>
    		<option value="sunny" selected="selected">ул.Солнечная</option>
    		<option value="kobceva">ул.Кобцева</option>
    		<option value="gagarina">ул.Гагарина</option>
    	</select>
    </div>
    <br>
    <div class="amount select area" id="input-select">
    	<label for="amount">Количество комнат</label>
    		<select class="select-room select-layout" name="select-room" id="select-room" required>
    			<option value="1">1</option>
    			<option value="2">2</option>
    			<option value="3">3</option>
    		</select>                       
    </div>
    <div class="layout-flat select">
    	<label for="layout">Общая площадь</label>
    	<select class="select-area area-block" name="select-area2" id="select-area" required>
    		
    	</select>
    <h3 class="last-price select">Цена <span class="price"></span></h3>
    </body>
    <script>
    function selectStreet(room,rooms){
      room.innerHTML = "";
      var c = this.value || "sunny", o;
      for(let i = 0; i < rooms[c].length; i++){
        o = new Option(rooms[c][i],i,false,false);
        room.add(o);
      };
    }
    function selectRoom(area,areas){
      area.innerHTML = "";
      var c = this.value || 1, o;
      for(let i = 0; i < areas[c].length; i++){
    	  // эту строчку модернизировал, чтобы в атрибут value выводилась площадь квартиры
        o = new Option(areas[c][i],areas[c][i],false,false); 
        area.add(o);
      };
    }
    function showPrice(tariffs,street,area){
    	// модифицировал вашу функцию
    	const selectElement = document.querySelector('.select-area');
    	
    	
    	selectElement.addEventListener('change', (event) => {
    		var street_option=street.value; // получаем значение улицы
    		var area_option=area.value; // получаем площадь квартиры
    		var tariff=tariffs[street_option]; // выбираем тариф
    		var cost=area_option*tariff; // перемножаем площадь квартиры на тариф
    	  
    	  const result = document.querySelector('.price');
    	  // вставляем вычисленную цену в '.price'
    	  result.textContent = cost;
    	});	
    }
    
    document.addEventListener("DOMContentLoaded", function(){
    	var	rooms = {
    	  sunny: ["1", "2", "3"],
    	  kobceva: ["1", "2", "3"],
    	  gagarina: ["1", "2"]
    	};
    	var	areas = {
    	  1: ["41.27", "46.96", "48.31"],
    	  2: ["68.33", "69.64", "70.97", "72.39"],
    	  3: ["67.31", "67.60","86.23", "94.54"]
    	};
    	// поскольку вы не указали, какой будет алгоритм расчёта цен,
    	// я решил, что это будут тарифы, зависящие от улицы
            // при желании, можете усложнить структуру и прописать свою цену для каждого набора квартир
            // тогда и в функции showPrice() нужно будет побольше факторов учитывать
            // в строке var tariff=tariffs[street_option]; // выбираем тариф - навигация будет иметь больше [ ] скобок
    	var tariffs = {
    		sunny: 100, // для улицы sunny квадратный метр стоит 100 ед.
    		kobceva: 200, // для улицы kobceva квадратный метр стоит 200 ед.
    		gagarina: 300 // для улицы gagarina квадратный метр стоит 300 ед.
    	}
    	var	street = document.getElementById("select-street");
    	var	room = document.querySelector("#select-room");
    	var	area = document.querySelector("#select-area");
    	selectStreet(room,rooms);
    	selectRoom(area,areas);
    	
    	street.addEventListener('change',selectStreet(room,rooms))
    	room.addEventListener('change',selectRoom(area,areas))
    	
    	showPrice(tariffs,street,area);
    
    	
    })
    
    </script>
    </html>
    Ответ написан
    3 комментария
  • Как сверстать блок картинок?

    @lolzqq
    HTML,CSS,JS,PHP
    Верстать. На HTML и CSS. В чём сложность то?
    Ответ написан
  • Как правильно написать слайдер для видео?

    @lolzqq
    HTML,CSS,JS,PHP
    грузите одно так, как показали в коде нам, замеряете на js размеры блока
    остальные грузите также, только вместо
    <video class="video" playsinline autoplay muted loop>
                  <source
                    src="assets/video/fall.mp4"
                    type="video/mp4">
                </video>

    оставьте заглушку-картинку для начала с теми же размерами, как и для первого слайда с видосом
    Ответ написан
    Комментировать
  • Как всерстать такой адаптивный блок?

    @lolzqq
    HTML,CSS,JS,PHP
    <section>
     <article>
                    <div class="container-fluid">
                        <div class="row col-sm-12 col-md-8 p-0 bg-gray">
    
                                <div class="col-12  py-5 header-line-top position-relative">
                                    <div class="row">
                                            <div class="col-12 col-xxl-4 col-md-5 col-lg-5 ml-auto">
                                                <p>Высокий уровень сервиса и конфиденциальность</p>
                                            </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12 col-xxl-4 col-md-5 col-lg-5 ml-auto">
                                            <h2>10 лет юридической практики</h2>
                                        </div>
                                    </div>
                                </div>
                                    <div class="col-4">
                                        <div class="bg-gray p-5">
                                            <div class="row g-0 position-relative">
                                                <div class="col">
                                                    <img src="/img/abstract1 1.jpg" class="img-fluid position-absolute bt-img" alt="">
                                                </div>
                                                <div class="col">
                                                    <img src="/img/abstract2 1.jpg" class="img-fluid position-absolute bb-img" alt="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                    </div>  
                </article>
            </section>

    6052707d91151286283108.png
    Ответ написан
    Комментировать
  • Почему опера обновила стили, а хром - нет?

    @lolzqq
    HTML,CSS,JS,PHP
    Сtrl+F5 в нужном браузере.
    Ответ написан
    Комментировать
  • Почему скрипты выполняются в таком порядке?

    @lolzqq
    HTML,CSS,JS,PHP
    Браузер сначала скачивает и выполняет первый, а потом - второй. Поменяйте их местами - будет наоборот.

    Если оформите так:
    <script>
        async function a(){console.log('hi');}
        async function b(){new Promise(resolve => {
             for(let i = 0; i <= 1; i++) {
                  if(i === 1) resolve(i)
             }
         }).then((res) => console.log(res));}
    b();
    a();
    </script>

    То сперва выполнится функция с console.log('hi'), а только потом функция с console.log(res);
    Ответ написан
    Комментировать
  • Как сверстать эту сетку?

    @lolzqq
    HTML,CSS,JS,PHP
    Ответ написан
    Комментировать
  • Как сделать чтобы фон был поверх картинки?

    @lolzqq
    HTML,CSS,JS,PHP
    <div style="background-image: url(<адрес картинки>); background-size:cover;">
       <div style="background-color: rgba(100,100,255,0.7);">блок с вашей формой</div>
    </div>
    Ответ написан
    2 комментария
  • Как отверстать этот блок?

    @lolzqq
    HTML,CSS,JS,PHP
    Делите на блоки
    603633a723dd6742573589.png
    - полупрозрачные уменьшенные копии блока (под блоком с контентом) - как псевдоэлементы ::after с разным смещением по top и с разным значением opacity
    - обмен валют - это уже на javascript + сервер делается
    Ответ написан
  • Как сделать такую прокрутку страницы?

    @lolzqq
    HTML,CSS,JS,PHP
    Полотно экрана или контент-блок делим на одинаковые части, высотой с экран или, как на вашем сайте-примере - высотой, которую определил дизайнер. Каждой части присваиваем уникальный class или id - чтобы скрипт мог легко ориентироваться в них.
    Для вычисления позиции прокрутки используется https://developer.mozilla.org/ru/docs/Web/API/Elem... (позиция элемента относительно верхнего левого угла окна браузера) + https://developer.mozilla.org/ru/docs/Web/API/Wind... (позиция вертикального скролла страницы).
    Прокрутка осуществляется с помощью https://developer.mozilla.org/ru/docs/Web/API/Wind... (прокрутка окна браузера до координат).
    На кнопки меню в виде точек слева добавляется прослушиватель click - которым крутится основная часть экрана
    На событие wheel находим ближайший блок для прокрутки и делаем https://developer.mozilla.org/ru/docs/Web/API/Wind... до него.

    З.Ы. когда-то видел клёвую 2D галерею в виде множества ячеек, размещённых как клетки карты. С параллакс-эффектом смотрится залипательно.
    Ответ написан