Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / css balloon / 10 сообщений из 10, страница 1 из 1
09.12.2014, 01:02
    #38828524
_Vasilisk_
_Vasilisk_
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css balloon
Помогите, с баллоном. Пытаюсь рисовать
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
.balloon {
  display:block;
  position: absolute; left: 140px; top:20px;
  padding: 10px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  border: 1px solid rgb(119, 119, 119);
  box-shadow: rgb(85, 85, 85) 4px 4px 4px;
  color: rgb(102, 102, 102);
  background-color: rgb(239, 239, 239);
}

.balloon:before {
  content: ' ';
  position: absolute;
  top: -10px;
  left: 50%;
  margin-left: -10px;
  display: block;
  width: 0px;
  height: 0px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid rgb(239, 239, 239);
}

Код: html
1.
<div class="balloon">Balloon</div>

получается как на картинке. А хочется, чтобы бордюр покрывал и указатель как на второй картинке. Хотелось бы решить задачу только средствами CSS

С уважением, Vasilisk
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.12.2014, 06:36
    #38828561
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css balloon
двигайся в этом направлении:

Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
.balloon:after {
  content: '^';
  position: absolute;
  top: -15px;
  left: 50%;
  margin-left: -7px;
  font-size:28px;
  display: block;
  width: 0px;
  height: 0px;
}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.12.2014, 17:13
    #38829273
_Vasilisk_
_Vasilisk_
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css balloon
Antonariyдвигайся в этом направлении:Спасибо огромное. Как-то даже мысль не посещала об :after

Итого получилось
 
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
.balloon {
  display: block;
  position: absolute;
  padding: 10px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  border: 1px solid rgb(119, 119, 119);
  box-shadow: rgb(85, 85, 85) 4px 4px 4px;
  color: rgb(102, 102, 102);
  background-color: rgb(239, 239, 239);
}

.balloon:before {
  content: ' ';
  position: absolute;
  top: -10px;
  left: 50%;
  margin-left: -10px;
  display: block;
  width: 0px;
  height: 0px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid rgb(119, 119, 119);
}

.balloon:after {
  content: ' ';
  position: absolute;
  top: -8px;
  left: 50%;
  margin-left: -8px;
  display: block;
  width: 0px;
  height: 0px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid rgb(239, 239, 239);
}

...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.12.2014, 18:11
    #38829407
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css balloon
Это просто прекрасно, ровно эта штука мне понадобилась ровно сегодня :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.12.2014, 14:13
    #38830192
_Vasilisk_
_Vasilisk_
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css balloon
Antonariy,

Обращайся :)

Я сам начал с jQuery плагина для балонов. Идея классная у плагина, но эта зараза убивала все события у контейнера. Потому пришел к выводу, что самому проще написать
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.12.2014, 12:01
    #38831156
Petro123
Petro123
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css balloon
_Vasilisk_Antonariy,
Обращайся :)
Я сам начал с jQuery плагина для балонов. Идея классная у плагина, но эта зараза убивала все события у контейнера. Потому пришел к выводу, что самому проще написать
а какой плагин?
Сегодня прикручиваю jquery.balloon.js к APEX оракла.
Неужели нет нормальных плагинов?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.12.2014, 22:45
    #38831976
_Vasilisk_
_Vasilisk_
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css balloon
Petro123а какой плагин?Я пытался работать с этим http://urin.github.io/jquery.balloon.js/
Petro123Неужели нет нормальных плагинов?Мне, под мои задачи, оказалось проще написать самому. Жалею, что убил три дня на написание костылей
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.12.2014, 12:40
    #38832333
Petro123
Petro123
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css balloon
_Vasilisk_,
я не спец в JS, но где убивает события?
Код: html
1.
<a id="P1_PAGE_COPY" href="javascript:void(0);"><img border="0" alt="Скопировать в буфер обмена всю страницу" src="wwv_flow_file_mgr.get_file?p_security_group_id=10&amp;p_flow_id=1&amp;p_fname=Clear.png"></a>


тут прицепил, балун всплывает на вход мышки. Событие клика на картинке осталось работать.
Запуск теста банально - $('#P1_PAGE_COPY').balloon();
?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.12.2014, 13:45
    #38832407
_Vasilisk_
_Vasilisk_
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css balloon
Petro123Событие клика на картинке осталось работать.И где у вас событие клика по картинке? Я вижу только штатную отработку клика по ссылке
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.12.2014, 14:19
    #38832464
Petro123
Petro123
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css balloon
_Vasilisk_Petro123Событие клика на картинке осталось работать.И где у вас событие клика по картинке? Я вижу только штатную отработку клика по ссылке
я выразился по пользовательски). Ссылка в виде картинки?
- клик событие только одно. Термин штатная я не понял. Возможно ту бяку устраняет сам APEX

Код: html
1.
<a id="P138_CLEAR" href="javascript:void(0);"><img border="0" alt="Очистить в БД всю страницу (реквизиты, комиссия, карты)" src="wwv_flow_file_mgr.get_file?p_security_group_id=1000001&amp;p_flow_id=1544&amp;p_fname=Clear.png"></a>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / css balloon / 10 сообщений из 10, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 833ms
Закрыть
start [/forum/search_topic.php?author=ildarin&author_mode=last_posts&do_search=1]:
 0ms
get settings:
 11ms
get forum list:
 15ms
get settings:
 9ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 46ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 42ms
get tp. blocked users:
 1ms
others: 676ms
total:  833ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]