ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / css balloon
10 сообщений из 10, страница 1 из 1
css balloon
    #38828524
Фотография _Vasilisk_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Vasilisk_
Участник
Помогите, с баллоном. Пытаюсь рисовать
Код: 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, 01:02
| Ответить | Цитировать | Написать  
css balloon
    #38828561
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
двигайся в этом направлении:

Код: 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, 06:36
| Ответить | Цитировать | Написать  
css balloon
    #38829273
Фотография _Vasilisk_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Vasilisk_
Участник
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, 17:13
| Ответить | Цитировать | Написать  
css balloon
    #38829407
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Это просто прекрасно, ровно эта штука мне понадобилась ровно сегодня :)
...
Рейтинг: 0 / 0
09.12.2014, 18:11
| Ответить | Цитировать | Написать  
css balloon
    #38830192
Фотография _Vasilisk_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Vasilisk_
Участник
Antonariy,

Обращайся :)

Я сам начал с jQuery плагина для балонов. Идея классная у плагина, но эта зараза убивала все события у контейнера. Потому пришел к выводу, что самому проще написать
...
Рейтинг: 0 / 0
10.12.2014, 14:13
| Ответить | Цитировать | Написать  
css balloon
    #38831156
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Petro123
Участник
_Vasilisk_Antonariy,
Обращайся :)
Я сам начал с jQuery плагина для балонов. Идея классная у плагина, но эта зараза убивала все события у контейнера. Потому пришел к выводу, что самому проще написать
а какой плагин?
Сегодня прикручиваю jquery.balloon.js к APEX оракла.
Неужели нет нормальных плагинов?
...
Рейтинг: 0 / 0
11.12.2014, 12:01
| Ответить | Цитировать | Написать  
css balloon
    #38831976
Фотография _Vasilisk_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Vasilisk_
Участник
Petro123а какой плагин?Я пытался работать с этим http://urin.github.io/jquery.balloon.js/
Petro123Неужели нет нормальных плагинов?Мне, под мои задачи, оказалось проще написать самому. Жалею, что убил три дня на написание костылей
...
Рейтинг: 0 / 0
11.12.2014, 22:45
| Ответить | Цитировать | Написать  
css balloon
    #38832333
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Petro123
Участник
_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, 12:40
| Ответить | Цитировать | Написать  
css balloon
    #38832407
Фотография _Vasilisk_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Vasilisk_
Участник
Petro123Событие клика на картинке осталось работать.И где у вас событие клика по картинке? Я вижу только штатную отработку клика по ссылке
...
Рейтинг: 0 / 0
12.12.2014, 13:45
| Ответить | Цитировать | Написать  
css balloon
    #38832464
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Petro123
Участник
_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
12.12.2014, 14:19
| Ответить | Цитировать | Написать  
10 сообщений из 10, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / css balloon
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38829273&tid=1446444]:
 0ms
get settings:
 6ms
get forum list:
 9ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 196ms
get topic data:
 6ms
get forum data:
 2ms
get page messages:
 28ms
get tp. blocked users:
 1ms
others: 230ms
total:  482ms
созд. / загр.: 482ms
x
x
Закрыть


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