4543 124 Опубликовано 1 марта, 2010 Share Опубликовано 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 Цитата Ссылка на сообщение Поделиться на другие сайты
Anutka714 0 Опубликовано 2 марта, 2010 Share Опубликовано 2 марта, 2010 вы хотите сделать чат как на всех сайтах укоза ? Цитата Ссылка на сообщение Поделиться на другие сайты
4543 124 Опубликовано 2 марта, 2010 Автор Share Опубликовано 2 марта, 2010 (изменено) вы хотите сделать чат как на всех сайтах укоза ? Приведите пример. Дайте ссылку на каой-нибудь чат юкоза =) Изменено 2 марта, 2010 пользователем 4543 Цитата Ссылка на сообщение Поделиться на другие сайты
kunevich_nv 1 Опубликовано 2 марта, 2010 Share Опубликовано 2 марта, 2010 Приведите пример. Дайте ссылку на каой-нибудь чат юкоза =) Наверное вот , но я так понимаю Вы хотите совсем другого Цитата Ссылка на сообщение Поделиться на другие сайты
lifestory 65 Опубликовано 2 марта, 2010 Share Опубликовано 2 марта, 2010 Наверное вот , но я так понимаю Вы хотите совсем другого Нет вы не правельно поняли. Он хочет, что бы при прокрутке сайта, данный Мессенджер передвигался по мере прокрутки. 1 Цитата Ссылка на сообщение Поделиться на другие сайты
4543 124 Опубликовано 2 марта, 2010 Автор Share Опубликовано 2 марта, 2010 (изменено) Нет вы не правельно поняли.Он хочет, что бы при прокрутке сайта, данный Мессенджер передвигался по мере прокрутки. Да! Вот ссылочка http://www.likno.com/?gclid=CM-TpqH5maACFQcgZwod33mxYg Смотрите, если опустить страницу, то ораньжевый ползунок с сползает к центру экрана по оризонтали. Я хочу что бы так же сползал мессенджер. Ну или как реклама на народе. http://music70-80.narod.ru/ В верхнем правом углу висит баннер яндекса. Он не сползает в низ, как ползунок в предыдущем примере, но и не портит структуру таблиц сайта.... Так то же можно..... Сделать фиксированным, но не искажая структуры таблиц страницы. Изменено 2 марта, 2010 пользователем 4543 Цитата Ссылка на сообщение Поделиться на другие сайты
Anutka714 0 Опубликовано 2 марта, 2010 Share Опубликовано 2 марта, 2010 Поняла =)))) секунду ищу есть такой яваскрипт Этот скрипт создает меню, которое всегда остается в пределах видимости, при прокрутке страницы. Думаю под код мессенджжера его можно пристроить <html> <head> <style type="text/css"> #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> <title></title> </head> <body LINK="#0000FF" TEXT="#ffffff" VLINK="#999999" ALINK="#00FF00" BGCOLOR="#000000"> <span ID="slide"> <table CELLSPACING="0" BORDER="0" CELLPADDING="0" ALIGN="left"> <tr> <td><hr> </td> </tr> <tr> <td><a href="../../_default.htm">Startseite</a></td> </tr> <tr> <td><a href="../../_default.htm">Kostenlos</a></td> </tr> <tr> <td><a href="../../_default.htm">Java</a></td> </tr> <tr> <td><a href="../../_default.htm">CGI</a></td> </tr> <tr> <td><a href="../../_default.htm">D-HTML</a></td> </tr> <tr> <td><a href="../../_default.htm">HTML</a></td> </tr> <tr> <td><a href="../../_default.htm">E-MAIL</a></td> </tr> <tr> <td><hr> </td> </tr> <tr> <td></td> </tr> <tr> <td><hr> </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> Цитата Ссылка на сообщение Поделиться на другие сайты
lifestory 65 Опубликовано 2 марта, 2010 Share Опубликовано 2 марта, 2010 Поняла =)))) секунду ищу есть такой яваскрипт Этот скрипт создает меню, которое всегда остается в пределах видимости, при прокрутке страницы. Думаю под код мессенджжера его можно пристроить Можно и его попробовать, только один минус он работет только под IE. Да и прокрутка немного не приятная. Цитата Ссылка на сообщение Поделиться на другие сайты
4543 124 Опубликовано 2 марта, 2010 Автор Share Опубликовано 2 марта, 2010 (изменено) Можно и его попробовать, только один минус он работет только под IE. Да и прокрутка немного не приятная. Щас буду разбираться, но то что работает только под IE плохо... Что вы можете предложить? Можете сказать, как называются подобные скрипты? Что мне вводить в Гугл? Я бы сам поискал, но даже не знаю что..... Изменено 2 марта, 2010 пользователем 4543 Цитата Ссылка на сообщение Поделиться на другие сайты
lifestory 65 Опубликовано 2 марта, 2010 Share Опубликовано 2 марта, 2010 Плавающий баннер Цитата Ссылка на сообщение Поделиться на другие сайты
arh_lelik1 65 Опубликовано 2 марта, 2010 Share Опубликовано 2 марта, 2010 Не совсем то, но для поиска может пригодится сКрипт Передвижной новейший мини чат ! ссылка Цитата Ссылка на сообщение Поделиться на другие сайты
4543 124 Опубликовано 2 марта, 2010 Автор Share Опубликовано 2 марта, 2010 (изменено) Так, попробую оъяснить суть своего вопроса ещё глубже. Вот то, на что ватило моих мозгов ССЫЛКА УДАЛЕНА! Как мы видим, по этой ссылке я прикрутил чат, засунув его в ячейку талицы. И все было бы хорошо, если бы сам сайт, не съехал немного в сторону, так как отмерять до края монитора он уже начинает не от стенки основы шаблона, а от конца Мессенджера, то есть съезжает в сторону на ширину мессенджера. И как в данном случа играть с процентами, я не знаю, так как на разным мониторах, идет в кривь на разные расстояния, и что мне едлать я не знал, вот и решал , что може получится повесить его Java скриптом не портя структуры таблиц. Так что если есть предложения, как вписать мессенджер , и оставить основной шаблон ровно по середине, я весь во внимании... Изменено 3 марта, 2010 пользователем 4543 Цитата Ссылка на сообщение Поделиться на другие сайты
izstas 51 Опубликовано 2 марта, 2010 Share Опубликовано 2 марта, 2010 Так что если есть предложения, как вписать мессенджер , и оставить основной шаблон ровно по середине, я весь во внимании... Может просто position: fixed? Правда пишут что в IE 6 и ниже не работает Цитата Ссылка на сообщение Поделиться на другие сайты
4543 124 Опубликовано 2 марта, 2010 Автор Share Опубликовано 2 марта, 2010 Может просто position: fixed? Правда пишут что в IE 6 и ниже не работает А по подробнее можно? Цитата Ссылка на сообщение Поделиться на другие сайты
izstas 51 Опубликовано 2 марта, 2010 Share Опубликовано 2 марта, 2010 (изменено) Ставите мессенджер в какой-нибудь div например (лучше код указать вне таблицы), в CSS ставите ему position: fixed; там же ставите ему расположение с помощью top/left/right/bottom. Если я не ошибаюсь, то после этого мессенджер не будет сдвигать разметку страницы и будет при прокручивании оставаться на месте P.S. Хотя код самого мессенджера оформлен как часть таблицы... ну тогда использовать отдельную таблицу вместо div или отдельную вставить в div Либо код поправить Изменено 2 марта, 2010 пользователем izstas 1 Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.