Search the Community
Showing results for tags 'js'.
-
Открытие модального окна bootstrap при попытке уйти с страницы сайта
ellato44 posted a question in JavaScript
Доброго времени суток! Помогите решить задачку следующего характера: имеется код открытия модального окна - http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h пример так же ниже указан: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal Example</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html> необходимо, чтобы при попытке пользователем закрыть вкладку страницы, т.е. при нахождении курсора скажем в 5px от кнопки закрытия вкладки запускалось модальное окно с контентом., при этом, чтобы не каждый раз оно запускалось, а один раз для каждого нового пользователя (тут дело с куки связано) пример встречал, но не получается мне новичку привязать к скрипту нужное мне модальное окно )) вот собственно пример: пример скрипта открытия модального окна при попытке уйти со страницы сайта взят отсюда - http://dimox.name/popup-window-on-first-web-site-visit (function($) { $(function() { // Проверим, есть ли запись в куках о посещении посетителя // Если запись есть - ничего не делаем if (!$.cookie('was')) { // Покажем всплывающее окно $('#boxUserFirstInfo').arcticmodal({ closeOnOverlayClick: false, closeOnEsc: true }); } // Запомним в куках, что посетитель к нам уже заходил $.cookie('was', true, { expires: 365, path: '/' }); }) })(jQuery) не получается приспособить данный скрипт для открытия такого модального окна.. помогите неучу? )) буду благодарен за помощь! -
Использую данный способ для загрузки stl на свой сайт. Хотелось бы сделать так, чтобы stl загружалось с сервера (файл уже лежит на сервере). Возможно ли это сделать? Заранее спасибо за помощь!
-
оцените пожалуйста форму, которая добавляет в базу рецепты коктейлей: http://fh79272k.bget.ru/files/works/coctails/1/ в первую очередь хотелось бы услышать отзывы об архитектурке
-
Проблема следующая. Необходимо, чтобы после того как пользователь ввел и стер пароль, индикатор исчез. Т.е. последовательность действий 1. Вводим пароль 2. Удаляем его. Должен исчезнуть индикатор. В FF работает, в Хроме и Опере нет, почему? $('#field').focus(function() { //когда фокус на поле ввода пароля $('#field').keypress(function() { //проверяем значение поля после каждого нажатия клавиши if ($('#field').val().length > 0) { //если что-то ввели, запускаем проверку сложности пароля $('#field').pwstrength(); $('#pwindicator').show(); } else { // если ничего не ввели или ввели и затем удалили, прячем индикатор $('#pwindicator').hide(); } }) }); $('#field').blur(function() { //после потери фокуса проверяем значение поля, если пустое , прячем индикатор if ($('#field').val() == "") { $('#pwindicator').hide(); } }); https://jsfiddle.net/y6x512v9/1/
-
Подключение/отключение скрипта при разной ширине экрана
alejandro13 posted a question in HTML Coding
Всем привет! Очень нужна Ваша помощь! Как можно реализовать подключение скрипта при определенной ширине экрана, а также при его ресайзе. Моих знаний по js хватило чтобы написать только такой код: if ($(window).width() > 767) { $('.fullpage').fullpage(); } А как сделать, чтобы скрипт отключился при изменении ширины экрана менее 768px, а при ресайзе в обратном направлении снова включился -
помогите пожалуйста вывести на страничку превью загружаемой картинки https://jsfiddle.net/6e97awdo/6/ $('#loadImgLabel').on('click', openLoadFileMaster); $('input').on('change', closeLoadFileMaster); function openLoadFileMaster() { console.log(111) $('#pageDescLoadImg').click(); }; function closeLoadFileMaster() { console.log(222) var fileInfo = document.getElementById('pageDescLoadImg').files[0]; console.log(fileInfo) var reader = new FileReader(); console.log(reader) reader.onload = function(e) { console.log('readerload') document.getElementById("loadImg").src = e.target.result; }; }; проблема в том, что после выбора файла в атрибут src элемента img не прописывается изображение в двоичном коде функция reader.onload вообще не запускается процессе работы скрипта
-
Есть скрипт создания куки. как написать скрипт для ее удаления через onclick? function rewrite_quantity(obj,id){ var quantity = $(obj).val(); var price = $(obj).parent().parent().find('span').html(); var summ = parseInt(price)*parseInt(quantity); $('#rezult_'+id).html(summ+" Грн"); document.cookie = "pid["+id+"]="+quantity+";path=/;expires='<b id="drop">3600</b>'"; }
-
Есть сайт в разработке fitmama.club на главной странице имеется слайдер, который при заходе на страницу ведет себя нормально, первое время, через минуту слайды съезжают вниз
-
как думаете, в конфиге допустимо следующим образом дублировать код? validation: { length: [ { required: true, msg: 'Поле не может быть пустым' }, { pattern: 'number', msg: 'Введите число' }, { pattern: /^[0-9]\d*(\.\d+)?$/, msg: 'Введите положительное число' }, { pattern: /^[1-9]\d*(\.\d+)?$/, msg: 'Число не может быть нулём' } ], width: [ { required: true, msg: 'Поле не может быть пустым' }, { pattern: 'number', msg: 'Введите число' }, { pattern: /^[0-9]\d*(\.\d+)?$/, msg: 'Введите положительное число' }, { pattern: /^[1-9]\d*(\.\d+)?$/, msg: 'Число не может быть нулём' } ], height: [ { required: true, msg: 'Поле не может быть пустым' }, { pattern: 'number', msg: 'Введите число' }, { pattern: /^[0-9]\d*(\.\d+)?$/, msg: 'Введите положительное число' }, { pattern: /^[1-9]\d*(\.\d+)?$/, msg: 'Число не может быть нулём' } ], volume: [ { required: true, msg: 'Поле не может быть пустым' }, { pattern: 'number', msg: 'Введите число' }, { pattern: /^[0-9]\d*(\.\d+)?$/, msg: 'Введите положительное число' }, { pattern: /^[1-9]\d*(\.\d+)?$/, msg: 'Число не может быть нулём' } ], weight: [ { required: true, msg: 'Поле не может быть пустым' }, { pattern: 'number', msg: 'Введите число' }, { pattern: /^[0-9]\d*(\.\d+)?$/, msg: 'Введите положительное число' }, { pattern: /^[1-9]\d*(\.\d+)?$/, msg: 'Число не может быть нулём' } ] } понятно дело, что DRY и всё такое. но здесь же не просто код, а конфиг
-
Здравствуйте ребятки. Помогите пожалуйста сделать вот такой слайдер, или же ссылку на код такого слайдера.Что бы когда нажимаешь на стрелочки, изображение на середину следующее передвигалось и становилось оригинальным а не темным. П.С. Заранее благодарю. http://hostingkartinok.com/show-image.php?id=de14bba51dedc29c7d9a9736224b6003
-
помогите пожалуйста советом допустим есть форма отправки груза. есть возможность в её пределах создать несколько позиций(например как тут). при этом разработчик будет для каждой новой позиции генерировать html, помеченный классом. это нужно для того чтобы пользователь мог кликнуть по кнопке "удалить позицию" проблема в том, что классы - для верстальщика, а id - для яваскриптера. ничего что яваскриптер для того чтобы натравить скрипт на элемент использует класс? теоретически можно конечно использовать id, добавляя числовой постфикс(например id="delBtn_23"). но в этом случае сложность неоправданно увеличивается как в подобном случае поступают профессионалы?
-
посоветуйте пожалуйста способ найти обработчик есть рекламный блок, после клика по которому открывается определённый адрес в новом окне. это происходит потому что у ссылки target="_blank". так работает блок, если он размещён не на странице сайта, а на отдельной странице если рекламный блок размещён не на странице сайта, то после клика адрес одновременно открывается и в текущем окне, и в новом. я думаю, что это происходит потому что владелец сайта поставил обработчик клика, который заставляет открываться ссылки в двух окнах помогите пожалуйста если не отключить этот обработчик, то хотя бы найти пример блока можно смотреть https://russian.rt.com/article/304782-pri-evakuacii-iz-zagorevshegosya-samolyota-v-yaponiiтут скриншот блока http://joxi.net/Vm6kJkpsxYWop2тут его id: #today-media-article ps: пробовал вот это , но не помогло
-
Всем привет! Никто не сталкивался с такой проблемой в Safari: при загрузке файлов на сервер (когда загрузка протекает не очень быстро) в событии progress свойство e.total увеличивается в 2 раза? То есть e.loaded принимает значение e.total, а после этого e.total становится 2*e.total и e.loaded снова начинает расти. Заранее спасибо!
-
Уважаемые форумчане! Нуждаюсь в вашей помощи! Есть такой замечательный сайт http://pervolo.com/. Если прокрутить его до фиолетового блока с названием "WITH OUR CORE VALUES OF HARD WORK AND HONESTY", то можно увидеть как вокруг иконок плавно появляется круглая граница. Как это можно сделать? И еще вопрос как реализуется постепенное появление блоков с текстом, какие хорошие плагины вы для этого может быть знаете?
-
Всем доброго времени суток! Подскажите, как можно реализовать такой довольно интересный функционал, который есть на сайте http://www.3magine.com/ Мне нужно, чтобы у сайта не было вертикальной полосы прокрутки, при скролле прокручивался весь цветной блок, который при этом занимает всю доступную высоту экрана. Насчет последнего пункта, в принципе понятно, что можно задать height=100vh, а вот как сделать все остальное, я пока не представляю. Может кто-то сталкивался с подобным?
-
Здравствуйте, снова! Недавно размещал вопрос о тесте на html. Теперь хочу спросить у тех кто знает JS и может представить графически алгоритм работы теста, просто от руки, вдруг кому-то не трудно и не лень помочь...
-
Помогите пожалуйста разобраться в вопросе организации кода в простейшей игре. и в результате скажите: 1. правильный первый вариант 2. правильный второй вариант 3. оба варианта правильные и используются в зависимости от ситуации 4. давно уже существует паттерн %patternname% и с успехом используется в такой ситуации Допустим есть 2D-ландшафт, над ним летит корабль игрока. Корабль может стрелять ракетами. Описываю первый вариант организации ООП-кода на js(в js контроллер и представление совмещены): инициализация игры начинается с создания spaceView, который в свою очередь инициализирует: ландшафт, корабль игрока PlayerShipView - корабль игрока. Он может стрельнуть ракетой(PlayerRocketView). То есть объект корабля связан с объектом ракеты Ракета может столкнуться с ландшафтом. То есть объект ракеты связан с объектом spaceView В результате: Имеем 3 связанных объекта, но каждый из них содержит только свою функциональность(это плюс). Но если в программе придётся что-нибудь менять(например отключить кораблю игрока возможность стрелять ракетами), то вносить правки придётся в разных местах программы(это минус). Есть несколько глобальных переменных(это минус) Описываю второй вариант организации ООП-кода на js(в js контроллер и представление совмещены): инициализация игры начинается с создания spaceView, который в свою очередь инициализирует: ландшафт, корабль игрока, ракеты(есть нажата кнопка "огонь") и вообще все остальные объекты Таким образом: Если например игрок нажимает "огонь", то инициализация ракеты происходит в spaceView, а PlayerShipView вообще ничего не знает об объекте ракеты(это плюс). Соответственно нет глобальных переменных(это плюс). Но в spaceView содержится куча логики(всей игры, в котрой кроме корабля игрока и ракеты существует очень много других объектов). Для наглядности я реализовал первый вариант здесь: https://github.com/zlodiak/space-1 В нём используются различные библиотечки типа backbone, underscore, но незнание их не мешает пониманию общей структуры программы Не бейте(ногами), я знаю что вопрос для телепатов
-
помогите пожалуйста решить проблему я поставил фокус на элемент и затем повесил на этот элемент обработчик события, который срабатывает после нажатия клавиши. https://jsfiddle.net/9t1cwfrv/22/ для клавиши пробела этот обработчик срабатывает, но для клавиш курсора - не срабатывает. для клавиши 'q' тоже не срабатывает. а надо бы чтобы для всех перечисленных клавиш срабатывал
-
помогите пожалуйста решить проблему вот заготовка для игры крестики-нолики на backbone: https://jsfiddle.net/9t1cwfrv/9/ https://github.com/zlodiak/ttt_1 пока она умеет после клика по любой клетке выводить в консоль координаты клетки. каждой клетке соответствует своя модель. для вывода в консоль координаты берутся из атрибутов элемента 'data-*' проблема в том, что эти же самые координаты хранятся в модели каждой клетки. таким образом получается дублирование данных(в модели и в атрибутах элемента) хотелось бы чтобы после каждого клика данные брались из модели, а не из атрибутов элемента
-
помогите пожалуйста разобраться в вопросе обычно, делая компонент, разработчик предоставляет возможность добавить в html один элемент. например: <div id="megaSlider"></div> и затем подключенные скрипты заполняют этот компонент нужной разметкой и поведением. это красиво и лаконично. но не всегда удобно. например, если используется bootstrap и шаблонизатор типа underscore. в этом случае при написании компонента разработчику приходится поочерёдно открывать шаблоны и добавлять в них классы: container, row, col-md-6 и т. д. от такой деятельности голова пойдёт кругом но есть и другой путь. в теле страницы вместо <div id="megaSlider"></div> сразу сверстать bootstrap-сетку со всеми нужными классами и уже потом в неё скрипт будет добавлять нужные шаблоны вопрос: допустимо ли использование второго способа? подавляющее большинство компонентов, которые есть в интернете сделаны первым способом. возможно, для этого есть важные причины...
-
ребята, помогите пожалуйста советом я сделал на backbone форму с валидацией: https://jsfiddle.net/9t1cwfrv/5/ .пока для простоты использовал только одно поле: github: https://github.com/zlodiak/shippingCalculator1 проблема в том, что в финальной версии калькулятора полей будет много. поэтому мне хотелось бы чтобы каждое представление наследовало от какого-нибудь общего родительского 'класса' методы: notValidMarkAdd(), validMarkAdd() иначе их придётся дублировать в каждом представлении как бы это реализовать?
-
помогите пожалуйста понять почему в backbone push работает неочевидным способом пример1 (не рабочий): APP.Graph = Backbone.Model.extend({ defaults: { title: undefined, dots: new Array() } )} var graph = new APP.Graph(); graph.attributes.dots.push([1, 1]); консоль выводит сообщение об ошибке: Uncaught TypeError: this.model.attributes.dots.push is not a function пример 2 (не рабочий): APP.Graph = Backbone.Model.extend({ defaults: { title: undefined, dots: new Array() } )} var graph = new APP.Graph(); var dots = this.model.get('dots'); dots.push([1, 2]); this.model.set({'dots': dots}); консоль выводит сообщение об ошибке: Uncaught TypeError: this.model.attributes.dots.push is not a function пример 3 (рабочий): APP.Graph = Backbone.Model.extend({ defaults: { title: undefined, dots: new Array() } )} var graph = new APP.Graph(); var arr = []; this.model.set({dots: arr}); var dots = this.model.get('dots'); dots.push([1, 2]); this.model.set({'dots': dots}); ошибок нет. пуш сработал
-
помогите пожалуйста добавить массив в массив: defaults = { title: 'qwerty', dots: new array() } defaults.dots.push([1 , 2]); console.log(defaults); консоль выводит такую ошибку: https://jsfiddle.net/bwz2u6vc/ в будущем планируется, что dots будет содержать большой набор массивиков: [1, 2], [1, 3], [1, 32], [21, 2], .......
-
Всем привет =) Создал тему на киберфоруме. Там уже 2-й день молчат. Решил перебраться сюда. Итак, разрабатываю сайт. Был у меня на этом сайте прелоадер. Обыный, простенький. Просто вешался на весь экран. Когда контент загружался он скрывался с анимацией спада (fade in/out). Собственно код: $('#preloader').delay(350).fadeOut('slow'); Но тут мне рассказали про data атрибуты. Решил попробовать их. Пишу следующее: <body id="main" data-preloader > body#main::before { content: attr(data-preloader); display: block; position: fixed; z-index: 100; top: ; left: ; width: 100vw; height: 100vh; background-color: beige; -webkit-transition: all 0.45s ease-in-out; transition: all 0.45s ease-in-out; } $(document.body).removeAttr('data-preloader'); Прелоадер не скрывается. Просто висит на весь фон. Но я в принципе попробовал сделать и как в статье на htmlbook, (поставить вместо before - after) но результат тот же. Методом тыка я догадался что дело в css. Переписал так: [data-preloader] {...} Вроде заработало. Но нет этого спада. Прелоадер просто, грубо, без анимации исчезает. Я вообще рассчитывал, что он примет во внимание св-во transition, но увы. Как сделать такую анимацию ? Ещё попробовал написать следующее: document.getElementById('main').dataset.preloader.style.display = 'none'; Тогда прелоадер снова не исчезает. Не пойму просто логику. Ошибок в дебагере нету, но он не исчезает. Короче, как сделать такую анимацию через data атрибут?
-
ребята, научите пожалуйста как хранить справочные данные в объекте есть одностраничное веб-приложение на backbone. смысл его в том, что пользователь может создавать графики и заполнять их точками. первую часть я сделал. вот конструктор модели для графика: {APP.Graph = Backbone.Model.extend({ defaults: { title: undefined, yMax: undefined, yMin: undefined, yPeriod: undefined, xMax: undefined, xMin: undefined, xPeriod: undefined, dots: [] } }); как видите, у каждого графика есть название и список характеристик для вертикальной и горизонтальной оси. так же есть свойство dots, которое является массивом. в нём я планирую хранить набор точек. формат такой: [ [23, 23], [23, 23], [23, 23], [23, 23] ] вопрос. правильнй ли я выбрал способ для хранения данных о наборе точек? может быть уже существует типовое решение для такой задачи? дело ещё в том, что пока для хранения любых данных я использую localstorage(это механизм подобный cookie, который предоставляет современный браузер). но потом я планирую использовать mysql. не возникнет ли в этом случае проблем с переходом? всё таки в БД для подобных целей используется ещё одна таблица(справочник)
