Search the Community
Showing results for tags 'javascript'.
-
$(function () { var mixer = mixitup('.directions__list'); $('.directions__filter-btn').on('click', function () { $('.directions__filter-btn').removeClass('directions__filter-btn--active') $(this).addClass('directions__filter-btn--active') }) })
-
Всем привет, у меня такой вот вопрос, делаю сайт через react и при изменении расширения что-то идёт не так и какой-то бред получается, подскажите как решить данную проблему. Я вообще не понимаю из-за чего это происходит, по этому не могу нормально объяснить 😅.
-
Подскажите пожалуйста, как правильно сделать кастомный список стран используя API. Вот fetch код: const countryList = document.querySelector('.form-list.country'); fetch('https://restcountries.com/v3.1/all').then(res => { return res.json(); }).then(data => { let output = ''; data.forEach(country => { output += `<li class="form-item" data-value="${country.name.common}">${country.name.common}</li>`; countryList.innerHTML = output; }); }).catch(err => { console.log(err); }); полный код html, css, js Во втором списке "Country" список формируется, но название страны не поставляется в форму, а атрибут "data-value="" " в инпут ниже. В первом списке "Guests Amount" все ок, т.к. данные прописаны в html. Нужен такой же, но со странами. Сразу скажу, с тегом select все работает, но мне нужна стилизованная выпадашка. Заранее спасибо.
-
Сколько не пытался все это сделать, ничего не получалось Добавление кнопки меню на сайт с dark mode, изменение бекграунда, высоты, размеров текста для удобного чтения. Находил много кодов для этого, но никак не мог разобраться что и куда вставить, так как большинство кодов html,js,css были добавлены веб-конструктором Пытался разобраться, обучаясь на разных сайтах, но так и не смог понять что к чему. Возможно, у кого-то есть статья на эту тему или кто-то сможет обьяснить что и куда Зарание спасибо.
-
Есть несколько страниц, которые нужно перенести в свой блог, а точнее часть кода страницы. Перенести их простым копированием html возможно, но интересует именно перенос с обновлением контента из копируемой страницы. Существует ли простое решение этой задачи, или нужен комплексный подход?
- 1 reply
-
- javascript
- css
-
(and 1 more)
Tagged with:
-
Всем привет! Помогите правильно поставить localStorage в скрипт. У меня почему-то не срабатывает, и при обновлении страницы теряется класс актив. Пробовала много разных вариаций, но всё равно не срабатывает, не могу понять, что не нравится. Сам скрипт: <input <?= $checked; ?> type="checkbox" id="compareid_<?= $arItem['ID']; ?>" data-id="<?= $arItem['ID']?>" onchange="compare_tov(<?= $arItem['ID']; ?>);"> <label for="compareid_<?= $arItem['ID']; ?>" style="display: block; width: 36px; height: 36px; position: absolute; top: 55px;"> <span class="comparTov_<?= $arItem['ID']; ?>" style="background:url(image1.png);"></span> </label> function compare_tov(id) { var chek = document.getElementById('compareid_'+id); if (chek.checked) { //Добавить var AddedGoodId = id; $.get("/local/ajax/list_compare.php", { action: "ADD_TO_COMPARE_LIST", id: AddedGoodId}, function(data) { $('#my_compare_list_count').html(data); var activeID = $('.comparTov_'+id).html('<img src="image2.png" />').addClass('active'); console.log(activeID); localStorage.getItem("active", activeID); } ); } else { //Удалить var AddedGoodId = id; $.get("/local/ajax/list_compare.php", { action: "DELETE_FROM_COMPARE_LIST", id: AddedGoodId}, function(data) { $('#my_compare_list_count').html(data); var activeID = $('.comparTov_'+id).html('<img src="image1.png" />').removeClass('active'); console.log(activeID); localStorage.removeItem("active", activeID); } ); } }
-
Всем привет! Помогите, пожалуйста, добавить в код ограничение по ходам, если возможно как-нибудь проще. В инете находила решения, но с ними код всё равно не работает как положено. Заранее спасибо!! https://jsfiddle.net/6zjoLpnt/1/
-
Ребята, без вас никуда! Подскажите, пожалуйста, первый раз адаптирую и стилизую слайдер splide. Сам он работает, но как его стилизовать? В dev tools стилизация тех же стрелок отражается, но когда вношу их в css - не работает. Почему так? Как, например, тогда опустить ниже стрелки? Где устанавливать брейкпоинты и задавать им свойства? На сайте splide такая инфа по адаптиву. https://splidejs.com/guides/options/#breakpoints Вот типа того что-то пробую... https://jsfiddle.net/aqmuyhwd/
-
Всем привет! Подскажите, пожалуйста, почему 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 не появляется. Заранее спасибо. Такие, возможно, очевидные вещи не видны/не понятны начинающему.
- 3 replies
-
- javascript
- js
-
(and 1 more)
Tagged with:
-
Ссылка на тетрис: http://onlinetetris.noradrzo.beget.tech/ Добрый день, столкнулась с проблемой кнопки “пауза” в игре сделала обработчик на кнопку “пауза” (в самом конце файла js) написала переменную isPaused по умолчанию со значением false (пока игра не начнется) (317 строчка в js) в функции падении фигур move(321 строчка в js), добавила условие, что если не на паузе игра, то фигуры падают но в итоге фигуры вообще не падают, в консоле ошибку не выдает где допущена ошибка?
-
Подскажите, пожалуйста, как можно исправить не работающий клик, в данном случае, по меню-бургеру. Срабатывает вместо этого 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;
- 1 reply
-
- js
- javascript
-
(and 2 more)
Tagged with:
-
Верстка за отзыв\работу в портфолио\символическую плату
Хромихин Дмитрий posted a topic in Freelance
Здравствуйте. Начинающий верстальщик. Ищу первые заказы. Готов верстать что угодно за любую плату (в том числе и бесплатно). Есть 5-7 учебных работ, но этим никого не впечатлить -- очень хочу практического опыта. Использую HTML5/CSS3, JS, JQuery, BEM. Так же разные инструменты, вроде Git, GitHub, SASS/SCSS, Gulp. Если не знаю чего-то необходимого для Вашего проекта\работы -- обязательно разберусь. Если вы разработчик и вам некому спихнуть рутинную работу - я с радостью возьму её на себя; Верстаю из Figma, Photoshop, Illustrator. Могу в адаптивность, отзывчивость, кроссбраузерность, несложную анимацию. телеграмм: туц ; почта: [email protected] Точно на связи с 9:00 до 22:00. Открыт для любых предложений. -
Здравствуйте, пытаюсь сделать небольшой редактор. Сначала нажимается кнопка на html-странице, потом заполняется форма с параметрами графоэлемента (иконы), эти параметры считывает скрипт, передаёт их в другую функцию. Та формирует код HTML с тегом svg и вставляет в блок draw. В этом деле вообще начинающий, ещё в голове путаница с расположением элементов, паддингами и т.п. А проблема, что после исполнения скрипта ничего не происходит, иногда на секунду мелькает что-то похожее, но в целом результата нет. Код HTML: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Иконы</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="open-button"> <button onclick="openForm()">Открыть форму</button> </div> <div class="form-popup" id="IconForm"> <form class="form-container"> <h1>Параметры иконы</h1> <label for="bordercolor"><b>Цвет границы</b></label> <select id='select_bc' size='1'> <option value='#000'>Чёрный</option> <option value='#00f'>Синий</option> <option value='#f00'>Красный</option> <option value='#0f0'>Зелёный</option> </select> <p></p> <label for="background"><b>Цвет фигуры</b></label> <select id='select_bg' size='1'> <option value='#fff'>Белый</option> <option value='#bbf'>Синий</option> <option value='#fbb'>Красный</option> <option value='#bfb'>Зелёный</option> </select> <p></p> <label for="fontcolor"><b>Цвет текста</b></label> <select id='select_fc' size='1'> <option value='#000'>Чёрный</option> <option value='#00f'>Синий</option> <option value='#f00'>Красный</option> <option value='#0f0'>Зелёный</option> </select> <p></p> <label for="text"><b>Содержание фигуры</b></label> <textarea id="text_in" cols="20" rows="3"></textarea> <button type="submit" class="btn" onclick="return acceptArgs()">Принять</button> <button type="submit" class="btn cancel" onclick="return closeForm()">Закрыть</button> </form> </div> <div id="Draw"></div> <script type="text/javascript" src="script.js"></script> </body> </html> CSS: {box-sizing: border-box;} /* Кнопка, используемая для открытия формы */ .open-button { background-color: #555; color: white; padding: 16px 20px; border: none; cursor: pointer; opacity: 0.8; position: fixed; width: 280px; } /* Всплывающая форма-скрыта по умолчанию */ .form-popup { display: none; position: fixed; border: 3px solid #f1f1f1; z-index: 9; } /* Добавить стили для контейнера формы */ .form-container { max-width: 300px; padding: 10px; background-color: white; } /* Поля ввода полной ширины */ .form-container input[type=text], .form-container input[type=password] { width: 100%; padding: 15px; margin: 5px 0 22px 0; border: none; background: #f1f1f1; } /* Когда входы получают фокус, сделайте что-нибудь */ .form-container input[type=text]:focus, .form-container input[type=password]:focus { background-color: #ddd; outline: none; } /* Стиль для кнопок */ .form-container .btn { background-color: green; color: white; padding: 16px 20px; border: none; cursor: pointer; width: 100%; margin-bottom:10px; opacity: 0.85; } /* Красный цвет фона для кнопки "Отмена" */ .form-container .cancel { background-color: red; } /* Добавить некоторые эффекты наведения на кнопки */ .form-container .btn:hover, .open-button:hover { opacity: 1; } JS: function openForm() { document.getElementById("IconForm").style.display = "block"; } function closeForm() { document.getElementById("IconForm").style.display = "none"; return false; } function drawIcon(bc, bg, fc, text) { var svg = '<svg> <rect rx="32.8" ry="18.3" x="500" y="500" height="55" width="99" '; svg += 'fill="'+ bg + '" stroke="'+ bc +'" stroke-width="2px" />'; svg += '<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill='+fc+";'>"; svg += text + "</text></svg>"; alert(svg); document.getElementById('Dragon').innerHTML += svg; return true; } function acceptArgs() { var bc = document.getElementById("select_bc"); bc = bc.options[bc.selectedIndex].value; var bg = document.getElementById("select_bg"); bg = bg.options[bg.selectedIndex].value; var fc = document.getElementById("select_fc"); fc = fc.options[fc.selectedIndex].value; var text = document.getElementById("text_in").value; closeForm(); drawIcon(bc, bg, fc, text); }
- 1 reply
-
- javascript
- css
-
(and 2 more)
Tagged with:
-
Всем привет. При клике (добавляю active к label) делает активными все элементы, а не текущий? Как быть? $(document).on('change', '.compare-control', function(){ var id = $(this).val(); var url = '/?action=DELETE_FROM_COMPARE_LIST&ajax_action=Y&id='+id; if ($(this).prop('checked')) { url = '/?action=ADD_TO_COMPARE_LIST&ajax_action=Y&id='+id; } $.get(url, function() { BX.onCustomEvent('OnCompareChange'); }); // здесь беда!!!при клике на элемент, делает элементы все активными, а не текущий. if($('.catalog-content-main-item-top-fav').hasClass('active')) { $('.catalog-content-main-item-top-fav').removeClass('active'); }else{ $('.catalog-content-main-item-top-fav').addClass("active"); } }); BX.addCustomEvent('onCatalogDeleteCompare', function(id) { $('.compare-control[value="'+id+'"]').prop('checked', false); }); Код html: <label class="catalog-content-main-item-top-fav <?= array_key_exists($arItem['ID'], $_SESSION["CATALOG_COMPARE_LIST"][5]['ITEMS'])?'active':''?>" > <input onclick="function f(e) { e.preventDefault();}" style="display: none" type="checkbox" value="<?=$arItem['ID'];?>" class="compare-control" <? if(isset($_SESSION['CATALOG_COMPARE_LIST']['5']['ITEMS'][$arItem['ID']])):?> checked="checked" <? endif;?>> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> <path d="M12.2536 19.2043L12 19.055L11.7464 19.2043L5.28009 23.0103L6.73156 15.3278L6.78144 15.0638L6.58881 14.8765L1.09502 9.53481L8.50172 8.61114L8.7836 8.57598L8.89772 8.31586L12 1.24455L15.1023 8.31586L15.2164 8.57598L15.4983 8.61114L22.905 9.53481L17.4112 14.8765L17.2186 15.0638L17.2684 15.3278L18.7199 23.0103L12.2536 19.2043Z" fill="white" stroke="#E09B3D"/> </svg> </label> а этот код срабатывает только после перезагрузки страницы: <?= array_key_exists($arItem['ID'], $_SESSION["CATALOG_COMPARE_LIST"][5]['ITEMS'])?'active':''?>
- 3 replies
-
- bitrix
- javascript
-
(and 2 more)
Tagged with:
-
Пример сайта по разработке reactiq точка net Цена на разработку 70 000 рублей. Без дизайна и верстки, от вас нам нужен функционал на фреймворке Lavarel Нужно постараться уложиться в 20 дней по срокам. Работа по Сделке без риска. B и больше ни как. Основные моменты работы сайта: авторизация сайта через стим считывания апи через официальный сайт pubg Трейдов скинов и все остальное не будет! подключить систему оплат создание личного кабинета для пользователя. Есть полное ТЗ проекта, которое мы готовы упрощать на первом этапе.Готовы достойно оплачивать ваш труд! Пишите в телеграм @evgensalyah
-
- php
- javascript
-
(and 3 more)
Tagged with:
-
Ищем талантливого программиста в игровой проектДля разработки игрового проекта требуются талантливые программисты.Отличное знание: PHP, JavaScript, PythonПреимуществом будет если когда-то работали с платформой steam и с голосовым мессенджером Discord.Вкратце о проекте: Будет разрабатываться площадка для проведения турниров по играм pubg, dota, cs go.Ищем программиста с руками. Не важно какой вы ориентации, вероисповедания и т.д. Нам от вас важен результат!Готовы достойно оплачивать ваш труд! Пишите в телеграм @evgensalyah
-
- php
- javascript
-
(and 3 more)
Tagged with:
-
https://youtu.be/7pr0x3elUzQ Буду признательна если поможете При наведении на блок он поворачивается под углом, при клике на блок - открывается сам блок на весь экран (плавно), при клике на лого - сворачивается открывшийся блок
-
Добрый день! Помогите разобраться с работой метода closest(). В приведенном примере https://jsfiddle.net/ymnjo3tc/ , я делаю все "по инструкции": беру дочерний элемент и проверяю наличие у него родительского при помощи данного метода. Но в ответ всегда ловлю один и тот-же Exception. Какие бы я не пробовал проверять элементы. В чем может быть проблема? Где я допускаю ошибку? Да и вообще, применим ли этот метод на практике? И в каких ситуациях?
-
Разрабатываю React/React Native приложения. С образцами моих некоммерческих работ вы можете ознакомиться по адресу: https://github.com/Roman-Onishchenko?tab=repositories Готов рассмотреть ваши предложения о разработке React/React Native приложений различной тематики и объема работ с частичной занятостью (до 30 рабочих часов в неделю). Мои контакты: skype - romanonishencko email - [email protected]
-
В общем, написал вот такой код, где красный блок див можно схватить и перетаскивать, но не знаю как наложить ограничение на то, чтобы этот красный блок див не заходил за рамки второго -- серого блока с размером 500х500 пикселей. Как это можно сделать? Хотелось бы увидеть готовый код, чтобы можно было в нём покопаться и разобраться самому. Заранее спасибо. <html> <head><title>Moving</title></head> <body onload= "init()"> <h1 style="margin-left: 650px; color: red;">Адаптировано для Chrome</h1> <div id='serkv' style="position:absolute;width:500;height:500;background-color:grey;left:10;top:10"> <DIV id='kv' style="position:absolute;left:10;top:10;width:50;height:50;background-color:red"> </div> </div> </body> <SCRIPT> kv.onmousedown = function(event) { kv.style.position = 'absolute'; kv.style.zIndex = 1000; document.body.appendChild(kv); moveAt(event.pageX, event.pageY); function moveAt(pageX, pageY) { kv.style.left = pageX - kv.offsetWidth / 2 + 'px'; kv.style.top = pageY - kv.offsetHeight / 2 + 'px'; } function onMouseMove(event) { moveAt(event.pageX, event.pageY); } document.addEventListener('mousemove', onMouseMove); kv.onmouseup = function() { document.removeEventListener('mousemove', onMouseMove); kv.onmouseup = null; }; }; kv.ondragstart = function() { return false; }; </SCRIPT> </html>
- 1 reply
-
- перемещение с поможью дс
- перемещение
-
(and 5 more)
Tagged with:
-
JavaScript В браузере не выводятся всплывающие окна c с запросами.
qwerty_me posted a question in HTML Coding
Здравствуйте.Возникла проблема со следующим заданием:вывести всплывающее окно, запрашивающее имя пользователя, затем вывести сегодняшнюю дату на экран(её можно увидеть после всего цикла окон),потом задать вопрос касательно обучения в группе(если да-цикл продолжается, нет-вывести окно с отказом),далее ещё одно вводное окно,а потом через всплывающие окна запросить у пользователся значения a,b,c для решения квадратного уравнения.Суть проблемы:как только после if-а, отвечающего за запрос о принадлежности к группе,браузер перестаёт отображать остальные окна и простую инфу о дате,которая просто выводится на экран. Подскажите,пожалуйста,как можно пофиксить эту проблему.Всё никак не могу найти причину этого.Мой одногруппник написал похожий код и у него всё работает,но при сравнении я не увидел каких-то кардинальных различий.Свой и его код прикрепил ниже.Буду весьма признателен за вашу помощь,у меня уже просто нет вариантов,что не так с моим кодом:/ Мой код: <html> <head> <title>вывод различной инфы через всплывающие окна</title> </head> <body> <p id="nameUser"></p> <script> var nameUser=prompt("Введите Ваше имя пользователя."); if (nameUser) { document.getElementById("nameUser").innerHTML = nameUser +",Здравствуйте, добро пожаловать на сайт!"; } else { document.getElementById("nameUser").innerHTML = "Гость, добро пожаловать на сайт!"; } Data = new Date(); Year = Data.getFullYear(); Month = Data.getMonth(); Day = Data.getDate(); switch (Month) { case 0: Month="января"; break; case 1: Month="февраля"; break; case 2: Month="марта"; break; case 3: Month="апреля"; break; case 4: Month="мае"; break; case 5: Month="июня"; break; case 6: Month="июля"; break; case 7: Month="августа"; break; case 8: Month="сентября"; break; case 9: Month="октября"; break; case 10: Month="ноября"; break; case 11: Month="декабря"; break; } document.write("Сегодня "+Day+" "+Month+" "+Year+" года."); if(confirm("Вы учитесь в группе ЭИ-38?")) { alert("Добро пожаловать на страницу, посвященную лабораторной работе по изучению основ JavaScript!") alert("Решите квадратное уравнение: ax^2 + bx + с = 0, где а не равно 0,используя введённые числа для a,b,c") a=prompt("Введите значение а") b=prompt("Введите значение b") c=prompt("Введите значение c") var d = b * b - 4 * a * c; if(d > 0) { x1=(( - b)+(Math.sqrt(d)))/(2 * a) x2=(( - b)-(Math.sqrt(d)))/(2 * a) alert("Корни уравнений:x1="+ x1 +"x2="+ x2 +) document.write("Корни уравнений:x1="+ x1 +"x2="+ x2 +); } if(d == 0) { x1 = (- b) /( 2 * a) alert("Корень уравнения:x1= ",+ x1) document.write("Корень уравнения:x1="+ x1 +); } if(d < 0) { alert("с введёнными значениями квадратное уравнение не имеет корней") } } else { alert("Извините, вход только для своих.") } </script> </body> </html> ниже оригиналы моего кода и одногруппника. index try2.htm variant znakomogo.htm- 2 replies
-
- javascript
- html
-
(and 1 more)
Tagged with:
-
Добрый день, форумчане! Ищем ведущего фронтенедера в компанию DataLight! Наша команда создает уникальную платформу для анализу данных по крипто-активам, ориентированную на профессиональных инвесторов. Мы делаем доступными и понятными инструменты, направленные на оптимизацию и автоматизацию инвестиционных стратегий. Горизонтальная структура, отсутствие строгих регламентов, дресс-кода, инструкций и бюрократии. О Вакансии: Быстрорастущий проект с глобальными амбициями ищет опытного Front-end разработчика. Наша команда создает уникальную платформу для анализу данных по крипто-активам, ориентированную на профессиональных инвесторов. Мы делаем доступными и понятными инструменты, направленные на оптимизацию и автоматизацию инвестиционных стратегий. Задачи: - Искать оптимальные технологические и архитектурные решения, развивать функционал платформы; - Создание API платформы, использующее WebSocket для быстрого взаимодействия между сервером и клиентом; - Front-end разработка на JavaScript (React, CSS Modules), работой над инфраструктурой. Требования: - Опыт front-end разработки с использованием технологии WebSocket; - Профессиональное владение JavaScript, HTML и CSS; - Опыт использования React; - Знание технологий TypeScript, Redux; - Знание систем сборки Webpack; - Владение системой контроля версий Git; - Знание принципов работы HTTP. Дополнительным преимуществом будет являться: - Знакомство с методологией BEM; - Опыт работы с SCSS; - Опыт работы с высоконагруженными проектами. Условия: - ЗП от 150 000 до 180 000 руб. на руки - Полная занятость, гибкий график - Работа в одной из самых востребованных индустрий; - Возможность неограниченного профессионального и карьерного роста; - Работа в сильной, мотивированной команде над сложными и интересными задачами; - Конкурентоспособная заработная плата, бонусы; - Уютный офис в центре Москвы, удобный офис в 5 минутах ходьбы от метро Охотный ряд. Свои резюме просьба присылать на почту: [email protected], а также примеры 2-3 выполненных работ с кратким описанием каждого из проектов
-
Здравствуйте, Я начинающий специалист в верстке. Знаю HTML и CSS. Изучаю фреймворки и JS. Очень хочу реализоваться в сфере Frontend - разработки. Готов пройти стажировку ( рассматриваю и не оплачиваемый вариант ), с дальнейшим трудоустройством. Буду рад интересным предложениям! мой почтовый ящик: [email protected]