Messenger на сайт

1 марта, 2010

Привет!

Хочу пометить на сайт чат, оформленный как Messenger. Что бы при прокрутке страницы он опускался в месте с ней.

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

У сатйта по бокам пусто, так же как и на сайте Vkontakte.ru . Мне кажется что на боковом поле лучше всего будет смотреться сей чат.

Я думаю что это не сложно реализовать с помощью простенького JAVA скрипта.

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

Подскажите пожалуйста какой-нибудь простенький скриптик....

На всякий случай выложу код Messenger'a.

	<td border="0" width="16px" height="100%"   align =left valign =top style="padding-top :20px;"  > 

<img src="images/mesl.jpg" /> <td />
<td border="0" width="167px" height="100%"  align =left valign =top style="padding-top :20px;" >

<img src="images/msgv.jpg" border="0" >  
				<div id="cboxdiv0" style="text-align:left; line-height: 0" border="0"> 
					<div>
						<iframe id="I3" allowtransparency="yes" frameborder="0" marginheight="2" 
							marginwidth="2" name="I3" scrolling="auto" 
							src="http://www5.cbox.ws/box/?boxid=606854&boxtag=6k2zm8&sec=main" 
							style="border: #DBE2ED 1px solid; width: 164px; height: 199px;"></iframe>
					</div>
					<div>
						<iframe id="I4" allowtransparency="yes" frameborder="0" marginheight="2" 
							marginwidth="2" name="I4" scrolling="no" 
							src="http://www5.cbox.ws/box/?boxid=606854&boxtag=6k2zm8&sec=form" 
							style="border-left: 1px solid #DBE2ED; border-right: 1px solid #DBE2ED; border-bottom: 1px solid #DBE2ED; width: 163px; border-top-style: none; border-top-color: inherit; border-top-width: 0px; height: 60px;">
						</iframe>
					</div>
	</div>

<img src="images/msgn.jpg" border="0" >  
<td  width="50%" height="100%"   align =left valign =top style="padding-top :20px;"  > 
<img src="images/msgr.jpg" /> 
</td>

Изменено 1 марта, 2010 пользователем 4543

2 марта, 2010

вы хотите сделать чат как на всех сайтах укоза ?

2 марта, 2010

вы хотите сделать чат как на всех сайтах укоза ?

Приведите пример. Дайте ссылку на каой-нибудь чат юкоза =)

Изменено 2 марта, 2010 пользователем 4543

2 марта, 2010

Приведите пример. Дайте ссылку на каой-нибудь чат юкоза =)

Наверное вот , но я так понимаю Вы хотите совсем другого

2 марта, 2010

Наверное вот , но я так понимаю Вы хотите совсем другого

Нет вы не правельно поняли.

Он хочет, что бы при прокрутке сайта, данный Мессенджер передвигался по мере прокрутки.

2 марта, 2010

Нет вы не правельно поняли.
Он хочет, что бы при прокрутке сайта, данный Мессенджер передвигался по мере прокрутки.

Да!

Вот ссылочка http://www.likno.com/?gclid=CM-TpqH5maACFQcgZwod33mxYg

Смотрите, если опустить страницу, то ораньжевый ползунок с сползает к центру экрана по оризонтали. Я хочу что бы так же сползал мессенджер.

Ну или как реклама на народе.

http://music70-80.narod.ru/

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

Так то же можно.....

Сделать фиксированным, но не искажая структуры таблиц страницы.

Изменено 2 марта, 2010 пользователем 4543

2 марта, 2010

Поняла =)))) секунду ищу есть такой яваскрипт

Этот скрипт создает меню, которое всегда остается в пределах видимости, при прокрутке страницы. Думаю под код мессенджжера его можно пристроить

<html>

<head>

#slide {

Position: Absolute;

Left: 5;

Top: 110;

Visibility: Visible;

}

A:LINK {text-decoration: none;}

A:VISITED {text-decoration: none;}

TD {font-family:arial;}

BODY {Margin-Left: 120;}

</style>

</head>

<tr>

</td>

</tr>

<tr>

<td><a href="../../_default.htm">Startseite</a></td>

</tr>

<tr>

<td><a href="../../_default.htm">Kostenlos</a></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

</table>

</span><script LANGUAGE="JavaScript">

self.onError=null;

currentX = currentY = 0;

whichIt = null;

lastScrollX = 0; lastScrollY = 0;

NS = (document.layers) ? 1 : 0;

IE = (document.all) ? 1: 0;

function heartBeat() {

if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }

if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }

if(diffY != lastScrollY) {

percent = .1 * (diffY - lastScrollY);

if(percent > 0) percent = Math.ceil(percent);

else percent = Math.floor(percent);

if(IE) document.all.slide.style.pixelTop += percent;

if(NS) document.slide.top += percent;

lastScrollY = lastScrollY + percent;

}

if(diffX != lastScrollX) {

percent = .1 * (diffX - lastScrollX);

if(percent > 0) percent = Math.ceil(percent);

else percent = Math.floor(percent);

if(IE) document.all.slide.style.pixelLeft += percent;

if(NS) document.slide.left += percent;

lastScrollX = lastScrollX + percent;

}

function checkFocus(x,y) {

var totalY, totalX;

floatx = document.slide.pageX;

floaty = document.slide.pageY;

floatwidth = document.slide.clip.width;

floatheight = document.slide.clip.height;

if(20 == 0) totalY = floatheight;

else totalY = 25;

if(0 == 0) totalX = floatwidth;

else totalX = 0;

if( (x > floatx && x < (floatx+totalX)) && (y > floaty && y < (floaty+totalY))) return true;

else return false;

}

function grabIt(e) {

if(IE) {

whichIt = event.srcElement;

while (whichIt.id.indexOf("slide") == -1) {

whichIt = whichIt.parentElement;

if (whichIt == null) { return true; }

}

whichIt.style.pixelLeft = whichIt.offsetLeft;

whichIt.style.pixelTop = whichIt.offsetTop;

currentX = (event.clientX + document.body.scrollLeft);

currentY = (event.clientY + document.body.scrollTop);

if(20 == 0) totalY = whichIt.style.pixelHeight;

else totalY = 20;

if(0 == 0) totalX = whichIt.style.pixelWidth;

else totalX = 0;

if(!(event.clientX > whichIt.offsetLeft && event.clientX < whichIt.offsetLeft + totalX) ||

!(currentY > whichIt.offsetTop && currentY < whichIt.offsetTop + totalY)) whichIt = null;

} else {

window.captureEvents(Event.MOUSEMOVE);

if(checkFocus (e.pageX,e.pageY)) {

whichIt = document.slide;

FloatTouchedX = e.pageX-document.slide.pageX;

FloatTouchedY = e.pageY-document.slide.pageY;

}

return true;

}

function moveIt(e) {

if (whichIt == null) { return false; }

if(IE) {

newX = (event.clientX + document.body.scrollLeft);

newY = (event.clientY + document.body.scrollTop);

distanceX = (newX - currentX); distanceY = (newY - currentY);

currentX = newX; currentY = newY;

whichIt.style.pixelLeft += distanceX;

whichIt.style.pixelTop += distanceY;

if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;

if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;

if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;

if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;

event.returnValue = false;

} else {

whichIt.moveTo(e.pageX-FloatTouchedX,e.pageY-FloatTouchedY);

if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;

if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;

if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;

if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;

return false;

}

return false;

}

function dropIt() {

whichIt = null;

if(NS) window.releaseEvents (Event.MOUSEMOVE);

return true;

}

if(NS) {

window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);

window.onmousedown = grabIt;

window.onmousemove = moveIt;

window.onmouseup = dropIt;

}

if(IE) {

document.onmousedown = grabIt;

document.onmousemove = moveIt;

document.onmouseup = dropIt;

}

if(NS || IE) action = window.setInterval("heartBeat()",1);

</script>

<pre>Тут текст или чего еще</pre>

</center></div><div align="center"><center>

<pre>

</pre>

</center></div></font>

</body>

</html>

2 марта, 2010

Поняла =)))) секунду ищу есть такой яваскрипт

Этот скрипт создает меню, которое всегда остается в пределах видимости, при прокрутке страницы. Думаю под код мессенджжера его можно пристроить

Можно и его попробовать, только один минус он работет только под IE. Да и прокрутка немного не приятная.

2 марта, 2010

Можно и его попробовать, только один минус он работет только под IE. Да и прокрутка немного не приятная.

Щас буду разбираться, но то что работает только под IE плохо...

Что вы можете предложить?

Можете сказать, как называются подобные скрипты? Что мне вводить в Гугл?

Я бы сам поискал, но даже не знаю что.....

Изменено 2 марта, 2010 пользователем 4543

2 марта, 2010

Плавающий баннер

2 марта, 2010

Не совсем то, но для поиска может пригодится

сКрипт Передвижной новейший мини чат ! ссылка

2 марта, 2010

Так, попробую оъяснить суть своего вопроса ещё глубже.

Вот то, на что ватило моих мозгов ССЫЛКА УДАЛЕНА!

Как мы видим, по этой ссылке я прикрутил чат, засунув его в ячейку талицы.

И все было бы хорошо, если бы сам сайт, не съехал немного в сторону, так как отмерять до края монитора он уже начинает не от стенки основы шаблона, а от конца Мессенджера, то есть съезжает в сторону на ширину мессенджера.

И как в данном случа играть с процентами, я не знаю, так как на разным мониторах, идет в кривь на разные расстояния, и что мне едлать я не знал, вот и решал , что може получится повесить его Java скриптом не портя структуры таблиц.

Так что если есть предложения, как вписать мессенджер , и оставить основной шаблон ровно по середине, я весь во внимании...

Изменено 3 марта, 2010 пользователем 4543

2 марта, 2010

Так что если есть предложения, как вписать мессенджер , и оставить основной шаблон ровно по середине, я весь во внимании...

Может просто position: fixed? Правда пишут что в IE 6 и ниже не работает

2 марта, 2010

Может просто position: fixed? Правда пишут что в IE 6 и ниже не работает

А по подробнее можно?

2 марта, 2010

Ставите мессенджер в какой-нибудь div например (лучше код указать вне таблицы), в CSS ставите ему position: fixed; там же ставите ему расположение с помощью top/left/right/bottom.

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

P.S. Хотя код самого мессенджера оформлен как часть таблицы... ну тогда использовать отдельную таблицу вместо div или отдельную вставить в div Либо код поправить

Изменено 2 марта, 2010 пользователем izstas

Messenger на сайт

Рекомендуемые сообщения

4543

Ссылка на комментарий

Поделиться на другие сайты

Anutka714

Ссылка на комментарий

Поделиться на другие сайты

4543

Ссылка на комментарий

Поделиться на другие сайты

kunevich_nv

Ссылка на комментарий

Поделиться на другие сайты

lifestory

Ссылка на комментарий

Поделиться на другие сайты

4543

Ссылка на комментарий

Поделиться на другие сайты

Anutka714

Ссылка на комментарий

Поделиться на другие сайты

lifestory

Ссылка на комментарий

Поделиться на другие сайты

4543

Ссылка на комментарий

Поделиться на другие сайты

lifestory

Ссылка на комментарий

Поделиться на другие сайты

arh_lelik1

Ссылка на комментарий

Поделиться на другие сайты

4543

Ссылка на комментарий

Поделиться на другие сайты

izstas

Ссылка на комментарий

Поделиться на другие сайты

4543

Ссылка на комментарий

Поделиться на другие сайты

izstas

Ссылка на комментарий

Поделиться на другие сайты

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

Похожий контент

Сайт

Активность

Магазин

Поддержка

Kaspersky Support Forum