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

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

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


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


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

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

61

Автоскройлер (актуально для форумов с высокой шапкой)

Есть такая проблема на форумах с высокой шапкой - при открытии каждой страницы большую часть первого экрана монитора занимает шапка и нужно прокручивать страницу, чтобы добраться до самого форума - сообщений, списков тем и т.п.

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

Предлагаю использовать  скрипт-автоскройлер. Он при загрузке страницы автоматически прокручивает её вниз до навигации по форуму (ссылки "Форум", "Участники", "Поиск" и т.п.)

В HTML-верх:

Код:
<!-- Автоскройлер - автоматическая прокрутка страницы до навигации по форуму (начало) -->
<script type="text/javascript">
$(document).ready(function(){
if(document.URL.indexOf('#')==-1)
scroll(0,parseInt($('#pun-navlinks').offset().top-20));
});
</script>
<!-- Автоскройлер - автоматическая прокрутка страницы до навигации по форуму (конец) -->

При переходе по ссылке на определённое сообщение, т.е. по ссылке вида:

http://forum.mybb.ru/viewtopic.php?id=[id_topic](&p=[id_page])#p[id_post]

автоскройлер не прокручивает страницу до навигации.

Отредактировано RUSSIAN_GOBLIN (Пт, 13 Апр 2012 20:21:25)

+1

62

Скройлер аля Вконтакте для прокрутки страницы вверх

Улучшенная версия этого скройлера здесь.

Скрипт позволяет переходить на предыдущую страницу, а также прокручивать страницу вверх, подобно скройлеру во Вконтакте.

Скрины:

До прокрутки вниз, без наведения курсора на блок скройлера:
--

До прокрутки вниз, при наведении курсора на блок скройлера:
--

После прокрутки вниз, без наведения курсора на блок скройлера:
--

После прокрутки вниз, при наведении курсора на блок скройлера:
--

Ставить в HTML-верх:

Код:
<style type="text/css">
#back-top {
  position:fixed;
  height:100%;
  width:65px;
  top:0px;
  left:0px;
  background:#fff;
  opacity:0.3;
  cursor:pointer;
}
#back-top p{
  padding:3px 0px 0px 2px;
}
#back-top p #up{
  display:none;
}
#back-top:hover {
  opacity:0.85;
  background:#e2eef2;
}
#back-top span {
  font:bold 1.1em Verdana;
  color:#0099cc;
}
</style>

<div id="back-top"><p>
<span id="back">◄ Назад</span>
<span id="up">▲ Вверх</span>
</p></div>

<script type="text/javascript">
var marginpun=$('#pun').offset().left-1, scrolltrig=0;
if(marginpun>65)$('#back-top').css({'width': marginpun});

$(window).scroll(function(){
if ($(this).scrollTop() > 382){
scrolltrig=1;
$('#back-top #back').hide();
$('#back-top #up').show();}
else{
scrolltrig=0;
$('#back-top #up').hide();
$('#back-top #back').show();}
});
  
$('#back-top').click(function () {
if(scrolltrig==1){
$('body,html').animate({scrollTop: $('#pun-navlinks').offset().top-20}, 500);}
else {window.back(1);}});
</script>

Внимание!
Этот скройлер не подойдёт для форума, если расстояние между левым краем окна браузера и контентным блоком форума (#main) меньше 65 пикселей.

Более новая версия здесь.

Отредактировано RUSSIAN_GOBLIN (Пн, 16 Апр 2012 14:04:42)

0

63

Проверка орфографии в сообщении + исправление ошибок

Текущая стадия: тестирование.

Скрипт, при нажатии кнопки -- над формой ответа, проверяет текст, написанного сообщения, на предмет наличия в нём слов с орфографическими ошибками, и исправляет их, заменяя слова с ошибками на правильный вариант.
Проверка орфографии сообщения производится с помощью API Яндекса.

К примеру, это:

Я жыву в гораде Москва. Она самый бальшой горот в Рассии. Мне тут очинь нравется: тут балшие дома, красивые машыны и многа платят за работу. Я передаю очинь радастный привет маим братьям - до сих пор жевущим в Нагорном Карабахе. Не зобывайте миня, друзя.

После нажатия кнопки превращается... превращается... нет, не в элегантные шорты) в это:

Я живу в городе Москва. Она самый большой город в России. Мне тут очень нравится: тут большие дома, красивые машины и много платят за работу. Я передаю очень радостный привет моим братьям - до сих пор живущим в Нагорном Карабахе. Не забывайте меня, друзья.

Скрины:

До:
--

После:
--

Скрипт находится в стадии тестирования: из-за несовершенного способа замены слов с ошибками на правильные, может изменить вовсе не слово с ошибкой, а совсем другое слово... Обо всех ошибках внятно сообщайте (с примерами!) в этой теме.

В HTML-верх:

Код:
<!-- Проверка орфографии в сообщении (начало) -->
<style type="text/css">
td#button-speller {background:url('http://uploads.ru/i/p/I/V/pIViu.gif') no-repeat center !important;}
</style>

<script type="text/javascript">
FORUM.set('editor.speller', {name:'Проверить орфографию',onclick:function(){orfo_test()}});

function orfo_test(){
var txt=$('#main-reply').val();
if(txt=='') return false;
 $.ajax({
   type: "GET",
   url: "http://speller.yandex.net/services/spellservice.json/checkText",
   dataType: "jsonp",
   data: "text="+encodeURIComponent(txt)+"&lang=ru",
   success: function(msg){
     var i=msg.length;
     while(i--)if(msg[i].s!='')txt=txt.replace(msg[i].word,msg[i].s);
     $('#main-reply').val(txt);
   }
 });
}
</script>
<!-- Проверка орфографии в сообщении (конец) -->

Добавлено:
Изменения:

список изменений

1. Если не был подобран правильный вариант слова, то соответствующее слово с ошибкой удалялось.
Исправлено.

Отредактировано RUSSIAN_GOBLIN (Вс, 15 Апр 2012 18:15:08)

+4

64

Переливающиеся ссылки. Новая версия. rps

Спасибо за помощь при разработке mkusher, Deff.
Обновлённая версия старого скрипта для изменению цвета ссылок по наведении курсора. Ставить в ХТМЛ-низ. Работает во всех браузерах.

Код:
<script type="text/javascript">
var rate = 20;
var elmH = 0;
var elmS = 128;
var elmV = 255;
var a;
var i = 0;
var clrOrg;
var aZ;
var TimerID ;

a = document.links;
for (i in a) {
 a[i].onmouseover = function() {
  clrOrg = this.style.color;
  aZ = this;
  TimerID = setInterval(time, 100);
 }
 a[i].onmouseout = function() {
  clearInterval(TimerID); 
  this.style.color = clrOrg;
 }
}

function time() {
 aZ.style.color = makeColor();
}

function makeColor() {
 if (elmS == 0) {
  elmR = elmV; elmG = elmV; elmB = elmV;
 }
 else {
  t1 = elmV;
  t2 = (255 - elmS) * elmV / 255;
  t3 = elmH % 60;
  t3 = (t1 - t2) * t3 / 60;
  if (elmH < 60) {
   elmR = t1; elmB = t2; elmG = t2 + t3;
  }
  else if (elmH < 120) {
   elmG = t1; elmB = t2; elmR = t1 - t3;
  }
  else if (elmH < 180) {
   elmG = t1; elmR = t2; elmB = t2 + t3;
  }
  else if (elmH < 240) {
   elmB = t1; elmR = t2; elmG = t1 - t3;
  }
  else if (elmH < 300) {
   elmB = t1; elmG = t2; elmR = t2 + t3;
  }
  else if (elmH < 360) {
   elmR = t1; elmG = t2; elmB = t1 - t3;
  }
  else {
   elmR = 0; elmG = 0; elmB = 0;
  }
 }
 elmR = Math.floor(elmR);
 elmG = Math.floor(elmG);
 elmB = Math.floor(elmB);
 clrRGB = '#' + elmR.toString(16) + elmG.toString(16) + elmB.toString(16);
 elmH = elmH + rate; if (elmH >= 360) elmH = 0;
 return clrRGB;
}
</script>

+3

65

Переливающиеся ссылки. Новая версия на jQuery  ^^

Код:
<script type="text/javascript">
var color, href, time_color, rate=20, elmH=0, elmS=128, elmV=255;
function rotationColor(){
 if(elmS==0){elmR=elmV;elmG=elmV;elmB=elmV;}
 else {t1=elmV;t2=(255-elmS)*elmV/255;
  t3=elmH%60;t3=(t1-t2)*t3/60;
  if(elmH<60){elmR=t1;elmB=t2;elmG=t2+t3;}
  else if(elmH<120){elmG=t1;elmB=t2;elmR=t1-t3;}
  else if(elmH<180){elmG=t1;elmR=t2;elmB=t2+t3;}
  else if(elmH<240){elmB=t1;elmR=t2; elmG=t1-t3;}
  else if(elmH<300){elmB=t1;elmG=t2;elmR=t2+t3;}
  else if(elmH<360){elmR=t1;elmG=t2;elmB=t1-t3;}
  else {elmR=0;elmG=0;elmB=0;}}
 elmR = Math.floor(elmR);
 elmG = Math.floor(elmG);
 elmB = Math.floor(elmB);
 clrRGB='#'+elmR.toString(16)+elmG.toString(16)+elmB.toString(16);
 elmH=elmH+rate; if(elmH>=360) elmH=0;
 href.css({'color':clrRGB});
}
$('a').hover(function(){href=$(this); color=$(this).css('color'); time_color=setInterval ('rotationColor()',100)},function(){clearInterval(time_color); $(this).css({'color':color});});
</script>

В HTML-низ.

0

66

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

Переливающиеся ссылки. Новая версия. rps

(Ужатая

Пашина Версия кроссдоменная, поэтому ужал в пакере:
(В самый низ, HTML низ

Код:
<script>function Sparkling_links(){var rate=20,eH=0,eS=128,eV=255,a,i=0,clrOrg,aZ,TimerID;
a=document.links;for(i in a){a[i].onmouseover=function(){clrOrg=this.style.color;aZ=this;TimerID=setInterval(time,100)};a[i].onmouseout=function(){clearInterval(TimerID);this.style.color=clrOrg}};a=document.links;for(i in a){a[i].onmouseover=function(){clrOrg=this.style.color;aZ=this;TimerID=setInterval(time,100)};a[i].onmouseout=function(){clearInterval(TimerID);this.style.color=clrOrg}};function time(){aZ.style.color=makeColor()};function makeColor(){if(eS==0){eR=eV;eG=eV;eB=eV}else{t1=eV;t2=(255-eS)*eV/255;t3=eH%60;t3=(t1-t2)*t3/60;if(eH<60){eR=t1;eB=t2;eG=t2+t3}else if(eH<120){eG=t1;eB=t2;eR=t1-t3}else if(eH<180){eG=t1;eR=t2;eB=t2+t3}else if(eH<240){eB=t1;eR=t2;eG=t1-t3}else if(eH<300){eB=t1;eG=t2;eR=t2+t3}else if(eH<360){eR=t1;eG=t2;eB=t1-t3}else{eR=0;eG=0;eB=0}}eR=Math.floor(eR);eG=Math.floor(eG);eB=Math.floor(eB);clrRGB='#'+eR.toString(16)+eG.toString(16)+eB.toString(16);eH=eH+rate;if(eH>=360)eH=0;return clrRGB;}};Sparkling_links();
</script>

Отредактировано Deff (Пн, 16 Апр 2012 13:59:25)

+1

67

Улучшенный вариант скройлера аля  Вконтакте

Предыдущая версия здесь.

Возможности:
1. Возврат на предыдущую страницу.
2. Прокрутка страницы вверх до навигации по форуму или до самого верха.
3. Прокрутка страницы вниз до блоков: статистика форума/форма ответа/ и т.п.

Можно выбрать в скрипте, указав значение параметра scrl, до куда прокручивать вверх:
если scrl=0, то прокручивает до самого верха страницы, иначе до навигации по форуму

Скрины:

1) До прокрутки вниз без наведения / с наведением курсора на блок возврата на предыдущую страницу

----

2) После прокрутки вниз без наведения / с наведением курсора на блок прокрутки вверх

----

Ставить в HTML-верх:

Код:
<!-- Скройлер аля Вконтакте (начало) -->
<style type="text/css">
#scroiller{
  position:fixed;
  height:100%;
  width:65px;
  top:0px;
  left:0px;
  cursor:pointer;
  z-index:10000;
}
#scroiller div{
  padding:3px 0px 0px 2px;
}
#scroiller div#up{
  display:none;
}
#scroiller div{
  height:50%;
  display:block;
  background:#fff;
  opacity:0.3;
}
#scroiller div:hover{
  opacity:0.85;
  background:#e2eef2;
}
#scroiller div{
  font:bold 1.1em Verdana;
  color:#0099cc;
}
</style>

<div id="scroiller">
<div id="back">◄ Назад</div>
<div id="up">▲ Вверх</div>
<div id="down">▼ Вниз</div>
</div>

<script type="text/javascript">
var scrl=1; // если = 0, то прокручивает до самого верха страницы, иначе до навигации по форуму
var marginpun=$('#pun').offset().left-5, scrolltrig=0;
if(marginpun>62)$('#scroiller').css({'width': marginpun});

$(window).scroll(function(){
if ($(this).scrollTop() > 382){
scrolltrig=1;
$('#scroiller #back').hide();
$('#scroiller #up').show();}
else{
scrolltrig=0;
$('#scroiller #up').hide();
$('#scroiller #back').show();}
});
  
$('#scroiller div').click(function () {
if(scrl!=0) scrl=$('#pun-navlinks').offset().top;
switch ($(this).attr('id')){
case('back'):{window.back(1); break;}
case('up'):{$('body,html').animate({scrollTop:scrl}, 500); break;}
case('down'):{$('body,html').animate({scrollTop:$('#pun-break3').offset().top-$(window).height()}, 500); break;}}});
</script>
<!-- Скройлер аля Вконтакте (конец) -->

Отредактировано RUSSIAN_GOBLIN (Пн, 16 Апр 2012 14:03:13)

+4

68

Новый cкрипт статистики

--

В HTML верх

<script src="http://forumstatic.ru/files/0013/49/9f/30122.js"></script>

В начало HTML низ

<script>StatsExportPHP(11,5)</script>

Красным - число строк в таблице (максимально - 21), Синим - кол-во строк с Активными юзерами

Тестируем

Отредактировано Deff (Вс, 12 Окт 2014 18:24:55)

+3

69

Добавка анимированного Конвертика к темам и форумам с новыми сообщениями
(css код)

--

В HTML верх

<style>
div.forum tr.inew td.tcl .tclcon:after,
tr.inew[id^="forum"] td.tcl .tclcon h3 a:after{
content: " " url(http://s7.uploads.ru/ZSrMc.gif);
}
</style>

Отредактировано Deff (Ср, 15 Янв 2014 23:17:42)

+6

70

Сокращенный Вариант от ©kozhilya всплывающее окно цитирования "чисто картинкой"

--

В HTML низ

Код:
<!--Всплывающее окно цитирования--><div id="Bubble" style="margin-left:-20px;margin-top:-12px;display:none;position:absolute;z-index:100000"><span></span></div><script>function PopUpPL_Quote(){var fresh=false,SSsq='<img src="http://uploads.ru/i/n/L/f/nLfG0.png">';$("#Bubble").prependTo("body");$('.post').mouseup(function(pos){var theSelection='';if(window.getSelection&&!$.browser.opera){theSelection=window.getSelection().toString()}else if(document.getSelection){theSelection=document.getSelection()}else if(document.selection){theSelection=document.selection.createRange().text}if(!(theSelection==''||typeof theSelection=='undefined'||theSelection==null)&&!(fresh)){$("#Bubble").css({'left': (pos.pageX+5)+'px', 'top':(pos.pageY+4)+'px', 'display': 'none' });$("#Bubble span").html('<a href="'+$(this).find("li.pl-quote a:first").attr("href")+'">'+SSsq+'</a>');$("#Bubble").fadeIn(200);fresh=true}else if(fresh){fresh=false}});$('#Bubble span').click(function(){$('#Bubble').hide(200);fresh=false});$('.post').mousedown(function(){if(fresh){$("#Bubble:visible").hide(200);fresh=false}});}
if($("#pun-viewtopic").length){PopUpPL_Quote()}
</script>

Отредактировано Deff (Сб, 22 Фев 2014 20:10:25)

+5

71

Новый cкрипт статистики версия №2

--

В HTML верх(или низ)

<script src="http://forumstatic.ru/files/0013/49/9f/58954.js"></script>
<script>StatsExportPHP("#pun-stats h2",11,5)</script>

Красным - число строк в таблице (максимально - 21), Синим - кол-во строк с Активными юзерами ('Cейчас на форуме'
Коричневым жирным - Селектор, вслед за которым ставим наш блок статистики

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

"#pun-ulinks"


Правая нижняя колонка - меняется раз в 4мин.(На следущем обновлении страницы)
Кому нужно =>

текущий стиль колонок таблицы:

<style>
#newstat td.A1,#newstat td.A3,#newstat td.A5{font: normal normal 11px/normal Tahoma;font-weight:700;}
#newstat .A1,#newstat .A3,#newstat .A5{text-align:left;}
#newstat .A2,#newstat .A4{text-align:right;}
#newstat .A2{width:78px;} #newstat .A4, #newstat .A5{width:146px;}
#newstat td.A2,#newstat td.A4{font-weight:400;}
#newstat th{font-size:10px;font-weight:700;}
</style>

Тестируем


Дополнительные Пояснения

Инфа в нижней правой колонке меняется по прошествии двух минут при открытии или рефреше 'Главной'
(*Прим, в Администрировании - Настройки - должна быть включена Подробная статистика

Последовательность смены такая:
1.Администрация
2.Новые Пользователи
3.Самые Активные
4.Самые читаемые темы


Кто хочет убрать нижнюю строку расширенной статистики от сервиса(посколь инфа в таблице) ставим такой код
В HTML верх

<style>.statscon .item5 a[href*="statistic.php"]{display:none;}</style>


Кому не нужны Активные пользователи в данной скрипте,
Выставляем 0 в кол-ве строк для Активных

<script src="http://hostjs-mybb2011.narod.ru/js/NewStatsV2.js"></script>
<script>StatsExportPHP("#pun-stats h2",11,0)</script>

Отредактировано Deff (Вс, 12 Окт 2014 18:26:12)

+2

72

Опрос аля Romych

(идея от Romych)

--

Cкрипт (В HTML низ

Код:
<!--Раскраска Опросов-->
<div class="style1" style="display:none">
div.RL div.111,div.RL h1.111{
 background-image:url(9999);
 background-repeat:repeat-x;
 border:none 0 transparent!important;
 background-color:transparent!important;
 background-clip:border-box;
 height:25px!important;
}
.punbb .main div.RL h1{
 padding:0 0 0 15px!important;
 margin:0px 0 0 -1px;
 background-position:center right!important;
}
div.RL div{
 position:absolute;
 padding:0 0 0 14px;
 margin:-25px 0 0 -14px;
 background-position:center left!important;
}
</div>

<script language="javascript">
var ImgMyArray=new Array(
"http://uploads.ru/t/n/x/w/nxwy9.png",
"http://uploads.ru/t/D/J/O/DJOf4.png",
"http://uploads.ru/t/J/m/d/JmdFo.png",
"http://uploads.ru/t/W/6/t/W6tLA.png",
"http://uploads.ru/t/F/I/u/FIuDg.png",
"http://uploads.ru/t/W/e/f/WefAz.png",
"http://uploads.ru/t/8/r/Q/8rQkI.png"
)
var Z=$("div.style1").html();
var XX=ImgMyArray.length;
var j=0; var Zsum='';

$("#poll-special .poll2 td h1").each(function(i){$(this).wrap('<div class=RL></div>');
$(this).after('<div class=e'+i+'></div>')
if(j==XX){j=0}; Zsum+=(Z.replace(/111/img,'e'+i+'')).replace(/9999/img,ImgMyArray[j]);//alert(Zsum)
$(this).addClass('e'+i);
j++;
});
$("div.style1").html('<style>'+Zsum+'</style>')
$("div.RL h1").each(function() {
$(this).data('origWidth', $(this).width()).width(0).animate({width: $(this).data('origWidth')}, 1200);
});
</script><!--//End /=Раскраска -->

Некие пояснения

1. Картинки-полоски в скрипте - коротковаты (нун длиннее
2. Лучше не меняя высоты картинок(сделать их уже, а для сдержанности - полупрозрачными
3. Можно сделать вообще их маленьким Шариком, тогда итоговый вид полосы будет => --
Тут вродь с формой можно фантазировать, и вертикальный штрих, и элипс и треугольник...

Заказать пачку картинок(сейчас их 7, хотя можно их сделать больше количеством или меньше) можно тут => http://forumd.ru/viewtopic.php?id=1777

Cелекторы элементов (Всего их три)
--



Вариант 2
(с Одной картинкой

--

В HTML низ

<!--Раскраска Опросов-->
<style>
.punbb .main div.RL h1{
background-image:url(http://uploads.ru/i/f/R/D/fRDid.png);
background-repeat:repeat-x;
border:none 0 transparent!important;
background-color:transparent!important;
background-clip:border-box;
height:20px!important;
padding:0 0 0 20px!important;
margin:0;
background-position:-5px 50%!important;
    border-radius:15px;
    -webkit-border-radius:15px;
    -khtml-border-radius:15px;
    -moz-border-radius:15px;
    -o-border-radius:15px;
}
</style>

<script language="javascript">
$("#poll-special .poll2 td h1").each(function(i){$(this).wrap('<div class=RL></div>');});
$("div.RL h1").each(function(){
$(this).data('origWidth', $(this).width()).width(0).animate({width: $(this).data('origWidth')}, 1200);
});</script><!--//End /=Раскраска -->


Двух цветный:

--

Код:
<!--Раскраска Опросов-->
<style>
.punbb .main div.RL.rL0 h1{
 background-image:url(http://uploads.ru/i/I/l/9/Il9S4.png);
}
.punbb .main div.RL.rL1 h1{
 background-image:url(http://uploads.ru/i/f/R/D/fRDid.png);
}
.punbb .main div.RL h1{
 background-repeat:repeat-x;
 border:none 0 transparent!important;
 background-color:transparent!important;
 background-clip:border-box;
 height:20px!important;
 padding:0 0 0 20px!important;
 margin:0;
 background-position:-175px 50%!important;
    border-radius:15px;
    -webkit-border-radius:15px;
    -khtml-border-radius:15px;
    -moz-border-radius:15px;
    -o-border-radius:15px;
}
</style>

<script language="javascript">
ImgMy='http://uploads.ru/i/F/p/4/Fp47A.png';j=0;
$("#poll-special .poll2 td h1").each(function(){if(j==2){j=0};$(this).wrap('<div class="RL rL'+j+'"></div>');j++;});
$("div.RL h1").each(function(){
$(this).data('origWidth', $(this).width()).width(0).animate({width: $(this).data('origWidth')}, 1200);
});</script><!--//End /=Раскраска -->

Отредактировано Deff (Чт, 26 Апр 2012 14:51:32)

+2

73

Раскраска поддерживающаяся и при выводе Опросов на Главную => Скрипты от пользователей  пост 650
--

В Конец HTML низ

Код:
<!--Раскраска Опросов-->
<style>
.punbb .main div.RL.rL0 h1{
 background-image:url(http://uploads.ru/i/7/Z/k/7ZkOw.png)!important;
}
.punbb .main div.RL.rL1 h1{
 background-image:url(http://uploads.ru/i/I/l/9/Il9S4.png)!important;
}
.punbb .main div.RL h1{
 background-repeat:repeat-x;
 border:none 0 transparent!important;
 background-color:transparent!important;
 background-clip:border-box;
 height:20px!important;
 padding:0 0 0 20px!important;
 margin:0;
 background-position:-175px 50%!important;
    border-radius:15px;
    -webkit-border-radius:15px;
    -khtml-border-radius:15px;
    -moz-border-radius:15px;
    -o-border-radius:15px;
}
</style>

<script language="javascript">
function Raskrask(){
ImgMy='http://uploads.ru/i/F/p/4/Fp47A.png';j=0;
$("#poll-special .poll2 td h1").each(function(){if(j==2){j=0};$(this).wrap('<div class="RL rL'+j+'"></div>');j++;});
$("div.RL h1").each(function(){
$(this).data('origWidth', $(this).width()).width(0).animate({width: $(this).data('origWidth')}, 1200);
});}Raskrask();
if($("#pun-index").length){$(window).load(function (){Raskrask();});}
</script><!--//End /=Раскраска -->

Отредактировано Deff (Сб, 7 Сен 2013 21:29:21)

0

74

Идея: sas9568635

Просмотр сообщений оффлайн

Обсуждение
Демонстрация (Проблема с кодировкой связана с хостингом, на mybb всё будет пучком.)

Маленькая, но полезная примочка, позволяющая смотреть, как будет выглядеть ваше сообщение без перехода на страницу вида --, даже без подключения к интернету.
--
Вот сам устанавливаемый код:

<script src="http://forumstatic.ru/files/0010/74/32/62633.js"></script>
<script>$('.formsubmit').append(' <input type="submit" class="button" name="offlinePrev" value="Просмотр в оффлайне" onclick="return false;" />'); $('#post-form fieldset').before('<fieldset id="post-preview" style="display: none"><legend><span>Предварительный просмотр сообщения</span></legend><div class="fs-box"><div class="post-box"><div class="post-content"></div></div></div></fieldset>'); $('.formsubmit input[name="offlinePrev"]').click(function() { if ($('#post-preview .post-content')) GetBBCodeOffline($('#post-preview .post-content')[0], $('textarea#main-reply').val()); $('#post-preview').css({'display': 'block'}); });</script>

Скрипт создаёт над формой ответа панель предварительного просмотра с отпарсенным кодом. Зелёный текст - надпись на кнопке. Если вас не устраивает панель просмотра над полем ввода, замените красное слово на after. А если вас в принципе не устраивает панель, но зато устроит отдельное окно, то синий текст можете заменить на следующий:

bbPreview = window.open("", "", "height=450, width=900, top=50, left=50, scrollbars=1"); bbPreview.document.write(GetBBPreviewCode($('#post-preview')[0])); bbPreview.document.close();

Тогда при нажатии на кнопку появится отдельное окно, в котором будет отображаться содержимое. Однако, в силу особенностей работы браузеров, окно может некорректно отображать фон окна предварительного просмотра при отсутствии подключения к интернету (точнее, фона может не быть вообще, а шрифт будет стандартный, Times New Roman). Однако при использовании этого окна шанс получить более точное отображение сообщения повысится за счёт перезапуска скриптов, стоящих html-верху и низу. В общем, решать вам: точность отображения или способность корректно работать при отсутствии подключения к интернету.


Бонус

Также полезная примочка для тех, у кого много своих bb-кодов: возможность добавлять свои теги в стандартный список, сделанный мной. Делается это таким кодом (ставить надо сразу после <script>!!!):

bbtags.set('Название тега', { params: false, variants: false, double: true, result: '<span style="border: 1px solid blue">$1</span>' });

Параметры:
Красное - название тега. Но ставить надо не текст с кнопки, а сам тег без квадратных скобок. То есть для тега [b] названием является 'b', для [quote] - 'quote' и т.д.
Синее - boolean'овская величина, определяющая наличие параметров в теге. true сответствует наличию параметра (на подобии тегов [font], [align] и проч.); false - отсутствие параметра ([b], [img]).
Жёлтый - вот этот параметр трогать не советую, ставьте false. Значение true ставится для тегов типа [quote] и [hide], то есть у которых нельзя заранее сказать, есть ли параметр или нет. В этом случае params ставится true, а double - true. Кроме того, вместо result надо делать result1 и result2, но об этом позже.
Пурпурный - требуется ли закрывающий тег. false ставится для таких тегов, как [you] и [hr], для всех остальных - true.
Зелёный - паттерн замены - регулярное выражение, которое приведёт к созданию html-кода. При определении параметра variants как true, вместо этого параметра ставятся result1 и result2 (При наличии и при отсутствии параметра соответственно).

Минигайд по созданию паттернов

Паттерн для тегов без параметра (на примере тег [b]).
Все теги без параметров имеют вид [tag] . . . [/tag]. Для таких тегов паттерны однотипны и просты:

<strong>$1</strong>

Красный - тег(и), предшествующие тексту, заключённому тексту
Синий - выделяемый текст
Зелёный - тег(и), предшествующие тексту, заключённому тексту

Паттерн для тегов с параметром (на примере тег [color]).
Все теги без параметров имеют вид [tag=параметр] . . . [/tag]. Для таких тегов паттерны более сложны, и надо знать, куда вставлять параметр:

<span style="color: $1">$2</span>

Красный - тег(и), предшествующие тексту, заключённому тексту
Пурпурный - параметр тега
Синий - выделяемый текст
Зелёный - тег(и), предшествующие тексту, заключённому тексту

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

bbtags.set('tag', { params: false, variants: false, double: true, result: '<span style="border: 1px solid blue">$1</span>' });

Такой тег выделяет текст в синюю рамку.
А можно сделать так:

bbtags.set('tag', { params: true, variants: false, double: true, result: '<span style="border: 1px solid $1">$2</span>' });

Тогда текст будет выделяться рамкой, цвет которой задаётся в параметре.

Если же у вашего тега более сложная обработка, то сделайте для пред.просмотра окно (см. выше)

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

По всем вопросом пишите в тему, которую я указал в начале сообщения. Желаю услышать любую критику и предложения.
Объясняю, как всегда, криво :|

Отредактировано kozhilya (Сб, 28 Апр 2012 17:49:00)

+3

75

Гугло-автопереводчик на страницу

на ЕТП предложен gaadst

--

Ставим туда, куда нужно:

Код:
<noedit><div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
$(document).ready(function(){
  new google.translate.TranslateElement({
    pageLanguage: 'ru'
  }, 'google_translate_element');
});
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>

Отредактировано Deff (Вс, 8 Июл 2012 01:00:06)

+2

76

Вклеить в страницу форума полюбившеся кино или музыкальный трек (без лишних добавок или рекламы), которые  еще и не скачиваются с  сайта,
Удививший или поразивший новый эффект скрипта или сss на инет ресурсе,
вставить игру (да так, чтобы было непонятно - она на данной странице или где еще)
вставить продвинутое радио, с много выбором

Вот это возможно позволит следующий скрипт:

Вклейка в сообщение области фрейма нужных размеров, с нужным позиционированием и без скроллинга

--

В HTML верх

<!-- Фрейм в Постах by_Deff Ч1-HTML верх-->
<style type="text/css">
div[onclick*="toggleClass"]{
position:relative;z-index:120;
}
div.FRAmeWrap{
background-color:#000;
/*border:1px solid red;*/
padding:0;margin:0;
background-image:url(http://uploads.ru/i/0/S/c/0ScZL.gif);
/*background-color:#fff;
background-image:url(http://uploads.ru/i/0/k/H/0kH4i.gif);*/
background-position:center center;
background-repeat:no-repeat;
}
</style>
<script type="text/javascript" src="http://hostjs-mybb2011.narod.ru/js/SetFrameinPost.js"></script>
<!-- Фрейм в Постах by_Deff HTML верх-->


В Начало HTML низ

<!-- Фрейм в Постах by_Deff Ч2-HTML низ-->
<script type="text/javascript">
//Advanced_settings(true) - Расширенные Установки включены;
//Advanced_settings(false)- Расширенные Установки выключены;
//=============================================//
   Advanced_settings(false)
</script><!-- //End//Фрейм в Постах by_Deff Ч2-HTML низ-->


Есть Расширенные установки и есть стандартные(сейчас Выставлены - стандартные (см красным)


мини-Пояснения

Вид тега в сообщении такой

Синим - ссылка; Красным - Ширина и Высота фрейма
Пурпурным - позиция  фреймо-окна от верха фреймо-страницы, и от левого Края
На скриншоте ниже - показано местонахождения и отсчет указанных в теге параметров
(Необходимые пояснения даются по ходу ввода тега в сообщение,

--

*Точные значения удобно определять по скриншоту вставляемого сайта


Вид кнопки - таков => --


Примеры

фреймы можно вставить и в HTML верх/низ и Объявление, и на свою страницу.
(В HTML низ, вставляемые код с тегом должен идти Выше части скрипта, вставленного в HTML низ)
При вставке не в сообщение тег дополняем обрамлением синим =>

<div class="post-content">
[chess_frame=....] Тут вставлем тег с нужными параметрами
</div>


Код вставки "Русского Радио" в Объявление(после установки скрипта:

<div class="post-content">
[chess_frame=http://www.moskva.fm/play/4000/1335772800,658,460,10,0]
</div>

Код вставки радио "Романтика" в Объявление(после установки скрипта:

<div class="post-content">
[chess_frame=http://www.moskva.fm/play/4026/translation,655,469,63,0]
</div>


Дополнения:

Посколь фреймы при количестве два и более, - тормозят загрузку страницы:

1. Организована возможность скрытия фрейма под спойлер без загрузки в закрытом состоянии
2. Назначено уведомление о скрытии второго и более фрейма в одном сообщении
3. Реализовано сохранение неизменной ширины фрейма при скрытии под спойлер

При необходимости скрытия фреймов под спойлер в HTML страницы(HTML верх/низ или Объявление) , a не в сообщениях топика, - требуется дополнительное обрамление тега,
-Выделено синим:

<div class="post-content">
<div class="quote-box spoiler-box"><div onclick="$(this).toggleClass('visible'); $(this).next().toggleClass('visible');">Свернутый текст</div><blockquote>

[chess_frame=http://chess-samara.ru/2933351-igra-Evgo-vs-Moskalenko,700,510,270,300]
</blockquote></div>
</div>


Для не mybb сайтов, - необходимо наличие jQuery-плагина, установленного до первой части скрипта!

И дополнительный код css установки стиля для Спойлера

<style type="text/css">
.post-content .spoiler-box > div {
background: url("http://st0.bbcorp.ru/img/plus.png") 0% 50% no-repeat transparent;
cursor: pointer;
padding-left: 18px;
}
.post-content .spoiler-box > div.visible {
background-image: url("http://st0.bbcorp.ru/img/minus.png");
}
.post-content .spoiler-box > blockquote {
display: none;
padding-top: 1.4em;
}
.post-content .spoiler-box > blockquote.visible {
display: block;
}
</style>

Отредактировано Deff (Сб, 11 Окт 2014 01:45:45)

+4

77

Копирование в Буфер обмена Содержимого Блоков Код  и
текстов cообщений при отправке/предпросмотре

--

Зы: к DEMке

(кликните на Код в Блоке Код и попробуйте набить текст в поле ответа и отправить сообщение.
После попытки отправки сообщения(несмотря на фразу: из несанкционированного источника) у Вас в буфере обмена остаётся полный текст отправляемого сообщения)

В HTML верх

<script>var swf_file='http://forumstatic.ru/files/000c/c1/da/68352.swf'</script>
<script type="text/javascript" src="http://forumstatic.ru/files/000c/c1/da/98903.js"></script>
<script type="text/javascript" src="http://hostjs-mybb2011.narod.ru/js/mybbCopy_toClipboard.js"></script>
<style type="text/css">
.punbb .code-box strong a{
color:#2B6D9F;
}
.code-box strong:hover a{
  text-decoration:none;
  color:#000;
}
</style>

Синим стиль для выделения кликабельной части в Блоке Код:


С ИЕ как всегда проблемы - Если у всех -можно копировать по умолчанию, у этого ток после положительного ответа на вопрос


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

..А можно отправку кода в буфер отдельно от добавления при отправке?...

Копирование только блока Код:

В HTML верх

<script>var swf_file='http://forumstatic.ru/files/000c/c1/da/68352.swf'</script>
<script type="text/javascript" src="http://forumstatic.ru/files/000c/c1/da/98903.js"></script>
<script type="text/javascript" src="http://hostjs-mybb2011.narod.ru/js/Block_codeCopy_toClipboard.js"></script>

<style type="text/css">
.punbb .code-box strong a{
color:#2B6D9F;
}
.code-box strong:hover a{
  text-decoration:none;
  color:#000;
}
</style>


Тестируем

Отредактировано Deff (Пн, 14 Май 2012 22:36:45)

+2

78

mihka1980

Скройлер аля Вконтакте, стрелки справо (от RUSSIAN_GOBLIN

Код:
<!-- Скройлер аля Вконтакте (начало) -->
<style type="text/css">
#scroiller{
  position:fixed;
  height:100%;
  width:35px;
  top:0px;
  right:0px;
  cursor:pointer;
  z-index:10000;
}
#scroiller div{
  padding:3px 0px 0px 0px;
}
#scroiller div#up{
  display:none;
}
#scroiller div{
  height:50%;
  display:block;
  background:#fff;
  opacity:0.3;
}
#scroiller div:hover{
  opacity:0.85;
  background:#e2eef2;
}
#scroiller div{
  font:bold 1.1em Verdana;
  color:#0099cc;
}
</style>

<div id="scroiller">
<div id="back">< Назад</div>
<div id="up"><img src="http://uploads.ru/i/d/y/F/dyFlO.png"/></div>
<div id="down"><img src="http://uploads.ru/i/F/J/8/FJ8Z0.png"/></div>
</div>



<script type="text/javascript">
var scrl=1; // если = 0, то прокручивает до самого верха страницы, иначе до навигации по форуму
var marginpun=$('#pun').offset().left+5, scrolltrig=0;
if(marginpun>62)$('#scroiller').css({'width': marginpun});

$(window).scroll(function(){
if ($(this).scrollTop() > 382){
scrolltrig=1;
$('#scroiller #back').hide();
$('#scroiller #up').show();}
else{
scrolltrig=0;
$('#scroiller #up').hide();
$('#scroiller #back').show();}
});
  
$('#scroiller div').click(function () {
if(scrl!=0) scrl=$('#pun-navlinks').offset().top;
switch ($(this).attr('id')){
case('back'):{window.back(1); break;}
case('up'):{$('body,html').animate({scrollTop:scrl}, 500); break;}
case('down'):{$('body,html').animate({scrollTop:$('#pun-break3').offset().top-$(window).height()}, 500); break;}}});
</script>
<!-- Скройлер аля Вконтакте (конец) -->

Отредактировано Deff (Вт, 22 Май 2012 13:11:36)

+2

79

Мне кажется не плохо выглядит

--

1 пример:
--

Код:
<script src="http://pip.qip.ru/js/pip_button.js?type=1" type="text/javascript" charset="utf-8"></script>

2 пример
--

Код:
<script src="http://pip.qip.ru/js/pip_button.js?type=2" type="text/javascript" charset="utf-8"></script>

Коды вставлять в HTML в форме ответа

Может кому пригодится

+3

80

Ну, пока форум, на котором я в основном сижу, лежит из-за полетевшей у админа мат. платы, я наваял небольшой скрипт, который будет весьма полезен для народа. Да, я знаю, что у Ромыча есть подобное, но... Лично мне такая реалезация не нравится: слишком сложно, если надо ввести простой текст. Итак...

Простая всплывающая подсказка


Код маленький. Вот он:
html-верх

Код:
<script>FORUM.set('editor.title', {name:'Всплывающая подсказка',onclick:function() { tag_title() }});</script>
<style>td#button-title { background-image:url('http://www.iconsearch.ru/uploads/icons/crystalclear/16x16/edit_add.png'); }</style>

html-низ

Код:
<script>$("div.post .post-content:contains('\[title')").each(function (){ $(this).html($(this).html().replace(/\[title=([^\]]*?)\]((?:.(?!\[\/title\]))*.)\[\/title\]/mg,'<acronym title="$1">$2</acronym>'))});
function tag_title() { if (a = prompt('Введите текст подсказки', '')) { bbcode('[title='+a+']','[/title]')}}</script>
<script src="http://forumstatic.ru/files/0010/74/32/89504.js">
</script>

Стили. Их надо ставить обязательно либо в html-верх, либо в html-низ, либо в "Свой стиль" (в этом случае убрать красные слова). Синие строки не менять.

<style>
acronym {
  border-bottom: 1px dotted;
  cursor: help;
}
div#qTip {
  padding: 3px;
  border: 1px solid #666;
  display: none;
  background: #999;
  color: #FFF;
  font: bold 9px Verdana, Arial, sans-serif;
  position: absolute;
  z-index: 1000;

}
</style>

Демонстрация

Вот и всё.

Внутри тега работают только теги [b] и [s].

Отредактировано kozhilya (Сб, 12 Май 2012 16:13:08)

+3


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