Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Форум для новичков » как создать раскрывающуюся таблицу?


как создать раскрывающуюся таблицу?

Сообщений 1 страница 18 из 18

1

Доброго дня, у меня на самом деле два вопроса, чтобы не создавать по несколько тем.
Подскажите пожалуйста где можно найти скрипт или хотя-бы урок о том как создать табличку которая раскрывается при наведении на неё курсора?
Обычно там стоит какое-то фоновое изображение, возможно название, а когда наводишь курсор мыши на картинку открывается таблица.

А второй мой вопрос - как можно выровнять иконки тем или названия подфорумов, чтобы они находились на одной линии?
Вот тестовик: http://titleme.rusff.ru

0

2

univexe написал(а):

Доброго дня, у меня на самом деле два вопроса, чтобы не создавать по несколько тем.
Подскажите пожалуйста где можно найти скрипт или хотя-бы урок о том как создать табличку которая раскрывается при наведении на неё курсора?
Обычно там стоит какое-то фоновое изображение, возможно название, а когда наводишь курсор мыши на картинку открывается таблица.

А второй мой вопрос - как можно выровнять иконки тем или названия подфорумов, чтобы они находились на одной линии?
Вот тестовик: http://titleme.rusff.ru

По первому вопросу: Приведите ссылку на подобное или эскиз до и после наведения ( Есть Спойлер слева или справа страницы раскрывающийся по наведению => http://forumd.ru/viewtopic.php?id=3014

По второму - сделайте скриншот страницы и проведите красную, жирную линию, по которой нужно выровнять

0

3

Deff
Вот тут анкета так выполнена: http://pixels.rusff.ru/viewtopic.php?id=8

вот скриншот, по красной линии должны быть расположены иконки и подфорумы

0

4

univexe
Спойлер - это иконка  книжка в сообщении   , пишите текст - выделяете - жмете книжку
http://sf.uploads.ru/P0oMc.png

Таблица, это иконка таблица перед смайлами
http://s5.uploads.ru/LTHWb.png

Есть новый, более удобный скрипт Анкеты Скрипт для создания анкет (новая версия)
Пример Шаблона этим скриптом(cразу заполняется пользователем, - автосоздаётся новая тема с ником этого юзера и его ответами на Анкету): http://arkania.rolevaya.com/viewtopic.php?id=19

0

5

Код:
[spoiler="Пример Спойлера"][table layout=fixed width=100%]
[tr]
[td]Есть новый, более удобный скрипт Анкеты Скрипт для создания анкет (новая версия)
Пример Шаблона этим скриптом(cразу заполняется пользователем, - автосоздаётся новая тема с ником этого юзера и его ответами на Анкету): http://arkania.rolevaya.com/viewtopic.php?id=19[/td]
[td ][align=center][img]http://da.mybb.ru/images/90x90/85/3328385.jpg[/img][/align][/td]
[td][/td]
[td][/td]
[/tr]
[/table][/spoiler]
Пример Спойлера

Есть новый, более удобный скрипт Анкеты Скрипт для создания анкет (новая версия)
Пример Шаблона этим скриптом(cразу заполняется пользователем, - автосоздаётся новая тема с ником этого юзера и его ответами на Анкету): http://arkania.rolevaya.com/viewtopic.php?id=19

http://da.mybb.ru/images/90x90/85/3328385.jpg

0

6

univexe написал(а):

вот скриншот, по красной линии должны быть расположены иконки и подфорумы

:glasses: Не увидел

0

7

Deff
но мне не для анкеты, вот ещё пример: http://trialla.rusff.ru/viewtopic.php?id=1#p400

0

8

Deff
извиняюсь, думала что вставила ссылку
http://images.vfl.ru/ii/1471606582/d32f … 796472.jpg

0

9

univexe
Это скрипт выделения кода по клику, если бы писали в общей теме Общие вопросы от новичков (57) , не отделяясь, видели бы ссылку на каталог скриптов,
Там, Каталог скриптов/CSS  в первопосте есть раздел НАИБОЛЕЕ ВОСТРЕБОВАННЫЕ СКРИПТЫ
Смотрим ссылку на Выделение кода в блоках [code]

0

10

Deff
да нет же, вот эта штука:
закрытая
открытая (при наведении курсором)

Отредактировано univexe (Пт, 19 Авг 2016 15:12:35)

0

11

univexe написал(а):

А второй мой вопрос - как можно выровнять иконки тем или названия подфорумов, чтобы они находились на одной линии?Вот тестовик: http://titleme.rusff.ru

Задайте вопрос после добавления нужных описаний к каждому форуму(желательно примерно идентичных по высоте, ибо тогда центровка будет другая...

0

12

univexe написал(а):

Deffда нет же, вот эта штука:закрытаяоткрытая (при наведении курсором)

Это нужно ставить код: HTML в сообщениях:

HTML низ

<script type="text/javascript">
function Transform_Code_Box_in_HTML(aX){
var TemLnk=aX.replace(/^(.*viewtopic\.php\?id=\d*).*$/ig,"$1");
var PstId=aX.replace(/^.*viewtopic\.php\?id=.*(#p\d+)$/ig,"$1");
var L=document.URL.replace(TemLnk,'');
if(L!=document.URL&&(L.slice(0,1)).search(/\d/ig)==-1 ){
L=$("div.topic "+PstId);
if(L.length==1){
var Lhtm=L.find(".post-content .code-box:first .scrollbox pre").text();
L.find(".post-content .code-box:first").replaceWith(Lhtm)
}}}
function Demo_HTML(Ts){var Ll=Ts.parents(".htmldemo").find(".code-box .scrollbox pre").text();
Ts.parents(".htmldemo").after('<div class="demHtml">'+Ll+'</div>');Ts.replaceWith(DemoButt0);
}
$(document).ready(function() {
$("#pun-viewtopic .post .code-box").each(function(){
if($(this).text().indexOf('<!--HTML-->')!=-1){
$(this).wrap('<div class="htmldemo"></div>')
$(this).replaceWith($('.htmldemo').text().split('<!--HTML-->')[1]);
}
});
});
</script>

Чтобы была кнопка в форме ответа для вызова html
в форму ответа

<style>
#button-html {background-image:url('ссылка на изображение'); padding:0; line-height:0; background-position:center; background-repeat:no-repeat; height:20px; width:100%}
</style>
<script type="text/javascript">
if(form=document.getElementById("form-buttons"))if(GroupID<3)
form.getElementsByTagName("tr")[0].insertCell(18).innerHTML="<a href='javascript:void(0);' onclick=\"bbcode('[*code]<!--HTML-->', '[/*code]');\"><img src='/i/blank.gif' title='HTML код' id='button-html' /></a>"
</script>

Ссылку на изображение меняем на свое. Звездочки убрать


В сам пост вставляем такой код HTM (И обертываем в теги HTM в сообщениях)

Код:
<link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,900italic|Economica' rel='stylesheet' type='text/css'>

<style type="text/css">
.asf-bajancanadian {
   width:400px;
   height:400px;
   padding:25px;
   background-image:url(http://se.uploads.ru/lFBU0.png);
   background-position: center bottom;
}
.asf-jerome {
   width: 370px;
   padding:25px;
   background-color:#38a256;
   margin-top:-50px;
   z-index:1;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
}
.asf-noochm {
   font-size:50px;
   font-style:italic;
   font-weight:bold;
   font-family:playfair display;
   color:#fcfcfc;
   line-height:100%;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
}
.asf-mitch {
   width:370px;
   padding:25px;
   overflow:auto;
   font-family:calibri;
   font-size:11px;
   line-height:99%;
   background-color:rgba(255, 255, 255, 0.8);
   background-color:rgb(255, 255, 255, 0.8);
   text-align:justify;
   height:0px;
   color:191919;
   opacity:0;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
}
.asf-bajancanadian:hover .asf-jerome {
   margin-top:0px;
}
.asf-bajancanadian:hover .asf-mitch {
   opacity:1;
   height:250px;
}
.mrc {
   font-family:calibri;
   font-size:9px;
   text-transform:uppercase;
   text-decoration:none;
}
.mrc a {
   text-decoration:none;
   color:#A23838;
}
</style>

<center>
   <div class="asf-bajancanadian">
       <div class="asf-mitch"><align=center>Добрый день, уважаемые гости, в данной теме вы можете задать все свои вопросы, а прежде прочитайте следующий текст:</align><br><br>

<align=center><b>КРАТКИЙ F.A.Q ДЛЯ ВСЕХ КТО НЕ В КУРСЕ</b></align><br>

<b>1. Вопрос - С какой целью создан этот форум?</b><br>
<i>Ответ - Форум создан как тестовик для разработки необходимых материалов.</i><br><br>

<b>2. Вопрос - А что за ролевую вы планируете?</b><br>
<i>Ответ - Это будет кроссовер по сказкам (пример: Холодное Сердце, Рапунцель, Хранители Снов и т.д)</i><br><br>

<b>3. Вопрос - А какой будет сюжет у ролевой? Вы будете играть именно по событиям фильмов?</b><br>
<i>Ответ - Подробнее о сюжете вы можете узнать в   <a href="http://trialla.rusff.ru/viewtopic.php?id=5#p5">этой</a> теме.</i><br><br>

<b>4. Вопрос - Вам нужна помощь в развитии?</b><br>
<i>Ответ - Да, нам нужна помощь, все желающие должны оставить небольшую заяявку в теме с приёмом АМС.</i><br><br>

<b>5. Вопрос - Когда откроется игра?</b><br>
<i>Ответ - Игра откроется когда мы наберём АМС состав и сделаем дизайн, а до тех пор подготовка к игре идёт полным ходом.</i><br><br>


<table><tr><td><size=10><b>ПРИДЕРЖАННЫЕ ВНЕШНОСТИ</b><br>
<b>Фрейя Мейвор|Freya Mavor</b> - <i>белый кролик</i><br></size>
</td>
<td><size=10><b>ПРИДЕРЖАННЫЕ РОЛИ</b><br>
<i>Elsa Queen of Arendelle (Frozen)</i> - <b>Lana</b><br>
<i>Merida (Brave)</i> - <b>храбрая сердцем</b><br>
<i>Anna Princess of Arendelle (Frozen)</i> - <b>Енот</b><br>
<i>Rapunzel (Tangled)</i> - <b>аляска</b><br>
<i>Astrid Hofferson (How to Train Your Dragon)</i> - <b>Fire</b><br>
<i>Jack Frost (Rise of the Guardians)</i> - <b>холод</b><br>
<i>Mother Gothel (Rapunzel)</i> - <b>красная королева</b><br>
<i>Michael Wazowski(Monsters Inc)</i> - <b>Кукушка</b>
</size><br>
</td></tr></table></div>
       <div class="asf-jerome">
           <div class="asf-noochm">welcome to the tale </div>
       </div>
   </div>
   <div class="mrc">
   </div>
</center>

0

13

А как-то можно переделать такой код под себя? Сделать свой стиль.

Код:
[code*]<!--HTML--*><link rel="stylesheet" type="text/css" href="http://forumstatic.ru/files/0016/66/d9/16038.css" /><center><div class='ipodbg'><div class='ipodlockscreen'>


<!-- КАРТИНКА С ВАШЕЙ ВНЕШНОСТЬЮ: ПОСЛЕ background-image:url( ВМЕСТО http://placehold.it/500x600 ВСТАВЬТЕ КАРТИНКУ С ВАШЕЙ ВНЕШНОСТЬЮ КОТОРАЯ БУДЕТ ЯВЛЯТЬСЯ ЗАСТАВКОЙ ДЛЯ АНКЕТЫ. 
ПАМЯТКА: В ГУГЛЕ ОЧЕНЬ ПРОСТО НАЙТИ КАРТИНКУ НУЖНОГО РАЗМЕРА, ДЛЯ ЭТОГО ДОСТАТОЧНО ПРОСТО УКАЗАТЬ ЕЁ РАЗМЕРЫ В ИНСТРУМЕНТАХ ПОИСКА. ПРИМЕР: https://www.google.ru/search?q=first+last&newwindow=1&hl=ru&noj=1&biw=968&bih=622&tbm=isch&source=lnt&tbs=isz:ex,iszw:500,iszh:600 , ГДЕ  first И last - ЗНАЧЕНИЯ ПОИСКА - ВАША ВНЕШНОСТЬ. ТАК ЖЕ МОЖНО ПОДБИРАТЬ КАРТИНКИ НЕМНОГО БОЛЬШЕ, ЧЕМ ЗАДАННЫЕ РАЗМЕРЫ -->

<div class='ipodbgimg' style='background-image:url(http://placehold.it/500x600);'>


</div><div class='ipoddarken'></div><div class='ipodstats'><div class='ipodslide'></div><div class='ipodcamera'></div><div class='ipodslideright'><div class='ipodunlock'></div></div><div class='ipodmessages'><div class='ipodmenu'><div class='ipodname'> 


<!-- ВАШЕ ИМЯ И ФАМИЛИЯ НА АНГЛИЙСКОМ ЯЗЫКЕ ВМЕСТЕ СО ВТОРЫМ ИМЕНЕМ, ЕСЛИ ОНО СУЩЕСТВУЕТ -->


Name Last Name


</div></div><div class='ipodfiller'><div class='textbs' style=" margin-top: 10px; margin-left: -100px"><div class='textbsb'><table cellpadding='0' cellspacing='0'><td style='width:235px; border-style: none'><div class='textbsm'><div class='textbsmi'> <div  class='textbsmil' style='color: #B24779;'> я работаю</div> <div class='textbsmili1'> 


<!-- ВАША ПРОФЕССИЯ, РОД ДЕЯТЕЛЬНОСТИ, МЕСТО РАБОТЫ -->


ваша профессия


</div><div class='textbsmil' style='color: #B24779;'> я люблю </div> <div class='textbsmili'> 


<!-- ВАШИ УВЛЕЧЕНИЯ, ХОББИ, СТРАСТИ, В ОБЩЕМ ТО, ЧТО ВЫ ЛЮБИТЕ БОЛЬШЕ ВСЕГО НА СВЕТЕ -->


что-то 


</div><div class='textbsmil' style='color: #B24779;'> я ненавижу </div> <div class='textbsmili'> 


<!-- ВАШИ СТРАХИ, НЕПРИЯЗНИ, СЛАБОСТИ, В ОБЩЕМ ТО, ЧТО ВЫ НЕ ЛЮБИТЕ БОЛЬШЕ ВСЕГО НА СВЕТЕ -->


что-то 



</div></div></div> </td><td style='width: 125px;'><div class='textbsim'> 


<!-- КАРТИНКА С ВАШЕЙ ВНЕШНОСТЬЮ: ПОСЛЕ <img src=' ВМЕСТО http://placehold.it/100x100 ВСТАВЬТЕ АДРЕС НА КВАДРАТНУЮ КАРТИНКУ С ВАШЕЙ ВНЕШНОСТЬЮ. ЭТО МОЖЕТ БЫТЬ АНИМАЦИЯ -->


<img src='http://placehold.it/100x100'> 


<div class='textbstl1' style='background-color: #B24779; margin-top: 6px;'> 



<!-- ВАША ВНЕШНОСТЬ НА АНГЛИЙСКОМ ЯЗЫКЕ -->



внешность на англ 



</div> <div class='textbstl1'> 



<!-- ВАША ДАТА РОЖДЕНИЯ И ВОЗРАСТ: ВОЗРАСТ УКАЗЫВАЕМ В СКОБОЧКАХ БЕЗ ЛЕТ, ГОД, Y.O. И ТАК ДАЛЕЕ  -->



дата рождения (возр) 

</div> <div class='textbstl1' style='background-color: #B24779;'>


<!-- ВАШ ЗНАК ЗОДИАКА  -->


знак зодиака


</div> <div class='textbstl1'> 


<!-- ВАШЕ СЕМЕЙНОЕ ПОЛОЖЕНИЕ: ЗАМУЖЕМ, НЕ ЗАМУЖЕМ, ПОМОЛВЛЕН И ТАК ДАЛЕЕ  -->


семейное положение


</div><div class='textbstl1' style='background-color: #B24779;'> опекун/куратор</div><div style='height: 1px;'></div> </td></table><div class='textbst'><div class='textbsti'><div class='textbstii'><div class='textbstit'> 



<!-- ВАША ИСТОРИЯ - ОСНОВНАЯ ЧАСТЬ ВАШЕЙ АНКЕТЫ,В КОТОРУЮ НУЖНО ВКЛЮЧИТЬ ХАРАКТЕР И БИОГРАФИЮ. ДАЖЕ ЕСЛИ ВЫ ОПИСЫВАЕТЕ ЕЁ ФАКТАМИ, ТО НЕ СКУПИТЕСЬ, УКАЖИТЕ НЕ МЕНЕЕ 10.   -->


Описание персонажа </div></div></div></div></div></div>    </div>
</div></div></div></div></center>[/code*]

0

14

univexe
Попробуйте поставить скрипт Шаблон Анкеты, а нужный HTML с красивой табличкой по наведению можно всунуть внутрь Анкеты (к примеру после тега куда анкета отправляется в текущую тему или в новую

0

15

Deff
Ой, нет это слишком сложно для меня, тем более я приверженец старых анкет

0

16

univexe написал(а):

Deff
Ой, нет это слишком сложно для меня, тем более я приверженец старых анкет

Ну тогда пилите в ФШ и делайте макет сообщения, как оно должно выглядеть в итоге в Вашем варианте... будет время - мож сделаем

0

17

здравствуйте скажите можно ли в форуме вставить ексель документ для скачивания?

0

18

Evgesha
Ну мон куда-нибудь залить и на форуме оставить ссылку, наверно ток так

0


Вы здесь » Единый форум поддержки » Форум для новичков » как создать раскрывающуюся таблицу?