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.