|
Как настроить HELP-TOOLTIP-WIDGEDT
|
|
|
2012-04-28Дата: Суббота, 28.04.2012, 01:58 | Сообщение # 1 |
Лейтенант
Группа: Постоянные
Статус: Offline
|
,,,,,,,Приветь Likbezz..........!
.............Как дела............
Дружище опять нужен твой помощь как всегда!
Смотри объясняю ситуацию......!
...Я у тебя в форуме прочитал о создание нового кнопку INFO В ББ КОДАХ,
Мне надо сделать вот такая фигню ....Чтоб рядом тексте, в нужном месте было вот такой значок
...а при наведение курсорам появился вот такой значок
и вылезла подсказка с нужными доп.Информации ....../
......./..Я почти нашел все нужную скрипта и классы от google.com/adsense
Если у тебя есть тут Аккаунт зайди посмотри...! или наверника ты давно видел
Просто не смог как настрит чтоб она сработала, и сделать так чтоб было вот такая кнопка "Help Widget" в BB Кодах
И чтоб она сработала так чтоб, как и твой инфо в BB кодах , а при сохранение она не была видно чтоб,
......при наведение с мышкой она вылезла .
Не знаю поможешь или нет все равно вот вставлю нужные детали
Вот классы от Help widget
Code /*----- Начало кнопку подсказку в форуме с знаком ? как в google -------------*/
span.help-Helpwidgets-TooltipWidget, span.help-Helpwidgets-TooltipWidget-over {
position: relative;
top: 0;
left: 3px;
}
span.help-Helpwidgets-TooltipWidget, span.help-Helpwidgets-TooltipWidget-over {
position: relative;
top: 0;
left: 3px;
}
.help-Helpwidgets-TooltipWidget {
background: transparent url(//ssl.gstatic.com/inproduct_help/helpwidgets/question_mark.gif) no-repeat center;
display: inline-block;
height: 14px;
width: 13px;
}
.help-Helpwidgets-TooltipWidget-over {
background: transparent url(//ssl.gstatic.com/inproduct_help/helpwidgets/question_mark_over.gif) no-repeat center;
display: inline-block;
height: 14px;
width: 13px;
}
td, th {
font-family: arial, sans-serif;
font-size: 100%;
}
table {
border-collapse: separate;
border-spacing: 2px;
}
/*----- Конец кнопку подсказку в форуме с знаком ? как в google -------------*/
Quote Вот это блок для вставки кнопку с знаками
Code <span class="help-Helpwidgets-TooltipWidget" aria-hidden="false"></span>
Quote Это блок для подсказки с нужными инфо (Уже она в классе виден)
Code <div style="position: absolute; left: 482px; top: 64px; visibility: visible; " class="goog-tooltip"><div class="help-Helpwidgets-TooltipWidget-content-html">Ваш общий доход, накопленный за этот месяц (на данный момент). Это ориентировочная сумма. Точная сумма рассчитывается в конце каждого месяца после перерасчета ваших доходов. Подробнее об <a href="http://www.google.com/adsense/support/as/bin/answer.py?answer=168408&ctx=tltp">ориентировочном доходе</a>.
</div></div>
Quote Это тоже такой же блок который не виден ...! че я тебя все эту говорю ты сам как посмотришь будешь узнать ...!
Code <div style="position: absolute; display: none; "><div class="help-Helpwidgets-TooltipWidget-content-html-loading"></div></div>
Quote А эту не понял что то касается к этому блоку
Code <div class="syn-Tooltip" style="display: none; " aria-hidden="true"><div class="gux-tooltip-n"><span class="gux-tooltip-nw"></span><span class="gux-tooltip-ne"></span></div><div class="gux-tooltip-c"><div class="gux-tooltip-c1"><div class="gux-tooltip-c2"><div class="gux-tooltip-bd"></div></div></div></div><div class="gux-tooltip-s"><span class="gux-tooltip-sw"></span><span class="gux-tooltip-se"></span><span class="gux-tooltip-p" style="right: auto; left: 11px; "></span></div></div>
Вот скрипт не знаю правильно взял или нет !,?
он большой сюда не вмешивается по этому ссылку ставлю
Если трудоемка хотя объясни как настроить! HelpMe?
Заранее благодарен ты лучший помощник новичкам
Сообщение отредактировал samirmm - Суббота, 28.04.2012, 02:02 | | |
|
|
2012-04-28Дата: Суббота, 28.04.2012, 02:27 | Сообщение # 2 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
samirmm, Quote (samirmm) ...а при наведение курсорам появился вот такой значок
и вылезла подсказка с нужными доп.Информации ....../
Откуда дополнительная информация браться будет?
Quote (samirmm) Я почти нашел все нужную скрипта и классы от google.com/adsense
Ну видел, там подсказака подгружается динамически - там вся страница формируется динамически, по запросу.
По моему проще сделать типа:
Code [tip=текст подсказки]
или
Code [tip]текст подсказки[/tip]
... и все ...
А скриптом уже подставлять картинку и действие при наведении. Если я правильно, конечно, тебя понял ...
...
| | |
|
|
2012-04-28Дата: Суббота, 28.04.2012, 02:40 | Сообщение # 3 |
Лейтенант
Группа: Постоянные
Статус: Offline
|
Quote (likbezz) или
[tip]текст подсказки[/tip]
Не я не так говорю tip стиль я знаю, это не так как в adsense
..........TIP скриптам, подсказка ходить за мышкой ...
и подсказку который вылазит с мышкой наводит ее не возможно..
еще c типам на всех блоках где есть титле тоже вылазить, ... мне просто надо чтоб
.........как твоя кнопка было и при сохранение она не было видно.,
а при наведение на иконку ? инфо вылезло
Quote (likbezz) Откуда дополнительная информация браться будет?
Ты же ране сделал кнопку с Инфо, но она видно,
сможешь так сделать что места этого было который я показал высшее
Вот смотри твой скрипт для теста поставил тут написано 22222222
| | |
|
|
2012-04-28Дата: Суббота, 28.04.2012, 04:56 | Сообщение # 4 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
samirmm, Quote (samirmm) Ты же ране сделал кнопку с Инфо, но она видно,
сможешь так сделать что места этого было который я показал высшее
Ну так я тебе про то же самое и говорю.
А вообще, вот: vtip – простая всплывающая подсказка
И просто HTML добавляешь куда нужно:
Code <img class="vtip" title="Текст подсказки ...." src="http://ssl.gstatic.com/inproduct_help/helpwidgets/question_mark.gif" width="13" height="14" />
...
Quote (samirmm) сможешь так сделать что места этого было который я показал высшее
Смогу.
| | |
|
|
2012-04-28Дата: Суббота, 28.04.2012, 17:14 | Сообщение # 5 |
Лейтенант
Группа: Постоянные
Статус: Offline
|
Когда сделаешь ?
............................................
и еще по этой же теме такой не трудный вопросик!
это вопрос тоже самое ну тут одно часть решено, по умолчание.......
...........Вот такой тег для форуме как в forum.ucoz.ru/forum
Quote <div id="red">ТЕКСТ</div>
.........Понял да я а чем говорю? ..... сделать 6 цвета для BB коде для вствки поста с специальный тегам и стилем div
который будет окружать нужный текст со своими стилям .............
Пример вот так, как форуме стандартная кнопка COLOR
Выделяешь нужную текст и нажимаешь на кнопку COLOR, тут открывается 6 цвета с настроенными стилями
....Эту я хочу использовать с админ разрешением в html расширением , то ест только я а остальных запрет....
В заголовке темы .........
вот стили который ucoz forum использует
Code div {
display: block;
}
#blue {
border: 1px solid #9DBDFF;
background-color: #E1EBFF;
padding: 8px 11px;
font-size: 10pt;
margin: 0px;
color: black;
}
#gray {
border: 1px solid #B5B5B5;
background-color: #F4F4F4;
padding: 8px 11px;
font-size: 10pt;
margin: 0px;
color: black;
}
#green {
border: 1px solid #0C0;
background-color: #E1FFD7;
padding: 8px 11px;
font-size: 10pt;
margin: 0px;
color: black;
}
#green {
border: 1px solid #0C0;
background-color: #E1FFD7;
padding: 8px 11px;
font-size: 10pt;
margin: 0px;
color: black;
}
#red {
border: 1px solid #E89B88;
background-color: #FFEFE8;
padding: 8px 11px;
font-size: 10pt;
margin: 0px;
color: black;
}
а так вставляет в нужную текст
Quote <div id="red">TEKST</div>
| | |
|
|
2012-04-28Дата: Суббота, 28.04.2012, 17:38 | Сообщение # 6 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
samirmm, Quote (samirmm) Когда сделаешь ?
Ну вы даёте)
...
Quote (samirmm) Выделяешь нужную текст и нажимаешь на кнопку COLOR, тут открывается 6 цвета с настроенными стилями
Ну так сделай - функция вставки любого тега:
Code <input type="button" value="strong" id="strong" onclick="_simpletag('strong','','message','');" class="codeButtons">
- Остальное - стили ...
...
| | |
|
|
2012-04-28Дата: Суббота, 28.04.2012, 22:34 | Сообщение # 7 |
Лейтенант
Группа: Постоянные
Статус: Offline
|
Quote (likbezz) Ну так сделай - функция вставки любого тега: Code <input type="button" value="strong" id="strong" onclick="_simpletag('strong','','message','');" class="codeButtons">
Не получается !
здесь так ставлю
Quote
<input type="button" value="strong" id="strong" onclick="_simpletag('red','','message','');" class="codeButtons">
на выдаче получается во так
вот так делаю
Quote <input type="button" value="strong" id="strong" onclick="_simpletag('div id="red"','','message','');" class="codeButtons">
тогда не работает
мне надо чтоб при нажатие на выдаче получилось вот так
Quote <div id="red"></div> Добавлено (28.04.2012, 22:34)
---------------------------------------------
Спасибо !!! likbezz
Я сам разобрался .......
.......конечно же с твоей помощью и с твоим скриптом.......
Я переделал твой скрипт классно получилось, и еще я изучал его знаю как еще такие же классы поставить с его помощью!
вот смотри все работает 100%
Quote вот эту вставлял в модуле форуме Форма добавление сообщение после $BBCODES$
<!-- Начало красивого bbcodes buttons -->
Code $BBCODES$
<span style="padding-right:1px;">
<input type="button" class="codeButtons" onclick="simpletag('red','','','message','');return false;" value="red" id="red" title="Блок red div"></span>
<span style="padding-right:1px;">
<input type="button" class="codeButtons" onclick="simpletag('blue','','','message','');return false;" value="blue" id="blue" title="Блок blue div"></span>
<span style="padding-right:1px;">
<input type="button" class="codeButtons" onclick="simpletag('gray','','','message','');return false;" value="gray" id="gray" title="Блок gray div"></span>
<span style="padding-right:1px;">
<input type="button" class="codeButtons" onclick="simpletag('green','','','message','');return false;" value="green" id="green" title="Блок green div"></span>
<span style="padding-right:1px;">
<input type="button" class="codeButtons" onclick="simpletag('black','','','message','');return false;" value="black" id="black" title="Блок black div"></span>
<!-- Конец красивого bbcodes buttons-->
.....Вот эту в модуле форума Общий вид страница Форума сразу после $BODY$
Code <!-- начало Специалный вид BBCODES для окружение текста с цветными тегами --> <?if($PAGE_ID$='threadpage')?> <script type="text/javascript"> e=document.getElementsByTagName("TD"); for(k=15;k<e.length;k++){ if(e[k].className=='posttdMessage'){ s=e[k].innerHTML; while(s.indexOf('[blue]')!=-1){ s=s.replace('[blue]','<div id="blue" style="margin:7px 5px 7px 30px;padding:3px 10px 7px 25px;">');s=s.replace('[/blue]','</div>'); e[k].innerHTML=s; }}}; </script> <?endif?> <?if($PAGE_ID$='threadpage')?> <script type="text/javascript"> e=document.getElementsByTagName("TD"); for(k=15;k<e.length;k++){ if(e[k].className=='posttdMessage'){ s=e[k].innerHTML; while(s.indexOf('[red]')!=-1){ s=s.replace('[red]','<div id="red" style="margin:7px 5px 7px 30px;padding:3px 10px 7px 25px;">');s=s.replace('[/red]','</div>'); e[k].innerHTML=s; }}}; </script> <?endif?> <?if($PAGE_ID$='threadpage')?> <script type="text/javascript"> e=document.getElementsByTagName("TD"); for(k=15;k<e.length;k++){ if(e[k].className=='posttdMessage'){ s=e[k].innerHTML; while(s.indexOf('[gray]')!=-1){ s=s.replace('[gray]','<div id="gray" style="margin:7px 5px 7px 30px;padding:3px 10px 7px 25px;">');s=s.replace('[/gray]','</div>'); e[k].innerHTML=s; }}}; </script> <?endif?> <?if($PAGE_ID$='threadpage')?> <script type="text/javascript"> e=document.getElementsByTagName("TD"); for(k=15;k<e.length;k++){ if(e[k].className=='posttdMessage'){ s=e[k].innerHTML; while(s.indexOf('[green]')!=-1){ s=s.replace('[green]','<div id="green" style="margin:7px 5px 7px 30px;padding:3px 10px 7px 25px;">');s=s.replace('[/green]','</div>'); e[k].innerHTML=s; }}}; </script> <?endif?> <?if($PAGE_ID$='threadpage')?> <script type="text/javascript"> e=document.getElementsByTagName("TD"); for(k=15;k<e.length;k++){ if(e[k].className=='posttdMessage'){ s=e[k].innerHTML; while(s.indexOf('[black]')!=-1){ s=s.replace('[black]','<div id="black" style="margin:7px 5px 7px 30px;padding:3px 10px 7px 25px;">');s=s.replace('[/black]','</div>'); e[k].innerHTML=s; }}}; </script> <?endif?> <!-- конец Специалный вид BBCODES для окружение текста с цветными тегами -->
А вот таблица стилей
Code div {
display: block;
}
#blue {
border: 1px solid #9DBDFF;
background-color: #E1EBFF;
padding: 8px 11px;
font-size: 10pt;
margin: 0px;
color: black;
}
#gray {
border: 1px solid #B5B5B5;
background-color: #F4F4F4;
padding: 8px 11px;
font-size: 10pt;
margin: 0px;
color: black;
}
#green {
border: 1px solid #0C0;
background-color: #E1FFD7;
padding: 8px 11px;
font-size: 10pt;
margin: 0px;
color: black;
}
#black {
border: 1px solid #090700;
background-color: #443c3c;
padding: 8px 11px;
font-size: 10pt;
margin: 0px;
color: black;
}
#red {
border: 1px solid #E89B88;
background-color: #FFEFE8;
padding: 8px 11px;
font-size: 10pt;
margin: 0px;
color: black;
}
#yellow {
border: 1px solid #f4c430;
background-color: #ffff00;
padding: 8px 11px;
font-size: 10pt;
margin: 0px;
color: black;
}
#blue2 {
border: 1px solid #1a4780;
background-color: #0000ff;
padding: 8px 11px;
font-size: 10pt;
margin: 0px;
color: black;
}
Вот ссылка для посмотри как твой ученик сделал 
| | |
|
|
2012-04-29Дата: Воскресенье, 29.04.2012, 03:06 | Сообщение # 8 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
samirmm, Quote (samirmm) Не получается ! здесь так ставлю Quote
<input type="button" value="strong" id="strong" onclick="_simpletag('red','','message','');" class="codeButtons"> на выдаче получается во так
- Ну, так и должно.
Ты же вставил слово «red» ...
...
Quote (samirmm) вот так делаю Quote <input type="button" value="strong" id="strong" onclick="_simpletag('div id="red"','','message','');" class="codeButtons"> тогда не работает
Для такой вставки другая функция:
Code <input type="button" class="codeButtons" onclick="emoticon('<div id="red"></div>','message');" value="red">
...
Quote (samirmm) Я переделал твой скрипт классно получилось
Можно и так)
...
| | |
|
|
2012-04-29Дата: Воскресенье, 29.04.2012, 21:58 | Сообщение # 9 |
Лейтенант
Группа: Постоянные
Статус: Offline
|
Quote (likbezz) Для такой вставки другая функция: Code <input type="button" class="codeButtons" onclick="emoticon('<div id="red"></div>','message');" value="red">
А есть какой то разница? ну я имею введу что уменьшиться количество тегов или нет!
..... ну ладно я эту сделал с твоей помощью, все нормально работает .
а с этом да, с HELP кнопкой не смогу разобраться .....
......(
вот здесь есть 2 варианта, можно вот такую попробовать это демо а здесь вся коды и стили
......./
.или вот эту (демо и коды стили) но это очень подходить !
помоги пож. как настроить к твоей скрипта ..
Вот объясняю чтоб как это сработала ..
допустим я создаю тему в форуме ..
...тут пишу текст для тему, тема длинная , не хочу чтоб она много места занимала!
.....в теме есть слово который нуждается объяснение , сам знаешь если объяснение под слово написать, не красива и много места займет!
а если такую функцию мне поможешь, можно сделать так....
... допустим это слово вот так
Установка магнитолы в автомобиля !!!
Магнитола для чего нужен в автомобиле и сколько он важен ?
тут пишем объяснение бла бла бла бла
нажимаем на кнопку HELP
ПОЛУЧАЕТСЯ ВОТ ТАК
Магнитола для чего нужен в автомобиле и сколько он важен [HELP]"лого ?" бла бла бла бла[/HELP]
а при виде после сохранение вот так
Магнитола для чего нужен в автомобиле и сколько он важен ?
а при наведение с мышкой вылезла бла бла бла бла со своими ссылками и со всеми нужными инфо!
| | |
|
|
2012-04-30Дата: Понедельник, 30.04.2012, 04:56 | Сообщение # 10 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
samirmm, Quote (samirmm) а с этом да, с HELP кнопкой не смогу разобраться .....
Что с ней разбираться, я же уже написал как проще - пиши HTML.
Вот скрипт подсказки: vTip_v2.zip
Code <img class="vtip" title="Текст подсказки ...." src="http://ssl.gstatic.com/inproduct_help/helpwidgets/question_mark.gif" />
...
Вот так работает:
Установка магнитолы в автомобиля !!!
Магнитола для чего нужен в автомобиле и сколько он важен
...
| | |
|
