Search the Community

Не работает transition при появлений модального окна: <a class="btn">Modal</a> <div class="modal"> <div class="overlay"> <div class="content"> <a class="close">X</a> <h1>Title</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellat asperiores rerum animi officiis minus corporis iure voluptate accusantium, ut optio ratione iusto nemo delectus. Quasi illum libero dolorum neque?</p> </div> </div> </div> //scss .modal .overlay{ position: fixed; top: 0;left: 0; width: 100%;height: 100%; background: rgba($color: #000000, $alpha: .8); z-index: 1; display: none; } .modal .content{ width: 500px;height: 200px; position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); background-color: #fff; z-index: 2; text-align: center; display: none; a{ line-height: 30px; font-weight: bold; color: #fff; top: -50px;; position: absolute; right: -50px; font-size: 40px; padding: 10px; } h1{ margin-bottom: 20px; } } .modal.active .overlay{ display: block; } .modal.active .content{ display: block; } //Jquery $(document).ready(function(){ $(".btn, .close").click(function() { $(".modal").toggleClass("active") }) }) Я понимаю что на display не работает transition. но и нельзя ставить opacity т.к перекрывает контент сзади него изначально. Что делать?

Всем привет! Подскажите, пожалуйста, как правильно сделать раскрывающиеся блоки со скрытым содержанием внутри? У меня в принципе все работает, блок открывается и закрывается, НО если я нажимаю на блок, а не на стрелочку, она у меня остается в таком же положении(а она должна у меня меняться, когда блок открывается), и получается куча мала, и выглядит это не очень презентабельно. Подскажите, пожалуйста! <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')});

Всем привет! Хотела бы представить свою работу новичка на обсуждение для получения конструктивной критики и/или советов, взглядов что можно улучшить или изменить, общее впечатление, конечно, тоже интересует. https://alesia-k.github.io/Tajam-template/ Обратите, пожалуйста, внимание на: - блок "MEET OUR AMAZING TEAM". Немного не нравится как смещаются item при наведении мыши, как будто немного дергаются. Так ли по-вашему это должно работать или такое поведение блока нужно изменить? - инпут "subscribe" в футторе. При клике на инпут, немного смещается и сам инпут, и рядом стоящая кнопка. Было бы классно, если бы подкинули идею как сделать, чтобы такого не было. - и почему-то при клике на <a href="tel:(+62)2122243333">(+62)21-2224 3333</a> не идет процесса соединения. Заранее спасибо!

Помогите пожалуйста, не получается сделать постраничную навигацию. Делал все по урокам. в Итоге получилось сделать два разных каталога один с фильтрами другой с постраничной навигацией. И теперь я пытаюсь объединить два каталога. Но не получается. Сами файлы урока в архике каталог. Буду очень благодарен если мне помогут! catalog.phpcatalogDB.js каталог.7z

Здравствуйте дорогие специалисты програмирования. Взываю вас о помощи!? Прощу Вас уделите мне своё безценное время. Я который раз выполняю тестовое задание для трудоустройства, а мне постоянно отказывают. Я уже в замешательстве, что же я делаю не так. Я просил их, дать мне хоть какую-то критику, единственное что мне отвечают СЛАБО. Но что именно слабо не говорят! Прошу Вас рассмотреть мою из последних тестовую работу и укозать мне ВСЕ мои прогрехи, по полной строгости. Единственная надежда на Вашу благосклонность и доброту. Вот ссылка на гитхаб - https:/github.com/ShusevA/ARI-AJAX-Application Требоватие к этой работе https://docs.google.com/document/d/10gLPHDqGNMDSeSQbYfG8RVtXR3XQOrchSBmd50OzJ_s/edit С уважением к Вам, за ранее спасибо.

Здравствуйте. Начинающий верстальщик. Ищу первые заказы. Готов верстать что угодно за любую плату (в том числе и бесплатно). Есть 5-7 учебных работ, но этим никого не впечатлить -- очень хочу практического опыта. Использую HTML5/CSS3, JS, JQuery, BEM. Так же разные инструменты, вроде Git, GitHub, SASS/SCSS, Gulp. Если не знаю чего-то необходимого для Вашего проекта\работы -- обязательно разберусь. Если вы разработчик и вам некому спихнуть рутинную работу - я с радостью возьму её на себя; Верстаю из Figma, Photoshop, Illustrator. Могу в адаптивность, отзывчивость, кроссбраузерность, несложную анимацию. телеграмм: туц ; почта: dmitriq.khromikhin@gmail.com Точно на связи с 9:00 до 22:00. Открыт для любых предложений.

Прошу оценить дизайн, юзабилити и общее впечатление https://ivanoffivan13.github.io/portfolio/

Здравствуйте. Имеется данный код: <audio id="audio"> <source src="audio/1.mp3" type="audio/mpeg"> </audio> <div class="fixedbut" id="sebut">Звук</div> <style> div.fixedbut { position: fixed; bottom: 93%; right: 20px; display: block; background: white; border-radius: 10px; color: black; text-decoration: none; padding: 6px 23px; font-size: 17px ; -webkit-transition: 0.33s all ease-out; -o-transition: 0.33s all ease-out; transition: 0.33s all ease-out; z-index: 999; } div.fixedbut:hover { background: grey; color: white; } </style> <script> document.getElementById("sebut").onclick = function() { var myaudio = document.getElementById("audio"); if(myaudio.paused == true) { document.getElementById("audio").play(); } else if (myaudio.paused == false) { document.getElementById("audio").pause(); } } </script> <script> $(document).ready(function(){ $(window).scroll(function () { if ($(this).scrollTop() > 200) { $('div.fixedbut').fadeIn(); } else { $('div.fixedbut').fadeOut(); } }) }); </script> Кнопка плавающая, останавливает звук включенный другой . Со звуком проблем нет, но появление и исчезание кнопки при прокрутке не работает. Подскажите пожалуйста как сделать))

Интернет-маркетинговое агентство Top-Life. Мы ищем в команду Junior Web разработчика. Что мы ожидаем от кандидата: Навыки HTML5, CSS3, JavaScript; Знания PHP5-7‚ MySQL‚ jQuery, ajax; Опыт в верстке; Наличие опыта разработки и знание различных CMS (1С Битрикс, UMI, ModX, WordPress и другие) будет плюсом; Опыт работы и наличие портфолио приветствуется; Умение и желание работать в команде; Аккуратность (осмысленность) в работе. Задачи, которые вам предстоит решать: Современная адаптивная кроссбраузерная верстка (HTML5+CSS3); Применение готовой верстки к CMS (1С-Битрикс, Wordpress); Условия: Оформление по ТК РФ Заработная плата: от 20 000 до 40 000 руб; График работы: 5/2 с 10.00–19.00, обед с 14.00–15.00; На территории работодателя; Молодой‚ профессиональный коллектив; Корпоративные мероприятия; Чай, кофе и печеньки с нас; Мы даем возможность не просто работать‚ а создавать и развиваться. Для связи: Антон тел: 8(981)897-42-46 mail: a.majstrenko@top-life.su hh: https://spb.hh.ru/vacancy/30397980

В молодую креативную студию Team Z требуются: Frontend и Backend разработчики, на проектной или постоянной основе. Языки HTML CSS java jquery bootstrap react, хорошо если стэк angular При обращении, скидывается тестовое задание, при удачном выполнении, начинаем работать. т.к наша студия состоит в 2х клубах (это позволяет нам работать с крупными заказчиками из москвы и аутсорсить зарубежные заказы) все разработчики должны проходить небольшую аттестацию в виде тестовых заданий по направлениям с которыми они работают Все интересующие вас вопросы задавать на почту указанную в профиле, или в контакте: https://vk.com/id428650440

Здравствуйте! Скажите пожалуйста как сделать hover и onclick для стрелок навигации в owl-carousel. Просто в параметрах плагина есть строка navText, про неё всё понятно. Но как сделать для этого параметра, т.е самих стрелок hover и onclick не понятно. Можно ли как-нибудь это сделать. Я пытался через css, но не получилось.

здравствуйте, надеюсь выбрал тему верно, так вот ... на хостинге установили node открыли порт 3000 порт прослушивается, при обращении lptf.it:3000 или http://185.53.160.215:3000/ выводится сообщение Hello Node.js Server!. Казалось бы все хорошо! но! я хочу дальше создание чата, и в корне сайта создаю файлик (сервер) с кодом (пример с интернета, я новичОк): var express = require('express'); var app = express(); app.set('port', process.env.PORT || 3000); app.set('host', process.env.HOST || 'localhost'); var logger = require('log4js').getLogger(); var server = require('http').Server(app); var io = require('socket.io')(server); var port = 3000; app.use(express.static('/home/urlyogyj/public_html/views/chat.php')); app.get('/chat.php', function(req,res){ res.sendFile('/home/urlyogyj/public_html/views/chat.php'); }); app.use('/fonts', express.static('/home/urlyogyj/node_modules/uikit/src/fonts/')); app.get('/socket.io.js', function(req,res){ res.sendFile('/home/urlyogyj/node_modules/socket.io-client/dist/socket.io.js'); }); app.get('/jquery.js', function(req,res){ res.sendFile('/home/urlyogyj/node_modules/jquery/dist/jquery.min.js'); }); app.get('/uikit.js', function(req,res){ res.sendFile('/home/urlyogyj/node_modules/uikit/dist/js/uikit.min.js'); }); app.get('/uikit.css', function(req,res){ res.sendFile('/home/urlyogyj/node_modules/uikit/dist/css/uikit.almost-flat.min.css'); }); app.get('/animate.css', function(req,res){ res.sendFile('/home/urlyogyj/node_modules/animate.css/animate.min.css'); }); function usersCountToLog(){ logger.info('User count: '+io.engine.clientsCount); } io.on('connection', function(socket){ function setName(name){ if(name != undefined && name != ''){ socket.session = {}; socket.session.userName = name; socket.session.address = socket.handshake.address; socket.session.id = socket.id; socket.broadcast.emit('newUser', socket.session); socket.emit('userName', socket.session); socket.emit('userList', io.length); logger.info('User '+socket.session.userName+' join from IP: '+socket.session.address); usersCountToLog(); var clients = io.sockets.connected; var clientsList = {} for(var key in clients){ if(clients[key].session) clientsList[key] = clients[key].session; } socket.emit('clientsList', clientsList); console.log(clientsList); } else socket.emit('setName'); } setName(null); socket.on('setName', function(name){ if(name.length > 0) setName(name); else socket.emit('setName'); }); socket.on('message', function(msg){ if(socket.session){ if(socket.session.userName === null || socket.session.userName == '' || socket.session.userName == undefined){ socket.emit('setName'); }else{ logger.trace('———--'); logger.trace('User: ' + socket.session.userName + ' | Message: ' + msg); logger.trace('====> Sending message to other chaters...'); socket.broadcast.emit('messageFromClients', msg, socket.session.userName); socket.emit('messageToClients', msg, socket.session.userName); } } }); socket.on('disconnect', function(){ if(socket.session){ io.sockets.emit('userDisconnected', socket.session); logger.info('User '+socket.session.userName+' left chat'); usersCountToLog(); } }); }); console.log('server started, tipa...'); как видно по коду прописал адреса к файлам, они верные, в консоле перезапускаю сервер командой node /home/urlyogyj/public_html/app.js screen после этого обновляю адрес lptf.it:3000 и все равно без перемен, выводит Hello Node.js Server! я не понимаю почему, и где и как можно отслеживать ошибки. чего вообще хочу добиться: до авторизации какого-либо пользователя чат не нужен, как только пользователь авторизовывается на сайте, открывается сокет и на сайте для всех остальных пользователей и гостей видна надпись что тот авторизованный пользователь в сети, и напротив его логина появляется кнопка создать чат, но только для авторизованых пользователей, при нажатии на нее открывается окошко чата, как на сайте вконтакте или фейсбуке, у получателя сообщения есть блок со списком все кто прислал ему сообщение, получатель нажимает на автора и пользователи начинают общение, каждый диалог с новым пользователь должен запускать свое окошко чата. причем этот чат существует на всех страницах сайта. после выхода пользователя через кнопку выход или закрытии вкладки сокет закрывается, а все сообщения записываются в базу данных!

Привет! https://www.zebra-tara.ru/about Внизу есть кнопка [Cкопировать], на неё навешен такой код: var $j = jQuery.noConflict(); $j("#legal-copy").on("click", function (e) { var text = $j("#legal-info").text().trim(); var $scroll = $j("window").scrollTop(); var temp_element = $j('<textarea>').appendTo("#legal-copy").val(text).select(); $j("window").scrollTop($scroll); document.execCommand('copy'); temp_element.remove(); $j(this).text("Скопировано").prepend("<i class='fa fa-check-circle'></i> ").addClass("green-btn"); }); Как ни бьюсь - не удается избавиться от прокручивания к создаваемому элементу textarea в мобильном браузере. Он получает :focus и мобильный браузер прокручивает страницу. Добавка ScrollTop мне не помогла Как выкрутиться?

Как на Jquery написать команду в которой попап окно будет закрываться при клике и на крестик и на пустое место вне блока с формой? Вот так выглядит форма обратно связи http://prntscr.com/idz5lf Вот так я закрываю её при нажатии на крестик, просто убираю класс в нужном блоке и все работает $(".knopka2").click(function(){ $(".hide").addClass("call-back") }); $(".close").click(function(){ $(".hide").removeClass("call-back") }); Подскажите как должна выглядеть функция чтобы при клике вне формы тоже убирать нужный класс и форма так будет закрываться?

мне в руки от предыдущего разработчика попался код, которые забирает JSONP данные для построения списка на jquery UI autocomplete, выводит его и при выборе помещает результат в поле формы используется для ввода города в корзине https://www.resursmed.ru/cart запрос данных такого типа https://api.cdek.ru/city/getListByTerm/jsonp.php?q=нижний мне непонятны некоторые вещи: зачем выполняется перебор массива в success и select? и, можно ли сделать выбор первого значения списка при потере фокуса автозаполнялки, если в ней не ткнули в значение? change и blur в конце (на событие select) сделаны видимо чтобы запустить дальнейшую обработку onblur=javascript:Onepage.op_runSS(this); var $j = jQuery.noConflict(); $j("#city_field").autocomplete({ noSuggestionNotice: "Населённые пункты не найдены", autoSelectFirst: true, autoFocus: true, minLength: 2, source: function (request, response) { $j.ajax({ url: "https://api.cdek.ru/city/getListByTerm/jsonp.php", dataType: "jsonp", data: { q: function () { return $j("#city_field").val() } }, success: function (data) { response($j.map(data.geonames, function (item) { Object.getOwnPropertyNames(data.geonames).forEach(function (val, idx, array) { Object.getOwnPropertyNames(data.geonames[val]).forEach(function (val2, idx2, array2) { }); }); try { if (item.postCodeArray[0] !== 0 && item.postCodeArray[0] !== 'undefined' && item.postCodeArray[0] !== null) { found_zip = item.postCodeArray[0]; zip_array[zip_line] = []; zip_array[zip_line][0] = zip_line; zip_array[zip_line][1] = item.id; zip_array[zip_line][2] = item.postCodeArray[0]; zip_line++; } } catch (err) { // обработка ошибки } return { label: item.name, value: item.name, id: item.id } })); } }); }, select: function (event, ui) { $j('#receiverCityId').val(ui.item.id); //пробегаемся по массиву, чтобы вывести индекс в поле for (var i = 0; i < zip_array.length; i++) { if (ui.item.id == zip_array[i][1]) { $j("#customer_note_field").empty(); $j('#address_2_field').val(zip_array[i][1]).focus().change().blur(); $j('#zip_field').val(zip_array[i][2]).focus().change().blur(); } } } });

Здравствуйте! Оцените пожалуйста верстку. Если есть ошибки, напишите как правильнo будет. Ссылка на сайт wor.swema.ru

При настройке Masonry возникает проблема: ширина блоков регулируется отлично (и в %, и в px), но, когда возникла необходимость сделать один из блоков в 2 раза выше остальных блоков - низкие блоки не занимают пустое место рядом с высоким блоком и получается то что на картинке ниже. Перепробовала, как мне кажется, все: в инициализации указывала ширину колонки в пикселях, в процентах, добавляла в код grid-sizer, убирала grid-sizer........... Методом тыка поняла что если увеличить у меня в css ширину блока .grid-item - то колонок становится две - и в таком случае Masonry красиво все располагает. Код здесь (постаралась оставить только суть).

Группа компаний, оказывающих финансовые услуги закордонным клиентам очень ждет опытного фронтенда, который готов влиться в нашу небольшую команду московского офиса. В Вашей зоне ответственности будут мультиязычные сайты (в т.ч. RTL), лэндинги, прототипы мобильных приложений, взаимодействие с копирайтерами, участие в проектах развития. Что хотелось бы увидеть в Вашем портфолио и жизнеописании: • Отличное владение HTML5, CSS3, JavaScript, jQuery, php, MySQL и SQL, Bootstrap (3-4) • Опыт кроссбраузерной и адаптивной/"отзывчивой"(responsive) верстки, понимание специфики работы различных браузеров. • Опыт работы с системой контроля версий (Mercurial или др). • Знание английского языка (не ниже upper intermediate). Как плюс - владение графическими пакетами Adobe, хороший вкус и полиглотство! У нас уютный зеленый офис с кухонькой, душем и качелями недалеко от М.Красносельская/Бауманская в недавно перестроенном под офисный центр здании XIX века, коллеги, подставляющие плечо, а не ножку, 100%ая оплата больничных, и амбициозные планы по развитию нашей глобальной экспансии, которая напрямую связана с ИТ-функционалом. Так что наш фронтенд, действительно, всегда будет на "переднем фронте" поддерживать все стратегические проекты! Ждем Ваше CV и ссылки на портфолио на адрес hr@myfxchoice.com с пометкой в теме "html forum". Татьяна

Доброго времени суток! Поставил на сайт вот этот плагин http://jquery-plugins.net/sticky-kit-jquery-plugin-for-making-sticky-elements . Сайт на адаптивной верстке в две колонки. При размере экрана меньше 900 пикселей эти две колонки превращаются в два блока, один под другим. Но скрипт получается не понял что ничего не надо скролить и получается один блок заезжает на другой и очень серъезно. И появилась такая идея, что надо просто остановить его работу когда экран меньше 900 пикселей, только я не знаю как. Помогите. Вот страница с демо, только надо уменьшить размер окна, чтобы она заработала http://leafo.net/sticky-kit/examples/3.html Вот сам скрипт http://leafo.net/sticky-kit/src/jquery.sticky-kit.js А вот получается как он выводится http://leafo.net/sticky-kit/example.js Или напишите в какую сторону надо искать, гугл особо ничем не помог, только еще больше запутался. Спасибо за помощь

Добрый день. Есть задача сделать анимацию как в примере по ссылке (видео на Youtube.com) - С подобным ни разу не сталкивался, но ужасно хочется понять, как это реализуется. Я не прошу готового решения, я лишь прошу чтоб меня направили в ту сторону, в которой можно в этом разобраться. Спасибо.

Доброго времени суток дорогие друзья. Помогите пожалуйста решить проблему. Я сделал слайдер в программе Amazing Slider 6.6 подключил его на сайт в шапку blogger все работает только одна причина пр наведении на слайдер не всплывают стрелочки в лево и в право в чем причина? вот как я сделал https://drive.google.com/file/d/0Bz7...ew?usp=sharing https://drive.google.com/file/d/0Bz7...ew?usp=sharing вот сам слайдер https://drive.google.com/file/d/0Bz7...ew?usp=sharing И вот что получилось на сайте https://slider-jquery1.blogspot.com/ Кто знает помогите пожалуйста в чем суть.

Есть такой код: https://jsfiddle.net/hcandrq2/10/ Нашёл код http://jsfiddle.net/uhL35f15/2/ http://jsfiddle.net/uhL35f15/11/ Объединить не получаеться https://jsfiddle.net/hcandrq2/62/ https://jsfiddle.net/hcandrq2/92/ - помогите разобраться

Добрый день. Есть форма(опросник), переменных на 200, подскажите как можно ее заполнить на компьютере1, и открыть на компьютере2 уже заполненную? Может быть есть человеческий способ, решения данной проблемы? Вижу только вариант 1)сохранить все переменные в mysql 2)на втором компе вытащить из БД 3)воссоздать страницу HTML через echo( куча чекбоксов с oncliсk показывающими дивы, которые замучаюсь переписывать с block на none и наоборот).

Есть список с товарами. В каждом пункте есть блок с количеством едениц, и две кнопки + и -. Если есть более одного товара то не зависит на каком блоке кликать скрипт работает на всех, а нужно чтобы только на блоке на котором происходит действие. Код jQuey: var result = $('.cart__goods_item .cart__numbers_result'); var rel = $('.cart__goods_item .cart__numbers_reload'); var i = 1; $('.cart__goods_item .cart__numbers_plus').on('click', function() { if (i < 10) { i++; result.text(i); } }); $('.cart__goods_item .cart__numbers_minus').on('click', function() { if (i > 1) { i--; result.text(i); } }); rel.on('click', function() { i = 1; result.text(i); });

Привет! Подскажите пожалуйста, есть мобильное меню работающее по клику, хочу использовать свойство transition чтобы изменить скорость отображения меню но не получается Демо 1 Демо онлайн там используется jquery для отображения меню $(".mob-menu").click(function(){ $(this).toggleClass("open"); // transform mobile menu icon to X $(".nav-left,.wrapper,.header").toggleClass("openleft"); }); я пробую добавить css эффект transition но не работает, в чем может быть проблема? .nav-left.openleft,.wrapper.openleft,.openleft{ -webkit-transition: all 2s; -moz-transition: all 2s; -o-transition: all 2s; transition:all 2s; }