ekkl
-
Posts
73 -
Joined
-
Last visited
ekkl's Achievements
Explorer (1/14)
0
Reputation
-
Есть плавающий блок содержащий одну строку за ней следует два значка (icon-font) Проблема в том, что значки визуально выше строки текста. Чего я только не пробовал и line-height и padding/margin все равно значки выше строки. Еще меня волнует непонятный отступ внутреннего контейнера от нижнего края плавающего блока. margin / padding здесь кадется ни при чем. Стили (LESS) и контейнер #confirm { position: absolute; height: auto; border: 1px #230D33 solid; z-index: 1000; display: inline-block; overflow: hidden; text-indent: 0; box-sizing: border-box; background: #f9f0ff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); .content { padding: 2px 8px; display: inline-block; font-size: 12px; line-height: 24px; overflow: hidden; width: 250px; box-sizing: border-box; } .conflink { display: inline-block; } a { width: 100%; color: #333; font-size: 20px; text-decoration: none; margin-left: 1em; outline-color: #EAC9FF; } a[role="ok"]:hover { color: forestgreen; } a[role="cancel"]:hover { color: #C22; }}<span id="confirm"><span class="content">{{message}}?<span class="conflink"><a href="#" role="ok" data-icon="B"></a><a href="#" role="cancel" data-icon="A"></a></span></span></span>Все в действии http://jsbin.com/wekixa/26/edit?css,js,output
-
Ну, или, если вообще просто <!DOCTYPE html><html><head><meta charset="utf-8"><title>JS Bin</title></head><body><div style="margin-left: 100px;"> <p><a data-confirm href="aaa">confirm</a> </p><span id="confirm"><span class="content">Вы уверенны в этом??? <a href="#">Удалить</a> <a href="#" role="cancel">Отменить</a> </span></span> </div></body></html>#confirm { position: absolute; width: 280px; height: 40px; border: 1px #230D33 solid; z-index: 1000; display: inline-block; border-radius: 6px; transition: height 1s; overflow: hidden; text-indent: 0; box-sizing: border-box; background: linear-gradient(#F9F0FF 70%, #EAC9FF); box-shadow: 0 0 16px rgba(0,0,0,0.5); padding: 0;}#confirm .content { width: 100%; box-sizing: border-box; display: block; padding: 1em; overflow: hidden; position: absolute; top: auto;}При получении фокуса ссылками Удалить/Отменить происходит прокрутка внутри блока. Как этого избежать?
-
При клике на некоторых ссылках на странице должен отобразится плавающий блок, высота которого средством css анимации изменяется от нулевой до некоторой фиксированной высоты. В начале анимации, когда весь контент не помещается, он сильно пождат вверх, и только вконце стает на свое место. Это выглядит примерно так. Вот этот пример: http://jsbin.com/wekixa/1/edit?html,css,js,output Браузер: Фаерфокс, версия 41.0.1 Методом тыка установил, что если не писать $('#confirm a[role="cancel"]').focus();То все нормально. Как можно изменить поведение, чтобы содержимое блока не подскакиволо вверх. Перепробывал всевозможные способы например, top: 0 и тому подобные. Не помогло.
-
Прошу прощения, что поднимаю старую тему, не у меня jedit неправильно различает синтаксис для js кода. Вот '}', которая определяется как окончание функции block на самом деле относится к регулярному выражению. Все остальные редакторы определят именно так. Скрипт работает без ошибок. Если кто-то захочет проверить, то это templayed.js
-
Если большая часть страницы генерируется на сервере, а некоторый контент на клиенте, например: формы, хлебные-крошки, и д.р. которые не имеют значения для поисковиков, можно ли такой подход считать нормальным? Если да, то второй вопрос: на странице должна быть форма и шаблон. Как обеспечить шаблонизатор JSON-данными? Должен быть еще один запрос, или данные могут прийти с первым? Если да, то куда их вставить? Сам шаблон, например, можно вставить так вот: <script type="script/html" id="form-info">{{data}}<some>{{link}}</some></script>Но вот как быть с данными?
-
Примерно так. http://jsbin.com/surixo/10/ Этот плагин не устраивает потому, что нельзя делать выбор клавиатурой. Не скрывается при клике вне списка.
-
Пытаюсь подобрать библиотеку для стилизации select Не могу найти ничего более-менее приемлемое. Много из перебранных плагинов не поддерживают выбор клавиатурой, есть через навороченные. Вот, например, это http://select2.github.io/select2/select-2.1.html бы подошло, но проблема в том, что не знаю как убрать поле поиска, которое отображается при открытии селекта. Может кто-то скажет, как можно его убрать (понятное дело через стили можно скрыть) но нет ли штатного способа. Или может посоветует другой плагин, безо всех там jQuery UI и прочих тяжелых навороченных библиотек. -- Стилизацию через CSS без js рассматривал, но не очень красиво получается. так как выпадающая область несколько больше самого селекта получается.
-
Ну например, после него нужно будет добавлять clear:both; или что-то в этом роде Ну и это же не блоковый элемент, чтобы его так позиционировать.
-
Спасибо, кнопка передвинулась к правому краю формы, но все так же перекрывает второе поле password. Для всех элементов задано display:inline-block;
-
Нет, еще текстовые поля и т.д. Просто во всех формах хочу чтобы кнопка отправки располагалась по правому краю. Как раз absolute угодил, только в этом случае копка располагается по правому краю не формы, а контейнера, в котором расположена форма. http://jsbin.com/gowela/12/edit Ну вот что-то типа такого form { padding: 2em 3em 0em 4em; position: relative;}input[type="submit"] { width: auto; position: absolute; right: 0px;}
-
Да. Это для контейнера, в котором размещена кнопка, но я ищу способ, чтобы указать это именно для input.
-
Со вчерашнего дня пытаюсь найти решение. Нужно кнопку придвинуть к правому краю формы(родителя) не прибегая ко float Это возможно? Вот мои эксперименты. для кнопки установлены такие спили (рамочку и т.д. упустил) input[type="submit"] { width: auto; position: absolute; right: 0px;} Для формы form { padding: 2em 3em 0em 4em; position: relative;}Кнопка позиционируется по правому краю контейнера, в котором находится форма. Если кнопку поместить в контейнер <span style="display:block;position:relative"><input type="submit"></span>Все в порядке, но его высота = 0px и ревизор фаерфокса показывает, что она отображается за пределами формы, что вполне согласуется с абсолютной позицией. Вот http://jsbin.com/gowela/11/edit Возможно ли сдвинуть эту кнопку к правому краю не помещая её в другой контейнер? И естественно, чтобы она не выходила за границы формы. — ПС. эксперименты с её position:reative тоже ни к чему не привели.
-
1thsnd, а вы пробовали то, что советуете?При первом фокусе рамочка появляется, при втором — исчезает.
-
Спасибо. Но так как по-любому буду юзать или Зепто или ЖКвери то думаю на чистом смыла нет.
-
psywalker, пожалуй, я прислушаюсь к вашему мнению и сделаю на js. Zepto(function($){ $('input').on('focus', function(){ $(this).parent('span').addClass('focus'); }); $('input').on('blur', function(){ $(this).parent('span').removeClass('focus'); });});Нельзя ли этот код сделать немного изящнее?