Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.07.2013, 13:10
Профессор
Отправить личное сообщение для Гробовщик Посмотреть профиль Найти все сообщения от Гробовщик
 
Регистрация: 10.03.2013
Сообщений: 169

Кнопка для смайликов как в контакте.
Здравствуйте, хочу сделать кнопку смайликов как в контакте, но зашёл в тупик (css совсем не знаю()
При нажатии на изображение появляется крестик, а при нажатии в другом месте изображение сбрасывается обратно (так и надо), но вот не знаю как при повторном нажатии вернуть изображение обратно.
Вот css
Код:
.smile {cursor: pointer;
display:inline-block;
width:20px;
height:20px;
border:0;
outline:0;
padding:0;
text-indent: -1000em;
background:url('/img/chat/smile.png') no-repeat 0 0;}
.smile:focus {
    background-position: 0 -20px; /* Смещение фона */
   }
Вод код кнопки:
<input type="button" value="Отправить" class="smile"/>

Вот изображение: http://st0.vk.me/images/im_smile_cross.png?3
И попутные вопросы (код не нужен, ответте просто возможно ли такое в дальнейшем)
1. Можно ли сделать так что бы при фокусировке на текстовом поле (находиться рядом с изображением) кнопка оставалась активной (рисунок не сбрасывался)
2. Можно ли сделать DIV (для смайликов) поверх фрейма не связанного с ним.
3. Что бы при смене изображения крестик плавно и красиво поворачивался (как в контакте)
4. Лучше что бы было изображение или всё же что бы css прописывался для div (сам не понимаю в чём разница, но в контакте в исходникак прописано не изображение а именно div)
Ответить с цитированием
  #2 (permalink)  
Старый 08.07.2013, 17:32
Профессор
Отправить личное сообщение для lancer Посмотреть профиль Найти все сообщения от lancer
 
Регистрация: 30.01.2008
Сообщений: 230

Не пользуюсь Вконтакте, поэтому не знаю как там.

Цитата:
При нажатии на изображение появляется крестик, а при нажатии в другом месте изображение сбрасывается обратно (так и надо), но вот не знаю как при повторном нажатии вернуть изображение обратно.
При нажатии на смайлик появляется крестик, при нажатии в другом месте(пусть это будет кнопка x) обратно возвращается смайлик? Я правильно понял?
Ответить с цитированием
  #3 (permalink)  
Старый 08.07.2013, 17:43
Аватар для animhotep
Профессор
Отправить личное сообщение для animhotep Посмотреть профиль Найти все сообщения от animhotep
 
Регистрация: 17.01.2013
Сообщений: 887

можно всё, только первый пункт средствами цсс врядли. лучше js
Ответить с цитированием
  #4 (permalink)  
Старый 08.07.2013, 20:43
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

вот что можно точно, ИЕ конечно же в пролете:
<style>
    .message-box {
        position: relative;
        border: 1px solid #C0CAD5;
        width: 400px;
        height: 150px;
        margin-top: 120px;
    }
    .message-box .smile-button {
        position: absolute;
        width: 20px;
        height: 20px;
        top: 10px;
        right: 10px;
        outline: 0;
    }
    .message-box .smile-button .smile-open, .message-box .smile-button .smile-close {
        background: url('http://st0.vk.me/images/im_smile_cross.png?3') no-repeat -2px -26px;
        position: absolute;
        opacity: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);

        -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
        -moz-transition: -moz-transform 0.3s ease, opacity 0.3s ease;
        -ms-transition: -ms-transform 0.3s ease, opacity 0.3s ease;
        -o-transition: -o-transform 0.3s ease, opacity 0.3s ease;
        transition: transform 0.3s ease, opacity 0.3s ease;

        outline: 0;
    }
    .message-box .smile-button .smile-close {
        opacity: 0;
        background-position: -2px -2px;
    }
    .message-box .smile-button:focus .smile-close {
        z-index: 1;
        opacity: 1;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    .message-box .smile-button:focus .smile-open {
        opacity: 0;
    }
    .message-box textarea {
        border: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        resize: none;
        outline: 0;
    }
    .message-box .smile-button .smile-box {
        display: none;
        position: absolute;
        opacity: 0;
        bottom: 100%;
        left: -90px;
        color: #fff;
        border-radius: 5px;
        width: 200px;
        height: 100px;
        background: #000;
        margin-bottom: 10px;
        outline: 0;
        -webkit-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
        -moz-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
        -ms-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
        -o-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
        transition: opacity 0.3s ease, margin-bottom 0.3s ease;
    }
    .message-box .smile-button .smile-box:after {
        content: ' ';
        position: absolute;
        top: 100%;
        left: 50%;
        width: 0;
        height: 0;
        margin-left: -5px;
        border-top: 5px solid #000;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 0;
    }
    .message-box:hover .smile-button .smile-box {
        display: block;
    }
    .message-box .smile-button:focus .smile-box {
        display: block;
        opacity: 0.8;
        margin-bottom: 5px;
    }
    .message-box .smile-button .smile-box .smile-box-wrapper {
        padding: 10px;
    }
    .message-box .smile-button .smile-box .smile-box-wrapper .smile1,
    .message-box .smile-button .smile-box .smile-box-wrapper .smile2,
    .message-box .smile-button .smile-box .smile-box-wrapper .smile3,
    .message-box .smile-button .smile-box .smile-box-wrapper .smile4,
    .message-box .smile-button .smile-box .smile-box-wrapper .smile5 {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: 3px;
    }
    .message-box .smile-button .smile-box .smile-box-wrapper .smile1 {
        background: url('http://javascript.ru/forum/images/smilies/smile.gif') no-repeat 0 0;
    }
    .message-box .smile-button .smile-box .smile-box-wrapper .smile2 {
        background: url('http://javascript.ru/forum/images/smilies/blink.gif') no-repeat 0 0;
    }
    .message-box .smile-button .smile-box .smile-box-wrapper .smile3 {
        background: url('http://javascript.ru/forum/images/smilies/laugh.gif') no-repeat 0 0;
    }
    .message-box .smile-button .smile-box .smile-box-wrapper .smile4 {
        background: url('http://javascript.ru/forum/images/smilies/unsure.gif') no-repeat 0 0;
    }
    .message-box .smile-button .smile-box .smile-box-wrapper .smile5 {
        background: url('http://javascript.ru/forum/images/smilies/tongue.gif') no-repeat 0 0;
    }
</style>
<div class="message-box">
    <textarea></textarea>
    <div class="smile-button" tabindex="1">
        <div class="smile-box">
            <div class="smile-box-wrapper">
                <a class="smile1" href="#"></a>
                <a class="smile2" href="#"></a>
                <a class="smile3" href="#"></a>
                <a class="smile4" href="#"></a>
                <a class="smile5" href="#"></a>
            </div>
        </div>
        <div class="smile-close" tabindex="2"></div>
        <div class="smile-open"></div>
    </div>
</div>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine

Последний раз редактировалось devote, 08.07.2013 в 22:49.
Ответить с цитированием
  #5 (permalink)  
Старый 08.07.2013, 20:54
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

долбаные префиксы, куча раз из-за них редактировать приходиться.
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #6 (permalink)  
Старый 09.07.2013, 07:09
Профессор
Отправить личное сообщение для Гробовщик Посмотреть профиль Найти все сообщения от Гробовщик
 
Регистрация: 10.03.2013
Сообщений: 169

lancer,
Сообщение от lancer
При нажатии на смайлик появляется крестик, при нажатии в другом месте(пусть это будет кнопка x) обратно возвращается смайлик? Я правильно понял?
Ну при нажатии на "смайлик" он меняется на "крестик", а сверху выпадает меню со смайлами. При повторном нажатии на "крестик" или в другом месте страницы (кроме текстового поля) Панель закрывается, а "крестик" снова сменяется "смайликом"
Ответить с цитированием
  #7 (permalink)  
Старый 09.07.2013, 07:12
Профессор
Отправить личное сообщение для Гробовщик Посмотреть профиль Найти все сообщения от Гробовщик
 
Регистрация: 10.03.2013
Сообщений: 169

animhotep,
Сообщение от animhotep
можно всё, только первый пункт средствами цсс врядли. лучше js
Самое интересное что там много чего напихано, просто ужас и css и js. Они могут общаться без конфликта?
Ответить с цитированием
  #8 (permalink)  
Старый 09.07.2013, 07:18
Профессор
Отправить личное сообщение для Гробовщик Посмотреть профиль Найти все сообщения от Гробовщик
 
Регистрация: 10.03.2013
Сообщений: 169

devote,
Сообщение от devote
вот что можно точно
Охренительный исходник
Сообщение от devote
ИЕ конечно же в пролете:
Ради такого исходника пошёл он этот IE
А что означают вот эти строки?
Сообщение от devote
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
А ещё у меня шаблон порвался, пока кнопка смайлика на сервере vk.com она работает как надо, как только я её скачал себе на сервер, она начала вести себя неправильно. Какая ей разница? Ошибку исправил перестановкой координат

Последний раз редактировалось Гробовщик, 09.07.2013 в 08:43.
Ответить с цитированием
  #9 (permalink)  
Старый 09.07.2013, 08:47
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от Гробовщик
А что означают вот эти строки?
стартовое значение свойства, обязательно нужно указывать, что бы браузер понимал от какого значения нужно начинать анимацию.
Сообщение от Гробовщик
Какая ей разница?
понятия не имею, по идее никакой. Возможно вы что-то не так сделали
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #10 (permalink)  
Старый 09.07.2013, 14:47
Профессор
Отправить личное сообщение для lancer Посмотреть профиль Найти все сообщения от lancer
 
Регистрация: 30.01.2008
Сообщений: 230

Сообщение от devote Посмотреть сообщение
долбаные префиксы, куча раз из-за них редактировать приходиться.
Пользуйся zen-coding'ом он же по другому называется emmit. Достаточно писать основное свойство, а все с префиксами создаются автоматически.


Цитата:
Ну при нажатии на "смайлик" он меняется на "крестик", а сверху выпадает меню со смайлами. При повторном нажатии на "крестик" или в другом месте страницы (кроме текстового поля) Панель закрывается, а "крестик" снова сменяется "смайликом"
Чтобы менялась сама картинка кнопки при клике - вы все правильно сделали ролловером, меняете position background'a.

А вот чтобы выпадало меню со смайликами - способ реализации зависит от контекста. Простейший способ - два блока одинаковой высоты с position:relative; один в другом. Изначально у внутреннего top:-(высота блока); Он выдвигается, скажем по 20px через setInterval в 500 милисекунд, также задвигается. Смещение регулируется прибавлением, вычитанием к текущему значению top. Внешний блок должен быть с overflow:hidden; чтобы спрятанная(задвинутая) часть внутреннего блока не была видна.

Позиционирования, в том числе relativ'ное.

Или метод animate в библиотеке jquery. Также в этой библиотеке есть готовые плагины выдвижных блоков и прочее - если сами делать не хотите.

Последний раз редактировалось lancer, 09.07.2013 в 15:23.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
поиск классов внутри тега yozuul jQuery 24 14.06.2013 22:00
как сделать ползунок в swf для просмотра анимации по кадрам Nailya Flash 4 31.05.2013 20:26
Как правильно сверстать интерфейс подбора рамок для фотографий Natali_RnD Элементы интерфейса 15 13.04.2012 17:05
Можно ли как для произвольного массива создавать вызовы функций , имеющих на входе kefi Общие вопросы Javascript 3 17.04.2009 16:53
Как найти путь к файлу для модификации? JuliaMilan Firefox/Mozilla 0 31.03.2009 14:06