Search the Community
Showing results for tags 'js'.
-
Прошу помочь с заданием: Написать файл скрипта, который генерирует три числа, соответствующие значениям высоты, длины и ширины комнаты. Отобразить в консоли: a.Площадь стен комнаты b.Объём комнаты c.*Объём комнаты за вычетом случайно сгенерированного количества чисел, которые определяет объёмы случайно зашедших в комнату людей. (в итоге запустит скрипт последством консоли) (заранее огромное спасибо)
-
Всем привет, у меня такой вот вопрос, делаю сайт через react и при изменении расширения что-то идёт не так и какой-то бред получается, подскажите как решить данную проблему. Я вообще не понимаю из-за чего это происходит, по этому не могу нормально объяснить 😅.
-
Всем привет! Может ли кто-нибудь сказать как реализована такая каруселька у элементов каталога? MyVideo_55.mp4
-
Как правильно сделать раскрывающиеся блоки со скрытым содержанием внутри?
IsayR posted a question in JavaScript
Всем привет! Подскажите, пожалуйста, как правильно сделать раскрывающиеся блоки со скрытым содержанием внутри? У меня в принципе все работает, блок открывается и закрывается, НО если я нажимаю на блок, а не на стрелочку, она у меня остается в таком же положении(а она должна у меня меняться, когда блок открывается), и получается куча мала, и выглядит это не очень презентабельно. Подскажите, пожалуйста! <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper-div"> <div class="div"> <div class="window-one"> <h3 class="title"> Заголовок 1 </h3> <div class="arrow-test"></div> </div> <div class="window-two"> <div class="text">Текст 1</div> </div> </div> </div> <div class="wrapper-div"> <div class="div"> <div class="window-one"> <h3 class="title"> Заголовок 2 </h3> <div class="arrow-test"></div> </div> <div class="window-two"> <div class="text">Текст 2</div> </div> </div> </div> <div class="wrapper-div"> <div class="div"> <div class="window-one"> <h3 class="title"> Заголовок 3 </h3> <div class="arrow-test"></div> </div> <div class="window-two"> <div class="text">Текст 3</div> </div> </div> </div> .div{ border: 1px solid #3A444E; border-radius: 10px; width: 300px; height: 64px; overflow: hidden; } .div.open { height: auto; background: #000; color: #fff; } .window-one { display: flex; align-items: center; justify-content: space-between; } .title { margin-bottom: 20px; } .arrow-test { content: ''; background: url('http://cdn.onlinewebfonts.com/svg/img_387044.png') no-repeat center center / 100%; width: 30px; height: 30px; cursor: pointer; } .arrow-test.open { content: ''; background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Eo_circle_yellow_arrow-up.svg/1024px-Eo_circle_yellow_arrow-up.svg.png') no-repeat center center / 100%; width: 30px; height: 30px; cursor: pointer; } $('.div, .arrow-test').click( function(){ $(this).toggleClass('open')}); -
Всем привет, подскажите, пожалуйста, как сделать так, чтобы форма открывалась при нажатии на кнопку, которой на странице находится несколько штук? У меня есть кнопка и несколько ее копий на странице, и я хочу, чтобы если пользователь захотел нажать на кнопку, только на другом месте страницы, открывалась та же самая форма. Но, к сожалению, ее открывает, только самая первая кнопка, подскажите, пожалуйста, решение! Спасибо! <body> <button class="btn-modal" id="open">Отправить заявку</button> <button class="btn-modal" id="open">Отправить заявку</button> <button class="btn-modal" id="open">Отправить заявку</button> <div class="wrapper-modal" id="wrapperModal"> <div class="overlay-modal" id="overlayModal"></div> <div class="form-modal__item" id="formModal"> <form action="#" id="formModalBody" class="form-modal__body"> <h4 class="form-modal__title"> Оставьте заявку </h4> <span class="close" id="close"> <div class="form-modal__item"> <label for="formName" class="form-modal__label"> Имя: </label> <input id="formName" type="text" name="name" class="form-modal__input" placeholder="Ваше имя *"> </div> <div class="form-modal__item"> <label for="formTel" class="form-modal__label"> Номер телефона: </label> <input id="formTel" type="tel" name="length" class="form-modal__input" placeholder="+7 (___) ___ - __ - __ *"> </div> <div class="form-modal__item"> <label for="formEmail" class="form-modal__label"> Email: </label> <input id="formEmail" type="text" name="width" class="form-modal__input" placeholder="Введите e-mail *"> </div> <button class="form-modal__button" id="open">Отправить</button> </form> </div> </div> </body> #wrapperModal { display: none; position: fixed; width: 100%; height: 100%; z-index: 3; top: 8%; left: 20%; } #wrapperModal.active { display: block; } #overlayModal { position: absolute; top: -8%; left: -20%; width: 100%; height: 100%; z-index: 0; background-color: grey; opacity: 0.5; } .form-modal__body { width: 270px; min-height: 200px; background: #363A4D; border-radius: 20px; padding: 48px 51px 41px 50px; position: relative; } .form-modal__title { font-size: 24px; margin-bottom: 23px; } .close:before, .close:after { position: absolute; content: ' '; right: 28px; top: 16px; height: 18px; width: 2px; background-color: #7E839A; cursor: pointer; border-radius: 5px; } .close:before { transform: rotate(45deg); } .close:after { transform: rotate(-45deg); } .form-modal__label { margin-bottom: 6px; } const btnForm = document.getElementById('open'); const modal = document.getElementById('wrapperModal'); const overlay = document.getElementById('overlayModal'); const close = document.getElementById('close'); btnForm.addEventListener('click', (e) => { e.preventDefault() modal.classList.add('active'); }); const closeModal = () => { modal.classList.remove('active'); } overlay.addEventListener('click',closeModal); close.addEventListener('click',closeModal);
-
Всем привет! Подскажите, пожалуйста, как сделать так, чтобы у меня табы переключались с помощью кнопок "Назад" и "Следующая" с js/jquery. Еще, когда я хочу вернуться назад и нажимаю на предыдущую ячейку, ничего не срабатывает, но когда нажимаю следующую, все прекрасно работает. В общем, у меня какой то кривоватый таб:) Подскажите, пожалуйста! <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tabs"> <div class="tab active"> <div class="tab__content"> <ul class="steps"> <li class="step active">1</li> <li class="step">2</li> <li class="step">3</li> </ul> <h2>Заголовок 1</h2> <p>Текст 1</p> <button class="btnNext">Следующая</button> </div> </div> <div class="tab"> <div class="tab__content"> <ul class="steps"> <li class="step">1</li> <li class="step active">2</li> <li class="step">3</li> </ul> <h2>Заголовок 2</h2> <p>Текст 2</p> <button class="btnNext">Следующая</button> <button class="btnPrev">Назад</button> </div> </div> <div class="tab"> <div class="tab__content"> <ul class="steps"> <li class="step">1</li> <li class="step">2</li> <li class="step active">3</li> </ul> <h2>Заголовок 3</h2> <p>Текст 3</p> </div> </div> </div> ul,li { display: block; cursor: pointer; } .tabs { margin: 50px; } .steps { display: flex; position: absolute; top: 0px; left: 35px; } .step { display: flex; margin-right: 15px; font-size: 15px; justify-content: center; align-items: center; border-radius: 50%; width: 50px; height: 50px; border: 1px solid red; } .step.active{ background: green; } .tab { padding: 20px; background: blue; width: 300px; height: 200px; border-radius: 20px; display: none; } .tab.active { display: block; } (function($) { $(function() { $('ul.steps').on('click', 'li:not(.active)', function() { $(this) .addClass('active').siblings().removeClass('active') .closest('div.tabs').find('div.tab').removeClass('active').eq($(this).index()).addClass('active'); }); }); })(jQuery);
-
Сделал вот такой эффект прокрутки вглубь сайта с появляющимися картинками и исчезающими когда прокручиваешь. let zSpacing = -1000, lastPos = zSpacing / 5, $frames = document.getElementsByClassName('frame'), frames = Array.from($frames), zVals = [] window.onscroll = function() { let top = document.documentElement.scrollTop, delta = lastPos - top lastPos = top frames.forEach(function(n, i) { zVals.push((i * zSpacing) + zSpacing) zVals[i] += delta * -5.5 let frame = frames[i], transform = `translateZ(${zVals[i]}px)`, opacity = zVals[i] < Math.abs(zSpacing) / 1.5 ? 1 : 0 frame.setAttribute('style', `transform: ${transform}; opacity: ${opacity}`) }) } Текст и фото скролятся отлично но если в текст вставить ссылку или кнопку, то они не активными становятся. Если поменять свойство текста, вместо relative на ststic, ссылка работает нормально но уже понятно что её уже не подвинуть. Я не понимаю почему эти ссылки появляются но не работают, ведь если дело в том, что ты должен попасть на нужный фрейм что бы активировать ссылку то почему в таком случае работает static, при том что он тоже появляется и исчезает? И как вообще сделать, что бы ссылка была активна и работала всё время, с появления и до исчезновения?
-
Скрипт добавления <style> к <body> при открытии модального окна
ANDREW-UA posted a question in JavaScript
Подскажите пожалуйста как написать скрипт или пример скрипта. Требуется чтобы при открытии модального окна к body добавлялся стиль padding-right: 17px; или скрипт вычислял ширину скрола ! При закрытии модального окна этот стиль отменялся, проблема заключается добавить отступ на ширину скрола в body при открытом модальном окне, на данном моменте происходит смещение контента из за исчезающего скрола при открытом модальном окне. Так же чтобы скрипт мог содержать несколько ID, так как много окон с разными ID для вызова Строка кода вызывающая модальное окно <div class="btn-custom btn-color-green mb5 open-modal schema-color-button" data-id-modal="modal-order-service"> Прошу помогите, я в JS как первокласник Заранее всем спасибо ! Интересует только JS решение -
Всем привет! Помогите, пожалуйста, добавить в код ограничение по ходам, если возможно как-нибудь проще. В инете находила решения, но с ними код всё равно не работает как положено. Заранее спасибо!! https://jsfiddle.net/6zjoLpnt/1/
-
Ребята, без вас никуда! Подскажите, пожалуйста, первый раз адаптирую и стилизую слайдер splide. Сам он работает, но как его стилизовать? В dev tools стилизация тех же стрелок отражается, но когда вношу их в css - не работает. Почему так? Как, например, тогда опустить ниже стрелки? Где устанавливать брейкпоинты и задавать им свойства? На сайте splide такая инфа по адаптиву. https://splidejs.com/guides/options/#breakpoints Вот типа того что-то пробую... https://jsfiddle.net/aqmuyhwd/
-
Всем привет! Помогите, пожалуйста, найти ошибку в js. Почему-то не срабатывает display: none когда задумано скрыть первую картинку. btn_next.onclick = function () { images[i].style.display = 'none'; } Весь код здесь https://jsfiddle.net/Lx3qagdp/1/ Заранее спасибо!
-
Помогите пожалуйста, не получается сделать постраничную навигацию. Делал все по урокам. в Итоге получилось сделать два разных каталога один с фильтрами другой с постраничной навигацией. И теперь я пытаюсь объединить два каталога. Но не получается. Сами файлы урока в архике каталог. Буду очень благодарен если мне помогут! catalog.phpcatalogDB.js каталог.7z
-
Всем привет! Подскажите, пожалуйста, почему alert выводит 'you are under 18!', затем 'you are more than 18!', а 'you are 18!' пропускает. Имею в виду, если вводить 18, то ок, но если просто нажимать "ок", то как раз 'you are 18!' пропадает. https://jsfiddle.net/4murgp2c/6/ И вот здесь https://jsfiddle.net/4murgp2c/10/ при выборе "ok" alert не должен был предотвратить вывод следующего значения (bad), который по идее должен выводиться только при нажатии на отмену? https://jsfiddle.net/4murgp2c/12/ Здесь какая-то простая ошибка, но моему глазу не видна. Вписываю "you" good не появляется. Заранее спасибо. Такие, возможно, очевидные вещи не видны/не понятны начинающему.
-
Здравствуйте дорогие специалисты програмирования. Взываю вас о помощи!? Прощу Вас уделите мне своё безценное время. Я который раз выполняю тестовое задание для трудоустройства, а мне постоянно отказывают. Я уже в замешательстве, что же я делаю не так. Я просил их, дать мне хоть какую-то критику, единственное что мне отвечают СЛАБО. Но что именно слабо не говорят! Прошу Вас рассмотреть мою из последних тестовую работу и укозать мне ВСЕ мои прогрехи, по полной строгости. Единственная надежда на Вашу благосклонность и доброту. Вот ссылка на гитхаб - https:/github.com/ShusevA/ARI-AJAX-Application Требоватие к этой работе https://docs.google.com/document/d/10gLPHDqGNMDSeSQbYfG8RVtXR3XQOrchSBmd50OzJ_s/edit С уважением к Вам, за ранее спасибо.
-
Добрый день ! Есть проблема при адаптаций экрана 595x740 размер контейнера bootstrap col-md не меняется. Мне нужно чтобы при адаптаций экрана 595х740 показывало по 2 слайда.Как это сделать? main.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="main.css" rel="stylesheet"> <link rel="stylesheet" href="css/font-awesome.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <div class="wrapper"> <header>Номер и почта</header> <main> <nav> <ul class="topmenu"> <li><a href="" class="active">Главная</a> </li> <li><a href="" class="">Вниз<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню второго уровня 0<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">меню второго уровня 1<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">меню второго уровня 2<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">меню второго уровня 2<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> </ul> </li> <li><a href="" class="">Вниз тритий уровень<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">Вправо 1<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">Вправо 2<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">Вправо 3<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> </ul> </li> <li><a href="">Блог<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">Вправо 1<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">Вправо 2<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">Вправо 3<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> </ul> </li> <li><a href="">О нас</a></li> <li><a href="">Блог</a></li> <li><a href="">О нас</a></li> </ul> </nav> <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel"> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <div class="carousel-item active" data-bs-interval="10000"> <img src="image/australia.jpg" height="565px" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h1 style="font-size: 60px;">First slide label йцйцуйу уйуйуйуйуйу фыфыфуу</h1> <p>Some representative placeholder content for the first slide.</p> </div> </div> <div class="carousel-item" data-bs-interval="2000"> <img src="image/parks.jpg" height="565px" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Some representative placeholder content for the second slide.</p> </div> </div> <div class="carousel-item"> <img src="image/skyfoll.jpg" height="565px" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </main> <content class="tab"> <div class="container-prim"> <div class="element-1">Пункт 1</div> <div class="element-2">Пункт 2</div> <div class="element-3">Пункт 3</div> <div class="element-4">Пункт 4</div> </div> <!-- <ul class="zebra"> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> <li>Пункт 3</li> </ul> --> </content> <content class="zero"> <div class="row slider"> <div class="col-md-2"> <div class="details"> <h2>Заголовок 1</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 2</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 3</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 4</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 5</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 6</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 7</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> </div> </content> <footer>Адреса и контактсы</footer> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="main.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> <script> $('.slider').slick({ dots: true, infinite: true, speed: 300, slidesToShow: 4, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 1, arrows: false } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1, arrows: false } } // You can unslick at a given breakpoint now by adding: // settings: "unslick" // instead of a settings object ] }); </script> </body> </html> main.css .wrapper { height: 100%; display: flex; flex-direction: column; } header { height: 30px; width:1200px; margin: 0 auto; padding: 1px; } footer { height: 300px; width:1200px; margin: 0 auto; padding:10px; } main { } body { margin: 0; } header { background-color: #daf0b3f6; } main { background-color:#ecf0f1; height: 600px; width: 1200px; margin: 0 auto; } content.tab { background-color:#66c3ee; height: 300px; width:1200px; margin: 0 auto; padding:10px; box-shadow: 0 -5px 5px 0 rgba(50, 50, 50, 0.5); } content.zero { background-color:#b7e9b5; height: 350px; width:1200px; margin: 0 auto; padding:10px; box-shadow: 0 -5px 5px 0 rgba(50, 50, 50, 0.5); } footer { background-color:#000000; color:white; box-shadow: 0 -5px 5px 0 rgba(65, 62, 99, 0.596); } @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600&subset=latin,cyrillic); *{box-sizing: border-box;} body { margin: 0; font-family: 'Open Sans', sans-serif; } nav {background: #2fa4e7 ;} nav ul { margin: 0; padding: 0; list-style: none; } nav ul:after { content: ""; display: table; clear: both; } nav a { text-decoration: none; display: block; transition: .3s linear; } .topmenu > li { float: left; position: relative; border-left: 1px solid black; } .topmenu > li:first-child {border-left: 0;} .topmenu > li > a { padding: 7px 30px; font-size: 14px; text-transform: uppercase; color: #FEFDFD; letter-spacing: 2px; } .topmenu > li > a.active { color: rgb(0, 0, 0); } .submenu a:hover {color: #0037cf;} .topmenu .fa, .submenu .fa { margin-left: 5px; color: inherit; } .submenu { position: absolute; z-index: 5; min-width: 200px; background: white; border-top: 1px solid #CBCBCC; border-left: 1px solid #CBCBCC; border-right: 1px solid #CBCBCC; visibility: hidden; opacity: 0; transform-origin: 0% 0%; transform: rotateX(-90deg); transition: .3s linear; } .submenu li {position: relative;} .submenu li a { color: #282828; padding: 10px 20px; font-size: 13px; border-bottom: 1px solid #CBCBCC; } .submenu .submenu { position: absolute; left: 100%; top: -1px; transition: .3s linear; } nav li:hover > .submenu { transform: rotateX(0deg); visibility: visible; opacity: 1; } .container-prim { font-size: 0; padding: 10px 50px 15px; text-align: center; } .element-1, .element-2, .element-3, .element-4 { display: inline-block; width: 250px; height: 265px; font-size: 20px; font-weight: 500; text-align: center; padding-top: 10px; vertical-align: bottom; box-shadow: 5px -5px 5px 0 rgb(0, 0, 0); border-radius: 8px; } .element-1 { background-color: #fbfdfd; } .element-2 { color: rgb(0, 0, 0); background-color: #fbfdfd; margin-left: 20px; } .element-3 { color: rgb(0, 0, 0); background-color: #fbfdfd; margin-left: 20px; } .element-4 { color: #000000; background-color: #fbfdfd; margin-left: 20px; } .element-relative { position: relative; top: -20px; left: -20px; } /* .zebra { font: 14px Verdana, Geneva, sans-serif; text-align: center; } .zebra li { display : inline-block; width : 250px; height: 280px; margin-bottom: 10px; background: #ffffff; vertical-align: top; text-align: center; line-height: normal; box-shadow: 5px -5px 5px 0 rgb(0, 0, 0); /* эмуляция inline-block для IE6-7*/ /* //display : inline; //zoom : 1; } */ .carousel-caption { transform: translateY(-50%); bottom: initial; top: 50%; } .details { margin: 20px 20px; background-color: #fff; padding: 30px 20px; position: relative; z-index: 1; height: 260px; } .details h2 { font-size: 22px; text-transform: uppercase; transition: 0.6s all; } .details p { font-size: 14px; transition: 0.6s all; } .details a { text-decoration: none; text-transform: capitalize; color: #fff; background-color: #2c3e50; padding: 6px 12px; display: inline-block; font-size: 14px; border: 1px solid #2c3e50; transition: 0.6s all; } .details::before { content: ""; width: 5px; height: 100%; background-color: #ff5722; position: absolute; left: 0; top: 0; z-index: -1; transition: 0.6s all; } .details:hover::before { width: 100%; } .details:hover h2,.details:hover p { color: #fff; } .details:hover a { background-color: transparent; border: 1px solid #fff; }
-
Может кто-то оценить уже готовый сайт? Заранее спасибо.
-
Подскажите, пожалуйста, как можно исправить не работающий клик, в данном случае, по меню-бургеру. Срабатывает вместо этого hover. Заранее спасибо! <nav class="burger-menu mobile-open"> <button class="burger-menu__btn-mobile"> <i class="fas fa-bars"></i> <span>Menu</span> </button> <ul class="burger-menu__list"> <li class="burger-menu__item"> @@include('./partials/menu/_menu.html', { "item": "contacts" }) </li> <li class="burger-menu__item"> @@include('./partials/menu/_menu.html', { "item": "e-shop" }) </li> <li class="burger-menu__item"> @@include('./partials/menu/_menu.html', { "item": "faq" }) </li> <li class="burger-menu__item"> @@include('./partials/menu/_menu.html', { "item": "home" }) </li> </ul> </nav> var menuEl = document.querySelector('.burger-menu'); var btnEl = document.querySelector('.burger-menu__btn-mobile'); function toggleMenu() { menuEl.classList.toggle('open'); } btnEl.onclick = toggleMenu;
-
Всем привет, у меня проблема, не работает моб.меню, вроде все пересмотрел, но ничего так и не нашел. Смотрел на самом пк, через файл html все робит, но заходя на сайт почему то никак не реагирует мобильное меню Сайт : Brownail.ru
-
У меня в тильде есть Zero Block с кнопками (например b1, b2, b3) и есть блок с формой в которой есть выпадающий список со значениями (l1, l2, l3). Как мне сделать так, чтобы по нажатию b1, b2, b3 из Zero Block, страница опускалась к блоку с формой и там в списке выставлялось автоматически, соответственно, l1, l2, l3?
-
Требуется сделать строку ввода в которые вписывается опреленная ссылка(любая) например:"https://htmlforum.org/forum/123" Нужно, чтобы по нажатию кнопки в веденной ссылке менялась половина до опреденного домена типа org с того что было например на "https://123htmlsuper.ru/forum/123" . То есть не просто с org на ru, а полностью от https до слеша перед org Дальнейший вывод этой ссылки или кнопки для перехода на эту ссылку Нужно это для сайта в "блокноте" html css Help
-
Столкнулся с проблемой показа скрытых элементов. Ставлю div'у display:none и при выборе radio кнопки, div должен отображаться, но этого не происходит, прошу помочь.. <label>Нужны ли распашные дверцы?</label> <p><input type="radio" name="swing" onclick="ShowElement1">Да</p> <p><input type="radio" name="swing">Нет</p> <div id="swing"> <p><label>Введите размер ячеек:</label></p> <p>Высота<input type="number"></p> <p>Ширина<input type="number"></p> <p>Глубина<input type="number"></p> </div> #swing { display: none; } function ShowElement1(){ document.getElementById("swing").style.display='block'; } Разобрался
-
Здравствуйте возникла проблема: http://prntscr.com/t96dcc (parallax) его высота смещает блок с текстом. Может подскажите другую рамку с текстом или как исправить это. Параллакс: <section class="parallax sticky" id="scene"> <div class="parallax-L" data-depth="0.3" id="L"><img src="img/bmw-m32.png" alt="" /></div> #L { width: 100%; height: 50vh; padding: 0; margin: 0; } .L { background: url(bmw-m32.jpg) left no-repeat; background-size: cover; overflow: hidden; } img { max-width: 20%; height: auto; } .sticky{ position: sticky; top: 0; } Рамка с текстом: <div class="ramka-5"> Рамка 5 </div> .ramka-5 { width: 4000px; position: relative; z-index: 2; background-color: white; width: 50%; margin: 0 auto; padding: 25px; border-right: 1px solid #333; border-left: 1px solid #333; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-family: 'Roboto Condensed', sans-serif; }
-
Отправка нестандартных форм на конструкторах сайтов
РоманФ posted a question in Web-site Development
Возникли сложности с созданием нестандартной формы в конструкторе сайтов, может кто-то сталкивался с такими проблемами? Как решать такие проблемы в конструкторах по типу Lp Motor и Tilda(есть блок html есть куда вставить css, ну и соответственно есть возможность вставлять скрипты js), что использовать и как отправлять формы на почту в такой ситуации? -
Прошу оценить дизайн, юзабилити и общее впечатление https://ivanoffivan13.github.io/portfolio/
-
Здравствуйте! Возникла проблема с реализацией одной идеи. Есть интерактивный объект с возможностью прокрутки городов. И есть фотографии, сделанные в виде cards bootstrap 4. Необходимо, чтобы при выборе города выделялись определенные фотографии. Можете подсказать, как можно это реализовать в верстке, какие материалы изучить? Схематический рисунок прикреплен ниже. Заранее спасибо)
