Форумы » MPCHAT - CMS хостинг чатов для профессионалов »

JavaScript - Скрипты



1 ... 7 8 9 10

1390
ВанькаRU
[b]Простое и прозрачное окно для безфреймовой версии.[/b] Будем рассматривать версию под [u]смайлы[/u].
Как только мы нажимаем на кнопку, открывается окно со смайлами. Мы выбираем смайл и окно закрывается, при этом он вписывается в строку сообщения.

Для начала в ваш [i]style.css[/i] напишем новые стили и назовём это к примеру [i]fastsmile[/i]:

#fastsmile {
position: absolute;
right: [color=green]412[/color]px;
top: [color=green]125[/color]px;
border:solid #A8A8A8 1px;
z-index: 10;
width:[color=purple]200[/color]px;
height: [color=purple]100[/color]px;
overflow: hidden;
background-color:#FFFFFF;
color:#000000;
text-align:center;
padding:0px;
}

[b][color=green]Зелёным[/color][/b] задаётся позиция, а именно 412 пикселей сдвиг с правой стороны на лево, сдвиг на 125 сверху вниз.
[b][color=purple]Фиолетовым[/color][/b] задаются размеры окна то есть: 200 пикселей по ширине и 100 по высоте.
Остальные значения не буду описывать, думаю не составит труда разобраться вам самим.

Далее вставляем в документ [i]Чат внутри[/i] этот код:

<div id="fastsmile" style='filter:alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7;'>
<a href=# onclick="parent.sendto(' *код смайла '); document.getElementById('fastsmile').style.display='none'; return false;"><img src=ссылка на смайл border=0></a>
<a href=# onclick="parent.sendto(' *код смайла '); document.getElementById('fastsmile').style.display='none'; return false;"><img src=ссылка на смайл border=0></a>
<table align=right><tr><td><button type="ok" style="border: 0px #B2B2B2 solid; background-color: #ffffff; font-size: 11px; font-family:Arial;" value="закрыть" onclick="document.getElementById('fastsmile').style.display='none'; return false;">закрыть окно</button></td></tr></table>
</div>

[b]style='filter:alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7;'[/b] Управляет прозрачностью блока. Вы можете поменять значение или просто убрать стиль.
[b]document.getElementById('fastsmile').style.display='none';[/b] Функция закрывающая блок. Можете убрать её, если хотите что-бы после нажатия на смайл окно не закрывалось.

И наконец ставим саму кнопку в любое удобное для вас место:

<a href="#" onclick="document.getElementById('fastsmile').style.display='block'; return false;" title="Всплывающее окно">Быстрые смайлы</a>

Вот и всё 😀

Отредактировано ВанькаRU - 22.06.2011
215
Rafer
Скрипт работает через функ. [b]title="текс"[/b]
Можно вставлять "Чат внутри" в самый конец функ.
Моно настраивать цвета текста, фона, обводки.

[code]<script type="text/javascript">
var styles = 'font:12px Tahoma;padding:4px; background:#181c21; border: 1px solid #555555; -moz-border-radius:6px;-webkit-border-radius:6px; border-radius: 6px; color:#ffffff;'; // стили
var opacit = 100; // прозрачность в процентах
var optime = 100; // скорость появления
var tposit = 4; // количество пикселей
IE=/*@cc_on!@*/false;var elems=document.getElementsByTagName("*");for(var i=0;i<elems.length;i++){if(elems[i].title){elems[i].onmouseover=function(e){var k=[];var j=[];var f=[];var h=[];var g=new Date().getTime();j[g]=this.title;this.title="";k[g]=document.createElement("DIV");k[g].innerHTML="<div style='"+styles+"'>"+j[g]+"</div>";k[g].style.cssText="position:absolute;opacity:0;filter:alpha(opacity=0);z-index:9999;";document.body.appendChild(k[g]);k[g].style.top=mouse(e).y-tposit-k[g].offsetHeight+"px";k[g].style.left=mouse(e).x+tposit+"px";document.onmousemove=function(b){k[g].style.top=mouse(b).y-tposit-k[g].offsetHeight+"px";k[g].style.left=mouse(b).x+tposit+"px"};h[g]=setTimeout(function(){fade(k[g],opacit,optime,function(){if(IE){k[g].style.removeAttribute("filter")}})},150);this.onmouseout=window.onunload=function(){clearTimeout(h[g]);document.onmousemove="";this.title=j[g];fade(k[g],0,optime,function(){document.body.removeChild(k[g])})}}}}function mouse(g){var j,f,k,c,h;j=document;h=IE?window.event:g;f=j.documentElement.scrollTop?j.documentElement.scrollLeft+h.clientX:j.body.scrollLeft+h.clientX;k=j.documentElement.scrollTop?j.documentElement.scrollTop+h.clientY:j.body.scrollTop+h.clientY;return{x:f,y:k}}function fade(f,b,a,c){if(IE){d=f.style.filter.replace(/.*opacity=([0-9]*).*/,"$1");if(!d){d=100}d=parseFloat(d)}else{var d=f.style.opacity;if(d==""){d=1}d=parseFloat(d);b=b/100}var e=new Date().getTime();setTimeout(function(){var g=(new Date().getTime())-e;var h=g/a;var j=(b-d)*h+d;if(IE){f.style.filter="alpha(opacity="+j+")"}else{f.style.opacity=j}if(h<1){setTimeout(arguments.callee,10)}else{if(IE){f.style.filter= "alpha(opacity="+b+")"}else{f.style.opacity=b}if(c){c()}}},10)};
</script>[/code]
Себе ставил, работает.

Отредактировано Rafer - 14.11.2011
1555
TheDark
[b]«Динамичный» блок новостей[/b]

Для начала создадим на всех нужных страницах сайта блок [b]id="news"[/b] со следующим содержимым:
[code]<div id="news">
<script src="news.js" type="text/javascript"></script>
</div>[/code]
Далее в корень сайта заливаем файл [b]news.js[/b] следующего содержания:
[code]var newsOne = 'Название новости №1';
var newsTwo = 'Название новости №2';
var newsThree = 'Название новости №3';

document.write('<a href="#">'+newsOne+'</a><a href="#">'+newsTwo+'</a><a href="#">'+newsThree+'</a>');[/code]
Естественно, вместо [b]#[/b] ставим ссылку на саму новость.

Таким образом, если установить блок с новостями на несколько страниц сайта, то его содержимое не нужно будет менять на каждой странице. Достаточно лишь изменить один js файл - и на всех страницах, где установлен этот блок изменится его содержание.

Также, так как каждая новость имеет свою переменную ([i]newsOne[/i], к примеру) ее, если нужно, можно отобразить в любом другом месте сайта:
[code]document.write(newsOne);[/code]
Все, что осталось сделать - оформить с помощью CSS блок новостей и все готово. Тут уж дело вашей фантазии.

[color=gray]К ссылкам, кстати, рекомендую использовать параметр [b]display: block;[/b]. В противном случае, в файл скрипта добавьте тег [b]<br>[/b] после каждой ссылки, чтобы перенести ее на другую строку.[/color]

Точно также можно сделать и меню на сайте. Тогда добавление новых пунктов или удаление старых не будет проблемой.

Отредактировано TheDark - 30.03.2012
1007
BETEPAH
Задумался о возможности проверки [b]активна ли вкладка с чатом[/b] в настоящий момент.
[b]1) [/b]Может пригодиться, например, для: выдачи звуковых уведомлений о сообщениях только при неактивной вкладке, как это реализовано в мессенджерах (Skype, ICQ, etc.). Вот такой вот скрипт есть:
[code]//проверка активна ли в настоящий момент вкладка браузера
var isActive = true;
function onBlur() {isActive = false;};
function onFocus() {isActive = true;};
if (/*@cc_on!@*/false) { // для Internet Explorer
document.onfocusin = onFocus;
document.onfocusout = onBlur;
} else {
window.onfocus = onFocus;
window.onblur = onBlur;
}[/code]
Соответственно, при вставке звука в сообщение проверяем булеву переменную isActive -
[code]if(!isActive) {
//...добавляем звук.
}[/code]
[b]2) [/b]Еще один вариант использования - останавливать прокрутку при потере фокуса. Отвлёкся человек от чата, остановилась прокрутка, вернулся в окно чата и продолжил читать переписку с места остановки. Правда, с первым же сообщением после возвращения лог прокрутится вниз, но будет визуально видно, как много за это время наговорили. Ну и эффект должен понравиться чатланам 😉 В общем, как-то так примерно:
[code]function wr(text) {
...
if(loaded==1 && isActive) up();
}[/code]
Или при потере фокуса ставить в лог какой-то разделитель, как это реализовано, например, в [url=http://chat.stackoverflow.com/rooms/17/javascript]чате "переполнения буфера"[/url] 😉
Что-то вроде
[quote]var divider = '----------&darr;';
function onBlur() { // окно с чатом теряет фокус
while (document.getElementById('divider')) document.getElementById('leftdiv').removeChild(document.getElementById('divider'));
wr(divider);
};
if (/*@cc_on!@*/false) { // для Internet Explorer
document.onfocusout = onBlur;
} else {
window.onblur = onBlur;
}
// в функцию wr(text) добавить синее
...
var div=document.createElement('div'); div.innerHTML= text;
[color=blue]if (text == divider) div.id = 'divider';[/color]
leftdiv.appendChild(div);[/quote]
[b]3) [/b]Для использующих скрипт [url=https://forum.vmeste.eu/viewtopic.php?pid=245636#p245636]сколько фраз написано вам пока вы молчали[/url] можно сделать сброс счетчика при получении окном фокуса:
[code]function onFocus() {str_plus(0);};
if (/*@cc_on!@*/false) { // для Internet Explorer
document.onfocusin = onFocus;
} else {
window.onfocus = onFocus;
}[/code]
P.S. само собой содержимое функций onBlur и onFocus может содержать все из перечисленных действий одновременно.

Отредактировано BETEPAH - 30.09.2012
1007
BETEPAH
Функция для [b]склонения существительных[/b] по падежам. В зависимости от числа-значения вернет вместе с числом считаемое существительное в нужном падеже.
Для того, чтоб страницы не выглядели безграмотными с выражениями "Сегодня чату 21 дня" или "Сейчас в чате 11 человека".
[code]// функция для склонения слов (значение, "(1)день", "(2)дня", "(5)дней")
function plural(n,str1,str2,str5){return n + ' ' + ((((n%10)==1)&&((n%100)!=11))?(str1) 🙁 ((((n%10)>=2)&&((n%10)<=4))&&(((n%100)<10)||((n%100)>=20)))?(str2) 🙁 str5)))}[/code]
Пример использования:
[quote]wr( 'Всего на форуме ' + plural(alltopics, 'тема','темы','тем') + ' и ' + plural(allposts, 'ответ','ответа','ответов') + '.');[/quote]
[quote]wr('В чате сейчас ' + plural(i_inchat, 'человек', 'человека', 'человек') + '<br />Всего зарегистрировано ' + plural(i_users, 'человек', 'человека', 'человек'));[/quote]
[quote]wr('Сегодня чату ' + plural(days, 'день', 'дня', 'дней'));[/quote]
и т.д. мест применения в чате очень много.
1007
BETEPAH
Если кому-то, как и мне, понадобится [b]скролинг[/b] окна сообщений и списка пользователей внутри чата на [b]тач-интерфейсах[/b], добавляем в head:
[code]<script>
function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
function touchScroll(id){
if(isTouchDevice()){
var el=document.getElementById(id);
var scrollStartPos=0;
document.getElementById(id).addEventListener("touchstart", function(event) {
scrollStartPos=this.scrollTop+event.touches[0].pageY;
// event.preventDefault();
},false);
document.getElementById(id).addEventListener("touchmove", function(event) {
this.scrollTop=scrollStartPos-event.touches[0].pageY;
event.preventDefault();
},false);
}
}
</script>[/code]
а в onload:
[code]touchScroll('leftdiv');
touchScroll('usersdiv');[/code]
[color=gray]P.S. взято [url=http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/]отсюда[/url], в комментариях есть доработанные скрипты для скролинга по двум направлениям и плагины для jQuery[/color]

Отредактировано BETEPAH - 12.11.2012
110
erorr
Игра `Крестики нолики` на бесконечном поле на JS

Всем известная игра в крестики нолики 😀
Цель игры - построить непрерывный ряд из 5 крестиков по горизонтали, вертикали или диагонали.


Javascript

<script type="text/javascript">
var TOTLIN, ATFAC, PLAYER, OPPON, IGROK, PROGR, WINLINE, GAMEEND;
var IGT, X, Y, LX, LY, OTMENA=false;
var BOARD, VALUE, LINP, WEIGHT = new Array(0, 0, 4, 20, 100, 500, 0);
function sgn(T) {
if (T<0) T=-1;
else if (T>0) T=1;
else T=0;
return T;
}
function INICIAL() {
var I, J, tr;
var f = '<table id="f" style="border: none; border-collapse:collapse;">';
BOARD = new Array();
VALUE = new Array();
LINP = new Array();
for (I=0;I<=20;I++) {
if (I>0 && I<20) tr='<tr>';
BOARD[i] = new Array();
VALUE[i] = new Array();
LINP[i] = new Array();
for (J=0; J<=20; J++) {
if (I*J>0 && I<20 && J<20) tr += '<td id="c-'+I+'-'+J+'" onclick="ANAKEY(this);" style="font-family: Tahoma, Helvetica, Sans Serif; border: 1px dotted #00a; cursor: pointer; width: 20px; font-weight: bold; text-align: center; vertical-align: middle; font-size: 16px; line-height: 20px">&nbsp;</td>';
VALUE[i][J] = new Array();
LINP[i][J] = new Array();
for(C=1;C<3;C++) { LINP[i][J][C] = new Array(); }
}
if (I>0 && I<20) { tr += '</tr>'; f += tr; }
}
f += '</table>';
document.write(f);
PROGR=0;
IGROK=0;
}
function ANAKEY(a) {
X = a.id.replace(/c-/,'').replace(/-.*/,'');
Y = a.id.replace(/c-/,'').replace(/.*-/,'');
if (BOARD[X][Y] == 0) {
BOARD[X][Y]=1; MOVEXOD();
if (GAMEEND) {
IGROK += 1;
MESSAG('Поздравляем! Вы выиграли!');
}
else {PRGMAK();}
}
}
function NEWGAME() {
var I, J, C, D;
if (OTMENA) {
alert('Игра не закончена!');
return false;
}
for(I=1;I<=19;I++)
for(J=1;J<=19;J++) {
geid('c-'+I+'-'+J).innerHTML='&nbsp;';
geid('c-'+I+'-'+J).className='';
BOARD[i][J]=0;
for(C=1;C<3;C++) {
VALUE[i][J][C] = 0;
for(D=0;D<4;D++) LINP[i][J][C][D] = 0;
}
}
geid('txt').innerHTML='Ваш ход';
geid('prg').innerHTML=PROGR;
geid('igr').innerHTML=IGROK;
PLAYER=1;
OTMENA=true;
TOTLIN=(19*(19-4)+(19-4)*(19-4))*4; LX=1; LY=1;
X=10;
Y=X;
ATFAC=parseInt(IGROK/2);
if (ATFAC >15) ATFAC=15;
for(I=1;I<20;I++)
for(J=1;J<20;J++) {
IGT = BOARD[i][J];
DRAMOV(I,J);
}
}
function DRAMOV(XX, YY) {
var idt;
LX=XX;
LY=YY;
idt='c-'+XX+'-'+YY;
if (IGT == 1) {
geid(idt).innerHTML='x';
}
else if (IGT == 2) {
geid(idt).className='red';
geid(idt).innerHTML='o';
}
}
function MOVEXOD() {
var T, K, L, X1, Y1, X11, Y11, DX, DY, NUM, LIO, LIP, TTT, idt;
WINLINE = 0;
OPPON = 3 - PLAYER;
GAMEEND = false;
idt='c-'+LX+'-'+LY; geid(idt).className='';
for (T=0;T<4;T++)
for(K=0;K<5;K++) {
X1 = parseInt(X) + sgn(T - 2) * K;
Y1 = Y - sgn(T) * K;
switch(T) {
case 0: TTT = X1 > 0 && X1 < 16; break;
case 1: TTT = (X1 > 0 && X1 < 16) && (Y1 > 0 & Y1 < 16); break;
case 2: TTT = Y1 > 0 && Y1 < 16; break;
case 3: TTT = (X1 > 4 && X1 < 20) && (Y1 > 0 && Y1 < 16); break;
default:;
}
if(TTT) {
NUM = LINP[X1][Y1][PLAYER][T];
NUM = NUM + 1;
if (NUM == 1) TOTLIN--;
else if (NUM == 5) GAMEEND = true;
LINP[X1][Y1][PLAYER][T] = NUM;
if (GAMEEND && (WINLINE == 0)) WINLINE = T + 1;
LIP = LINP[X1][Y1][PLAYER][T];
LIO = LINP[X1][Y1][OPPON][T];
for(L=0;L<5;L++) {
X11 = X1 - sgn(T - 2) * L;
Y11 = parseInt(Y1) + sgn(T) * L;
if (LIO == 0) VALUE[X11][Y11][PLAYER]=VALUE[X11][Y11][PLAYER] + WEIGHT[LIP + 1] - WEIGHT[LIP];
else
if (LIP == 1) VALUE[X11][Y11][OPPON] = VALUE[X11][Y11][OPPON] - WEIGHT[LIO + 1];
}
}
}
BOARD[X][Y] = PLAYER;
IGT = PLAYER;
if (GAMEEND) {
switch(WINLINE) {
case 1: DX = 1; DY = 0; break; case 2: DX = 1; DY = 1; break;
case 3: DX = 0; DY = 1; break; case 4: DX = -1; DY = 1; break;
default:;
}
do {
X = (X - 0 + DX);
Y = (Y - 0 + DY);
}
while (BOARD[X][Y] == PLAYER);
X -= DX;
Y -= DY;
for(I=1;I<6;I++) {
idt='c-'+X+'-'+Y; geid(idt).className='green';
DRAMOV (X, Y); X = X - DX; Y = Y - DY;
}
}
else {
DRAMOV (X, Y);
PLAYER = OPPON;
}
}
function PRGMAK() {
var I, J, MAX, VALZ;
if (TOTLIN <= 0) { GAMEEND = true; MESSAG('Tie game!'); }
else {
OPPON = 3 - PLAYER;
MAX = -32767;
X = 10;
Y = 10;
if (BOARD[X][Y] == 0) MAX = 4;
for(I=1;I<20;I++)
for(J=1;J<20;J++) {
if (BOARD[i][J]==0) {
VALZ=parseInt(VALUE[i][J][PLAYER]*(16+ATFAC)/16)+VALUE[i][J][OPPON]+parseInt(Math.random()*4);
if (VALZ>MAX) {
X = I; Y = J;
MAX = VALZ;
}
}
}
MOVEXOD();
if (GAMEEND) {
PROGR++; MESSAG('Компьютер победил!');
}
}
}
function MESSAG(SS) { alert(SS); OTMENA=false; NEWGAME(); }
function geid(i) { return document.getElementById(i); }
</script>
1007
BETEPAH
Стильный [url=http://sapegin.github.com/social-likes/ru/]jquery-плагин[/url] "лайкальных" кнопок. По ссылке конструктор для формирования готового кода на сайт.
[img]http://imgs.su/users/46646/1359025123.png[/img]
1007
BETEPAH
Вчера вышел свежий релиз файрфокса, и пришло время обратить внимание на [url=http://habrahabr.ru/post/183630/]HTML 5 Notifications API[/url].
Думаю, этот способ уведомлений должен понравиться. Можно выводить сообщения в небольшом окошке возле трея, они будут видны даже при свернутом браузере.
Попробовать можно здесь: http://delch.github.io/notifications-api/
Поддержка:
- Safari 6
- Chrome 27
- Firefox 22

Отредактировано BETEPAH - 26.06.2013
2970
Foggy
[b]BETEPAH[/b], отличная идея) я как-то упустил их обновление) будем пробовать)

[b]Скрипт смена фона плавной радугой, как хочет любой клиент![/b] Не хватает только единорогов...
скрипт ещё 2011 года, но я только сегодня встретил)
[url]http://javascript.ru/blog/poorking/interesnyj-effekt-s-pomoshu-canvas[/url]
19314
Dimitry
[quote=Foggy][b]BETEPAH[/b], отличная идея) я как-то упустил их обновление) будем пробовать)

[b]Скрипт смена фона плавной радугой, как хочет любой клиент![/b] Не хватает только единорогов...
скрипт ещё 2011 года, но я только сегодня встретил)
[url]http://javascript.ru/blog/poorking/interesnyj-effekt-s-pomoshu-canvas[/url][/quote]
кушает до 20% CPU
55
iamlo
Привет всем.
Может кто подкинуть более менее хороший скрипт вывод и смены случайных фраз?
Т.е. просто рандомный вывод фразы после перезагрузки и их смена через каждые 5-10 сек.
Гуглил, все как-то объемно и не вызывает доверия.
296
mychatik
[quote=iamlo]просто рандомный вывод фразы после перезагрузки и их смена через каждые 5-10 сек.[/quote]
[code]<script language="JavaScript">

function refresh() {
window.location.reload(); }
setInterval("refresh()", 5000);
var r_fraza = new Array ();
r_fraza[0] = "Случайная фраза.";
r_fraza[1] = "Ещё одна случайная фраза.";
r_fraza[2] = "Третья случайная фраза.";
r_fraza[3] = "Случайная фраза из середины.";
r_fraza[4] = "Следующая случайная фраза.";
r_fraza[5] = "Предпоследняя случайная фраза.";
r_fraza[6] = "Крайняя случайная фраза.";
var i = Math.round(6*Math.random());
document.write(r_fraza[i]);

</script>[/code]
[b]5000[/b] миллисекунд = 5 секунд (время обновления фраз)

Фразы добавляем столько, сколько нужно, по аналогии. При этом меняем цифру [b]6[/b] на новое количество фраз.

Отредактировано mychatik - 17.07.2018
55
iamlo
[quote=mychatik][quote=iamlo]просто рандомный вывод фразы после перезагрузки и их смена через каждые 5-10 сек.[/quote]
[code]<script language="JavaScript">

function refresh() {
window.location.reload(); }
setInterval("refresh()", 5000);
var r_fraza = new Array ();
r_fraza[0] = "Случайная фраза.";
r_fraza[1] = "Ещё одна случайная фраза.";
r_fraza[2] = "Третья случайная фраза.";
r_fraza[3] = "Случайная фраза из середины.";
r_fraza[4] = "Следующая случайная фраза.";
r_fraza[5] = "Предпоследняя случайная фраза.";
r_fraza[6] = "Крайняя случайная фраза.";
var i = Math.round(6*Math.random());
document.write(r_fraza[i]);

</script>[/code]
[b]5000[/b] миллисекунд = 5 секунд (время обновления фраз)

Фразы добавляем столько, сколько нужно, по аналогии. При этом меняем цифру [b]6[/b] на новое количество фраз.[/quote]
почти то, что надо, но он перезагружает страницу для того, чтобы обновить фразу. Как-то без этого можно?
8497
Trilby
В самый конец Body (или сразу после него) вставляем
[code] <script language="JavaScript">
function updateText(divId) {
let r_text = new Array();
r_text[0] = "Случайная фраза.";
r_text[1] = "Ещё одна случайная фраза.";
r_text[2] = "Третья случайная фраза.";
r_text[3] = "Случайная фраза из середины.";
r_text[4] = "Следующая случайная фраза.";
r_text[5] = "Предпоследняя случайная фраза.";
r_text[6] = "Крайняя случайная фраза.";
let i = Math.round(6 * Math.random());
document.getElementById(divId).innerHTML = r_text[i];
}
setInterval("updateText('r_text')", 5000);
updateText('r_text');
</script>[/code]
А в нужное место вставляем блок [code]<div id="r_text"></div>[/code]

Отредактировано Trilby - 17.07.2018
1 ... 7 8 9 10


Неавторизованные и новички не могут отправлять сообщения.




© 2008-2020
Контакты | Группа | Privacy и Cookie | Правила