Search the Community
Showing results for tags 'jquery'.
-
Добрый день! Интересует такой вопрос: есть ли что-то плохое в делегировании событий? Хочу сделать динамическую подгрузку контента на всем сайте. И чтобы обработчик событий всегда работали, думаю, использовать делегирование. То есть все обработчики вешать через body: $('body').on('event', 'selector', func); Есть ли у этого какие-то побочные эффекты, чем это может обернуться? Или можно спокойно ставить все обработчики таким образом? Спасибо!
-
Добрый день! Следующая ситуация: решил, вместо обновления страницы при переходе по пунктам меню использовать HTML5 History API и подгрузку контента через AJAX. Но ведь получается что после того, как я заменил основное содержимое страницы обработчики этого удаленного содержимого все еще висят где-то в памяти, так? Вот хотелось бы узнать, чем это чревато? Нужно ли после смены страницы очищать все обработчики предыдущей страницы или пускай они копятся и ничего плохого в этом нет? Спасибо!
-
Здравствуйте! Появилась проблема. Подлкючаю скрипт для плавающих блоков - fixto.js. Все отлично работает в ФФ, но в Хроме (пока только там) выдает ошибку "Cannot read property 'offsetHeight' of undefined". Причем демо скрипта в Хроме отлично работает. Перебровал уже кучу скриптов других, но ниодин не подходит под мои нужды. Т/к демо работает, то видимо проблема в моем подключении скрипта или в том как вызываю. Не знаю в общем, правил/переставлял/менял, но ничего не помогает. Посмотреть можно здесь - http://s16.ru/i/fznda/house.html Если нужны еще какие-то входные данные, напишите пожалуйста. Буду очень презнателен за помощь, мучаюсь с этим уже 3 день. -
Ребзики, коллегушки .. Верстаю сайт под смартфоны на bootstrap. Подскажите пожалуйста нормальную фотогаллерею. Требования: 1. Не громоздкая. 2. Удобная для пользования с мобилки. Заранее приподнимаю шляпу в знак уважения.
-
Динамическая сетка галереи как в google images - как ускорить?
d0ublezer0 posted a question in JavaScript
Привет! Есть вот такая страница с фотками: http://apriori.leveler.ru/apriori/fotogalereya.html Хотелось отойти от скучной сетки и для равномерного заполнения листа объектами я использовал FreeWall Он изменяет размеры и расположение элементов для равномерного заполнения листа. Адаптивный. Но он, гад, безбожно тормозит. Хотя на демосайте у них всё хорошо. Вопрос - он ли тормозит? И как можно ускорить первоначальную прорисовку? Может, есть более интересные альтернативы? PhotoWall я пробовал - почему-то не подружились. Надо передавать массив картинок в JSON, мне это не оч удобно. да и ошибки в нем, не смог исправить -
Спасибо. Сделал на CSS3
-
На этой странице кнопка теряет тень при нажатии http://codepen.io/462960/pen/avqjoe Сразу после чего должна вернуться в исходное состояние. Пробовал 2 варианта. Оба завязаны на .one() Отмены нет, прошу знатоков подсказать.
-
Всем привет! Срочно ищем в офис в Москве на полную ставку отвязного frontend-разработчика с навыками джедая. Полное описание вакансии здесь: https://moikrug.ru/vacancies/1000021706 Пишите на почту из текста вакансии или мне в личку.
-
Удалил строчку в коде какую не знаю и перестало выводится на сайте, 3 блока которые под слайдером все норм, голову сломал исправить не могу. Помогите люди добрые. Сайт: http://3r.com.ua/ Код: <div class="index-container"> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="index_block"> <div class="header_slider"> <script type="mce-text/javascript" src="{{skin url=''}}js/camera.js"></script> <script type="mce-text/javascript">// <![CDATA[ /* index slider */ jQuery(function(){ jQuery('#camera_wrap').camera({ alignmen: 'topCenter', height: '400px', minHeight: '50px', loader : bar, navigation: false, fx: 'simpleFade', navigationHover:false, thumbnails: true, playPause: false }); }); // ]]></script> <div class="fluid_container"> <div id="camera_wrap" class="camera_wrap camera_orange_skin"> <div data-src="{{skin url=''}}images/slider_pic1.jpg" data-link="specials.html"> <div class="camera_caption fadeIn"> <div class="right_slider_side sl_1"> <h2>Материнские платы</h2> <p> </p> <h4>восстановленные</h4> <h4> </h4> </div> </div> </div> </div> <div data-src="{{skin url=''}}images/slider_pic2.jpg" data-link="tripods.html"> <div class="camera_caption fadeIn"> <div class="right_slider_side sl_2"> <h2>Сервера IBM и HP </h2> <h4>International Business Machines</h4> <h4>Hewlett-Packard</h4> <p> </p> </div> </div> </div> </div> </div> </div> <div data-src="{{skin url=''}}images/slider_pic3.jpg" data-link="video-cameras.html"> <div class="camera_caption fadeIn"> <div class="right_slider_side sl_3"> <h2>Ноутбуки</h2> <h4>восстановленные</h4> </div> </div> </div> </div> <div class="clear"> </div> </div> <div class="banners_block"> <div class="banner ban1"> <div class="ban_img"><img alt="" src="{{skin url='images/index_img1.jpg'}}" /></div> <div class="ban_wrap"> <h2>Быстрая доставка</h2> <p>Способы доставки и оплата! </p> <div class="shop_now"><span>Перейти</span></div> </div> </div> <div class="banner ban2"> <div class="ban_img"><img alt="" src="{{skin url='images/index_img2.jpg'}}" /></div> <div class="ban_wrap"> <h2>Подтверждение гарантии</h2> <p>Гарантия 1, 2, 3 месяца!</p> <div class="shop_now"><span>Перейти</span></div> </div> </div> <div class="banner ban3"> <div class="ban_img"><img alt="" src="{{skin url='images/index_img3.jpg'}}" /></div> <div class="ban_wrap"> <h2>Возврат денег</h2> <p>Мы гарантируем возврат денег если товар не подошел или находится не робочем состоянии!</p> <div class="shop_now"><span>Перейти</span></div> </div> </div> </div>
-
В 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 Валерия
-
Доброго времени суток! Обращаюсь к знатокам своего дела! Ребят, подскажите малоопытному )) Не работает скрипт ни в одном браузере кроме Mozilla Firefox.. Вроде все просто, суть - показывать/скрывать поля при выборе значения select в форме Подскажите в чем дело, что не так и как это исправить? Вот тело: <form name="" id="" method="post" action="" onsubmit=""> <div style="padding-bottom:10px; "> <select > <option id="" class="3" value="">Вы новый пользователь?</option> <option id="" class="1" value="">Я новый пользователь</option> <option id="" class="2" value="">У меня уже есть кабинет</option> </select> </div> <div id="my1" style="padding-bottom:10px; display:none;"><input type="text" placeholder="значение 1"></input></div> <div id="my2" style="padding-bottom:10px; display:none;"><input type="text" placeholder="значение 2"></input></div> <div id="my3" style="padding-bottom:10px; display:none;"><input type="text" placeholder="значение 3"></input></div> <div id="my4" style="padding-bottom:10px; display:none;"><input type="text" placeholder="значение 4"></input></div> <div id="my5" style="padding-bottom:10px; display:none;"><input type="text" placeholder="значение 5"></input></div> <div id="my6" style="display:none; padding-bottom:6px; margin-top:14px;"><input name="submit" id="submit" value="Принять" type="submit"></div></form>Вот скрипт: $(".1").click(function(){$('#my, #my1, #my2, #my3, #my4, #my5, #my6').fadeOut('slow');$("#my, #my1, #my2, #my3, #my4, #my5, #my6").toggle(1000);});$(".2").click(function(){$('#my, #my1, #my2, #my3, #my4, #my5, #my6').fadeOut('slow');$("#my, #my3").toggle(1000);$('input[name="other"]').attr('value','');});$(".3").click(function(){$('#my, #my1, #my2, #my3, #my4, #my5, #my6').fadeOut('slow');});подключаю JQuery 1.9.1 Вот ссылка на мою форму - http://jsfiddle.net/2w18do1z/1/ или здесь, кому как удобнее - http://codepen.io/anon/pen/MaOxMb Буду благодарен за Ваши советы и помощь!!!
-
Доброго времени суток! Обращаюсь к знатокам своего дела! Ребят, подскажите малоопытному )) Не работает скрипт не в одном браузере кроме Mozilla FireFox.. Вроде все просто, суть показывать/скрывать поля при выборе значения select Вот тело: <form name="" id="" method="post" action="" onsubmit="return validateForm();"><div class="" style="padding-bottom:10px; "><select ><option id="" class="3" value="">Вы новый пользователь?</option><option id="" class="1" value="">Я новый пользователь</option><option id="" class="2" value="">У меня уже есть кабинет</option></select></div><div id="my1" style="padding-bottom:10px; display:none;"><input type="text" placeholder="значение 1"></input></div><div id="my2" style="padding-bottom:10px; display:none;"><input type="text" placeholder="значение 2"></input></div><div id="my3" style="padding-bottom:10px; display:none;"><input type="text" placeholder="значение 3"></input></div><div id="my4" style="padding-bottom:10px; display:none;"><input type="text" placeholder="значение 4"></input></div><div id="my5" style="padding-bottom:10px; display:none;"><input type="text" placeholder="значение 5"></input></div><div id="my6" style="display:none; padding-bottom:6px; margin-top:14px;"><input name="submit" id="submit" value="Принять" type="submit"></div></form>Вот скрипт: $(".1").click(function(){$('#my, #my1, #my2, #my3, #my4, #my5, #my6').fadeOut('slow');$("#my, #my1, #my2, #my3, #my4, #my5, #my6").toggle(1000);});$(".2").click(function(){$('#my, #my1, #my2, #my3, #my4, #my5, #my6').fadeOut('slow');$("#my, #my3").toggle(1000);$('input[name="other"]').attr('value','');});$(".3").click(function(){$('#my, #my1, #my2, #my3, #my4, #my5, #my6').fadeOut('slow');});подключаю JQuery 1.9.1 Вот ссылка на мою форму - http://jsfiddle.net/2w18do1z/1/ или здесь, кому как удобнее - http://codepen.io/anon/pen/MaOxMb Буду благодарен за Ваши советы и помощь!!!
-
Разрабатываю небольшой сайт (просьба сильно не бить - это мой первый сайт и он еще не закончен) emwhp.com использую anchor.js для плавного к содержимому страницы по щелчку на каруселе : jsfiddle.net/psrRQ/4/ (исходник откуда брал скрипт) при попытке прокрутить карусель(брал исходники bootstrap) влево или вправо скрипт уводит видимую область экрана ниже меню. Подскажите пожалуйста как поправить.
-
Здравствуйте! Есть задача сделать вот такой слайдер - https://yadi.sk/i/v6QfPqsxjcNdM (при наведении на каждый из трех кусочков изображений, соответствующее изображение должно появляться полностью, как бы раздвигаясь, уменьшая-сдвигая остальные). Все было бы хорошо если бы не диагональная обрезка изображений, т.е. при уменьшении ширины изображения диагональный край обрезается и становится обычным. Насколько возможно/сложно сделать такой слайдер? Буду очень признателен за наводку в какую сторону смотреть, чтобы такое реализовать.
-
jQuery(function($) { $('#amoney .south').click(function(){ $('#amoney .south').removeClass('active'); $(this).addClass('active'); });});jQuery(function($) { $('#amoney').on('click', '.south', function(){ $('#amoney .south').removeClass('active'); $(this).addClass('active'); });});работают но как то странно написано <div id="amoney" class="amoney-module" style="text-align: center;"> <div id="amoney1" class="amoney-mod1" style="text-align: center;"> <span class="panel1"><a class="south" style="margin:3px;text-decoration: none;" onclick="hide_all()" title="" data-original-title="Скрыть все">Благодарность Автору</a></span> </div><div id="amoney2" class="amoney-payment" style="text-align: center;"> <!-- Link Edit --> <a id="ammh1" style="margin:3px;" class="south" title="" onclick="show_wm()" data-original-title="WebMoney"></a> <a id="ammh2" style="margin:3px;" class="south active" title="" onclick="show_rupay()" data-original-title="RBKMoney"></a> <a id="ammh5" style="margin:3px;" class="south" title="" onclick="show_paypal()" data-original-title="PayPal"></a> <a id="ammh8" style="margin:3px;" class="south" title="" onclick="show_robox()" data-original-title="ROBOKASSA"></a> <!-- Link Edit --></div></div>многим хватает этого: $(document).ready(function(){ $(".menu li a").click(function() { $(this).parent().addClass('active').siblings().removeClass('active'); }); });Возможно, облегчить скрипт?
-
Все здравствуйте, я столкнулся с такой проблемой при создании галереи с помощью jQuery и fancybox. Не срабатывает функция fancybox, в браузере пишет: "Uncaught TypeError: $(...).fancybox is not a function" Может кто-нибудь сталкивался? Все файлы закачены на сервере и jQuery подключена. Вот страница с галереей: http://checkedin.esy.es/gallery.html
-
привет, есть такой слайдер по ховеру, на элемент (треугольник) картинка (внутри треугольника) увеличивается, текст исчезает. Сам треугольник при этом остается конечно. Слайдер должен быть адаптивен. Сложность в том что один блок слайдера (карусели) должен состоять из нескольких картинок. Треугольник очевидно тоже картинка, хотя в принципе его можно как div сделать http://codepen.io/web-tiki/pen/JnLGb Народ, что бы вы посоветовали ?
-
jQuery Не работает скрипт появления блока при скроллинге
Sergo Skiller posted a question in JavaScript
Здравствуйте. Скажу сразу, что только начал разбираться в JavaScript и jQuery, в качестве подопытных выбрал свои старые работы. В общем, захотел сделать так, чтобы при скроллинге начинал проявляться блок с примерами работ, написал скрипт, без ошибок, правильный со всех (вроде) точек зрения, но он почему-то не работает - блок как был на месте, так там и остался. Писал его по следующему алгоритму: 1) Получение расстояния блока от начала документа методом .offset().top 2) Получение высоты окна методом $(window).height() 3) Вычитание из .offset().top высоты окна (var distanceTop = $('#container').offset().top - $(window).height() ) 4) Получение величины скроллинга методом $(window).scrollTop 5) Сравнение: если distanceTop меньше, чем $(window).scrollTop, то запускается анимация проявления блока $('#container').animate({'opacity':1}, 3000), иначе анимация его скрытия $('#container').animate({'opacity':0}, 3000) Вот ссылка на папку в Яндекс Диске с исходными файлами: https://yadi.sk/d/fz37oI69irTKa Сайт на хосте: http://erudit.esy.es/ Вот код скрипта: $(document).ready(function(){ $(window).scroll(function(){ var distanceTop = $('#container').offset().top - $(window).height(); if ($(window).scrollTop > distanceTop){ $('#container').animate({'opacity':1}, 3000); }else{ $('#container').animate({'opacity':0}, 3000); } });});Заранее благодарен за помощь. -
Есть код, не знаю из-за чего начал капризничать, толь из-за Joomla 3, еще чего, не пойму, помогите разобраться
-
Товарищи, перелопатил много менюшек, но не нашел нормального решения ( Требуется многоуровневое меню(2х, 3х-уровневое), адаптивное, скачал одно, разобрался, но на планшете и в телефоне глючит и заедает, другое так же, может есть какое то готовое хорошее решение?
-
Всем привет! Такой вот вопрос по JQuery Trickshots: Для чего в setTimeout использовать такую запись 'r('+f+')' и почему именно 9 миллисекунд? r(function(){ alert('DOM Ready!');})function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
-
Здравствуйте! Подскажите, пожалуйста, в чём проблема Есть блок, который изначально скрыт, в него вложена карусель, для которой задана автопрокрутка. Но автопрокрутка начинает работать только если сначала нажать на стрелочку. Дело именно в том, что блок скрыт? Как это можно исправить? Вот ссылка на страницу: http://develop.artedivina.ru/NEW/korzina-new.html
-
помогите пожалуйста советом, а лучше примерами написал ajax-обработчики всего для трёх действий(CUD) и ужаснулся. хоть старался и не говнокодить, но жуткая простыня кода получилась. и подобного кода придётся написать в 5-10 раз больше подскажите пожалуйста как правильные пацаны организуют js-код в модули или в другие удобные структуры. существуют какие-нибудь примеры хорошего стиля? или пожалуйста поскажите что можно хорошего с этим кодом сделать. первая мысль у меня была разбрасывать по отдельным файлам, а потом на страничке подключать это хозяйство, но это увеличивает количество запросов к серверу только не советуйте использовать ангуляры и прочие подобные штуки
-
помогите пожалуйста разобраться и исправить код после клика на элементе .edit_album я вызываю бутстраповское модальное окно так: $(document).on('click', '.edit_album', eee);function eee(){ $('#modalEditAlbum').modal();}этот способ работает. но следующий способ не работает: $(document).on('click', '.edit_album', $('#modalEditAlbum').modal());так как в результате модальное окно вызывается при загрузке странички, а этого мне не надо
-
помогите пожалуйста разобраться есть форма, которая отправляет в контроллер такой ajax-запрос: $.ajax({ .................. success: function(data){ alert('ok'); }, error: function(xhr, ajaxOptions, thrownError){ alert('no ok' + xhr.status); } }) контроллер возвращает статус 200 или 4хх и на основе этого срабатывает или success или error. но я хотел бы чтобы контроллер возвращал не просто статус запроса, а массив с ошибками валидации. на стороне контроллера не проблема сделать отправку этого массива. проблема в том как получить его в ajax-блоке было бы хорошо получить его как один из параметров процедуры error. возможно ли такое, подскажите пожалуйста? если нет, то придётся заставить контроллер в любом случае возвращать статус 200 вместе с массивом ошибок и уже в процедуре success добавлять сложную логику. приемлем ли такой метод, хорошая ли это практика? вот схематично экшен контроллера, которые принимает запрос из формы: def create ....... if @album.save render json: @album, :status => 200 else render json: @errors, :status => 403 endend
