Search the Community

Привет всем. Помогите, пожалуйста, разобраться. Задача следующая : после того, как пользователь заполнит и нажмет на кнопку отправки формы, должно появится модальное окно с текстом "Спасибо" и форма отправится на почту. Искал в сети примеры, но ничего так и не заработало. Последний вариант, на котором остановился, как самый простой. Есть форма <form id="ajaxform" action="" class="promo__form" name="mail" method="post" ectype="text/plain"> <p> <input placeholder="имя" name="name" class="input" required="required" type="text"> <input placeholder="телефон" name="phone" class="input pull-right" required="required" type="text"> </p><input name="submit" value="узнать подробности" class="custom-button" type="submit"> </form> Здесь взял плагин http://malsup.com/jquery/form/ и подключаю его (в конце страницы, если это имеет значение) <script src="js/jquery-2.1.3.min.js"></script> <script src="http://malsup.github.com/jquery.form.js"></script> Есть обработчик <?php header("Location: {$_SERVER['HTTP_REFERER']}"); if($_POST['submit']) { $name = substr(htmlspecialchars(trim($_POST['name'])), 0, 1000); $phone = substr(htmlspecialchars(trim($_POST['phone'])), 0, 1000); $from = substr(htmlspecialchars(trim($_POST['email'])), 0, 1000); $message = substr(htmlspecialchars(trim($_POST['message'])), 0, 1000000); $message .= "\n" ."My phone: ".$phone; $headers = 'From: '.$from . "\r\n"; $headers .= "MIME-Version: 1.0" . "\r\n"; $headers .= "Content-type:text/plain;charset=utf-8" . "\r\n"; $to = 'example@email.com';// Your email here mail($to, $name, $message, $headers); } exit; ?> И сам jQuery $('#ajaxform').ajaxForm(function() { //$('#modal-thanks').fadeIn(); alert("Thank you for your comment!"); }); Результат работы : после заполнения формы и нажатия на кнопку, всплывает alert с текстом, НО на почту ничего не приходит. В чем проблема? Ломаю голову второй день, не могу понять, что не так.

Вот такая простая структура. Идея в том, чтобы на странице показывалось только 3 элемента. Остальные, если они есть, подгружались при нажатии на кнопку. https://jsfiddle.net/vk1zuajm/2/ На данный момент завис на том, что элементы после 3-го не прячутся. eq() принимает целые числа, number - целое число. Почему не работает так как надо?

Добрый вечер. Есть популярный плагин https://jqueryvalidation.org/ для валидации форм. Всё хорошо, но нужно изменить очередность применения правил. При инициализации плагина при указании правил, независимо от того в каком порядке они указаны, применяться в первую очередь все равно будет правило "email", а нужно чтобы в первую очередь проверялось "kir_mail". То есть, чтобы пользователь видел ошибку о том что он использует кириллические символы до того как он напишет почту в правильном формате. rules: { email: { required: true, kir_mail: true, email: true, emailBlackList: true } } Какой день уже ищу решение, но что то не нашел можно ли сделать возможностями плагина. Помогите пожалуйста, если сталкивались с подобным или знаете как сделать, заранее спасибо.

Здравствуйте. Написал свой первый jQuery-плагин lightBox для открытия картинок в модальном окне. Хочется уже сделать на совесть и предусмотреть метод disable для отключения плагина. Подскажите, как правильно это сделать? Прикрепляю всё что надо, во избежание неправильного объяснения проблемы со своей стороны.. )))

Уважаемые форумчане! Нуждаюсь в вашей помощи! Есть такой замечательный сайт http://pervolo.com/. Если прокрутить его до фиолетового блока с названием "WITH OUR CORE VALUES OF HARD WORK AND HONESTY", то можно увидеть как вокруг иконок плавно появляется круглая граница. Как это можно сделать? И еще вопрос как реализуется постепенное появление блоков с текстом, какие хорошие плагины вы для этого может быть знаете?

Всем доброго времени суток! Подскажите, как можно реализовать такой довольно интересный функционал, который есть на сайте http://www.3magine.com/ Мне нужно, чтобы у сайта не было вертикальной полосы прокрутки, при скролле прокручивался весь цветной блок, который при этом занимает всю доступную высоту экрана. Насчет последнего пункта, в принципе понятно, что можно задать height=100vh, а вот как сделать все остальное, я пока не представляю. Может кто-то сталкивался с подобным?

Всем добрый день! Есть довольно простая структура сайта: https://jsfiddle.net/j7n9yf5q/3/ Нужно при уменьшении ширины экрана (например до 768px) поменять блоки местами - Блок 1 перемещается под Блок 3, а если на странице только Блок 1 и Блок 2 - то они меняются местами. Соответственно, если размер окна снова увеличивается, то блоки должны стать на свои места. Как это реализовать при помощи Jquery?

Хочу сделать так, чтобы при наведении на картинку, она прокручивалась вниз, а затем, достигнув нижней точки, прокручивалась аналогично вверх. На данный момент ничего не работает. Если убрать if (), который идет после комментария, то будет работать только прокрутка вниз, до нижней крайней точки. Помогите, пожалуйста. https://jsfiddle.net/11hdy2u8/

Гуглил эту тему, но как-то не попалось решение. Так как я нуб, сделал самое простое и очевидное решение и решил поделиться с нубами всего мира Суть: на одной строке должно располагаться несколько DIV'ов с одинаковыми отступами, одинаковой высотой и шириной, что их как бы центрирует. Путей решения этой задачи наверняка много, а самый простой вариант: <content> <div></div><div></div><div></div><div></div> <div></div><div></div><div></div><div></div> </content> В принципе, решение на CSS мне виделось примерно: height: width; -- но так к сожалению (или счастью) нельзя. Зато можно использовать фичу CSS3 для ширины: content{ display: block; height: 512px; width: auto; margin: 16px; padding: 4px; background: #fff; } content div{ display: inline-block; /* блоки на одной строке */ min-height: 128px; width: calc(100% / 4 - 8px); /* Используем CSS3 для расчёта ширины блоков, вычтем отступы, созданные margin и padding */ background: #ccc; margin: 4px; } Минимальная высота указана для случаев, когда ширина меньше 128 пикс, что можно сделать и для ширины. Просто так, потому что могу. И осталось только узнать ширину, подставив её в CSS: $(function(){ var myWidth = $('content div').width(); // получаем ширину $('content div').css("height", myWidth); // устанавливаем её }); В итоге оно работает на jsfiddle. Вот и всё! Делитесь своими решениями.

Есть страница index.html Есть блок, например с классом content, в котором много блоков с различным контентом. Есть также навигационное меню, со множеством ссылок, и необходимо чтобы при нажатии на одну из ссылок меню обновлялся контент в блоке с классом content, затем при нажатии на другую ссылку меню старый контент исчезал, а появлялся новый. Слышал что это делается с помощью AJAX, но до конца не понял как. Спасибо за помощь.

Доброго вечера, уважаемые! Поставил перед собой задачу: при помощи jQuery заставить картинку сменяться, когда на неё наводят курсор. По факту: заменить атрибут src у img'a с этим изображением. Написал span, содержащий url нового изображения, скрыл его в css. Затем присвоил значение этого span'a функции, и закинул эту функцию в .attr(), где первым значением выбрал 'src'. Получилось так: $(document).ready(function() { $('.content').hover(function() { var newImg = ('#newImg_url').val(); $('#mainImg').attr('src', newImg); }); }); Где .content - блок с изображением, #newImg_url - тот самый span с новым url'ом, #mainImg - основное изображение, которое будет изменяться на другое при hover'е. Однако, ничего не происходит. Я человек в jQuery неискушенный, а потому спрашиваю совета знатоков: где я накосячил, и что нужно исправить? Спасибо за внимание.

есть скрипт заменяющий классы группе блоков и присваивающий определённый класс по ip function bir_0(){ $(".display").addClass('display_none'); $(".display").removeClass('display_block'); $("#bir_0").addClass('display_block'); $("#bir_0").removeClass('display_none');}function bir_1(){ $(".display").addClass('display_none'); $(".display").removeClass('display_block'); $("#bir_1").addClass('display_block'); $("#bir_1").removeClass('display_none');}function bir_2(){ $(".display").addClass('display_none'); $(".display").removeClass('display_block'); $("#bir_2").addClass('display_block'); $("#bir_2").removeClass('display_none');}function bir_3(){ $(".display").addClass('display_none'); $(".display").removeClass('display_block'); $("#bir_3").addClass('display_block'); $("#bir_3").removeClass('display_none');}код отлично работает в FF, но отказывается работать в Chrome (как работает в других браузерах не проверял), что не так? или предложите нормальный вариант, ибо это "топор"-ный вариант

Вот демо, вот код. Как заменить слайдер "change color" на форму с полями ввода?

После прокрутки на определенное расстояние должна появится кнопка. Не понимаю в чем проблема, на другом сайте работало без проблем. https://jsfiddle.net/cr4wrbw2/2/

Здравствуйте. Мне нужно удалить обработчик определенного элемента. Нашел метод .off() в jquery, но что-то не получается сделать, что мне нужно. https://jsfiddle.net/r7bk9pga/1/ Помогите в примере убрать обработчик с li.off

Привет всем! Это моя первая серьезная работа. Недавно делал несколько страниц для тренировки. Макет фиксированный, из фреймворков брал bootstrap3. Необходима поддержка IE8+ Ссылки: 1. Главная http://jakeweb.cc.ua/building/ 2. http://jakeweb.cc.ua/building/project.html 3. http://jakeweb.cc.ua/building/elements.html 4. http://jakeweb.cc.ua/building/catalog.html Исходники: https://github.com/jakeweb/building.git Изначально собирался сделать только одну страницу, но потом еще решил доделать остальные, поэтому структура css могла быть лучшей, если бы я планировал все изначально. Буду рад критике и советам.

Здравствуйте! Подскажите, пожалуйста, что не так делаю?.. Почему-то пишет что функция setMap не определена (здесь 37 строка в js коде)! var o = document.getElementById("map-canvas");if (o) { //карта mapCenter = new google.maps.LatLng(56.528960, 84.967544); var mapOptions = { zoom: 15, center: mapCenter, scrollwheel: false, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); //элементы var li_points = $('#map-points').find('li'), options = [], pLatLng = []; if (li_points.length > 0) { li_points.each(function(i){ var $pt = $(this); if ($pt.data('x') && $pt.data('y') && $pt.data('type')) { pLatLng[i] = new google.maps.LatLng($pt.data('x'), $pt.data('y')); options[i] = { id: i, map: map, latLng: pLatLng[i], className: 'map-marker ' + $pt.data('type') } } }); } for (var i in options) { function MapMarker(options) { this.latLng = options.latLng; this.map = options.map; this.className = options.className; this.id = options.id; this.content = ''; this.setMap(options.map); } var marker = new MapMarker(options[i]); //действие при клике var markers = []; markers[marker.id] = marker; $(document).on('click', '.map-marker', function() { console.log(marker.id); }); MapMarker.prototype = new google.maps.OverlayView(); MapMarker.prototype.draw = function() { var me = this; var div = this.div_; if (!div) { div = this.div_ = document.createElement('div'); div.id = this.id; div.className = this.className; var panes = this.getPanes(); panes.overlayImage.appendChild(div); } var point = this.getProjection().fromLatLngToDivPixel(this.latLng); if (point) { div.style.left = point.x - 20 + 'px'; div.style.top = point.y - 55 + 'px'; } }; }}<div id="map-canvas"></div><ul id="map-points"> <li data-x="56.528960" data-y="84.967544" data-type="running">Point 1</li> <li data-x="57.528960" data-y="83.967544" data-type="running">Point 2</li></ul>body {margin: 0;}#map-canvas { width: 100%; height: 100vh; margin: auto;}#map-points {display: none;}.map-marker.running {background-image: url(http://d30y9cdsu7xlg0.cloudfront.net/png/27587-84.png);}.map-marker { width: 45px; height: 45px; background: #485F6E center no-repeat; background-size: 80%; position: relative; z-index: 30; cursor: pointer;}.map-marker:after { position: absolute; left: 50%; bottom: -8px; ; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #485F6E; content: " ";}.map-marker:hover { background-color: #39c360; transition: 0.3s background-color;}.map-marker:hover:after { border-top-color: #39c360; transition: 0.3s border-top-color;} Только не ругайтесь за мой корявый код.. Только начинаю..

Здравствуйте, уважаемые!! Начну с того, что перерыл весь интернет по данному вопросу. Нашел только про картинки (img) с определенными id, что мне не подходит. А вопрос такой: При нажатии на div с классом "small", который находится в ячейке таблицы, надо его увеличить на пол экрана, создав затемнение тела сайта. При этом ячейки не должны изменять размеры. При повторном нажатии, либо нажатии вне этого дива, вернуть его в исходное положение.при этом ячейки не должны изменять размеры. https://jsfiddle.net/x7106joc/3/ Заранее благодарен.

Прошу оценить первую верстку(код) Жду конструктивной критики. https://string007.github.io/

Данные ошибки не дают работать другим скриптам если эту строку закоментить то сразу другая ошибка я так понимаю скрипт конфликтует с чемто.. сам файл setaudiojs.js вот я добавлял к плееру http://kolber.github.io/audiojs/ползунок громкости, видимо встало криво( хоть и работает, в jquery мало понимаю поэтому половину этого файла писал с чужой помощью.. помогите избавится от ошибок

Задача : при клике на активное изображение в слайдере открывается Fancybox, который содержит это изображение. Структура html примерно следующая. "flex-active-slider" применяется динамически и обозначает активное на данный момент изображение. <ul> <li class="flex-active-slider"> <img src="img1.png"> </li> <li class=""> <img src="img2.png"> </li> <li class=""> <img src="img3.png"> </li></ul>JS: $(window).load(function() {$(".flex-active-slide").click(function() { var img = $(this).find('img'); $.fancybox.open([ { href: "img.attr('src')" } ]);});}В итоге, fancyvox вообще не открывается, т.е. никак не реагирует на клик.

Привет! Прошу критики в свой адрес по поводу сверстанного макета. Нашел его на просторах нашего Форума http://t96459jh.bget.ru/ Макет На верстку ушло примерно 5-6 дней. Насчет Responsive, для первого раза посоветовали делать статически, набить руку так сказать) Файлы макета https://www.dropbox.com/s/kk4ueg0ft2241jl/MyFirstProject.zip?dl=0

Прошу оценить первую верстку(код) Жду конструктивной критики. https://string007.github.io/

Есть два контейнера, в каждом по 4 дива. https://jsfiddle.net/y3L89Ldf/ Как можно сделать так, что бы каждые две секунды, рандомный блок из верхнего контейнера менялся на рандомный блок из нижнего? И так, что бы в верхнем контейнере не было одинаковых блоков, и что бы верхний блок, не менялся два раза подряд на один из нижних. Походу надо сделать что бы при смене верхнего блока, он менялся местами с нижним, что бы нижний потом тоже мог рандомно стать обратно в верхний контейнер? Спасибо тем, кому будет интересно одолеть задачу

Добрый вечер. Использую на сайте библиотеку MediaElement.js. Когда я размещаю более 5 плееров на странице, Chrome просто не подогружает страницу ( в основном стиля ), если четко 5 все работает http://omega24v.esy.es/ <div class="audio-player p1"> <h5><span>Darom Dabro</span> Darom Dabro </h2> <audio class="audio-player2" src="libs/html5-audio-player/media/DaromDabro-BL.mp3" type="audio/mp3" controls="controls"></audio> </div> $('.audio-player2').mediaelementplayer({ alwaysShowControls: true, features: ['playpause','progress','volume'], audioVolume: 'horizontal', audioWidth: 660, audioHeight: 65, iPadUseNativeControls: false, iPhoneUseNativeControls: false, AndroidUseNativeControls: false });