Светлана Г.

У меня список ссылок: <ul> <li><a href="#">Название подкатегории длинное длинное длинное длинное </a></li> <li><a href="#">Название подкатегории</a></li> <li><a href="#">Название подкатегории</a></li> <li><a href="#">Название подкатегории</a></li> <li><a href="#">Название подкатегории</a></li> </ul>

А почему бы просто не использовать это? Результат не устраивает? Размер немного меньше получается. http://jsfiddle.net/tnq5g658/2/ - должен подойти.

Вроде бы несложная задачка, но споткнулась на ней. Нужно, чтобы сам текст не обтекал буллит. Так: Сверстано так: a:before{ content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:#464646; margin-right:8px; vertical-align:middle;}Возможно ли это?

Думаю,что это написали люди знающие. Поэтому и хочу понять, в чем тайный смысл.

Здравствуйте! Сайт впервые верстаю на Bootstrap. В руководстве сказано, что нужно подключить Normalize.css Верстаю форму поиска. Использую <input type="search">И вдруг обнаружила такие стили: /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box;}Мне не понятно, почему именно для input type="search" применяется box-sizing: content-box; ? Мне это совсем не нужно. Что делать? Использовать input type="text" ?

Спасибо большое за все советы. Буду думать!

А почему, какие преимущества у этого варианта?

Между Three equal columns, предложенным выше, и column-count:3;

Здравствуйте! Есть такой список: Не могу решить, как лучше его сверстать. Использую Bootstrap, под IE9 и выше, должно быть адаптивно.

Вот так? Не работает, к сожалению. jQuery('#form.checkout').submit(function(e) { this.submit(); setTimeout(function() {if ( $( 'ul.woocommerce-error').length > 0 ) { $('#billing-box').addClass('active'); } }, 100);});

Вот такой код срабатывает только при повторной отправке формы: jQuery(function($){$( "form.checkout" ).submit(function( event ) { if ( $( 'ul.woocommerce-error').length > 0 ) { $('#billing-box').addClass('active'); return; }});});Хоть что-то . Теперь это должно сработать сразу же после нажатия на "Оформить заказ". Как это осуществить?

Проверку на наличие элемента со списком незаполненных полей надо проводить после отправки, ведь после этого он только появляется. Не знаю, вообще, возможно ли это. Может показывать форму при другом условии.

А зачем точка перед ul? Я такой код писала, но не срабатывает. jQuery(function($){if($('ul.woocommerce-error').length > 0){$('#billing-box').addClass('active');}});

Как я могу проверить наличие элемента ul.woocommerce-error на странице после отправки формы?

Думаю, что это излишне. Валидация там и так есть. Просто нужно скриптом определить, что если ul.woocommerce-error есть, добавить класс.active блоку #billing-box и содержащему его li. Вот этот код у меня не получается. Все этапы оформления - это фактически одна и та же страница, по типу табов. Вот скрипт управления всем процессом: //Checkout Page $('#login-box').prev('.woocommerce-info').remove(); $('#login-box').prependTo('.checkout-box'); if (!$('#login-box').length) { $('.block-progres-line li:first-child').addClass('disabled').removeClass('active'); $('.block-progres-line li:first-child').next().addClass('active'); $('#billing-box').addClass('active'); } $('.block-progres-line a').click(function(event){ var li = $(this).parent('li'), id = $(this).attr('href'); event.preventDefault(); if (!li.hasClass('active') && !li.hasClass('disabled')) { $('.block-progres-line li').removeClass('active'); li.addClass('active'); $('.checkout-section').removeClass('active'); $(id).addClass('active'); if (id == '#order-box') { $(id).closest('#order_review').addClass('order-box-active'); } else { $('#order_review').removeClass('order-box-active'); } } }); $('.checkout-box').on('click', '.next-step', function(event){ var stepId = $(this).attr('href'); event.preventDefault(); $('.block-progres-line li').removeClass('active'); $('.block-progres-line li a[href="' + stepId + '"]').parent('li').addClass('active'); $('.checkout-section').removeClass('active'); $(stepId).addClass('active'); });

Здравствуйте! Есть сайт на Wordpress c купленой темой http://new.mega-topas.ru/. Обнаружилась некоторая недоработка при оформлении заказа: на шаге "Детали оплаты" есть форма с данными покупателя. Если какое-то обязательное поле не заполнено, то только на последнем шаге, после нажатия "Оформить заказ", пользователь об этом узнает. Ему выдается окно с незаполненными полями. А самой формы нет. И не понятно, что покупателю делать дальше. Я бы хотела исправить эту ситуацию так, надеюсь, это правильно: показать это окно с предупреждением и одновременно сделать активной форму. Нужно написать небольшой скрипт на jQuery, но я не сильна в программировании. Буду очень благодарна за помощь!

Вот тут есть обсуждение этой проблемы. http://stackoverflow.com/questions/14585070/css-after-pseudo-element-not-showing-up-on-img Можно нагуглить еще.

Может быть попробовать другую библиотеку, например: https://github.com/GBKS/Wookmark-jQuery Есть у кого-нибудь опыт ее использования?

Прочитала, что нужно было добавить скрипт imagesloaded.pkgd.min.js. Добавила, но ничего не исправилось.

Сделала так: <script type="text/javascript">// or with jQuery// initialize Masonryvar $container = $('#masonry').masonry();// layout Masonry again after all images have loaded$container.imagesLoaded( function() { $container.masonry({ columnWidth: 210, itemSelector: '.item', gutter: 10 } );});</script>Но эта проблема не исправилась. И еще картинки частично слепились.

Здравствуйте! Впервые решила использовать на сайте библиотеку Masonry. Вот так подключаю: <ul id="masonry" class="js-masonry clearfix" data-masonry-options='{ "columnWidth": 210, "itemSelector": ".item", "gutter": 10 }'> Но при тестировании обнаружилась странная проблема. если страницу просматривать в Safari под Windows 8, то сначала страница выглядит так: Затем, если изменять ширину экрана вручную, то все встает на свои места. И еще в других браузерах сначала картинки выстраивались в один вертикальный ряд, а после изменения ширины экрана - также все восстанавливалось. В чем может быть проблема?

Решение нашла, может кому-то пригодится: $( "#dialog" ).dialog({ open: function (){ $(this).find('select, input, textarea').first().blur();}

Больше нет никаких решений?

не подходит. По макету видно, что текст выровнен влево. не подходит. По макету видно, что текст выровнен влево.

Вот что получилось: <div class="container"> <article class="no_padding clearfix" id="services"> <div class="row"> <div class="col-lg-4 col-sm-4 col-xs-4"></div> <div class="col-lg-4 col-sm-4 col-xs-4"><h1>Наши услуги:</h1></div> <div class="col-lg-4 col-sm-4 col-xs-4"></div> </div> <div class="row service_col"> <div class="col-lg-4 col-sm-4 col-xs-4"> <ul class="no_mark c_5e2009 my-flex-block"> <li><a href="#">Хирургия</a></li> <li><a href="#">Терапия</a></li> <li><a href="#">Ортопедия</a></li> <li><a href="#">Парадонтология</a></li> </ul> </div> <div class="col-lg-4 col-sm-4 col-xs-4"> <ul class="no_mark c_5e2009"> <li><a href="#">Бюгельный протез</a></li> <li><a href="#">Нейлоновый протез</a></li> <li><a href="#">Имплантология</a></li> <li><a href="#">Ортодонтия</a></li> <li><a href="#">Художественная реставрация</a></li> </ul> </div> <div class="col-lg-4 col-sm-4 col-xs-4"> <ul class="no_mark c_5e2009"> <li><a href="#">Гигиена и профилактика</a></li> <li><a href="#">Люминиры</a></li> <li><a href="#">Украшение для зубов</a></li> <li><a href="#">Отбеливание зубов</a></li> </ul> </div> </div><!--/.row-->Текст в правой колонке должен быть прижат к правому краю. Может тут уже использовать -offset ?