переключатель на странице комментариев

zbruy · 03.12.2011, 02:18

Друзья. Очень нужна помощь)
Собственно задача. Я думал, как реализовать вывод комментариев через виджет вконтакте и форму на сайте так, чтобы это выглядело красиво и не портило вид, а не как у всех сначала 1 тип, потом второй. И мне пришла такая идея, нужно установить переключатель типа комментария на страницу сайта, визуально, это будет примерно выглядеть так:
Левая сторона комментарий на странице

правая - на странице через форму вконтакте

при этом переключение происходит за счет нажатия на саму закладку.
Вот сам сайт http://prostoivkysno.ru
Переключение нужно, разумеется без перезагрузки страницы, а код должен включаться в саму страницу, ну или иметь шаблон.
Может кто встречал подобное, а то даже не знаю что в поиск на яндексе вводить)
Или есть какие предложения, а может кто-то захочет попрактиковаться на этой задачке)
Думаю, можно сделать наложение слоев со свойством z-index, но есть несколько но:
можно сделать, чтобы слой выходил наружу по наведению курсора, а можно ли при клике?
Надо подумать над тем как сделать, чтобы слои лежали в одной области, но при этом не перекрывали друг друга для возможности выбора любого из них, но думаю можно решить этот вопрос дизайном или небольшим скриптом.
Либо ставить спойлеры, два по очереди.
Вот так, жду от вас идей)

zbruy · 03.12.2011, 13:52

Может хоть кто подскажет как назвать такого рода процедуру для поиска в яндексе или видел что-то похожее?)

zss · 03.12.2011, 18:49

Можно сделать через <div id="nasayte">...</div><div id="vkontakte"...</div>.
В стилях указать им position:absolute,
видимость для одного visibility:visible, для другого visibility:hidden.
А потом в нужный момент java скриптом менять их наоборот.

Вопрос. А почему топик в разделе php?

zbruy · 04.12.2011, 10:19

Знакомое слово увидел)
знай я яву или хотя-бы php давно бы уже наверн все сделал)))

zss · 04.12.2011, 13:30

php используется для программирования на сервере.
А закладки надо переключать на клиенте.
Так что учите javascript

zbruy · 07.12.2011, 00:06

zss
В общем пришлось быстренько за вечер изучить яваскрипт) Сделал все, кстати получилось именно так как описано в третьем посте) Только position:absolute задал скрытому слою идущему после видимого, для обоих нет смысла.
Но, наткнулся на такую проблему, если у слоя с коментами position:absolute, то страница не растягивается за ним по вертикали, ведь она его не видит, и он уходит на белый фон.
Если с коментами на сайте можно вручную установить примерный размер фона и выставить количество коментов на странице, то вариант вконтакте, хоть показывать 1 установи, подгружает(по кнопке "показать еще") все коменты на туже страницу...
Верста на сайте у меня табличная.

Прикрутил пока-что здесь http://prostoivkysno.ru/VPCH_PTS.php#

Кстати, вот код моего решения:

Код:

<head>
...
<script language="JavaScript">
function init() {
IE = (document.all)
NC = (document.layers)
Opera = (document.getElementById)
}
function hiddenLayer() {
init();
if(IE) eval('document.all["Layer"].style.visibility = "hidden"')
if(NC) eval('document.layers["Layer"].visibility = "hidden"')
if(Opera) eval('document.getElementById("Layer").style.visibility = "hidden"')
if(IE) eval('document.all["Layerb"].style.visibility = "visible"')
if(NC) eval('document.layers["Layerb"].visibility = "visible"')
if(Opera) eval('document.getElementById("Layerb").style.visibility = "visible"')
}

function showLayer() {
init();
if(IE) eval('document.all["Layer"].style.visibility = "visible"')
if(NC) eval('document.layers["Layer"].visibility = "visible"')
if(Opera) eval('document.getElementById("Layer").style.visibility = "visible"')
if(IE) eval('document.all["Layerb"].style.visibility = "hidden"')
if(NC) eval('document.layers["Layerb"].visibility = "hidden"')
if(Opera) eval('document.getElementById("Layerb").style.visibility = "hidden"')
}
</script>
...				
</head>

<body>
...
<div id="pageContent a"  onclick="hiddenLayer()">вконтакте</div>
<div id="pageContent a" onclick="showLayer()">на сайте</div> 
<div style="position:relative; margin-top:10px " >
<div id="Layer" style=" visibility:visible"></div>
<div скрипт вконтакте ></div> 
<div id="Layerb" style="position:absolute; top:0; visibility:hidden ">
 <? include("страница коментов"); ?></div> 
</div>
</body>
...
</html>

sollado · 30.03.2012, 18:59

Скиньте пожалуйста сюда все коды, которые Вы использовали. То я уже 3 дня ищу и не могу найти как сделать!

Deoni · 15.06.2014, 22:14

xvfDBgfnD

PhantomUA · 05.09.2014, 00:54

Лучше используйте функцию jquery tabs

03.12.2011, 02:18	#1
zbruy Неактивный пользователь Пол: Регистрация: 15.03.2010 Сообщений: 5 Репутация: 0	переключатель на странице комментариев Друзья. Очень нужна помощь) Собственно задача. Я думал, как реализовать вывод комментариев через виджет вконтакте и форму на сайте так, чтобы это выглядело красиво и не портило вид, а не как у всех сначала 1 тип, потом второй. И мне пришла такая идея, нужно установить переключатель типа комментария на страницу сайта, визуально, это будет примерно выглядеть так: Левая сторона комментарий на странице правая - на странице через форму вконтакте при этом переключение происходит за счет нажатия на саму закладку. Вот сам сайт http://prostoivkysno.ru Переключение нужно, разумеется без перезагрузки страницы, а код должен включаться в саму страницу, ну или иметь шаблон. Может кто встречал подобное, а то даже не знаю что в поиск на яндексе вводить) Или есть какие предложения, а может кто-то захочет попрактиковаться на этой задачке) Думаю, можно сделать наложение слоев со свойством z-index, но есть несколько но: можно сделать, чтобы слой выходил наружу по наведению курсора, а можно ли при клике? Надо подумать над тем как сделать, чтобы слои лежали в одной области, но при этом не перекрывали друг друга для возможности выбора любого из них, но думаю можно решить этот вопрос дизайном или небольшим скриптом. Либо ставить спойлеры, два по очереди. Вот так, жду от вас идей)

03.12.2011, 13:52	#2
zbruy Неактивный пользователь Пол: Регистрация: 15.03.2010 Сообщений: 5 Репутация: 0	Re: переключатель на странице комментариев Может хоть кто подскажет как назвать такого рода процедуру для поиска в яндексе или видел что-то похожее?)

03.12.2011, 18:49	#3
zss Постоялец Пол: Регистрация: 05.02.2007 Адрес: Москва Сообщений: 662 Репутация: 271	Re: переключатель на странице комментариев Можно сделать через <div id="nasayte">...</div><div id="vkontakte"...</div>. В стилях указать им position:absolute, видимость для одного visibility:visible, для другого visibility:hidden. А потом в нужный момент java скриптом менять их наоборот. Вопрос. А почему топик в разделе php? __________________ Сергей Сергеевич Последний раз редактировалось zss; 04.12.2011 в 09:24..

04.12.2011, 10:19	#4
zbruy Неактивный пользователь Пол: Регистрация: 15.03.2010 Сообщений: 5 Репутация: 0	Re: переключатель на странице комментариев Знакомое слово увидел) знай я яву или хотя-бы php давно бы уже наверн все сделал)))

04.12.2011, 13:30	#5
zss Постоялец Пол: Регистрация: 05.02.2007 Адрес: Москва Сообщений: 662 Репутация: 271	Re: переключатель на странице комментариев php используется для программирования на сервере. А закладки надо переключать на клиенте. Так что учите javascript __________________ Сергей Сергеевич

07.12.2011, 00:06	#6
zbruy Неактивный пользователь Пол: Регистрация: 15.03.2010 Сообщений: 5 Репутация: 0	Re: переключатель на странице комментариев zss В общем пришлось быстренько за вечер изучить яваскрипт) Сделал все, кстати получилось именно так как описано в третьем посте) Только position:absolute задал скрытому слою идущему после видимого, для обоих нет смысла. Но, наткнулся на такую проблему, если у слоя с коментами position:absolute, то страница не растягивается за ним по вертикали, ведь она его не видит, и он уходит на белый фон. Если с коментами на сайте можно вручную установить примерный размер фона и выставить количество коментов на странице, то вариант вконтакте, хоть показывать 1 установи, подгружает(по кнопке "показать еще") все коменты на туже страницу... Верста на сайте у меня табличная. Прикрутил пока-что здесь http://prostoivkysno.ru/VPCH_PTS.php# Кстати, вот код моего решения: Код: <head> ... <script language="JavaScript"> function init() { IE = (document.all) NC = (document.layers) Opera = (document.getElementById) } function hiddenLayer() { init(); if(IE) eval('document.all["Layer"].style.visibility = "hidden"') if(NC) eval('document.layers["Layer"].visibility = "hidden"') if(Opera) eval('document.getElementById("Layer").style.visibility = "hidden"') if(IE) eval('document.all["Layerb"].style.visibility = "visible"') if(NC) eval('document.layers["Layerb"].visibility = "visible"') if(Opera) eval('document.getElementById("Layerb").style.visibility = "visible"') } function showLayer() { init(); if(IE) eval('document.all["Layer"].style.visibility = "visible"') if(NC) eval('document.layers["Layer"].visibility = "visible"') if(Opera) eval('document.getElementById("Layer").style.visibility = "visible"') if(IE) eval('document.all["Layerb"].style.visibility = "hidden"') if(NC) eval('document.layers["Layerb"].visibility = "hidden"') if(Opera) eval('document.getElementById("Layerb").style.visibility = "hidden"') } </script> ... </head> <body> ... <div id="pageContent a" onclick="hiddenLayer()">вконтакте</div> <div id="pageContent a" onclick="showLayer()">на сайте</div> <div style="position:relative; margin-top:10px " > <div id="Layer" style=" visibility:visible"></div> <div скрипт вконтакте ></div> <div id="Layerb" style="position:absolute; top:0; visibility:hidden "> <? include("страница коментов"); ?></div> </div> </body> ... </html> Последний раз редактировалось zbruy; 07.12.2011 в 00:56..

30.03.2012, 18:59	#7
sollado Неактивный пользователь Пол: Регистрация: 30.10.2011 Сообщений: 1 Репутация: 0	Re: переключатель на странице комментариев Скиньте пожалуйста сюда все коды, которые Вы использовали. То я уже 3 дня ищу и не могу найти как сделать!

15.06.2014, 22:14	#8
Deoni Неактивный пользователь Пол: Регистрация: 18.06.2008 Сообщений: 1 Репутация: 0	Re: переключатель на странице комментариев xvfDBgfnD

05.09.2014, 00:54	#9
PhantomUA Неактивный пользователь Пол: Регистрация: 02.08.2006 Сообщений: 15 Репутация: 0	Re: переключатель на странице комментариев Лучше используйте функцию jquery tabs

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
вытаскивание комментариев из фоток	Sevilho	Просмотр, конверторы и редакторы графики	15	14.03.2015 02:41
Переключатель раскладки клавиатуры	Novik83	Компьютерные проблемы	12	05.03.2009 16:42
удобный переключатель языков	Sevilho	МOffice, Переводчики (словари), Органайзеры, Текстовые редакторы	43	21.01.2009 20:29
Переключатель для локальной сети	greggreg	Локальные сети и их комплектующие	9	14.10.2008 01:24
Переключатель раскладки клавиатуры	Kosegr	Архив	3	24.09.2007 08:57