JavaScript
A programming language that conforms to the ECMAScript specification
Explore Questions
There are no popular questions to show right now
-
0 votes1 answer
-
0 votes0 answers
-
0 votes0 answers
-
0 votes1 answer
-
0 votes1 answer
4,703 questions in this forum
-
Как сделать так, чтобы форма открывалась при нажатии на кнопку, которой на странице находится несколько штук?
Всем привет, подскажите, пожалуйста, как сделать так, чтобы форма открывалась при нажатии на кнопку, которой на странице находится несколько штук? У меня есть кнопка и несколько ее копий на странице, и я хочу, чтобы если пользователь захотел нажать на кнопку, только на другом месте страницы, открывалась та же самая форма. Но, к сожалению, ее открывает, только самая первая кнопка, подскажите, пожалуйста, решение! Спасибо! <body> <button class="btn-modal" id="open">Отправить заявку</button> <button class="btn-modal" id="open">Отправить заявку</button> <button class="btn-modal" id="open">Отправить заявку</button> <div c…
0 votes1 answer -
Как правильно сделать раскрывающиеся блоки со скрытым содержанием внутри?
Всем привет! Подскажите, пожалуйста, как правильно сделать раскрывающиеся блоки со скрытым содержанием внутри? У меня в принципе все работает, блок открывается и закрывается, НО если я нажимаю на блок, а не на стрелочку, она у меня остается в таком же положении(а она должна у меня меняться, когда блок открывается), и получается куча мала, и выглядит это не очень презентабельно. Подскажите, пожалуйста! <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> &l…
0 votes1 answer -
Проблема с ссылками при прокрутке
Сделал вот такой эффект прокрутки вглубь сайта с появляющимися картинками и исчезающими когда прокручиваешь. 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: ${…
0 votes4 answers -
Вкладки с динамической подгрузкой
Помогите пожалуйста понять как создать вкладки с динамической подгрузкой данных. Причём, внутри вкладок должен быть iframe либо скрипт. Всего должно быть 3 вкладки. Нашел вот такое решение: <span class="address-link" data-target-id="target-div-7">вкладка</span> <div id="target-div-7"></div> Код скрипта: $('.address-link').click(function(){ var targetId = $(this).data('target-id'); $('#' + targetId).html('<iframe код айфрейм></iframe>'); }); Решение рабочее, но это НЕ вкладки и этот код НЕ работает если вместо iframe использовать скрипт.
0 votes4 answers -
У меня не получается активировать кнопку Enter.
Не думал что буду обращаться сюда. Я написал простую игру на JS. Активировать кнопку Enter не получается. Пытался найти решение в интернете. Если кому-то не трудно, помогите пожалуйста. Ещё подскажите в какую строку вставить активацию. Игру загрузил на бесплатный хостинг, можете посмотреть: http://f0535962.xsph.ru <!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Guess</title> <style> html { font-family: sans-serif; font-size: 25px; text-align: center; color: white; } body { …
0 votes4 answers -
Запрет на изменение размеров блока
Здравствуйте. Есть три картинки. При клике на первую картинку она увеличивается в размерах. (получилось) При клике на вторую картинку - первая картинка уменьшается в размерах. (получилось) При клике на третью картинку - первая картинка запоминает свой размер и больше не изменяется. (не получилось) Как можно реализовать запрет на изменение блока только с помощью JQ? (Задача по JQ) Я думаю нужно сделать при клике на 3 картинку свойства !important, но не получается написать его с помощью JQ. ... <img src="img.jpg" alt="" class="img-circle" id="img-1" ><img src="img.jpg" alt="" class="img-circle" id="img-2"><img src="img.jpg" alt="" class="img-circle" id="img-…
0 votes2 answers -
42 одинаковых скрипта c различными парам-ми на одной странице
Есть 42 формы в модальных окнах. Для каждой Я написал считалку типа калькулятора c различными парам-ми для каждой формы на одной странице. как упростить код формы или скрипта чтобы не городить много кода форм?! <!DOCTYPE html><html><head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script>$(window).load(function () {calc();});function calc(){ if(document.getElementById('d1').checked == true){var noil=document.getElementById('names1').innerHTML="Name12";var coil=document.getElementById('sht1').innerHTML="1шт.";var cnoil=document.getElementById('ocen1').innerHTML=100;var fnoil=document.getEleme…
0 votes27 answers -
Фиксированная кнопка не появляется
После прокрутки на определенное расстояние должна появится кнопка. Не понимаю в чем проблема, на другом сайте работало без проблем. https://jsfiddle.net/cr4wrbw2/2/
0 votes2 answers -
Для мобильных слайдер вылезающий слева - как называется?
Однажды видел такую штуку: если зайти с мобильного телефона и начать прокручивать экран вниз - слева появляется стрелочка на право. если провести пальцем по экрану слева на право - вылезает превьюшка похожих статей. Хотел такую вот штуку на сайте поставить. Как это вообще называется? что гуглить? Может готовые скрипты есть, или что-то для этого нужно почитать? т.е. есть обычный блок слева - похожие статьи. вот хотелось бы в мобильной версии сделать чтобы он был таким вот выдвижным.
0 votes1 answer -
Не работает скрипт в чем может быть ошибка
Написал скрипт все работало, потом перекрутил и все сломалось: http://ts.ca01022.tmweb.ru/ Не могу разобраться в чем беда? и второй вопрос как такой скрипт оптимизировать, если таких скриптов нужно сделать 46 штук.?
0 votes7 answers -
замыкания
Здравствуйте. Вот пример из учебника: function makeBuffer() { var text = ''; return function(piece) { if (arguments.length == 0) { // вызов без аргументов return text; } text += piece; }; }; var buffer = makeBuffer(); // добавить значения к буферу buffer('Замыкания'); buffer(' Использовать'); buffer(' Нужно!'); alert( buffer() ); // 'Замыкания Использовать Нужно!' Объясните пожалуйста два момента: 1 - зачем функцию makeBuffer() присваивать переменной buffer? 2 - вот этим вызовом buffer('Замыкания') (и всеми такими же) получается что передаем аргумент в функцию оболочку, а использует его внутренняя функция function(piece). Вот такая запись для меня была бы понят…
0 votes1 answer -
Вставка текста в textarea.
Здравствуйте ! Решил сделать на свой сайт комментарии. Есть такая функция: function citata(message) { message = message + 'mess'; document.getElementById('outmess').innerHTML += document.getElementById(message).innerHTML; }Она вставляет в текстовое поле текст из написанных ранее сообщений. Во-первых, текст исправно вставляется лишь до внесения изменений в это текстовое поле. Стоит написать любую букву, как вставка перестаёт работать. Во-вторых, пытаюсь сделать перевод строки после вставки символом "\n", но оно не работает. И к тому же, если перенос строки уже был в цитируемом сообщении, то в форму оно вставляется с тегом - <br>. Как и следовало ожидать, …
0 votes31 answers -
JQuery Fancybox открыть текущее изображение
Задача : при клике на активное изображение в слайдере открывается Fancybox, который содержит это изображение. Структура html примерно следующая. "flex-active-slider" применяется динамически и обозначает активное на данный момент изображение. <ul> <li class="flex-active-slider"> <img src="img1.png"> </li> <li class=""> <img src="img2.png"> </li> <li class=""> <img src="img3.png"> </li></ul>JS: $(window).load(function() {$(".flex-active-slide").click(function() { var img = $(this).find('img'); $.fancybox.open([ { href: "img.attr('src')" } ]);});}В итоге, fa…
0 votes3 answers -
параметры по умолчанию
помогите пожалуйста разобраться так я передаю параметры для начала игры и сообщений об ошибке в консоли нет. а значит в app.options.level записано определённое значение а так я не передаю параметры для начала игры, следовательно в app.options.level должно записаться значение по умолчанию: 1. то есть должна отработать вот эта инструкция: this.options = { level: options.level || 1 ... ..... ....}но этого не происходит. в результате я получаю в консоли сообщение об ошибке: почему так происходит? ведь оператор || должен присвоить или одно или другое
0 votes4 answers -
Интересная JQuery задачка
Есть два контейнера, в каждом по 4 дива. https://jsfiddle.net/y3L89Ldf/ Как можно сделать так, что бы каждые две секунды, рандомный блок из верхнего контейнера менялся на рандомный блок из нижнего? И так, что бы в верхнем контейнере не было одинаковых блоков, и что бы верхний блок, не менялся два раза подряд на один из нижних. Походу надо сделать что бы при смене верхнего блока, он менялся местами с нижним, что бы нижний потом тоже мог рандомно стать обратно в верхний контейнер? Спасибо тем, кому будет интересно одолеть задачу
0 votes4 answers -
Вызов функции из другой функции.
Здравствуйте, не могу найти как находясь в одной функуции вызвать другую, отработать её и вернуться в первую.
0 votes2 answers -
jQuery show/hide меню после клика
Задание: По клику на ссылку появляется меню. По клику в любом другом месте кроме, области меню, оно должно "прятаться". Меню появляется, но не "прячется". В поиске наткнулся на такой метод как not(), но реализовать все равно не смог. Возможно не через него надо делать(?). Помогите, пожалуйста. //#button-project - ссылка, по клику которой, появляется меню.//.menu-projects - меню.$(document).ready(function(){ $("#button-project").click(function(){ $(".menu-projects").show(); }); $("not(.menu-projects)").click(function(){ $(".menu-projects").hide(); }); });
0 votes8 answers -
Делегирование - это хорошо?
Добрый день! Интересует такой вопрос: есть ли что-то плохое в делегировании событий? Хочу сделать динамическую подгрузку контента на всем сайте. И чтобы обработчик событий всегда работали, думаю, использовать делегирование. То есть все обработчики вешать через body: $('body').on('event', 'selector', func); Есть ли у этого какие-то побочные эффекты, чем это может обернуться? Или можно спокойно ставить все обработчики таким образом? Спасибо!
0 votes3 answers -
Как скрыть блок при нажатии за его пределами?
Подскажите пожалуйста, как можно скрыть блок, если нажимаешь за его пределами. Пользуюсь вот такой конструкцией: https://jsfiddle.net/Alarr/mp7gthqb/4/ $(".button").click(function () { $('.toggled_block').toggle();});но так блок будет появляться и исчезать только по нажатию на кнопку, а надо, что бы появлялся по нажатию на кнопку, а исчезал по нажатию и на кнопку и на экран. Ну и понятное дело, что блок не должен исчезать при нажатии на него, так как там должен быть, к примеру инпут для поиска.И прозрачный бэкграунд на весь боди тоже не прокатит. Спасибо заранее если получится помочь
0 votes3 answers -
Получить ссылку с xml
Здравствуйте. Есть такой xml-код <?xml version="1.0" encoding="UTF-8"?><ajax><cmd><![CDATA[<div class="success"><b>success</b></div><br><br>[ <a href="http://mysite.com/link/1/1-1-0-16" target="_blank">my link</a> ]]]></cmd></ajax>Мне необходимо получить с него число 16. Прошу вашей помощи в написании regexp, или другого решения. Мои попытки не увенчались успехом.
0 votes4 answers -
Работа с массивами и цикл for
Здравствуйте. Есть задача, пройтись по массиву и сортировать так, чтобы все 0 были в конце массива. Написал такой код 'use strict'var arr = [1, 5, 0, 10, 0, 65, 0];function moveZeros(some) { let str; for(let i = 0; i < some.length; i++) { if(some[i] == 0) { str = some.splice([i], 1); some = some.concat(str); } } return some;}console.log(moveZeros(arr));В данном примере все сортирует правильно, но если массив будет вида скажем [0, 0, 0, 1], то не будет правильно и на выходе получим [0, 1, 0, 0] вместо [1, 0, 0, 0] Например имеем такую ситуацию, что var arr = [0, 0, 0, 1] Цикл в первый раз пробежался по массиву, первый (нулевой) элемен…
0 votes27 answers -
Скрыть <audio> после воспроизведения
Добрый день. Подскажите пожалуйста по такому моменту: на странице есть несколько элементов <audio>. Как можно сделать, что бы после проигрывания записи она скрывалась со страницы?
0 votes2 answers -
Не определяет элемент lastChild
Уважаемые форумчане! Просьба помочь со скриптом. Краткая информация о скрипте: 1. Скрипт генерит 5 элементов img и добавляет их в один из двух пустых div. 2. Скрипт копирует все элементы из одного div в другой, при этом удаляя один элемент img. Получаем 5 и 4 элемента img в двух div. До этого момента все гладко. Далее скрипт должен при нажатии на lastChild левого div, которым является один из img удалять всех child из обоих div и генерить уже 10 и 9 соответственно (по схеме выше). Или, при нажатии на любой другой child в div кроме последнего, выдавать сообщение. Вот проблема заключается в том, что не получается прописать событие onclick на последнем child'e одного из …
0 votes5 answers -
Не всегда срабатывает скрипт
Здравствуйте столкнулся с проблемой, не могу понять почему скрипт не всегда срабатывает. по замыслу это бургер меню которое работает только если ширина окна меньше чем 1025 после загрузки страницы или после ресайза, когда страница загружена результат всегда тот который и ожидался, а после ресайза иногда не срабатывает и меню не открывается, потом после следующего ресайза может заработать , может есть идею в почему так? function windowSize(){ myWidth = document.documentElement.clientWidth; if(myWidth<1025) { $("button.btn").on("click", function(){ $(".nav-collapse>ul").toggleClass("nav_active"); }); } } $(window).on…
0 votes1 answer -
Помогите включить события браузера после preventDefault()
Здравствуйте. Выполняю работу с применением drag and drop. Вроде все получается хорошо. Но после того как стал устанавливать обработчики для Android, столкнулся в проблемой. Может для многих она покажется смешной. Чтобы передвижение объекта пальцем по сенсорной панели было корректным мне пришлось отключить обработчики браузера по умолчанию. Я это сделал использовав event.preventDefault(). Как теперь мне обратно вернуть эти обработчики по умолчанию после того как передвигаемый объект отпущен? Весь интернет перерыл. Как отключить обработчики по умолчанию описаны во многих статьях, а как включить обратно нигде найти не могу.
0 votes2 answers
-
Обсуждения
-
.thumb.png.93183027d7a2eba5b545b257503b0e32.png)
Скорей всего потому что использование атрибутов устарело. Пользуйтесь классами http://htmlbook.ru/samcss -
.thumb.webp.d4179baa3ea063fd3414e3141f886b20.webp)
By Arthur_Speransky · Posted
Добрый день. Подскажите, пожалуйста, почему Visual Studio Code видит ошибку в атрибуте align="right" при теге <p></p>? Сам код работает, но слово align выделяется ярко-красным, что в VS code говорит об ошибке. <p> <p align="right"> 2014 </p> -
https://codepen.io/Switch74/pen/rNJpvLQ меняете размеры бордюра с 10px под свои и в background прописываете свои картинки с нужными repeat для верхнего и нижнего по горизонтали, для левого и правого по вертикали -
By DrRobotGranata · Posted
Всем привет! Задача стоит следующая. Есть 8 элементов (IMG). Т.е. одна целая картинка разрезана на 8 частей(рамка) Нужно сверстать гибкой версткой макет, где эти 8 кусочков будут одним целым( рамкой) а внутри можно будет размещать любой текс, рамка по высоте подстраивается под текс, по ширине на всю ширину окна. Кручу верчу, все никак не получается. Подскажите в какую сторону думать. Каждый Img в отдельный div и все дивы в общий контейнер? и дальше как -
.tabs>input[type="radio"]:checked+label { background-color: #fff; border-bottom: 1px solid #fff; } Здесь и делаете стили для изменения нажатого таба если я правильно понял
-
все файлы должны быть в одной папке некоторые ссылки ссылаются на локальный компьютер - этого не должно быть некоторые маленькие картинки грузят очень большие файлы перепутанные ссылки - это скорее всего ваша ошибка
-
By Иван Евгеньевич · Posted
Здравствуйте! Уважаемые форумчане! Я начинающий начинать) прошу помощи, есть макет сайта , хочу чтоб на главной странице были вкладки которые бы переключались по нажатию кнопки. но основной вопрос в том как сделать их разными. пример приведу в фото. Хочу как на фото сделать но незнаю как( а так же код выглядит таким образом <div class="tabs"> <input type="radio" name="tab-btn" id="tab-btn-1" value=""> <label for="tab-btn-1">Свадьба</label> <input type="radio" name="tab-btn" id="tab-btn-2" value=""> <label for="tab-btn-2">Мужу</label> <input type="radio" name="tab-btn" id="tab-btn-3" value=""> <label for="tab-btn-3">Жене</label> <input type="radio" name="tab-btn" id="tab-btn-4" value=""> <label for="tab-btn-4">Партнеру</label> <input type="radio" name="tab-btn" id="tab-btn-5" value=""> <label for="tab-btn-5">Коллекции</label> <input type="radio" name="tab-btn" id="tab-btn-6" value=""> <label for="tab-btn-6">Редкость</label> <div id="content-1"> <img src="images/Kolca1.png" alt="Кольца" class="kolca"> <p class="kolca11">Кольца</p> </div> <div id="content-2"> Содержимое 2 </div> <div id="content-3"> Содержимое 3 </div> <div id="content-4"> Содержимое 4 </div> <div id="content-5"> Содержимое 5 </div> <div id="content-6"> Содержимое 6 </div> </div> CSS code .tabs { top: 1100px; position: absolute; left: 600px; font-size: 50px; } .tabs>input[type="radio"] { display: none; } .tabs>div { /* скрыть контент по умолчанию */ display: none; border: 1px solid #e0e0e0; padding: 10px 15px; font-size: 16px; } /* отобразить контент, связанный с вабранной радиокнопкой (input type="radio") */ #tab-btn-1:checked~#content-1, #tab-btn-2:checked~#content-2, #tab-btn-3:checked~#content-3, #tab-btn-4:checked~#content-4, #tab-btn-5:checked~#content-5, #tab-btn-6:checked~#content-6{ display: block; } .tabs>label { display: inline-block; text-align: center; vertical-align: middle; user-select: none; background-color: #f5f5f5; border: 1px solid #e0e0e0; padding: 2px 8px; font-size: 16px; line-height: 1.5; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out; cursor: pointer; position: relative; top: 1px; font-family: 'Gilroy'; font-style: normal; font-weight: 500; font-size: 18px; line-height: 21px; text-align: center; letter-spacing: 0.1em; text-transform: uppercase; } .tabs>label:not(:first-of-type) { border-left: none; } .tabs>input[type="radio"]:checked+label { background-color: #fff; border-bottom: 1px solid #fff; }
-