WhatIsHTML

Что я хочу сделать. На странице очень много мелких картинок. При клике на одну из них, открывается модальное окно со слайдером внутри. В слайдере представлены все картинки существующие на странице, при чем первым слайдом будет та картинка, по которой кликнули. Но я завис на очень раннем этапе. Я уверен, что-то похожее уже делали, я не смог найти. Буду благодарен, если ткнете носом. Накидал пример из 3х картинок, но даже в консоли получаю ошибку. Не знаю почему. https://jsfiddle.net/mnu2zL3k/

тогда и стилизация исчезнет, ведь она задана в input::after

спасибо, решение такое простое, что аж стыдно

Привет всем. В интернете есть полно статей о том, как стилизовать чекбокс, но я не могу использовать атрибут for для привязки label и чекбокса, т.к. у меня label является внешним по отношению к чекбоксу и такую струтктуру желательно не нарушать. Есть ли метод стилизации чекбокса без применения <label for=''> ? К примеру у меня сейчас проблема с тем, как спрятать стандартній чекбокс и оставить только синий кружочек для input:checked https://jsfiddle.net/k4nq7paL/

<ul class="nav navbar-nav"> <li><a href="/catalog.php">Каталог</a></li> <li><a href="/about.php">О компании</a></li> <li><a href="/company.php">Доставка и оплата</a></li> <li><a href="/contact.php">Контакты</a></li> <li><h4>+375 (29) ***-**-** </h4></li> <li><h4>+375 (33) ***-**-** </h4></li> <li><h4>+375 (25) ***-**-** </h4></li> <li><h4>+375 (17) ***-**-**</h4></li> </ul> Бегло просмотрел. Создали несколько списков class="nav navbar-nav", хотя все относится к одному меню,нет смысла создавать несколько. в бутстрапе есть два класса, которыми можно прижать элементы к правому краю : 1. pull-right - все равно что float:right, т.е. весь блок поедет вправо, 2. text-right - все равно что text-align: right; но тут надо чтобы элемент, который надо выровнять, был строчным или inline-block

Я вижу что у вас подключен бутстрап. Там вся адаптивность реализована, остается только подправить стили под свои потребности. Я бы советовал переделать его по-нормальному, чем исправлять плохо сделанное. Примеры меню на бутстрапе.

картинки выложите, чтобы понятнее было P.S. Увидел ссылку на сайт Вот смотрите headr ul.contact-nav li { display: inline-block; position: relative; font-size: 13pt; top: -60px; left: 120px; } Если убрать top: -60px; left: 120px; то шапка станет на место. Еще здесь маргин можно уменьшить. Вообще,если резиновый макет, то для левой/правой стороны лучше задавать в % маргины и паддинги. И в целом лучше не писать селекторы с тегами, лучше так ".class" чем так "tag.class" .page-header { margin: 60px 0 50px 50px; } И еще, не стоит увлекаться позиционированием. У вас его слишком много. Например зачем тут абсолютное позиционирование? Это просто меню, здесь можно обойтись и без него. .nav-contact { position: absolute; margin: 0; padding: 20px; }

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

это как? Может имеется ввиду ДЛЯ CMS? В целом, я бы советовал больше самому верстать, чем читать теорию. Теория хороша, но практики должно быть гораздо больше. По поводу стандартных стилей не подскажу, но по поводу стандартных ошибок я узнал кое-что здесь. Ну и можешь выкладывать свои работы сюда на оценку.

Привет всем. У меня проблемы с простой задачей. Есть одностраничный сайт. Пользователь нажимает на ссылку меню, которая обрабатывается функцией Js. Эта функция асинхронно загружает содержимое страницы и изменяет URL с помощью history.pushState (). Например было "example.com" => после клика "example.com/page1" Затем пользователь обновляет страницу, но такого файла, не существует на сервере. Как решить эту проблему? Вот пример Вот страница с пояснениями, но примера обработки обновления страницы там нет. У них в примере, после обновления открывается страница с тем же контентом, что было до перезагрузки и с тем же url. Говорят, что нужно решать как-то с помощью php, но я затрудняюсь.

Вроде разобрался. Получим объект, что тоже годится. $object = $.parseJSON(msg);

Тривиальная задача, но не получается решить ее адекватно. Хочу сделать одностраничный сайт, с контентом , который будет подгружаться с php. Т.е. у меня будет несколько блоков в html, которые будут изменяться динамически. Данные я хочу брать из php, где они хранятся в массиве. <div class="menu"> <a href="#">Home</a> <a href="#">Product</a> <a href="#">Customers</a> </div> <div id="content"></div> Есть файл php с простым массивом, который возвращается в js <?php $arrayName = array('title' => 'Scheduling, CRM, and Invoicing Web Application - FieldPulse Software'); echo json_encode($arrayName); ?> json_encode возвращает строку {"title":"Scheduling, CRM, and Invoicing Web Application - FieldPulse Software"} Функция js, которая срабатывает после клика на ссылку. function loadPage(url) { $.ajax({ type: "POST", url: "content.php", data: 'page=' + url, dataType: "html", success: function(msg) { if (parseInt(msg) != 0) { msg = msg.substring(1, msg.length - 1); //удаляем символы { } в начале и конце строки $array = msg.split(":"); // разбиваем строку на массив по символу ":" $('title').html($array['title']); // новый title берем из массива, но в данном случае такой ячейки нет alert(msg); //для наглядности, выводит {"title":"Scheduling, CRM, and Invoicing Web Application - FieldPulse Software"} } else { alert ('file empty!'); } } }); } В результате такого разбиения получаем обычный массив. Мне надо получить ассоциативный массив где будет ячейка с именем "title" и она будет содержать соотв. строку из пхп. Как адекватно превратить результат выполнения функции json_encode в ассоциативный массив, чтобы можно было заменить необходимые поля в html?

Я бы сделал структуру такой : <video src=""> </video> <section class=" header"> <nav></nav> <div class="slider"></div> </section> Затем нужно сделать высоту видео и высоту блока "header" одинаковой. Хоть и стараюсь избегать такого подхода, и только в крайних случаях, если не получается через ксс, я делаю через джс. function() { $(".equal-height-columns").each(function() { heights = []; $(".equal-height-column", this).each(function() { $(this).removeAttr("style"); heights.push($(this).height()); // write column's heights to the array }); $(".equal-height-column", this).height(Math.max.apply(Math, heights)); //find and set max }); } Слайдер прижимаем к нижней границе хедера, навигацию - к верхней. Должно получиться.

Необходимо сделать высоту блоков на скриншоте, одинаковой. Для задания одинаковой высоты у Semantic UI есть классы "equal height". Пример тут http://jsfiddle.net/ozk615p6/35/ "equal height" задается внешнему блоку, а дочерним элементам будет задана одинаковая высота. Проблема в том, что мне нужно выровнять по высоте не дочерние элементы, по крайней мере не первого уровня вложенности. Моя проблема тут http://jsfiddle.net/ozk615p6/34/ Помогите пожалуйста.

так? $('#field').on("focus", function() { $('#field').on("keypress", function() { if ($('#field').val().length > 0) { $('#field').pwstrength(); $('#pwindicator').show(); } else { $('#pwindicator').hide(); } }) }); // эта часть работает нормально $('#field').blur(function() { if ($('#field').val() == "") { $('#pwindicator').hide(); } }); https://jsfiddle.net/y6x512v9/3/ Заметил что и в FF не совсем корректно работает. Если набрать пароль, затем удалить его, то индикатор исчезнет только после двойного нажатия на backspace.

Проблема следующая. Необходимо, чтобы после того как пользователь ввел и стер пароль, индикатор исчез. Т.е. последовательность действий 1. Вводим пароль 2. Удаляем его. Должен исчезнуть индикатор. В FF работает, в Хроме и Опере нет, почему? $('#field').focus(function() { //когда фокус на поле ввода пароля $('#field').keypress(function() { //проверяем значение поля после каждого нажатия клавиши if ($('#field').val().length > 0) { //если что-то ввели, запускаем проверку сложности пароля $('#field').pwstrength(); $('#pwindicator').show(); } else { // если ничего не ввели или ввели и затем удалили, прячем индикатор $('#pwindicator').hide(); } }) }); $('#field').blur(function() { //после потери фокуса проверяем значение поля, если пустое , прячем индикатор if ($('#field').val() == "") { $('#pwindicator').hide(); } }); https://jsfiddle.net/y6x512v9/1/

Еще немного переделал, взял старый рабочий код пхп, но с ним тоже письма не доходят на почту. Возможно где-то забыл что-то банальное, подскажите, пожалуйста. ХТМЛ <form id="promoform" 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 id="promo-button" name="submit" value="узнать подробности" class="custom-button" type="submit"> </form> JS $("#promoform").submit(function(e) { e.preventDefault(); $.ajax({ type: 'POST', data: $("#promoform").serialize(), url: 'form_handler.php', success: function(data) { $("#modal-thanks").modal("show"); } }); return false; }); ПХП <?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/html;charset=utf-8" . "\r\n"; $to = '';// Your email here mail($to, $name, $message, $headers); } exit; ?> В целях тестирования, вырубил JS, в action поставил путь к обработчику формы, и в самом обработчике в конце сделал так if (mail($to, $name, $message, $headers)) { echo "SENT!"; } В браузере выводится SENT , соотв. функция mail() срабатывает успешно (?). Так в чем тогда загвоздка?

Привет всем. Помогите, пожалуйста, разобраться. Задача следующая : после того, как пользователь заполнит и нажмет на кнопку отправки формы, должно появится модальное окно с текстом "Спасибо" и форма отправится на почту. Искал в сети примеры, но ничего так и не заработало. Последний вариант, на котором остановился, как самый простой. Есть форма <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 - целое число. Почему не работает так как надо?

Не читал всю тему, НО сам пользуюсь плагином и столкнулся с проблемами. Как запускаю плагин я. 1. Скачал десктоп вресию. 2. Добавил в приложение папку с проектом. 3. Вставил код перед тегом body. Возможно понадобится перезагрузка ST3/браузера. http://prntscr.com/bhw7vd

Как сделать так, чтобы текст был выравнивался по центру картинки, а не по базовой линии как сейчас? https://jsfiddle.net/7kcy40eq/3/

Не уверен точно, но похоже причина в разных версиях. В более старой правильно писать navigation:true, pagination:true, а сокращенный вариант наверное работает только в новой версии (2+)

Очень простой, базовый пример, взятый с официального сайта, не работает. 1. Почему не появляется навигация prev/next ? Написал же nav:true 2. Почему не появляются индикаторы слайдера? Написано же dots:true http://jsfiddle.net/s10bgckL/320/ Пример взял отсюда. http://www.owlcarousel.owlgraphic.com/demos/stagepadding.html Помогите, пожалуйста. На каком-то русскоязычном сайте информация оказалась более актуальной, чем на официальном. Оказывается, правильно писать так : navigation:true, pagination:true, Читайте документации и не ходите по другим сайтам...

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

Вопрос снимается. Скопипастил код не глядя, а там затерялось height:100% в главной таблице. Интересно, что спустя некоторое время баг не проявлялся даже без моего вмешательства. Повторно открыл его в Thunderbird, после удаления высоты в 100% уже ничего не растягивается