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