Search the Community
Showing results for tags 'jquery'.
-
Мобильная версия сайта скроллится идеально на андроиде http://imgur.com/XeFTTES Но на айфоне скролл ломается и он нереально быстрый http://imgur.com/5UruYUI Заметил, что при открытии сайта на айфоне в код добавляется новый <div> и правка в <body>, хотя в index.html их нет <body class="scroll_wrapper" style="top: -184.702px; left: 0px;"><noindex></noindex><div id="webit_scroll_provider_wrapper" class="html" style="padding-top: 0px; padding-bottom: 0px; width: 100%; min-width: 480px;">Так же в CSS нашел это: .scroll_wrapper{ position: absolute; overflow: auto; left: 0px; right: 0px; top: 0px; bottom: 0px; padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px;}Но никак не пойму в чем проблема. Помогите, пожалуйста. Как исправить?
-
Привет всем, помогите пожалуйста. Есть главное меню. При прокрутке страницы вниз появляется фиксированное меню, в котором есть кнопка. По клике на нее открывается как бы главное меню, но теперь уже ПОД фиксированным. Главное меню содержит еще подменю иначе проблемы и не было бы. Как думал я: 1. По клике на кнопку в фикс. меню добавляем классы "fix navbar-fixed-top" к нашему главному меню. fix придает некоторые отличия по цвету, а navbar-fixed-top - фиксирует элемент вверху окна браузера. 2.Чтобы главное меню отображалось ПОД фиксированным, я придумал сделать отступ на высоту самого фикс. меню. Подозреваю, что не лучшее решение, но по-другому не придумал. 3. Главное меню исчезает при прокрутке страницы хоть на пиксель. Я решил, удалять классы "fix navbar-fixed-top" при прокрутке страницы. Аналогичные действия я проделал и для подменю,но поскольку вменю я нажимаю на ссылку (в данном случае "#"), то страница возвращается в исходное положение и подменю исчезает из-за скроллинга. Надо либо как-то сделать так, чтобы страница не прокручивалась, либо действовать другими методами. В песочнице не смог воспроизвести все необходимые эффекты, поэтому прикрепляю архив,чтобы было нагляднее. https://yadi.sk/d/S1EOVNxonmcxL <!doctype html><html><head> <meta charset="utf-8"> <title>Main</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/normalize.css"> <link href="css/custom.css" rel="stylesheet"></head><body><div class="fluid-container"> <header> <!--main menu--> <div class="menu" id="menu"> <div class="container"> <div class="row"> <div class="col-xs-12"> <nav> <ul> <li><a href="#">ГЛАВНАЯ</a></li> <li><a href="#" class="button-project">ПРОЕКТЫ</a></li> </ul> </nav> </div> </div> </div> </div><!--end main menu--> <!--main fix menu--> <div id = "fixMenu" class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="row" > <div class="col-xs-4"> <button type="button" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </div> </div> </div> <!--end main fix menu--> <!--project menu--> <div class="menu-projects"> <div class="container"> <div class="row"> <div class="col-xs-12"> <ul> <li><a href="#">ДОМА</a></li> </ul> </div> </div> </div> </div> <!--end project menu--> </header> <!--Some text--> <div class="wrap-content"></div></div> <!-- end fluid-container --> <!-- javascript --> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/script.js"></script></body></html>body{ height: 100%;}ul{ list-style: none; margin: 0px; padding: 0px;}li, a{ display: inline-block;}a{ text-decoration: none; font-size: 18px; padding: 8px 30px;}.fluid-container, .container{ min-width: 970px;}.wrap-content{ content: ""; height: 2024px;}.navbar-toggle { display: block; float: left;}/* Default Menu style*/.menu{ background-color: #ffa;}/* Projects Menu style*/.menu-projects{ display: none;}/* fix menu style*/#fixMenu{ display: none;}.fix{ background: #fad;}.menu.fix{ top: 50px;}.menu-projects.fix{ top: 100px;}$(document).ready(function(){ //show/hide project menu $(".button-project").click(function(e){ e.stopPropagation(); $(".menu-projects").show(); $(".search-menu").hide(); }); $(".menu-projects").click(function(e){ e.stopPropagation(); }); $('body').click(function(){ $(".menu-projects").hide(); }); //top fix menu var $fixmenu = $("#fixMenu"); var $fixrow = $('.menu'); var $fixproject = $('.menu-projects'); $(window).scroll(function(){ if ( $('body').scrollTop() > 50){ $fixmenu.show(); } else if($('body').scrollTop() <= 50) { $fixmenu.hide(); } //delete fix row after scroll //$fixrow.removeClass("fix navbar-fixed-top"); //$fixproject.removeClass("fix navbar-fixed-top"); //show fix menu row after click $(".navbar-toggle").click(function(e){ $fixrow.addClass("fix navbar-fixed-top"); $fixrow.show(); }); //ПРОБЛЕМА ТУТ //show second fix menu row $(".button-project").click(function(e){ $fixproject.addClass("fix navbar-fixed-top"); $fixproject.show(); }); });});
-
Задание: По клику на ссылку появляется меню. По клику в любом другом месте кроме, области меню, оно должно "прятаться". Меню появляется, но не "прячется". В поиске наткнулся на такой метод как not(), но реализовать все равно не смог. Возможно не через него надо делать(?). Помогите, пожалуйста. //#button-project - ссылка, по клику которой, появляется меню.//.menu-projects - меню.$(document).ready(function(){ $("#button-project").click(function(){ $(".menu-projects").show(); }); $("not(.menu-projects)").click(function(){ $(".menu-projects").hide(); }); });
-
Добрый день! Интересует такой вопрос: есть ли что-то плохое в делегировании событий? Хочу сделать динамическую подгрузку контента на всем сайте. И чтобы обработчик событий всегда работали, думаю, использовать делегирование. То есть все обработчики вешать через 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 день. -
Смотрел курс по jQuery от tuts+ и там оборачивали код в такую конструкцию: (function() { /* код */ })(); Перевести речь не смог, а текста к этому уроку не было. Также встретил это в уроке по созданию таймера здесь. Скажите, пожалуйста, чем эта конструкция отличается от кода без ее присутствия? В инете нигде на нашел про это информацию, а если где-то и есть такое, то записывается как очевидное и не поясняется.
-
Ребзики, коллегушки .. Верстаю сайт под смартфоны на bootstrap. Подскажите пожалуйста нормальную фотогаллерею. Требования: 1. Не громоздкая. 2. Удобная для пользования с мобилки. Заранее приподнимаю шляпу в знак уважения.
-
Динамическая сетка галереи как в google images - как ускорить?
d0ublezer0 posted a question in JavaScript
Привет! Есть вот такая страница с фотками: http://apriori.leveler.ru/apriori/fotogalereya.html Хотелось отойти от скучной сетки и для равномерного заполнения листа объектами я использовал FreeWall Он изменяет размеры и расположение элементов для равномерного заполнения листа. Адаптивный. Но он, гад, безбожно тормозит. Хотя на демосайте у них всё хорошо. Вопрос - он ли тормозит? И как можно ускорить первоначальную прорисовку? Может, есть более интересные альтернативы? PhotoWall я пробовал - почему-то не подружились. Надо передавать массив картинок в JSON, мне это не оч удобно. да и ошибки в нем, не смог исправить -
Доброго времени суток! Обращаюсь к знатокам своего дела! Ребят, подскажите малоопытному )) Не работает скрипт ни в одном браузере кроме 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 Буду благодарен за Ваши советы и помощь!!!
-
Спасибо. Сделал на CSS3
-
На этой странице кнопка теряет тень при нажатии http://codepen.io/462960/pen/avqjoe Сразу после чего должна вернуться в исходное состояние. Пробовал 2 варианта. Оба завязаны на .one() Отмены нет, прошу знатоков подсказать.
-
Всем привет! Срочно ищем в офис в Москве на полную ставку отвязного frontend-разработчика с навыками джедая. Полное описание вакансии здесь: https://moikrug.ru/vacancies/1000021706 Пишите на почту из текста вакансии или мне в личку.
-
В 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="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'); }); });Возможно, облегчить скрипт?
-
привет, есть такой слайдер по ховеру, на элемент (треугольник) картинка (внутри треугольника) увеличивается, текст исчезает. Сам треугольник при этом остается конечно. Слайдер должен быть адаптивен. Сложность в том что один блок слайдера (карусели) должен состоять из нескольких картинок. Треугольник очевидно тоже картинка, хотя в принципе его можно как div сделать http://codepen.io/web-tiki/pen/JnLGb Народ, что бы вы посоветовали ?
-
Все здравствуйте, я столкнулся с такой проблемой при создании галереи с помощью jQuery и fancybox. Не срабатывает функция fancybox, в браузере пишет: "Uncaught TypeError: $(...).fancybox is not a function" Может кто-нибудь сталкивался? Все файлы закачены на сервере и jQuery подключена. Вот страница с галереей: http://checkedin.esy.es/gallery.html
-
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
