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

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

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


Вы здесь » Единый форум поддержки » Новые возможности форумов » Скрипты от пользователей 3


Скрипты от пользователей 3

Сообщений 61 страница 80 из 565

1

Администрация MyBB не гарантирует работоспособность данных скриптов, вы ставите их на свой страх и риск.

Для тех кто выкладывает скрипты:
1) Дайте краткое описание скрипта.
2) Обязательно укажите куда его вставлять.
3) Сам скрипт вставьте в bb-коды [сode] [/сode] или в [quotе] [/quotе]

В данной теме запрещено задавать вопросы и просить скрипты. Для этого есть раздел  Запросы по скриптам[10], при нарушение данного правила будет выдаваться предупреждение в профиль.

Отредактировано Alex_63 (Ср, 12 Фев 2020 20:35:57)

+8

61

muzfan

Код:
<div id=forumNews></div>
<script src="http://torrent.topbb.ru/export.php?type=js&max=10" type="text/javascript"></script>
<script type="text/javascript">
var html='';
var ts = '';
var mo = '';
var hh = '';
var mm = '';
var i = 0;
for(i=0;i<content.length;i++) {
 ts = new Date();
 ts.setTime(1000*content[i][0]);
 mo = ts.getMonth()+1;
 if (mo<10) mo='0'+mo;
 hh = ts.getHours();
 mm = ts.getMinutes()+'';
 if (mm<10) mm='0'+mm;
 ts = ts.getDate()+'.'+mo+' '+hh+':'+mm;
html2="</tr></tbody></table></div>"
html1="<div class=\"container\"><table cellspacing=\"0\" width=100%><thead><tr><th scope=\"col\" class=firstTD></th><th scope=\"col\"></th><th scope=\"col\"></th></tr></thead><tbody class=\"hasicon\">"
html+='<tr><td class=firstTD>'+content[i][1]+'</td><td class=\"tc2\">'+ts+'<td class=\"tcr\"><a href=\"'+content[i][2]+'\" target=\"_blank\">'+content[i][3]+'</a><br /></td></tr>';
}
document.getElementById('forumNews').innerHTML=""+html1+""+html+""+html2+"<br>"
</script><style>.firstTD{display:none;}</style>

Отредактировано Deff (Сб, 23 Фев 2013 22:36:21)

+1

62

Вертикальный слайдер от Кофемана

http://s3.uploads.ru/Eu1Aj.png

В HTML верх

Код:
<style>
.ul-menu * {
        margin: 0;
        padding:  0;
        margin: 0;
        padding:  0;
        font-size: 15px;
        font-family: 'Times New Roman';
        -moz-user-select: none;
        -khtml-user-select: none;
        user-select: none;
    }
 .ul-menu {
        float:left; /*строку можно убрать, если слайдер единственный*/
        list-style: none;
        display:inline:block;
        width:250px;
        height: 330px;
        border: 1px solid transparent!important;

    }

    .ul-menu li {
        list-style: none;
        margin: 3px 0 3px;
        background-color: #E0EDED;
        font-size:120%;
    }

.ul-menu li .cat_lnk {
        background:transparent url(http://s3.uploads.ru/ue5ph.gif) no-repeat 0 0;
        text-align: center;
        padding: 6px;
        display: block;
        height: 28px;
        line-height: 28px;
        width: 96%;
        text-decoration: none;

}
.ul-menu li ul {
        list-style-position: outside;
        text-align:left;
        list-style: none;
        display: none;
        height: 210px;
        width: 94%;
        margin-top: 1px;
        padding: 6px;
}
.ul-menu li .cat_lnk+ul {
        border: 1px solid green;
        border-top-color:#A5B7B7;
}
a.cat_lnk:hover,a.cat_lnk:active,a.cat_lnk:visited {
        text-decoration: none;
}
.ul-menu li a.cat_lnk.active{
        background-position: 0 -44px;
}
.ul-menu li a.cat_lnk:hover{
        background-position: 0 -88px;
}
</style>
<script type="text/javascript">

$.fn.tree_menu = function() {

        var nav = this;
        var uls = nav.find("ul");
        var ulsL = uls.length-1;


        nav.find("a").click(function() {
            var Lnk=$(this).attr("href");
            var self = $(this).next();
            if ( self.length == 0 ) return;


            uls.each(function( index ){

                    if ( this === self[0] ) {
                        if ( self.css('display') == "none" ) {
                           $(this).prev('a').addClass('active');
                        }  else {
                                $(this).prev('a').removeClass('active');$(this).slideUp(400);
                                 uls.eq(index-1).prev('a').click();return  false;
                                }
                        $( this ).slideDown(400);return true;
                    } 
                    if ( jQuery.inArray( this, self.parents( "ul" ) ) == -1 ) {
                        $(this).prev('a').removeClass('active');
                        $(this).slideUp(400);return true;
                    }
           });

                return false;

        });
}
</script>

Туда, где нужен слайдер:

<ul id="nav_menu_content1" class="ul-menu">

    <li><a href="#0" class="cat_lnk">Категория 4</a>
    <ul>
Тут содержимое четвертой категории</ul>   
    </li>

    <li><a href="#0" class="cat_lnk">Категория 3</a>
    <ul>Тут содержимое третьей категории</ul>   
    </li>

    <li><a href="#0" class="cat_lnk">Категория 2</a>
    <ul>Тут содержимое второй категории</ul>   
    </li>
    <li><a href="#0" class="cat_lnk active">Категория 1</a>
    <ul  style="display:block">Тут содержимое первой категории</ul>   
    </li>
</ul> <script>$('#nav_menu_content1').tree_menu();</script> <!-- Запуск -->

Жирным выделен кусок для добавления очередного пункта меню, (черным в нём Ваш изменяемый контент)

Очередная вкладка добавляется сверху, сразу за строкой
<ul id="nav_menu_content1" class="ul-menu">

Отредактировано Deff (Ср, 27 Фев 2013 00:28:35)

+3

63

если сообщение кто то редактирует то видна картинка и красный текст что отредактировано
http://s3.uploads.ru/CzvaO.gif

Код:
<style>
.punbb .post-content  p.lastedit  {color:red;}
.punbb .post-content  p.lastedit  {
background-image: url("http://s2.uploads.ru/bV9pt.png");
background-repeat: no-repeat;
padding-left: 22px;
}
</style>

пример на форуме (но видно только зарегистрированным пользователям):  http://forum-people.ru/

0

64

в самой теме показывает сколько раз просмотрели тему

http://s3.uploads.ru/jFyQ1.gif

Код:
<script type="text/javascript">
if (document.URL.indexOf("viewtopic.php") != -1) document.getElementById("pun-main").getElementsByTagName("h1")[0].innerHTML += "<span style='float: right; padding-left;'>Тему просмотрели: <b>" + FORUM.get('topic.num_views') + "</b> раз(а)</span>"
</script>

Отредактировано SKEE (Чт, 28 Фев 2013 20:43:06)

+3

65

Уважение картинкой

Код:
<script>
$('li.pa-respect img[alt="+"]').each(function() { $(this).attr('src', 'адрес картинки на плюс'); });
$('li.pa-respect img[alt="-"]').each(function() { $(this).attr('src', 'адрес картинки на минус'); });
</script>

0

66

Поскольку идеи kozhilya и Swetynasty, реализованные
в скрипте Двойной Спойлер Информации Профиля юзера в Топике
заинтересовали пользователей и прозвучали просьбы увеличения 
кол-ва кнопок скрытия, выкладываю расширенный Вариант под     
произвольное количество кнопок(сильно не усердствуйте!             

Cпойлер cкрытия Инфы под N-кнопок в Профиле Топика

http://s2.uploads.ru/gVCmQ.png

Кнопки-картинки(ссылки красным) ставим в нужное место перед нужной группой полей(Число кнопок, - Произвольное)

В HTML верх

<!-- HTML верх -Cпойлер cкрытия Инфы под N-кнопок в Профиле Топика -->
<style>img.post-img-Sp {margin:6px 3px;}
div.tipsy.tipsy-s.Sp-imgSp-img .tipsy-inner{font-size:14px;letter-spacing:1px;}
</style>
<script type="text/javascript" src="https://forumstatic.ru/files/0010/b4/f8/57844.js"></script>

В HTML низ

<!-- HTML низ -Cпойлер cкрытия Инфы под N-кнопок в Профиле Топика -->
<script>
var a1 = 0 // 0 - спойлер-аккордеон, 1 - вертикальный спойлер; 3 - обычный спойлер
var a2 = 0 // 0 - Скрытие первой вкладки; 1 - Показ первой вкладки;
var a3 = 0 // Резкость Открытия: 0 - Плавно; 1 - Резко;

var LiArr=new Array(
//При наличии двух косых => // в начале пункта, - пункт не скрывается.

//"pa-author",     //Ник-Нейм
//"pa-avatar",     //Аватар
//"pa-title",      //статус

// 1 кнопка - ссылка на Картинку
//В квадратных скобках, прямо к ссылке можно добавить своё описание (по желанию)
"http://s3.uploads.ru/VymNB.png[Описание 1]",

"pa-reg",        //Зарегистрирован
"pa-invites", //Приглашений
"pa-posts",      //Кол-во сообщений:
"pa-respect",    //Уважение:
"pa-positive",   //Позитив
"pa-sex",        //Пол
"pa-age",        //Возраст
"pa-icq",        //Аська
"pa-ip",         //IP Юзера
"pa-time-visit", //Провел на форуме:
"pa-last-visit", //Последний визит:

//"pa-online",     //Пользователь online - Не засовываем в спойлеры

// 2 кнопка- ссылка на Картинку
"http://s3.uploads.ru/T7hLI.png",

"pa-from",       //Откуда
"pa-fld1",       //Доп.Поле.1

// 3 кнопка- ссылка на Картинку
"http://s3.uploads.ru/VtGQ4.png",

"pa-fld2",       //Доп.Поле.2
"pa-fld3",       //Доп.Поле.3
"pa-fld4",       //Доп.Поле.4
"pa-fld5",       //Доп.Поле.5

//"award",      //Награды(только для rusff и ork)
//"gift",         //Подарки(только для rusff и ork)

//Конец Списка,
"_End"); SetProvilSpoil(a1,a2,a3);
</script>
<!--Конец//=Cпойлер cкрытия Инфы под N-кнопок в Профиле Топик-->

В скрипте расположение Пунктов, установлено так же, как и по умолчанию на форумах mybb,
Пункты в списке - можно переставлять и оно независит от их начального положения.
Приведённый вариант, по дефолту, чуть быстрее, если поля не переставлялись в Админке,
в  настройках "Поля Профиля", поскольку требует меньше времени на перестановки скриптом.

Пункт активен - //"pa-online"сейчас вытащен из спойлеров.
Для этого необходимо было поставить перед ним  две косых //.(Это для последующих установок, к примеру скриптов: офлайн - онлайн картинкой, (аналогично можно вытащить из участия в спойлере и любой другой пункт

Пункты:
//"award",      //Награды(только для rusff и ork)
//"gift",         //Подарки(только для rusff и ork)

- Только для для rusff и ork, - снимаем два наклонных слеша только для реально используемого(ых) пунктов.
*Награды и подарки удобнее ставить под последнюю кнопку, особенно если их много



Совет: При горизонтальном расположении кнопок, симпатичней  их делать несколько длиннее

Для дизайнеров       
Селектор для стиля вкладки ul.post-ul-Sp
Селектор для картинки-кнопки .post-img-Sp
Селектор aктивной кнопки .post-img-Sp.active
Селектор кнопки при наведении .post-img-Sp:hover
Селектор подсказки при наведении на кнопку div.tipsy.tipsy-s.Sp-imgSp-img .tipsy-inner

.

Пример текущего оформления кнопок в DEMO

<!-- HTML верх - Cпойлер cкрытия Инфы под N-кнопок в Профиле Топика -->
<style>img.post-img-Sp {
  margin:1px;
  padding:2px;
  border:transparent 1px dashed;
    -webkit-border-radius:4px;
    -khtml-border-radius:4px;
    -moz-border-radius:4px;
    -o-border-radius:4px;
    -ms-border-radius:4px;
    border-radius:4px;
}
img.post-img-Sp.active {
    border:#645850 1px dashed;
    -webkit-box-shadow:0px 5px 18px #000;
    -khtml-box-shadow:0px 5px 18px #000;
    -moz-box-shadow:0px 5px 18px #000;
    -ms-box-shadow:0px 5px 18px #000;
    box-shadow: 0px 5px 18px #000;
}
</style>


Пояснения к DEMO:
В демке четыре сообщения, с разными вариантами оформления и начального срабатывания кнопок в профиле, в зависимости от установки параметров а1 и a2 *см. начало скрипта, в части, устанавливаемой в HTML низ


Пробная Версия не скрытием, а с растворением-упрозрачниванием вкладки => Ссылка


Для тестирования названия полей можно временно поставить в HTML низ скрипт(Показывает номер поле при наведении)

Код:
<!-- Узнать номер дополнительного поля под аватаром -->
<script>$(".post-author li").hover(function(){$(this).attr("title",$(this).attr("class").split("fld")[1]);});</script>

Отредактировано Deff (Вс, 21 Апр 2013 14:13:13)

+9

67

Не скрипт - но понравилось

Красивое Оформление Кнопочек:

http://s3.uploads.ru/MlAFg.png

В HTML верх (Или в конец Первого Окна стиля без тегов <style>

Код:
<style>
.button {
   border: 1px solid #0a3c59;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   padding: 10.5px 21px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #7ea4bd 0 1px 0;
   color: #06426c;
   font-size: 14px;
   font-family: helvetica, serif;
   text-decoration: none;
   vertical-align: middle;
   }
 .button:hover {
   border: 1px solid #0a3c59;
   text-shadow: #1e4158 0 1px 0;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   color: #fff;
   }
 .button:active {
   text-shadow: #1e4158 0 1px 0;
   border: 1px solid #0a3c59;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
   color: #fff;
}
   </style>

Туда где нужно(ну или просто покрасить текущие

<input class="button" type="button" value="Button"/>

Отредактировано Deff (Ср, 6 Мар 2013 13:25:23)

+5

68

Если кому надо, то есть вот такой вариант цифровых часов:
http://s2.uploads.ru/8OqF0.gif

Код:
<!--Цифровые часы-->
<script type="text/javascript">
function showTime()
{
  var dat = new Date();
  var H = '' + dat.getHours();
  H = H.length<2 ? '0' + H:H;
  var M = '' + dat.getMinutes();
  M = M.length<2 ? '0' + M:M;
  var S = '' + dat.getSeconds();
  S =S.length<2 ? '0' + S:S;
  var clock = H + ':' + M + ':' + S;
  document
    .getElementById('time_div')
      .innerHTML=clock;
  setTimeout(showTime,1000); // перерисовать 1 раз в сек.
}
</script>
<div id="time_div" style="position:relative;width:157px;top:-2px;left:5px;text-shadow:#fff -1px -1px 0, #333 1px 1px 0;font-size:24pt;background-color:#C5C5C5;color:#C5C5C5;font-weight:600;font-family:Verdana;"></div>
<script type="text/javascript">
showTime();
</script>

Здесь настраиваем под себя:

<div id="time_div" style="position:relative;width:157px;top:-2px;left:5px;background-color:#C5C5C5;text-shadow:#fff -1px -1px 0, #333 1px 1px 0;font-size:24pt;color:#C5C5C5;font-weight:600;font-family:Verdana;">
</div>

width:157px; - ширина ваших часов;
top:-2px; - отступ сверху;
left:5px; - отступ слева;
background-color:#C5C5C5; - цвет фона часов;
text-shadow:#fff -1px -1px 0, #333 1px 1px 0; - это собственно тень, если вариант с тенью не нравится, то можно удалить этот код;
font-size:24pt; - размер цифр;
color:#C5C5C5; - цвет цифр. Если вы используете тень, то цвет цифр должен совпадать с фоном, на котором вы располагаете часы. На скриншоте, что я показал выше, цвет фона выставлен #C5C5C5, соответственно и цвет цифр такой же color:#C5C5C5; Если вы удалили тень, то соответственно цвет фона и цвет цифр должен быть разный.
font-weight:600; - это насыщенность шрифта, как настраивать: http://htmlbook.ru/css/font-weight
font-family:Verdana; - какой вид шрифтов используется, подробнее: http://htmlbook.ru/css/font-family

Отредактировано kolobdur74 (Чт, 7 Мар 2013 23:37:14)

+1

69

kolobdur74
Самый востребованный скрипт с часами, - скрипт обратного отсчета времени, чтобы не перенапрягать, забавно завести в нем массив праздничных дат, помимо установки ( в конец списка) произвольной даты
Кроме дат, в массиве указывать число дней до даты, с которых начинается контроль

0

70

Посколь отсутствие Кофемана и Rion Leonheartа,
ведёт к усыханию ветки "Таблицы на заказ", решил   
сделать  Пару весьма простых в настройке девайсов 

Таблица с переключаемыми вкладками

......Cуть идеи: - поскольку cпециалистов по работе в фотошопе достаточно много(в отличии от верстальщиков по таблицам) и есть достаточно приличная  помощь в изготовлении нужных картинок, например- ссылка , - то создать таблицу с переключаемыми вкладками, которая на данный период в заказах таблиц весьма востребованна, с оформлением вида каждой вкладки и вида переключаемых кнопок (включённой кнопки и неактивных кнопок на текущей вкладке) общей фоновой картинкой в размер всей таблицы, т.е на каждую вкладку, - своя личная фоновая картинка для всей таблицы. Естественно внутренний контент каждой вкладки - свой. Достоинства данного метода: - простота, при возможности самого футуристического дизайна  таблицы.
Итак, к делу:

В HTML верх

<!-- Стиль меню таблицы в объявлении -->
<style type="text/css">
/****************************************
   Таблица с переключаемыми Вкладками

****************************************/
#tab2,#tab2*{
  paddibg:0;
  margin:0;
}
#tab2 {
  background:transparent url(http://s2.uploads.ru/Eu9Vt.png) 0 0 no-repeat;
  height:286px;
  width:790px;
  outline:solid red 1px;/* Убираем Строку после настройки*/
}
#tab2,#tab2 td{
  border:none 0 transparent!important;
  border-collapse:collapse;
}
img[data^="tab"]{
  cursor:pointer;
  height:100%;
  outline:solid red 1px;/* Убираем Строку после настройки*/
  border:none 0 transparent!important;
}
.tab-content {
  display:none;
  width:100%;
  height:226px;
  outline:solid blue 1px;/* Убираем Строку после настройки*/
  color:#fff;
  overflow-y:auto;
}
</style>
<script type="text/javascript">
$.fn.switch_tabs = function() {
  var tbl = this,knopK = $("img[data^='tab']",tbl);
  knopK.each(function(){
    var arr = $(this).attr('data').split(",");
    $(this).css("background-image","url("+arr[1]+")")
  }); knopK.css("background-position","120% 10000px")
      knopK.css("background-repeat","no-repeat")

  knopK.click(function(){
    knopK.removeClass('active');
    $(this).addClass('active');
    var arr = $(this).attr('data').split(",");
    tbl.css("background-image","url("+arr[1]+")")
    $(".tab-content",tbl).hide();
    $("#"+arr[0]+"",tbl).show();
  });
}
</script>

Туда, где нужна таблица:

<table id="tab2" class="tbl-0" border="0">
<tr>
<td class="butt" valign=center height=
40>   <!-- Секция кнопок -->
<img width="195" data="tab-1,http://s2.uploads.ru/Eu9Vt.png"  src="/i/blank.gif" class="active"/>
<img width="238" data="tab-2,http://s2.uploads.ru/IR1f9.png"  src="/i/blank.gif"/>
<img width="135" data="tab-3,http://s3.uploads.ru/SolKv.png"  src="/i/blank.gif"/>
<img width="200" data="tab-4,http://s2.uploads.ru/HeSUV.png"  src="/i/blank.gif"/>
</td>
</tr>
<tr>
<td  class="content" align=center>

<!-- Контейнер контента 1-й кнопки -->
<div id="tab-1" class="tab-content"  style="display:block;">

Контент 1-й кнопки

</div>

<!-- Контейнер контента 2-й кнопки -->
<div id="tab-2" class="tab-content">

Контент 2-й кнопки

</div>

<!-- Контейнер контента 3-й кнопки -->
<div id="tab-3" class="tab-content">

Контент 3-й кнопки

</div>

<!-- Контейнер контента 4-й кнопки -->
<div id="tab-4" class="tab-content">

Контент 4-й кнопки

</div>

</td>
</tr>
</table><script>$("
#tab2").switch_tabs()</script><!--//End/-switch Tabs -->

Для центрирования таблицы, обрамляем таблицу в теги:

<div align=center>
   Тут таблица
</div>

Пояснения:

1. Красным  - это то, что заполняется Вами,

2. Красным жирным - tab2 - id Вашей таблицы.

3. height=40; - Красным - высота секции кнопок.

4. <img width="195" data="tab-1,http://s2.uploads.ru/Eu9Vt.png"  src="/i/blank.gif" - Красным - ширина кнопки и ccылка на фоновую картинку всей таблицы к соответствующей вкладке,
для Первой вкладки ссылка проставляется дважды, в самой таблице и в сss HTML верха:
background:transparent url(http://s2.uploads.ru/Eu9Vt.png) 0 0 no-repeat;

5. Контент N-й кнопки - Ваш контент к нужной вкладке.



Последовательность действий:
1. Временно заменяем текущие ссылки фоновых картинок в  тегах кнопок на прозрачки(заменяем только где красным и на красное)
<img width="XXX" data="tab-1,/i/blank.gif"  src="/i/blank.gif" class="active"/>
А так же заменяем и в css в HTML верх:

#tab2 {
  background:transparent url("/i/blank.gif") 0 0 no-repeat;
  height:286px;
  width:790px;
}

И проставляем в css  нужный Вам типоразмер  таблицы

#tab2 {
  background:transparent url("/i/blank.gif") 0 0 no-repeat;
  height:286px;
  width:790px;
}

2. Проставляем нужную высоту секции кнопок в самой таблице в теге
<td class="butt" valign=center height=40>

3. Проставляем нужную ширину каждой кнопки в самой таблице в тегах:
<img width="195" data="tab-1,

4. Проставляем нужную высоту для контейнера контента в css в HTML верх:

.tab-content {
  display:none;
  width:100%;
  height:226px;

5. Делаем скриншот таблицы(цветное обрамление границ таблицы, кнопок и контейнера контента позволят правильно построить фоновые рисунки в ФШ.

6. Получаем фоновые картинки( типоразмер у них должен быть идентичный и равный проставленному в Последовательность действий: п.п.1 и заполняем ссылками на  фон теги во всех кнопках,
<img width="XXX" data="tab-1,http://s2.uploads.ru/Eu9Vt.png"  src="/i/blank.gif">

и сcылку на первый фон таблицы дополнительно прописываем и в css в HTML верх:

#tab2 {
  background:transparent url(http://s2.uploads.ru/Eu9Vt.png) 0 0 no-repeat;
  height:286px;
  width:790px;
  outline:solid red 1px;/* Убираем Строку после настройки*/
}

7. При удовлетворении результатами(тыкаем все кнопочки в таблице) - удаляем строки с установкой обрамления границ в в css в HTML верх:
  outline:solid red 1px;/* Убираем Строку после настройки*/



Ура, с настройкой - закончено!



PS: Для сокращения тормозов и длительных загрузок картинок делайте картинки в формате jpg,
При желании картинок с плавной прозрачностью к краям, перевод в jpg осуществляется наложеннием картинок с полупрозрачностью на ваш фон форума, и итоговый совместный рисунок обрезается и сохраняется в формате jpg .

2. Можно сократить(если позволяет дизайн идея оформления) объем картинок, делая  сменяемые картинки не на всю таблу, а только на всю секцию кнопок, общую же фоновую, несменяемую  картинку, - ставить на div обрамления таблицы.
К примеру так:

<div align=center>
  <div style="display:inline-block; background:url(
images/hand.png) no-repeat 0 0; /">
    Тут таблица
  </div>
</div>

*Во второй вкладке DEMO размещен слайдер, код которого приведён постом ниже

Отредактировано Deff (Сб, 23 Мар 2013 00:42:08)

+4

71

Простой Слайдер картинок и контента

http://s3.uploads.ru/jJTgr.png

В HTML верх

<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/0010/b4/f8/71526.css" />
<script type="text/javascript" src="https://forumstatic.ru/files/0010/b4/f8/78275.js"></script>

Туда, где нужен слайдер

<!-- Cлайдер -->
   <div id="slider2" slide-width="772" slide-height="210" class="slider" style="padding:0;height:0;width:0">

<!-- Две Кнопки слайдера -->
    <img button-width="42" class="button-left hide" src="http://s3.uploads.ru/KcP7S.png"/>
    <img button-width="42" class="button-right" src="http://s2.uploads.ru/aIH0D.png"/>

<!-- 1-й Контейнер слайдера -->
<div class="slider-content active">

    1-й Контент

</div>
<!-- 2-й Контейнер слайдера -->
<div class="slider-content">

    2-й Контент

</div>
<!-- 3-й Контейнер слайдера -->
<div class="slider-content">

    3-й Контент

</div>

   </div><script>$("#slider2").slideF();</script><!--//End Cлайдер -->

Пояснения



slider2 - красным жирным - уникальный id cлайдера(*прописывается дважды в начале и  конце),
если слайдеров несколько, для каждого свой



<div id="slider2" slide-width="772" slide-height="210" class="slider" style="padding:0;height:0;width:0">  - красным прописываем свои цифры ширины и высоты слайдера;
padding:0 - отступ контента от краёв, обычно при вставке фоновой картинки вместо 0 - прописываем 12px



    <img button-width="42" class="button-left hide" src="http://s3.uploads.ru/KcP7S.png"/>
    <img button-width="42" class="button-right" src="http://s2.uploads.ru/aIH0D.png"/>
- левая и правая кнопка слайдера, красным - ширина  и ссылка на картинку,
значения ширины картинок лучше выставлять равные между собой и идентичные с размерами исходной картинки(хотя... как знаете)



Очередную вкладку слайдера добавляем таким кодом

<!-- 4-й Контейнер слайдера -->
<div class="slider-content">

    4-й Контент

</div>

Красное - Ваш контент

Полный код DEMO

В HTML верх

<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/0010/b4/f8/71526.css" />
<script type="text/javascript" src="https://forumstatic.ru/files/0010/b4/f8/78275.js"></script>

<style>
/**********************
  слайдер и его  контент

**********************/
#slider2{
  margin-left:-5px;
  margin-top: 0;
/* Фон слайдера */
background:transparent url(http://s2.uploads.ru/rn5eI.jpg) 0 0 no-repeat;
/*outline:solid red 1px!important;*/
}

.Amin-Moder {
  width: 215px;
  vertical-align:top;
  display:inline-block;
  /*outline:solid red 1px;*/
  margin:34px 35px auto 15px;
}
.Amin-Moder *{
  float:none;
}

.Amin-Moder img{
  float:left;
}
.Amin-Moder img{
  padding:8px;
}

</style>

В Объявление

<div class="wrap-slider2" align="center">
<!-- Cлайдер -->
   <div id="slider2" slide-width="742" slide-height="200" class="slider" style="padding:12px;height:0;width:0">

    <img button-width="36" class="button-left hide" src="http://s3.uploads.ru/gwvyS.png"/>
    <img button-width="36" class="button-right" src="http://s3.uploads.ru/TsxA7.png"/>

<!-- 1-й Контейнер слайдера -->
<div class="slider-content  active">

    <img style="margin-top:7px;" src="http://s2.uploads.ru/6dc5t.png" width=99% height=95%/>

</div>

<!-- 2-й Контейнер слайдера -->
<div class="slider-content"><span>2</span><br />

    <span class="Amin-Moder"><img src="http://s3.uploads.ru/otGwc.png"/></span>
    <span class="Amin-Moder"><img src="http://s3.uploads.ru/otGwc.png"/></span>

</div>
<!-- 3-й Контейнер слайдера -->
<div class="slider-content"><span>3</span><br />

    <span class="Amin-Moder"><img src="http://s3.uploads.ru/otGwc.png"/></span>

</div>

<!-- 4-й Контейнер слайдера -->
<div class="slider-content"><span>4</span><br />

    <span class="Amin-Moder">
Админ-1
<br />
<img src="http://s3.uploads.ru/9sqei.png"/>
<pre>Текст asdasdasd
Текст asdasdasd
Текст asdasdasd
Текст asdasdasd
Текст asdasdasd<br />
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
<br />
</pre>
    </span>
    <span class="Amin-Moder">
Админ-1
<br />
<img src="http://s3.uploads.ru/9sqei.png"/>
<pre>Текст asdasdasd
Текст asdasdasd
Текст asdasdasd
Текст asdasdasd
Текст asdasdasd<br />
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
<br />
</pre>
    </span>

</div>

   </div><script>$("#slider2").slideF();</script><!--//End Cлайдер -->

</div>


Добавлена возможность смены направления движения
и времени анимации слайда:

Дополнительные параметры прописываем в запуске функции, расположенной в конце cлайдера:

<script>$("#slider2").slideF(0,700);</script>

Первая цифра - смена направления - 0 или 1

Вторая цифра примерно от 0 до 800, - время анимации кадра




Добавлен новый Вариант Кольцевого слайдера,
с возможностью автопрокрутки слайдов

Установка та же самая, изменения в назначении параметров запуска функции:
Дополнительные параметры прописываем в запуске функции, расположенной в конце cлайдера:

<script>$("#slider2").slideF(660,4);</script>

1-я цифра - цифра примерно от 0 до 800, - время анимации кадра
2-я цифра, 4 -время автопрокрутки в секундах(от 1 до 10), (Если параметр не устанавливаем, - автопрокрутки нет.
Для  кольцевого слайдера меняем в HTML верх строку

<script type="text/javascript" src="https://forumstatic.ru/files/0010/b4/f8/78275.js"></script>
на
<script type="text/javascript" src="https://forumstatic.ru/files/0010/b4/f8/39493.js"></script>

Можно установить свои добавки стиля к мини-меню прокрутки

Добавочный стиль мини-меню автопрокрутки, в HTML верх, ниже скрипта

<style>
#indexActive{ /*Задаём Позицию индикаторов*/
  position:absolute;
  z-index:1000;
  margin-left: 580px;
  margin-top: -6px;
}

span[id^="active_Ind"]{ /*Фон и размеры индикатор*/
  display:inline-block;
  cursor:pointer;
  float:right;
  background:transparent url(http://s3.uploads.ru/geZ4A.png) no-repeat center top;
  /*border:solid 2px blue!important;*/
  height:11px;
  width:10px;
  padding:0 1px 0 1px;
  margin:10px 6px;
}
span[id^="active_Ind"]:hover{  /*Индикатор при наведении */
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    -ms-border-radius:5px;
    border-radius:5px;
  box-shadow:1px 1px 4px #515F6C;
}
span[id^="active_Ind"].active{ /*Активный индикатор */
  background-position: center -12px;
}
</style>



Основные достоинста данных слайдеров:
Автоцентрирование кнопок по высоте
Автоскролл контента по высоте, при превышении размеров...
Возможность вложенности в таблицы с вкладками,
Возможность установки нескольких слайдеров для первого варианта скрипта(не кольцевого слайдера) при использовании единственного кода стиля и скрипта(необходима только смена ID слайдера в очередном контенте, и прописи этого ID в функции запуска
Быстрый запуск.


Недостатки: отсутствие возможности установки собственных скриптов внутри вкладок слайдера,
(к примеру скрипт таймера из поста 321)
Решено в этом Варианте => Скрипты от пользователей 3 ,
*При отсутсвии оных лучше пользоваться вышеприведёнными версиями

Отредактировано Deff (Чт, 23 Янв 2014 20:11:09)

+7

72

Mango
Генератор кнопок: http://livetools.uiparade.com/button-builder.html
Еще много генераторов http://habrahabr.ru/post/168149/

0

73

Скрипт Карусель/Галерея картинок. При наведении курсора на картинку картинка увеличивается до своего настоящего размера (если истинные размеры картинки меньше, то уменьшится), при нажатии на картинку перекидывает на сайт. Возможно пригодится для баннеров и для галереи картинок.
Полный код:

Код:
<!--Скрипт Карусель/Галерея картинок-->
<style type="text/css">
.block-img{
position: relative;
display:inline;
}
.expando{
position: relative;
vertical-align: middle;
border: 0;
text-align: center;
margin-right:-5px;
}
#prev{float:left;height:31px;margin-top:7px;}
#next{float:right;height:31px;margin-top:7px;}
#d0,#d1,#d2,#d3,#d4{
position: absolute;
bottom:40px;
}
#d5,#d6,#d7,#d8{
position: absolute;
bottom:40px;
margin-right:-44px;
right:50%;
}
</style>
<!--Увеличиваем картинки в галерее-->
<script type="text/javascript">
if (document.images){
 (function(){
  var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
  var expConIm = function(im){
   im = im || window.event;
   if (!expConIm.r.test (im.className))
    im = im.target || im.srcElement || null;
   if (!im || !expConIm.r.test (im.className))
    return;
   var e = expConIm,
   widthHeight = function(dim){
    return dim[0] * cos + dim[1] + 'px';
   },
   resize = function(){
    cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
    im.style.width = widthHeight (e.ims[i].w);
    im.style.height = widthHeight (e.ims[i].h);
    if (e.ims[i].d && times > e.ims[i].jump){
     ++e.ims[i].jump;
     e.ims[i].timer = setTimeout(resize, speed);
    } else if (!e.ims[i].d && e.ims[i].jump > 0){
     --e.ims[i].jump;
     e.ims[i].timer = setTimeout(resize, speed);
    }
   }, d = document.images, i = d.length - 1;
   for (i; i > -1; --i)
    if(d[i] == im) break;
   i = i + im.src;
   if (!e.ims[i]){
    e.ims[i] = {im : new Image(), jump : 0};
    e.ims[i].im.onload = function(){
     e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
     e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
     e (im);
    };
    e.ims[i].im.src = im.src;
    return;
    }
   if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
   e.ims[i].d = !e.ims[i].d;
   resize ();
  };
  expConIm.ims = {};
 })();
}
</script> 
<!--Блок куда ставятся и увеличиваются картинки-->
<center>
<span id="prev" onmouseover="inc()" onmouseout="inc1()"><img src="http://www.sdws.ru/pictures/prev.png" style="cursor:pointer" width="10" height="13" ></span>
<div class="block-img">
<span id="d0"></span>
<span id="id0" class="expando" onmouseover = "d0.innerHTML = '<img src='+event.target.src+'>'"  onmouseout="d0.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d1"></span>
<span id="id1" class="expando" onmouseover = "d1.innerHTML = '<img src='+event.target.src+'>'"  onmouseout="d1.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d2"></span>
<span id="id2" class="expando" onmouseover = "d2.innerHTML = '<img src='+event.target.src+'>'"  onmouseout="d2.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d3"></span>
<span id="id3" class="expando" onmouseover = "d3.innerHTML = '<img src='+event.target.src+'>'"  onmouseout="d3.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d4"></span>
<span id="id4" class="expando" onmouseover = "d4.innerHTML = '<img src='+event.target.src+'>'"  onmouseout="d4.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d5"></span>
<span id="id5" class="expando" onmouseover = "d5.innerHTML = '<img src='+event.target.src+'>'"  onmouseout="d5.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d6"></span>
<span id="id6" class="expando" onmouseover = "d6.innerHTML = '<img src='+event.target.src+'>'"  onmouseout="d6.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d7"></span>
<span id="id7" class="expando" onmouseover = "d7.innerHTML = '<img src='+event.target.src+'>'"  onmouseout="d7.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d8"></span>
<span id="id8" class="expando" onmouseover = "d8.innerHTML = '<img src='+event.target.src+'>'"  onmouseout="d8.innerHTML = ''"></span>
</div>
<span id="next" onmouseover="dec()" onmouseout="dec1()"><img src="http://www.sdws.ru/pictures/next.png" style="cursor:pointer" width="10" height="13"></span>
</center>
<!--Прокрутка картинок в карусели
//Сюда же ставим ссылки на картинки и ссылки на сайты-->
<script type="text/javascript">
var arr= [
 '<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
 '<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
 '<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
 '<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
 '<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
 '<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
 '<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
 '<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
 '<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
 '<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
 '<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
 '<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',] 
 circularList={name:arr[0]};
 circularList.next=circularList;
 circularList.prev=circularList;
 
for(var i=1;i<arr.length;i++){
  circularList ={name:arr[i],prev:circularList,next:circularList.next};
  circularList.next.prev=circularList ;
  circularList.prev.next=circularList ;
}
// количество видимых элементов в карусели
var citycount = 9;
var it = 0;
 function print(){
   var point=circularList;
   for(var i =0;i<citycount ;i++){
       document.getElementById("id"+i).innerHTML = point.name + "&nbsp;&nbsp;";
       point=point.next;
   }
 }
 function dec(){
   circularList=circularList.prev;
	timeoutdec=setTimeout(dec , 500)
   print();
 } 
 function dec1(){
 clearTimeout(timeoutdec)
 }
 function inc(){
   circularList=circularList.next;
	timeoutinc=setTimeout(inc , 500)
   print();
 }
 function inc1(){
 clearTimeout(timeoutinc)
 }
print();
</script>

Редактируем в коде:
Ссылки на картинки, а также ссылки на сайты ставим в коде сюда (это часть кода) :

//Сюда же ставим ссылки на картинки и ссылки на сайты-->
<script type="text/javascript">
var arr= [
'<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
'<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
'<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
'<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
'<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
'<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
'<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
'<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
'<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
'<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
'<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
'<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',]

Скорость прокрутки галереи вправо:
timeoutdec=setTimeout(dec , 500)
Скорость прокрутки галереи влево:
timeoutinc=setTimeout(inc , 500)
Ссылка на картинку стрелочки влево:
<span id="prev" onmouseover="inc()" onmouseout="inc1()"><img src="http://www.sdws.ru/pictures/prev.png" style="cursor:pointer" width="10" height="13" ></span>
Ссылка на картинку стрелочки вправо:
<span id="next" onmouseover="dec()" onmouseout="dec1()"><img src="http://www.sdws.ru/pictures/next.png" style="cursor:pointer" width="10" height="13"></span>

Отредактировано kolobdur74 (Ср, 3 Апр 2013 01:55:16)

+1

74

Функция "Good" или  "Одобрено".
(Подобие модераторских тегов)

HTML-низ:

Код:
<script>
function addGood(str,from,internal){
var pos=0,pos2=0,newpos=0
if((pos=str.indexOf("[good]",from))==-1) return str;
if((pos2=str.indexOf("[/good]"),pos+6)==-1) return str;
newpos=str.indexOf("[good]",pos+6)
if(newpos<pos2 && newpos!=-1) str=addGood(str,pos+6,true)
if((pos2=str.indexOf("[/good]",pos+6))==-1) return str;
str=str.substring(0,pos)+makeGood(str.substring(pos+6,pos2))+str.substring(pos2+7,str.length)
if( str.indexOf("[good]")!=-1 && internal==false) str=addGood(str,0,false)
return str}

function makeGood(txt){
txt="<div style='clear:both;text-shadow: none;padding: 15px;line-height:17px;15px;background:#d1f7b6;border:1px solid #8bca61;color:#5e9537;'>"+txt+"</div></div><br>"
return txt}


if(document.URL.indexOf("viewtopic.php")!=-1){
elm=document.getElementById("pun-main").getElementsByTagName("div")
for(x in elm) if(elm[x].className=="post-content"){
var post=elm[x]
post.innerHTML=addGood(post.innerHTML,0,false)}}
</script>

HTML в форме ответа:

Код:
<style>
#button-good {background-image:url('http://www.iconsearch.ru/uploads/icons/circularicons/16x16/yes.png'); padding:0; line-height:0; background-position:center; background-repeat:no-repeat; height:26px; width:100%}
</style>
<script type="text/javascript">
if((document.getElementById("navadmin")) && (form=document.getElementById("form-buttons")))
form.getElementsByTagName("tr")[0].insertCell(23).innerHTML="<img src='/i/blank.gif' title='Good' id='button-good'  onclick=\"bbcode('[good]', '[/good]');\"/>"
</script>

Отредактировано Fover (Ср, 20 Мар 2013 15:36:19)

0

75

ruslan_as
Пояснение: Ко мне многие обращались насчет кнопки одобрено и отказано, но не все знают js.
Поэтому я и решил написать такой скрипт. Вроде бы незначительно, но некоторым такое не мешает.

0

76

Видимое сразу для Админов - модеров IP гостя:

Код неактуален, - есть функция от сервиса: http://se.uploads.ru/H0sTj.jpg

Свернутый текст

http://s2.uploads.ru/eyw3f.jpg

В HTML низ

<!-- IP гостя -->
<style type="text/css">
#pun-online .tcl .wink {
  border: 1px solid #999;
  border-radius: 3px;
  font: normal 11px Tahoma;
  color:#000; /* цвет */
  padding: 5px 5px 5px 25px;
  box-shadow: 3px 3px 3px -2px rgba(0,0,0,0.5);
  background: #ffffed url(http://s7.uploads.ru/I6iG2.png) 2px center no-repeat;
}
</style>
<script type="text/javascript">
$('#pun-online .tcl a[title]').each(function() {
   var a=$(this)[0].title;$(this).after(' <span class="wink">'+a+'</span>')
});
</script><!--//End = IP гостя -->



Дополнение: инфа о гео-IP


Добавлено спустя 2 месяца 19 дней 11 часов 19 минут 37 секунд:
Зы: Имеется конфликт со скриптом "Вывод опросов на главной"
если он в наличии, - оставляем наиболее необходимый их этих скриптов на данный момент.

Отредактировано Deff (Вт, 31 Дек 2013 02:09:25)

+6

77

Вариант растягивающейся рамки на Аватар

http://s3.uploads.ru/m9fje.jpg

В HTML верх

<!--Ставим рамки для Аватара -->
<style type="text/css">
li.pa-avatar .Wrp-ava img[alt]{
  display:block;
  padding:0;
  border-width:0;
  margin:6px; /*Отступ рамки*/
}
</style>
<script>
  $(document).ready(function(){
    var imgWrp = "http://s2.uploads.ru/h3rnz.png"; // Ccылка на картинку;

    imgWrp = '<img src="'+imgWrp+'" width=100% height=100% style="position:absolute;z-index:100;"/>'
    $("div.post-author ul li.pa-avatar img[alt]").each(function () {
    $(this).wrap('<div class="Wrp-ava" style="display:inline-block;text-align:left;position:relative;"></div>');
    $(this).parent().prepend(imgWrp)
});});
</script><!--Конец//Рамки для Аватара-->


Вариант: Рамка + меняющаяся прозрачность аватара при наведении

В HTML верх

<style type="text/css">
li.pa-avatar .Wrp-ava img[alt]{
  opacity:0.7; /*Начальная прозрачность*/
  display:block;
  padding:0;
  border-width:0;
  margin:6px; /*Отступ рамки*/
  -webkit-transition-duration: 0.96s;
  -moz-transition-duration: 0.96s;
  -o-transition-duration: 0.96s;
  transition-duration: 0.96s;
}
li.pa-avatar:hover .Wrp-ava img[src*="avatars"]{
  opacity:1.0;
}
</style>
<script>
  $(document).ready(function(){
    var imgWrp = "http://s2.uploads.ru/h3rnz.png"; // Ccылка на картинку;

    imgWrp = '<img src="'+imgWrp+'" width=100% height=100% style="position:absolute;z-index:100;"/>'
    $("div.post-author ul li.pa-avatar img[alt]").each(function () {
    $(this).wrap('<div class="Wrp-ava" style="display:inline-block;text-align:left;position:relative;"></div>');
    $(this).parent().prepend(imgWrp)
});});
</script><!--Конец//Рамки для Аватара-->

Добавлено спустя 3 месяца 16 дней 11 часов 27 минут 46 секунд:

Поправлено в связи с изменениями на сервисе!

Отредактировано Deff (Пн, 8 Июл 2013 06:40:52)

+6

78

Основные Варианты слайдеров тут: Скрипты от пользователей 3

Посколь многие просили добавления скриптов в контент слайдов

Слайдер картинок и контента
с возможностью добавления пользовательских скриптов

http://s3.uploads.ru/jJTgr.png

В HTML верх

<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/0010/b4/f8/71526.css" />
<script type="text/javascript" src="https://forumstatic.ru/files/0010/b4/f8/88003.js"></script>

Туда, где нужен слайдер

<!-- Cлайдер -->
   <div id="slider2" slide-width="772" slide-height="210" class="slider" style="padding:0;height:0;width:0"><style>/*

<!-- Две Кнопки слайдера -->
    <img button-width="42" class="button-left hide" src="http://s3.uploads.ru/KcP7S.png"/>
    <img button-width="42" class="button-right" src="http://s2.uploads.ru/aIH0D.png"/>

<!-- 1-й Контейнер слайдера -->
<div class="slider-content active">

    1-й Контент

</div>
<!-- 2-й Контейнер слайдера -->
<div class="slider-content">

    2-й Контент

</div>
<!-- 3-й Контейнер слайдера -->
<div class="slider-content">

    3-й Контент

</div>

   */</style></div><script>$("#slider2").slideF();</script><!--//End Cлайдер -->

Пояснения



slider2 - красным жирным - уникальный id cлайдера(*прописывается дважды в начале и  конце),
если слайдеров несколько, для каждого свой



<div id="slider2" slide-width="772" slide-height="210" class="slider" style="padding:0;height:0;width:0">  - красным прописываем свои цифры ширины и высоты слайдера;
padding:0 - отступ контента от краёв, обычно при вставке фоновой картинки вместо 0 - прописываем 12px



    <img button-width="42" class="button-left hide" src="http://s3.uploads.ru/KcP7S.png"/>
    <img button-width="42" class="button-right" src="http://s2.uploads.ru/aIH0D.png"/>
- левая и правая кнопка слайдера, красным - ширина  и ссылка на картинку,
значения ширины картинок лучше выставлять равные между собой и идентичные с размерами исходной картинки(хотя... как знаете)



Очередную вкладку слайдера добавляем таким кодом

<!-- 4-й Контейнер слайдера -->
<div class="slider-content">

    4-й Контент

</div>

Красное - Ваш контент



Возможность смены направления движения
и времени анимации слайда:

Дополнительные параметры прописываем в запуске функции, расположенной в конце cлайдера:

<script>$("#slider2").slideF(0,700);</script>

Первая цифра - смена направления - 0 или 1

Вторая цифра примерно от 0 до 800, - время анимации кадра



Что умеет:
Автоцентрирование кнопок по высоте
Автоскролл контента по высоте, при превышении размеров...
Возможность вложенности в таблицы с вкладками,
Возможность установки нескольких слайдеров при использовании единственного скрипта(необходима только смена ID слайдера в очередном контенте, и прописи этого ID в функции запуска
Вставка в контент слайдов пользовательских скриптов
смена направления и времени анимации слайда


Полный Код Демо:

В HTML верх

<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/0010/b4/f8/71526.css" />
<script type="text/javascript" src="https://forumstatic.ru/files/0010/b4/f8/88003.js"></script>
<style>
/**********************
   Контент слайдера

**********************/

#slider2 {
  margin-left:-5px;
  margin-top: 0;
}
.slider-content {
  /*outline:solid 1px red!important;*/
}

.Amin-Moder {
  width: 215px;
  vertical-align:top;
  display:inline-block;
  /*outline:solid red 1px;*/
  margin:34px 35px auto 15px;
}
.Amin-Moder *{
  float:none;
}

.Amin-Moder img{
  float:left;
}
.Amin-Moder img{
  padding:8px;
}
#slider2{
/*background:transparent url(http://s2.uploads.ru/rn5eI.jpg) 0 0 no-repeat;*/
/*outline:solid red 1px!important;*/

}
</style>
<!-- Стиль к скрипту второй вкладки -->
<style>/* объява */
#slideShowContainer{
width:310px;
padding:0;
height:250px;
position:relative;
z-index:1000;
margin-left:10px;
}
#slideShow{
position:absolute;
height:250px;
width:300px;
background-color:#fff;
margin:8px 0 0 10px;
z-index:100;
-moz-box-shadow:0 0 10px #111;
-webkit-box-shadow:0 0 10px #111;
box-shadow:0 0 10px #111;
}
#pictures { position: relative; height: 208px; }
#pictures img { position: absolute; top: 0; left: 0; margin: 10px 0 0 10px;}
#slideShowContainer > a{
border:none;
text-decoration:none;
text-indent:-99999px;
overflow:hidden;
width:36px;
height:37px;
background:url('https://forumupload.ru/uploads/0007/e3/f7/64535-1.png') no-repeat;
position:absolute;
top:50%;
margin-top:-21px;
}
#previousLink{left:-22px;}
#previousLink:hover{ background-position:bottom left;}
a#nextLink{right:-32px;background-position:top right;}
#nextLink:hover{background-position:bottom right;}
</style>

В Объявление:

<div class="wrap-slider2" align="center">
<!-- Cлайдер -->
   <div id="slider2" slide-width="742" slide-height="350" class="slider" style="padding:12px;height:0;width:0"><style>/*

    <img button-width="36" class="button-left hide" src="http://s3.uploads.ru/gwvyS.png"/>
    <img button-width="36" class="button-right" src="http://s3.uploads.ru/TsxA7.png"/>

<!-- 1-й Контейнер слайдера -->
<div class="slider-content active"><span>1</span><br /><br /><br />

    <img style="margin-top:7px;" src="http://s2.uploads.ru/6dc5t.png" width=99% />

</div>

<!-- 2-й Контейнер слайдера -->
<div class="slider-content"><span>2 - Скрипт</span><br />

<center>
<div id="slideShowContainer">
    <div id="slideShow">
    <div id="pictures">
    <img src="https://forumupload.ru/uploads/0007/e3/f7/64525-1.png" alt="" />
    <img src="https://forumupload.ru/uploads/0007/e3/f7/64525-2.png" alt="" />
    <img src="https://forumupload.ru/uploads/0007/e3/f7/64525-3.png" alt="" />
    <img src="https://forumupload.ru/uploads/0007/e3/f7/64525-4.png" alt="" />
    <img src="https://forumupload.ru/uploads/0007/e3/f7/64525-5.png" alt="" />
    <img src="https://forumupload.ru/uploads/0007/e3/f7/64526-1.png" alt="" />
    <img src="https://forumupload.ru/uploads/0007/e3/f7/64526-2.png" alt="" />
    </div>
    </div>
    <a id="previousLink" href="#">&raquo;</a>
    <a id="nextLink" href="#">&laquo;</a>
</div></center>
<!-- галерейка -->
<script>
$(document).ready(function() {
  var z = 0;
  var inAnimation = false;
  $('#pictures img').each(function() {
    z++;
    $(this).css('z-index', z);
    });
  function swapFirstLast(isFirst) {
    if(inAnimation) return false;
    else inAnimation = true;
    var processZindex, direction, newZindex, inDeCrease;
    if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease =

1; }
    else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; }
  $('#pictures img').each(function() {
    if($(this).css('z-index') == processZindex) {
       $(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow',

function() {
       $(this).css('z-index', newZindex)
        .animate({ 'top' : '0' }, 'slow', function() {
           inAnimation = false;
            });
         });
       }
    else {
       $(this).animate({ 'top' : '0' }, 'slow', function() {                     
         $(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease);
          });
       }

    });
    return false;
   }
   $('#previousLink').click(function() {
    return swapFirstLast(false);
   });
   $('#nextLink').click(function() {
    return swapFirstLast(true);
   });
});
</script>

</div>
<!-- 3-й Контейнер слайдера -->
<div class="slider-content"><span>3</span><br /><br /><br /><br />

    <span class="Amin-Moder"><img src="http://s3.uploads.ru/otGwc.png"/></span>
    <span class="Amin-Moder"><img src="http://s3.uploads.ru/otGwc.png"/></span>

</div>

<!-- 4-й Контейнер слайдера -->
<div class="slider-content"><span>4</span><br />

    <span class="Amin-Moder">
Админ-1
<br />
<img src="http://s3.uploads.ru/9sqei.png"/>
<pre>Текст asdasdasd
Текст asdasdasd
Текст asdasdasd
Текст asdasdasd
Текст asdasdasd<br />
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
<br />
</pre>
    </span>
    <span class="Amin-Moder">
Админ-1
<br />
<img src="http://s3.uploads.ru/9sqei.png"/>
<pre>Текст asdasdasd
Текст asdasdasd
Текст asdasdasd
Текст asdasdasd
Текст asdasdasd<br />
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
<br />
</pre>
    </span>

</div>

   */</style></div><script>$("#slider2").slideF();</script><!--//End Cлайдер -->

</div>

Зы: Внимание: Во вкладках слайдера недопустимо использование своих тегов <style> (при их необходимости, выносим из слайдера в HTML верх)

Cкрипт во второй вкладке © скопирован с ForumDesign TS
Благодарим ресурс и лично Герду!

Отредактировано Deff (Вт, 9 Апр 2013 10:19:53)

+2

79

Вспомнил тут про скрипт выпадающего многоуровнего меню, не знаю выкладывали ли его здесь или нет. Скрипт не мой. Возможно кому нибудь пригодится. Его можно использовать как дополнительное меню, так и полностью подменить навигационную панель (имею ввиду: Форум, Участники, Правила..), отключив родную таким скриптом (только сначала поставьте новое меню и проверьте, что оно работает, а потом отключайте):

Код:
<style type="text/css">
#pun-navlinks .container{
display: none;
}
</style>

Это меню выглядит так (цвет надписей и саму панельку можно менять):
http://s2.uploads.ru/GnElq.gif

http://s3.uploads.ru/PRMhr.gif

Итак, сам скрипт:

Код:
<script type="text/javascript">
var images = new Array();
 
function preloadImages(){
    for (i=0; i < preloadImages.arguments.length; i++){
         images[i] = new Image();
        images[i].src = preloadImages.arguments[i];
    }
}
 
preloadImages("files/three_1.png", "files/three_1a.png", "files/arrow_over.png");
 
cdgHover = function() {
        var cssRule;
        var newSelector;
        for (var i = 0; i < document.styleSheets.length; i++)
                for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
                        {
                        cssRule = document.styleSheets[i].rules[x];
                        if (cssRule.selectorText.indexOf("LI:hover") >= 0)
                        {
                                 newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
                                document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
                        }
                }
        var getElm = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<getElm.length; i++) {
                getElm[i].onmouseover=function() {
                        this.className+=" iehover";
                }
                getElm[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" iehover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", cdgHover);

</script>

Само меню:

Код:
<div class='nav'>
 <ul id='nav'>
   <li class='top'><a href='Ваша ссылка' id='' class='top_link'><span class='down'><strong>Меню. Кнопка 1</strong></span></a>
      <ul class='sub'>
	     <li><a href='Ваша ссылка' class='fly'><strong>Меню первого уровня. 1</strong></a>
           <ul>  
	  <li><a href='Ваша ссылка'><strong>Меню второго уровня. 1</strong></a></li>
	  <li><a href='Ваша ссылка'><strong>Меню второго уровня. 2</strong></a></li>
	  <li><a href='Ваша ссылка'><strong>Меню второго уровня. 3</strong></a></li>
	          <li><a href='Ваша ссылка'><strong>Меню второго уровня. 4</strong></a></li>  
   </ul>
           </li>
 <li><a href='Ваша ссылка' class='fly'><strong>Меню первого уровня. 2</strong></a>
           <ul>
	          <li><a href='Ваша ссылка'><strong>Меню второго уровня. 1</strong></a></li>
	  <li><a href='Ваша ссылка'><strong>Меню второго уровня. 2</strong></a></li>
      <li><a href='Ваша ссылка'><strong>Меню второго уровня. 3</strong></a></li>
	  <li><a href='Ваша ссылка'><strong>Меню второго уровня. 4</strong></a></li>	  
   </ul>
           </li>
 <li><a href='Ваша ссылка' class='fly'><strong>Меню первого уровня. 3</strong></a>
           <ul>                                  
      <li><a href='Ваша ссылка'><strong>Меню второго уровня. 1</strong></a></li>
      <li><a href='Ваша ссылка'><strong>Меню второго уровня. 2</strong></a></li>
	  <li><a href='Ваша ссылка'><strong>Меню второго уровня. 3</strong></a></li>
	          <li><a href='Ваша ссылка'><strong>Меню второго уровня. 4</strong></a></li>	  
   </ul>
          </li>
  	   </ul>
    </li>	   
   <li class='top'><a href='Ваша ссылка' id='' class='top_link'><span class='down'><strong>Меню. Кнопка 2</strong></span></a>
      <ul class='sub'>
	     <li><a href='Ваша ссылка' ><strong>Меню первого уровня. 1</strong></a></li>
         <li><a href='Ваша ссылка' class='fly'><strong>Меню первого уровня. 2</strong></a>
      <ul>
	    <li><a href='Ваша ссылка'><strong>Меню второго уровня. 1</strong></a></li>
<li><a href='Ваша ссылка'><strong>Меню второго уровня. 2</strong></a></li>
<li><a href='Ваша ссылка' class='fly'><strong>Меню второго уровня. 3</strong></a>
   <ul>
	          <li><a href='Ваша ссылка'><strong>Меню третьего уровня. 1</strong></a></li>
      <li><a href='Ваша ссылка'><strong>Меню третьего уровня. 2</strong></a></li>
	  <li><a href='Ваша ссылка'><strong>Меню третьего уровня. 3</strong></a></li>	  
   </ul>
                 </li>      
<li><a href='Ваша ссылка' class='fly'><strong>Меню второго уровня. 4</strong></a>
   <ul>
	          <li><a href='Ваша ссылка' class='fly'><strong>Меню третьего уровня. 1</strong></a>
	    <ul>
    <li><a href='Ваша ссылка'><strong>Меню четвертого уровня. 1</strong></a></li>
	<li><a href='Ваша ссылка'><strong>Меню четвертого уровня. 2</strong></a></li>
	<li><a href='Ваша ссылка'><strong>Меню четвертого уровня. 3</strong></a></li>
</ul>
</li>
      <li><a href='Ваша ссылка'><strong>Меню второго уровня. 3</strong></a></li>
                      <li><a href='Ваша ссылка'><strong>Меню второго уровня. 4</strong></a></li>	  
   </ul>
                 </li>
	  </ul> 
  </li>
  <li><a href='Ваша ссылка' ><strong>Меню первого уровня. 3</strong></a></li>
	   </ul>
    </li>	
   <li class='top'><a href='Ваша ссылка' id='' class='top_link'><span><strong>Меню. Кнопка 2</strong></span></a></li>
    </ul>
</div>

Обратите внимание - все уровни кнопок кликабельные, везде можно поставить свою ссылку.
Разберем, что к чему:
<ul class='sub'> - это тег меню, когда меню на кнопке закончилось его закрываем тегом </ul>, также как и в подменю <ul>.

<a href='Ваша ссылка' id='' class='top_link'><span class='down'><strong>Меню. Кнопка 1</strong></span></a>

- это сама кнопка, с которой выпадает меню. Как вы видите ссылка эта имеет класс: class='top_link'

<li><a href='Ваша ссылка' class='fly'><strong>Меню первого уровня. 1</strong></a>

- это меню, которое первым выпадает. class='fly' означает, что оно имеет подменю, и при этом тег <li> не закрываем, пока подменю не закончилось. Если ссылка не имеет подменю, то класс class='fly' не указываем, а тег <li> закрываем таким образом: <li><a href='Ваша ссылка'><strong>Меню четвертого уровня. 1</strong></a></li>  С остальными подменю принцип тот же.

И теперь самое сложное - это настройка меню:

Код:
<style type="text/css">
/*------------------------------- Меню ------------------------------------*/
#nav {width: 100%; top:0; left:0; padding:0; margin: 0; list-style:none; height:35px; background:transparent url(http://s2.uploads.ru/Vgpzo.png) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left; height:38px;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#D1EEEE; text-decoration:none; font-size:18px; font-weight:normal; padding: 0 0 0 4px; cursor:pointer; background: url(http://s2.uploads.ru/Vgpzo.png);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://s2.uploads.ru/Vgpzo.png) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://s2.uploads.ru/vObBI.png) no-repeat right top;}
 
#nav li:hover a.top_link,
#nav li.iehover a.top_link {color:#fff; background: url(http://s3.uploads.ru/JvITO.png) no-repeat; cursor:pointer;}
#nav li:hover a.top_link span,
#nav li.iehover a.top_link span {background: url(http://s3.uploads.ru/JvITO.png) no-repeat right top; cursor:pointer;}
#nav li:hover a.top_link span.down,
#nav li.iehover a.top_link span.down {background: url(http://s2.uploads.ru/qQOKD.png) no-repeat right top; cursor:pointer;}
 
/* Моделирование списка по умолчанию */
 
#nav li:hover {position:relative; z-index:200; cursor:pointer;}
 
#nav li:hover ul.sub
{left:1px; top:35px; background: #1F242B; padding:3px; border:1px solid #000; white-space:nowrap; width:245px; height:auto; z-index:300; cursor:pointer;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:245px; font-weight:normal; cursor:pointer;}
#nav li:hover ul.sub li a
{display:block; font-size:12px; height:18px; width:242px; line-height:18px; text-indent:5px; color:#ccc; text-decoration:none; border:1px solid #1F242B; cursor:pointer;}
#nav li ul.sub li a.fly
{background:#1F242B url(http://s3.uploads.ru/kzSlM.png) 229px 6px no-repeat; cursor:pointer;}
#nav li:hover ul.sub li a:hover
{background:#607B8B; color:#000; border-color:#fff; cursor:pointer;}
#nav li:hover ul.sub li a.fly:hover
{background:#68838B url(http://s2.uploads.ru/YMr8N.png) 229px 6px no-repeat; color:#fff; cursor:pointer; left:1px;}
 
 
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:245px; top:-4px; background: #1F242B; padding:3px; border:1px solid #000; white-space:nowrap; width:245px; z-index:400; height:auto;}
 
#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
 
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#607B8B url(http://s2.uploads.ru/YMr8N.png) 229px 6px no-repeat; color:#000; border-color:#fff;}
 
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#1F242B url(http://s3.uploads.ru/kzSlM.png) 229px 6px no-repeat; color:#ccc; border-color:#fff; border:1px;}
</style>

В самом начале кода идут настройки ширины, высоты и положения панели меню, а также ссылка на картинку фона и шрифт фона:

#nav {width: 100%; top:0; left:0; padding:0; margin: 0; list-style:none; height:35px; background:transparent url(http://s2.uploads.ru/Vgpzo.png) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}

Про остальные настройки: Настройки мною подогнаны наиболее оптимально, но если кому то надо будет что-то поменять, лучше я отдельно объясню, потому что сейчас это займет очень много места, а главное, что может выйти не очень понятно. Настраивать его не очень просто. Выделю только куда ставить картинки:

<style type="text/css">
/*------------------------------- Меню ------------------------------------*/
#nav {width: 100%; top:0; left:0; padding:0; margin: 0; list-style:none; height:35px; background:transparent url(http://s2.uploads.ru/Vgpzo.png) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left; height:38px;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#D1EEEE; text-decoration:none; font-size:18px; font-weight:normal; padding: 0 0 0 4px; cursor:pointer; background: url(http://s2.uploads.ru/Vgpzo.png);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://s2.uploads.ru/Vgpzo.png) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://s2.uploads.ru/vObBI.png) no-repeat right top;}

#nav li:hover a.top_link,
#nav li.iehover a.top_link {color:#fff; background: url(http://s3.uploads.ru/JvITO.png) no-repeat; cursor:pointer;}
#nav li:hover a.top_link span,
#nav li.iehover a.top_link span {background: url(http://s3.uploads.ru/JvITO.png) no-repeat right top; cursor:pointer;}
#nav li:hover a.top_link span.down,
#nav li.iehover a.top_link span.down {background: url(http://s2.uploads.ru/qQOKD.png) no-repeat right top; cursor:pointer;}

/* Моделирование списка по умолчанию */

#nav li:hover {position:relative; z-index:200; cursor:pointer;}

#nav li:hover ul.sub
{left:1px; top:35px; background: #1F242B; padding:3px; border:1px solid #000; white-space:nowrap; width:245px; height:auto; z-index:300; cursor:pointer;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:245px; font-weight:normal; cursor:pointer;}
#nav li:hover ul.sub li a
{display:block; font-size:12px; height:18px; width:242px; line-height:18px; text-indent:5px; color:#ccc; text-decoration:none; border:1px solid #1F242B; cursor:pointer;}
#nav li ul.sub li a.fly
{background:#1F242B url(http://s3.uploads.ru/kzSlM.png) 229px 6px no-repeat; cursor:pointer;}
#nav li:hover ul.sub li a:hover
{background:#607B8B; color:#000; border-color:#fff; cursor:pointer;}
#nav li:hover ul.sub li a.fly:hover
{background:#68838B url(http://s2.uploads.ru/YMr8N.png) 229px 6px no-repeat; color:#fff; cursor:pointer; left:1px;}

#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:245px; top:-4px; background: #1F242B; padding:3px; border:1px solid #000; white-space:nowrap; width:245px; z-index:400; height:auto;}

#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#607B8B url(http://s2.uploads.ru/YMr8N.png) 229px 6px no-repeat; color:#000; border-color:#fff;}

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#1F242B url(http://s3.uploads.ru/kzSlM.png) 229px 6px no-repeat; color:#ccc; border-color:#fff; border:1px;}
</style>

Красным выделена ссылка на картинку фона: http://s2.uploads.ru/Vgpzo.png
Зеленым - панелька со стрелочкой вниз: http://s2.uploads.ru/vObBI.png
Коричневым - панелька с рамкой без стрелочки: http://s3.uploads.ru/JvITO.png
Фиолетовым - панелька с рамкой со стрелочкой: http://s2.uploads.ru/qQOKD.png
Синим - стрелочка вниз (показать не могу - на светлом фоне белая стрелочка не видна)
Голубым - стрелочка вбок.

Отредактировано kolobdur74 (Пт, 26 Апр 2013 19:38:35)

+4

80

Окрас фона сообщений

http://s2.uploads.ru/utg0V.gif

Выбираем цвет, выделяем - давим кнопку

В HTML низ

Код:
<script type="text/javascript"><!--Окрас фона сообщений-->
$(document).ready(function(){
$("#post #button-color").after('<td title="Фон сообщения" id=button-bgColor align=center valign=center><img onclick="bbcode(\'[url=http://PostBgColor]\',\'[/url]\')" src="http://s3.uploads.ru/NqSiY.gif" style="width:22px!important;height:22px!important"/></td>');});
$('.post-content a[href$="PostBgColor"] span').each(function() {
  var color=$(this).css('color');
  var box=$(this).parents('.post-box');
  var quote=box.find('.quote-box');
  box.css({'background-color':color});
  //quote.css({'background-color':color}); //Если нужна окраска цитат - первые две палки убираем
});
</script>

Отредактировано Deff (Вс, 24 Мар 2013 17:22:03)

+2


Вы здесь » Единый форум поддержки » Новые возможности форумов » Скрипты от пользователей 3