Search the Community

Добрый день! Интересует такой вопрос: есть ли что-то плохое в делегировании событий? Хочу сделать динамическую подгрузку контента на всем сайте. И чтобы обработчик событий всегда работали, думаю, использовать делегирование. То есть все обработчики вешать через body: $('body').on('event', 'selector', func); Есть ли у этого какие-то побочные эффекты, чем это может обернуться? Или можно спокойно ставить все обработчики таким образом? Спасибо!

помогите пожалуйста разобраться в ситуации есть простейший объект информера для игры: var Informer = function(parentElement, infoArr) { $('<table class="informer" id="informer"> \ <tr><td class="label level_label">уровень: </td><td class="value level_value" id="levelValue"></td></tr> \ <tr><td class="label score_label">счёт: </td><td class="value score_value" id="scoreValue"></td></tr> \ </table>').appendTo('#' + parentElement); $('<div class="messager" id="messager"></div>').appendTo('#' + parentElement); this.refreshMessage('Игра началась', 'orange'); this.refreshInfo(infoArr); this.messageCount = 0;};Informer.prototype = { refreshMessage: function(message, textColor) { $('<div class="message_unit" id="messageUnit_' + this.messageCount + '" >' + message + '</div>').css({ color: textColor }).appendTo('#messager'); setTimeout(function() { $('#messageUnit_' + this.messageCount).hide(3000, function() { $('#messager').empty(); $('.message_unit').remove(); }); }, 3000); this.messageCount++; }, refreshInfo: function(infoArr) { $('#scoreValue').text(infoArr['score']); $('#levelValue').text(infoArr['level']); } }его метод refreshMessage() добавляет текст сообщения в блок и через 3 секунды(по замыслу) сообщение исчезает. отдельно эта конструкция работает, но в контексте моей программы - не работает. это выражается в том, что вместо одного сообщения каждый раз выводится несколько сообщений чтобы воспроизвести проблему нужно запустить игру и несколько раз подряд кликнуть по одной и той же ячейке

Мне нужно, чтобы одинаковые элементы html выстроились в круг(в центре еще один элемент) При этом также нужно учесть то, чтобы при различных разрешениях экрана они не превращались в эллипс, а всегда оставались кругом. Осложняется эта задача тем, что обязательна аналогичная адаптивность на мобильных устройствах. Они не должны разлетаться и быть статичными (размер круга из элементов) уменьшается и увеличивается Вот ссылка https://jsfiddle.net/k7ktzvmn/

Добрый день! Следующая ситуация: решил, вместо обновления страницы при переходе по пунктам меню использовать HTML5 History API и подгрузку контента через AJAX. Но ведь получается что после того, как я заменил основное содержимое страницы обработчики этого удаленного содержимого все еще висят где-то в памяти, так? Вот хотелось бы узнать, чем это чревато? Нужно ли после смены страницы очищать все обработчики предыдущей страницы или пускай они копятся и ничего плохого в этом нет? Спасибо!

помогите пожалуйста переписать часть кода более очевидным и лаконичным способом я создаю несколько объектов: var Tank = function(id) { this.id = id; Tank.tanks.push(this);}Tank.tanks = [];for (var i = 0; i < 3; i++) { new Tank(i);}Tank.tanks.forEach(function(tank, i, arr) { console.log(tank); }); console.log('summary tanks: ' + Tank.tanks.length);затем я удаляю один из них со случайным индексом: var tankDel = Math.floor(Math.random() * (3));Tank.tanks.splice(tankDel, 1);Tank.count -= 1; Tank.tanks.forEach(function(tank, i, arr) { console.log(tank); }); console.log('summary tanks: ' + Tank.tanks.length);потом я проверяю не удалён ли объект со свойством id = 0: var tank0Dead = true;Tank.tanks.forEach(function(tank, i, arr) { if(tank.id == 0) { tank0Dead = false; return; }; }); if(tank0Dead == true) { alert('tank with id 0 is dead');};но это слишком громоздкий способ проверки. нельзя ли покороче его переписать? живой пример здесь: https://jsfiddle.net/oqc5Lw73/6/

Привет тебе читатель, эт снова я, снова выдалась свободная минутка и я спешу поделиться с тобой интересным рецептом, который позволит создать у потенциального клиента так называемый вау-эффект. Не секрет, что сейчас очень популярны лендинг пейджи (лендинги, посадочные страницы, называйте как хотите). Нужны они для того, чтобы по-быстрому привлечь внимание у посетителя к вашему проекту. На какие только ухищрения не идут дизайнеры таких страниц: это и, ставший очень популярным в последнее время, параллакс-эффект, и красочные картинки из фотобанка, и сумасшедшего вида карусели изображений... И вот в последнее время редко-редко можно увидеть видео на фоне. Собственно видео я и заинтересовался. Я долго думал как бы мне это повторить, может я плохо гуглил, но туториала в сети я так и не нашел. Поэтому взял да и сделал всё сам Сперва думал написать сюда развернутый туториал, но потом подумал и решил просто дать ссылку на своё решение. Уж слишком простым оно оказалось, нет смысла тут много расписывать. В общем глядите чо я умею: http://codepen.io/GreatRash/pen/MYVjVE А вот чего можно замутить в дикой природе, используя эту технику: раз два А то привязались, понимаешь к параллаксу... Творите и удивляйте, товарищи!

Доброго времени суток. Может кто знает скрипт, который позволяет узнать, какая операционная система у посетителя сайта? Есть просто кнопка, которая является ссылкой для загрузки софта. И нужно что бы в эту ссылку подставлялось значение, которое покажет, какая ОС у юзера, что бы он мог загрузить софт именно для своей системы. И если можно узнавать битность системы, то это вообще было бы круто. Спасибо заранее

Доброго времени суток.Я перейду сразу к делу. Я не знаю Javascript ,но мне нужно приделать к сайту таймер отсчёта , который показывает сколько осталось времени до события. Буду очень благодарен за любую помощь.

Уважаемые форумчане! Просьба помочь со скриптом. Краткая информация о скрипте: 1. Скрипт генерит 5 элементов img и добавляет их в один из двух пустых div. 2. Скрипт копирует все элементы из одного div в другой, при этом удаляя один элемент img. Получаем 5 и 4 элемента img в двух div. До этого момента все гладко. Далее скрипт должен при нажатии на lastChild левого div, которым является один из img удалять всех child из обоих div и генерить уже 10 и 9 соответственно (по схеме выше). Или, при нажатии на любой другой child в div кроме последнего, выдавать сообщение. Вот проблема заключается в том, что не получается прописать событие onclick на последнем child'e одного из div, чтобы произошел вызов функции. Заранее благодарю за помощь. Это проблемный участок скрипта: """" theLeftSide.lastChild.onclick= function nextLevel(){ // onclick.stopPropagation(); numberOfFaces += 5; //delete all childNodes while(theBody.firstChild){theBody.removeChild(theB ody.firstChild); generateFaces(); }} """" Весь скрипт: <!doctype html> <html> <head> <style> #rightSide { left: 500px; border-left: 2px solid black; width:500px; height:500px; position:absolute ;} #leftSide {width:500px; height:500px;position:absolute;} img{position:absolute;} </style> <meta charset="utf-8"> <title>Matching Game</title> <script> numberOfFaces =5; theLeftSide=document.getElementById("leftSide"); theRightSide =document.getElementById("rightSide"); theBody = document.getElementsByTagName("body")[0]; function generateFaces() { //1st for(i=1;i<=numberOfFaces;i++){ //2nd var i=1; while(i<=numberOfFaces){ // var image=document.createElement("img"); image.src="smile.png"; image.style.top=Math.floor(Math.random()*401)+"px"; image.style.left=Math.floor(Math.random()*401)+"px"; leftSide.appendChild(image); i++; } var leftSideImages = leftSide.cloneNode(true); leftSideImages.removeChild(leftSideImages.lastChild); rightSide.appendChild(leftSideImages); //part3 end } theLeftSide.lastChild.onclick= function nextLevel(){ // onclick.stopPropagation(); numberOfFaces += 5; //delete all childNodes while(theBody.firstChild){theBody.removeChild(theBody.firstChild); generateFaces(); } } theBody.onclick = function gameOver() { alert("Game Over!"); theBody.onclick = null; theLeftSide.lastChild.onclick = null; } </script> </head> <body onLoad="generateFaces()"> <h1>Matching Game</h1> <p>Click on the extra smiling face on the left.</p> <div id="leftSide"></div> <div id="rightSide"></div> </body> </html>

В компанию Wiley приглашается Senior JavaScript developer. Требования: - техническое образование; - знание английского языка на уровне не ниже Intermediate; - опыт работы по специальности от 3 лет; - опыт работы с JavaScript, CSS, Node / Grunt, BackboneJS, ReactJS, AngularJS, dotCMS. Обязанности: - проектирование и реализация веб интерфейса для распределённых многопользовательских систем корпоративного уровня; - использование web и JavaScript технологий: CSS, Node / Grunt, BackboneJS, ReactJS, AngularJS, dotCMS. Условия: - оформление согласно трудовому законодательству и «белая» заработная плата; - фиксированная оплата труда, премирование по результатам работы за полугодие; - размер заработной платы обсуждается с успешными кандидатами, по результатам собеседования; - периодическая индексация заработной платы; - корпоративная программа добровольного медицинского страхования; - корпоративные курсы английского языка; - стабильность; - благоприятное офисное пространство; - иногородним кандидатам компенсируем стоимость проезда до Москвы; - помогаем в быстром поиске жилья и обустройстве на новом месте. Место работы: Московская обл., г. Королев График работы: пятидневная рабочая неделя, занятость полная. Перед собеседованием соискателям, возможно, будет предложено выполнить тестовое задание. Контакты для связи: itincorp@gmail.com +7 916 072 29 58 Skype: valeriya390 Валерия

есть простой код, почему он не работает в Internet Explorerfunction ChkState () { if (document.getElementById("check").checked) document.getElementById("buttonplay").disabled = false; else document.getElementById("buttonplay").disabled = true;}<form method="post" action=""><input type="checkbox" id="check" onClick="ChkState();"></form>

Всем доброго времени суток. При адаптивной вёрстке вы заморачиваетесь такими вещами как: -PageSpeed(использование кэша браузера и т.п.) -Оптимизация файлов(подключение/отключение требующихся скриптов, картинок и т.п. при разных расширениях, то есть не просто все(что нужно и не нужно) подгружать при всех расширениях) Я о подобных вещах читал в книге Итана маркотта: отзывчивый веб-дизайн. Или всем этим занимается кто-то другой(seo и т.п специалисты)?

Добрый день, уважаемые участники форума. Оцените, пожалуйста, мою первую верстку. Два нюанса: а) ошибка с названиями классов camelCase мне известна; б) слайдеры - это велосипеды на чистом JS и да, их можно было бы сделать резиновыми, но было лень ) всё равно в реальном проекте проще на jquery писать. Или я здесь не прав? Собственно сам сайт: http://svden.github.io/PracticeEcommerce/ Макет (переведен в JPG): https://gyazo.com/4dcba975a038e1f77e87a6d053b0f34c Что улучшить? Где нужно было делать иначе? В общем, буду рад любым замечаниям (особенно развёрнутым . Спасибо.

Верстаю сайт для смартфонов. Запутался с "обратной связью". часть common.js: $.ajax({ url: 'contact_form/contact_process.php', type: 'POST', data: str }) .done(function(msg){ if(msg === "OK"){ var result = "<div = 'bg-success'>Спасибо за заявку! Мы вам перезвоним!</div>" form.html(result); }else{ form.html(msg); } }) .always(function(){ submitBtn.removeAttr('disabled'); }); Форма работает - письма приходят. Но после нажатия на кнопку, после обработки запроса и получения "ОК" Форма куда то исчезает, а атрибут disabled не снимается. Адрес сайта

При клике на некоторых ссылках на странице должен отобразится плавающий блок, высота которого средством css анимации изменяется от нулевой до некоторой фиксированной высоты. В начале анимации, когда весь контент не помещается, он сильно пождат вверх, и только вконце стает на свое место. Это выглядит примерно так. Вот этот пример: http://jsbin.com/wekixa/1/edit?html,css,js,output Браузер: Фаерфокс, версия 41.0.1 Методом тыка установил, что если не писать $('#confirm a[role="cancel"]').focus();То все нормально. Как можно изменить поведение, чтобы содержимое блока не подскакиволо вверх. Перепробывал всевозможные способы например, top: 0 и тому подобные. Не помогло.

В IT компанию (разработка ПО) приглашается Frontend developer. Требования: - знание JavaScript, jQuery, AngularJS или BackboneJS; - знание и понимание HTML5 технологий; - знание ReactJS (как преимущество); - умение верстать кроссбраузерные адаптивные страницы; - понимание современных тенденций в области Front-end разработки; - опыт работы с Grunt / Gulp, SCSS и другими инструментами; - опыт работы с системами версионирования; - владение английским языком (чтение документации). Обязанности: - создание SinglePage Application разного уровня сложности; - реализация интерфейсов по макетам дизайнеров; - оптимизация существующих приложений. Условия: - оформление согласно трудовому законодательству и «белая» заработная плата; - размер заработной платы обсуждается с успешными кандидатами, по результатам собеседования; - пятидневная рабочая неделя, график работы с 9 до 18 часов, - офис расположен в историческом центре города; - возможности для роста и обучения. Контакты для связи: E-mail: itincorp@gmail.com Skype - valeriya390 Тел.: +7 (916) 072 29 58 Валерия

Javascript-программист (ExtJs разработчик) В крупную финансовую компанию в связи с расширением IT отдела требуется опытный разработчик extjs. Возможен вариант удаленного сотрудничества. Должностные обязанности: Участие в проектах по разработке фронтенд;Разработка программных решений;Сопровождение существующих программных продуктов (расширение функционала, исправление ошибок);Исследование и внедрение нового программного обеспечения;Проектирование интерфейсов; Требования: Обязательно высокий уровень знания Javascript и ExtJS 3 (владение ExtJS 4 и 5 будет преимуществом)Опыт работы с gitНавыки работы в области php + Selenium Мы предлагаем: • Работа в молодой быстроразвивающейся компании (район ст. м. Василеостровская) либо удаленная работа; • Перспектива карьерного роста до ведущего специалиста; • Оформление согласно ТК РФ; • Корпоративная связь и другие бонусы. Если Вас заинтересует данная вакансия, мы ждем Ваш ответ на hr@smyt.ru с указанием ID в скайпе либо добавьте nevskayahr

Во всех браузерах кроме Firefox, Ajax работает. Код ниже. В Firefox выдает следующее: На сервере откуда берется html, в htaccess прописано: var urlPage = 'https://страница,где должна происходить магия', queryLink = 'https://ссылка с айди/?id=', linkPartners = 'https://ссылка на html на сервере.html'; $.ajax({ url: linkPartners, success: function(html){ if (urlPage == window.location.href) { $(".orange-box .blink").html(html).css({ "background": "none", "padding": "0" }); $(".orange-box").css('background', 'none'); $(".ob-content").css('background', 'none'); }; $('.table-partners tbody a').attr('href',function(){ linkSub = this.href + $('#inner_link').data('link'); return linkSub; }); } }); $.ajax({ url: queryLink + $('#inner_link').data('link'), success: function(html){ if(urlPage == window.location.href ) { if (html != "") { var objJSON = jQuery.parseJSON(html); if (objJSON != null) { var balance = objJSON.sum; if (balance != null) { $('.profileData h4').append('<div class="bal-left">Действительны до <a href="#" target="_blank">1.10.2015</a>: <strong>' + balance + ' </strong></div>'); return; } } }; } $('.profileData h4').append('<span style="display:none;"></span>'); } });

Здравствуйте! Есть задача сделать вот такой слайдер - https://yadi.sk/i/v6QfPqsxjcNdM (при наведении на каждый из трех кусочков изображений, соответствующее изображение должно появляться полностью, как бы раздвигаясь, уменьшая-сдвигая остальные). Все было бы хорошо если бы не диагональная обрезка изображений, т.е. при уменьшении ширины изображения диагональный край обрезается и становится обычным. Насколько возможно/сложно сделать такой слайдер? Буду очень признателен за наводку в какую сторону смотреть, чтобы такое реализовать.

Добрый день, помогите пожалуйста, сама задача, для приложения вконтакте надо сделать, canvas + картинка которая ложится сверху, допустим у нас есть есть две папки, в одной фон, во второй картинки, картинки выбираются рандомно...и еще должна быть возможность позиционировать картинку...помогите пожалуйста...

Подскажите пожалуйста как добиться точности выполнения. http://jsfiddle.net/sn7o7g1k/ Я понимаю что неточности из-за времени выполнения кода внутри функции setInterval, но неужели никак нельзя уточнить результат не увеличивая интервал?

Добрый день, не могли бы вы подсказать как создать движок с двумя папками, в одной фон, в другой н объектов. все картинки Надо сделать кнопку и картинку склеенные. Фон+случайный объект из папки) Но мне надо, чтобы я мог менять объекты и позиционировать все объекты Один раз ставлю точку т в цент подставляются разные объекты...помогите пожалуйста очень срочно надо

Добрый вечер, столкнулся с проблемой, при настройке сайта по технологии ajax(для динамической подгрузки контента). Суть проблемы в том что вовремя подгрузки разметки страницы подгружаю и js теги с скриптами ну и плагины, на некторых страницах они не нужны и после подгрузки страницы мешают коректной работе сайта, кеширование отключино. пробовал использовать .remove() и .empty(), ни чего не дает. код процесса приблезительно такой: function menuAjax(page) { $("nav li").removeClass("active"); $(this).parent().addClass("active"); $.ajax({ url: page, cache: false, success: function(html) { $("body").removeClass("loaded"); setTimeout(function() { $("#body-wrapper").html(html); $("body").addClass("loaded"); }, 800); } }); } $("#home-link").click(function(){ menuAjax("homeAjax.html"); });

Как настроить angular-gripster, чтобы убрать Z-слои и наложение изображений друг на друга? Сейчас, если изображения большие, они накладываются друг на друга. Настройки, видимо, находятся в $scope.gridOptsИ еще не срабатывает resizable: { enabled : false }все равно можно растягивать изображения. Есть официальный демо-пример, там ресайз каким-то образом отключается. Мои текущие настройки (из демо-примера): $scope.gridsterOpts = {margins: [20, 20],outerMargin: false,floating: true,pushing: true,draggable: {enabled: true},resizable: {enabled: false,handles: ['n', 'e', 's', 'w', 'se', 'sw']}}Необходимо, чтобы изображения не накладывались друг на друга, т.е. учитывался их реальный размер, и они просто располагались рядом; чтобы не было возможности ресайза при помощи растягивания изображений за угол. И была возможность перемещения. Сейчас изображения перемещаются нормально, но накладываются друг на друга, и все равно доступен ресайз. Обновление: После добавления к html-блоку div, в котором находятся все изображения, опции <div gridster="gridsterOpts"> ресайз выключился. Осталась проблема наложения друг на друга изображений.

В общем, господа, имею макет, в котором наблюдаю такую форму(картинка прикреплена). 4 шага, с первым справился, а вот на втором - возникла проблема. фон и все элементы покрываются ещё одним слоем, будто select - модальное окно. если это так, то как его позиционировать, если padding элемента выше в %, а сам элемент в px? Шаг 3 - описание опций селекта. Придётся, видимо, подключать библиотеку select2. В общем, мои рассуждения таковы, Хочется услышать более опытных участников форума, что бы вы делали с таким блоком.