ekkl
-
Posts
73 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by ekkl
-
-
Ну, или, если вообще просто
<!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 или float?
Нет, еще текстовые поля и т.д.
Просто во всех формах хочу чтобы кнопка отправки располагалась по правому краю.
Как раз 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>
Выровниять по вертикали текст с разными разными шрифтами
in HTML Coding
Posted
Есть плавающий блок содержащий одну строку за ней следует два значка (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