ekkl
-
Posts
73 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by ekkl
-
Есть плавающий блок содержащий одну строку за ней следует два значка (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'); });});Нельзя ли этот код сделать немного изящнее?
-
Нужно помять border родителя при фокусе дочернего элемента http://jsbin.com/pixut/10/edit?css,output Пробовал так, не получается. Без js это возможно? form span { display: inline-block; font-size: 18px; line-height: 1; background-color: #fff; padding: 6px 2px 6px 36px; margin: 20px; border: 1px solid #666;}form input { border: none; width: 360px; padding: 0; margin-right: 0px; font-size: 24px; color: #737373; transition: color 0.2s, border-color 0.2s; display: inline-block;}form input:focus { color: black;}span<input:focus{border:1px solid blue;
-
Писать в эту вкладку можно. Только вот если код не маленький? Есть видео в котором показывалась возможность подключать стили с внешних ресурсов (в RAW виде)
-
Есть эксперимент в песочнице http://jsbin.com/dodovu/2/edit?html,output Проблема в том, что этот огненный лис не хочет грузить лист стилей, мотивируя, тем, что его MIME не text/css, а text/plain. Подобная проблема, встречается также и у github, bitbucket и т.д. Одним словом, из всех возможных сервисов хранения кода только climbi выдает нужный МІМЕ и только лист стилей сохраненный на нем, грузится корректно. Испробовал много чего, включая fpate.org все они в RAW просмотре кода выдают плайн текст, независимо от того, какая подсветка выбрана при наборе кода. Climbi не очень устраивает потому, что там нет регистрации, а это значит я не смогу оперировать своим кодом. Может кто-то что-нибудь сможет посоветовать?
-
В Top-Bar на странице есть пунктик меню при наведении на который мышкой всплывает ДИВ с формой авторизации внутри. При перемещении мыши за пределы этого ДИВ форма скрывается. Понятное дело в браузере действует система запоминания значений полей. И если навести мышку на подсказки, появляющиеся под текстовым полем, ДИВ тоже исчезнет. Как можно обойти это? Или лучше решения чтобы форма появлялась по клику на этом пункте и исчезала по клику за пределами ДИВа? В качестве фреймворка использован Zurb Foundation
-
Вот. http://ekkl.pp.ua/ Наведите курсор ниже ссылки (В виде кнопки) "Восстановить пароль" Как я понял это цвет подсвечивания для остальных ссылок меню. Но вот если ссылка находится на форме, то подсвечивание работать на должно. -- Разработка на Zurb Foundation Может есть какие-то штатные средства... -- Да, кстати, кнопка в окне "Вход на сайт"
-
Нет, в этом случае цвет фона становится прозрачным...
-
Не понял. Тогда удалится подсвечивание для всех ссылок, а мне нужно чтобы это подсвечивание не распространялось на ссылки, находящиеся в контейнере .regform, а во всех остальных случаях работало.
-
Для ссылок задано свойство подсвечиваться при наведении курсора /* line 104, ../../../../../../ekkl/scss/app.scss */.top-bar-section li:hover > a { background-color: #3e78b2;}Нужно убрать подсвечивание, если ссылка находится внутри контейнера .regform
-
Есть валидатор форм на Foundation http://foundation.zurb.com/docs/components/abide.html При отображении ошибки показівается поле <small> с текстом ошибки. Подскажите, какие стили нужно прописать чтобы при отображении этого элемента поля формы ре раздвигались. Указывал position:absolute. Оно-то работает, но красное поле по ширине сокращается до размера ошибки, а как сделать, чтобы на всю ширину было. Верхнее поле обернуто в div, нижнее — нет. <div style="position: absolute;"> <small class="error radius">Кто вы? Представьтесь.</small> </div>
-
Прежде всего, вопрос для тех, кто знает этот фреймворк Хочу поместить форму в topbar, получается не очень красиво. Код <nav class="top-bar" data-topbar> <ul class="title-area"> <li class="name"> <h1><a href="#">Xandra</a></h1> </li> <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li> </ul> <section class="top-bar-section"> <!-- Right Nav Section --> <ul class="right"> <li class="has-dropdown"> <a href="#">Вход на сайт</a> <ul class="dropdown has-form"> <li style="width: 320px"> <form action="" method="post" accept-charset="utf-8"> <label for="user">User</label> <input type="text" name="user" /> <label for="pass">Pass</label> <input type="text" name="pass" /> <input type="submit" name="send" value="submit" class="button right radius" /> <div class="clearfix"></div> </form> </li> </ul> </li> </ul> <!-- Left Nav Section --> <ul class="left"> <li><a href="#">Left Nav Button</a></li> </ul> </section> </nav>