Всплываючее окно новостей

legenda · 2012-08-20 14:34:53

Привет, ненавно наткнулся на одну фишку захотелось себе реализовать.

Вот пример, не реклама)

фишта в том что если страничку скролером помотать, то примерно ниже середины открывается справа окошко с новостями, вот скин

может кто знает каким скриптом так сделать?

Изменено legenda (2012-08-20 15:11:33)

qwas · 2012-08-20 15:00:47

Такое? _http://ruseller.com/lessons.php?rub_id=32&id=412
Я когда по ссылке перехожу, то ничего не вылазит, а судя по скрину, то вроде бы то, что ты спрашиваешь.

legenda · 2012-08-20 15:14:57

qwas пишет:

Такое? _http://ruseller.com/lessons.php?rub_id=32&id=412
Я когда по ссылке перехожу, то ничего не вылазит, а судя по скрину, то вроде бы то, что ты спрашиваешь.

Возмжно оно не всегда сплывает у них, обновил ссылку.

На твоем примере вроде оно, правда точно пока незнаю так как у них демо не работает, почитаю, попробую отпишусь.

qwas · 2012-08-20 15:19:34

legenda пишет:

На твоем примере вроде оно, правда точно пока незнаю так как у них демо не работает, почитаю, попробую отпишусь.

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

legenda · 2012-08-20 15:26:42

qwas, Ах, значить нето, у них эта кнопка не вслывает а всегда есть(

qwas · 2012-08-20 15:30:55

legenda, та да, я уже увидел перейдя по обновленной ссылке. Ну если чет нарою, отпишу.

Djaffar · 2012-08-24 01:05:09

Это плагин для WP Nrelate Flyout
Живет тут http://nrelate.com/products/flyout/

Изменено Djaffar (2012-08-24 01:06:49)

FNS · 2012-09-16 17:26:39

реализуй средставми аякса, скрывай и показывай блок div при заданном расстоянии от позиции top. В блоке можешь разместить код показа к примеру последних новостей или по твоему желанию.

<script type="text/javascript">
    	$(function() {
	$(window).scroll(function(){
	var distanceTop = 300; // Тут укажи нужное расстояние после прокрутки которого будет показано окно.
	if  ($(window).scrollTop() > distanceTop)
	    $('#news').show(200);
	        else
    if  ($(window).scrollTop() < distanceTop)
	    $('#news').hide(200);
	        });
	});
</script>

В файл стилей

#news
position:fixed;
bottom:0px;
right:0px;

width:200px;
height:50px;

высоту и ширину и остальные стили по желанию.

Код для вставки в main.tpl

<div id="news">{plugin_lastnews}</div>

Изменено FNS (2012-09-16 17:36:16)

irbees2008 · 2012-09-17 10:42:25

выводит просто блок внизу сайта
нашел ошибку
скобки надо

#news{
position:fixed;
bottom:5px;
right:5px;

width:200px;
height:50px;}

и в плагине надо отредактировать вид

FNS а как добавить анимацию чтобы выдвигалась с боку ?

Изменено irbees2008 (2012-09-17 12:42:22)

FNS · 2012-09-17 14:18:14

Писал тут от руки, поэтому скобки упустил, в плагине соответственно отредактировать и адаптировать под нужный вид.
Я же показал просто пример, что бы выводило сделай так
<div id="news">[isplugin lastnews]{plugin_lastnews}[/isplugin]</div>

Для визуального эффекта используй плагины к jQuery

И подключить библиотеку. Исходя из данного примера подгоняй как тебе требуется

Изменено FNS (2012-09-17 14:50:04)

irbees2008 · 2012-09-17 17:56:42

последнее не заработало,просто в первом скрипте 200 поменял 500 получилось даже лучше

Изменено irbees2008 (2012-09-17 19:14:08)

irbees2008 · 2012-09-24 21:43:10

может кто глянет? неработает ,т.е. при нажатии кнопки должно появиться менюшка,а реакции 0

<div class="author">
             <script type="text/javascript">//<![CDATA[$(function(){$("#infb340").Button("#infc340"); });//]]>
             </script>


		<div class="infbtn">
			<span id="infb340" class="thide" title="Информация к новости">i</span>
			<div id="infc340" class="infcont">
				<ul>
					<li>Автор: {author}</li>
					<li>{date}</li>
				   <li>[edit-news]Редактировать новость[/edit-news]</li>
				   <li>[del-news]Удалить новость[/del-news]</li>
				   <li>[print-link]Распечатать[/print-link]</li>

				</ul>
				
			</div>
        </div>		 
	</div>

css

.thide{display: block;line-height: normal;}		
.infbtn {margin: -1px 0 0 0;position:absolute;width:25px;z-index:1;}
.infbtn .thide {background: #00afff;cursor: pointer;border:3px solid #bababa;border-radius:24px 0 0 24px;-webkit-border-radius:24px 0 0 24px;-moz-border-radius:24px 0 0 24px;color:#fff;font-weight:bold;padding: 2px 0 2px 6px;}
.infbtn .thide:hover {background:red;}
.infbtn .thide.selected {background: #bababa;}
.infcont {background: url('../images/brushed.png') repeat scroll 0 0 padding-box transparent;border: 8px solid transparent;border-radius: 8px;-webkit-border-radius: 8px;-moz-border-radius: 8px;box-shadow: 0 0 4px #5B5B5B;display: none;position: absolute;right: 20px;top: 24px; width: 180px;z-index: 33;}
.infcont ul {color: #67747B;font-size: 0.9em;list-style: none outside none; margin: 0 6px;padding: 5px 0; position: relative;}

Изменено irbees2008 (2012-09-24 21:44:04)

FNS · 2012-09-28 13:01:10

как то коряво скрипт составлен, если время вечером будет, гляну.

FNS · 2012-09-28 14:12:41

Со стилями как то лениво разбираться, да и диз не видел что должно и как быть.
В общем вот пример, подредактируй под себя и все будет отлично работать.

<div class="container">
<img src="navigate.png" width="184" height="32" class="menu_head" /> тут соответственно поставишь свой блок span с картинкой
<ul class="menu_body">
<li><a href="http://ruseller.com/index.php">Главная</a></li>
<li><a href="http://evgeniypopov.com/index.php">Блог</a></li>
<li><a href="http://evgeniypopov.ru/index.php">Форум поддержки</a></li>
<li><a href="http://ruseller.com/about.php">О нас/Контакты</a></li>
</ul>
</div>

irbees2008 · 2012-09-29 13:32:51

спасибо

irbees2008 · 2012-09-29 13:37:33

есть два куска кода

	[login]<div class="login-enter">Войти на сайт</div>[/login]
			[is-logged]<div class="login-enter">Кабинет</div>[/is-logged]

<div class="login-panel" >
	<div class="login-block">
		<div class="close"></div>
		<div class="avtoriz">{personal_menu}</div>
	</div>
</div>

есть и стили,но нет скрипта ,уже и сам попробывал,но не получается связать их

FNS · 2012-09-30 02:18:58

Что требуется то?

irbees2008 · 2012-09-30 05:26:56

по идее должен быть скрипт связывающий первый код со вторым,в первом кнопки а во втором сам блок с меню,но в шаблоне нет скрипта

FNS · 2012-09-30 13:11:26

так пропиши обработчик для div login-enter, что бы при клике на него выполнялось нужное тебе действие. вызов модального окна с меню или другое действие.

irbees2008 · 2012-09-30 15:10:21

FNS пишет:

так пропиши обработчик для div login-enter, что бы при клике на него выполнялось нужное тебе действие. вызов модального окна с меню или другое действие.

пробывал у меня не получается,видать мне не понять как скрипт работает

FNS · 2012-09-30 16:57:03

Хочешь вывести в div блоке при клике или в модальном окне?

irbees2008 · 2012-09-30 17:05:19

в модальном,

FNS · 2012-09-30 18:12:57

Примерно так, грубый вариант.

[login] <a href="#dialog" name="modal"><div class="login-enter">Войти на сайт</div></a>[/login]
[is-logged] <a href="#dialog" name="modal"><div class="login-enter">Кабинет</div></a>[/is-logged]

<script type="text/javascript">
$(document).ready(function() {
	$('a[name=modal]').click(function(e) {
		e.preventDefault();
		var id = $(this).attr('href');
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		$('#mask').fadeIn(1000);
		$('#mask').fadeTo("slow",0.8);
		var winH = $(window).height();
		var winW = $(window).width();
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
		$(id).fadeIn(2000);
	});
	$('.window .close').click(function (e) {
		e.preventDefault();
		$('#mask, .window').hide();
	});
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});
});
</script>

<div id="boxes">
	<div id="dialog" class="window">
	<div class="login-panel" >
    <div class="login-block">
        <div class="close"></div>
        <div class="avtoriz">{personal_menu}</div>
    </div>
</div>
	<span><a href="#" class="close"/>Закрыть</a>
	</div>
	<div id="mask"></div>
</div>

#mask {
	position:absolute;
	left:0;
	top:0;
	z-index:9000;
	background-color:#000;
	display:none;
	font-family: Georgia;
	}
#boxes .window {
	position:fixed;
	left:25%;
	top:25%;
	width:900px;
	height:400px;
	display:none;
	z-index:9999;
	padding:20px;
	text-align: left;
	font-size: 25px;
	}
#boxes #dialog {
	width:900px;
	height:400px;
	padding:10px;
	background-color:#ffffff;
	}
.close {
	float: right;
	margin-top: 148px;
	}

Изменено FNS (2012-09-30 18:13:23)

legenda · 2012-10-13 23:10:40

вот еще пример http://www.segodnya.ua/regions/donetsk/ … nnica.html

может ктото написать нормалынй кусок кода что и куда надо вписать, а то я почитал ветку нифига не понял ктото пишет об обном ктото об другом, а по теме?

irbees2008 · 2012-10-14 07:13:51

legenda пишет:

вот еще пример http://www.segodnya.ua/regions/donetsk/ … nnica.html
может ктото написать нормалынй кусок кода что и куда надо вписать, а то я почитал ветку нифига не понял ктото пишет об обном ктото об другом, а по теме?

в первом варианте твой вариант,в майн тпл все бросаешь кроме стилей

Код:

<script type="text/javascript">
        $(function() {
    $(window).scroll(function(){
    var distanceTop = 300; // Тут укажи нужное расстояние после прокрутки которого будет показано окно.
    if  ($(window).scrollTop() > distanceTop)
        $('#news').show(200);
            else
    if  ($(window).scrollTop() < distanceTop)
        $('#news').hide(200);
            });
    });
</script>

В файл стилей
Код:

#news{
position:fixed;
bottom:0px;
right:0px;

width:200px;
height:50px;}

высоту и ширину и остальные стили по желанию.

Код для вставки в main.tpl
Код:

<div id="news">{plugin_lastnews}</div>

Изменено irbees2008 (2012-10-14 07:15:57)

Next Generation CMS :: Форум поддержки

Объявление

#1 2012-08-20 14:34:53

Всплываючее окно новостей

#2 2012-08-20 15:00:47

Re: Всплываючее окно новостей

#3 2012-08-20 15:14:57

Re: Всплываючее окно новостей

#4 2012-08-20 15:19:34

Re: Всплываючее окно новостей

#5 2012-08-20 15:26:42

Re: Всплываючее окно новостей

#6 2012-08-20 15:30:55

Re: Всплываючее окно новостей

#7 2012-08-24 01:05:09

Re: Всплываючее окно новостей

#8 2012-09-16 17:26:39

Re: Всплываючее окно новостей

#9 2012-09-17 10:42:25

Re: Всплываючее окно новостей

#10 2012-09-17 14:18:14

Re: Всплываючее окно новостей

#11 2012-09-17 17:56:42

Re: Всплываючее окно новостей

#12 2012-09-24 21:43:10

Re: Всплываючее окно новостей

#13 2012-09-28 13:01:10

Re: Всплываючее окно новостей

#14 2012-09-28 14:12:41

Re: Всплываючее окно новостей

#15 2012-09-29 13:32:51

Re: Всплываючее окно новостей

#16 2012-09-29 13:37:33

Re: Всплываючее окно новостей

#17 2012-09-30 02:18:58

Re: Всплываючее окно новостей

#18 2012-09-30 05:26:56

Re: Всплываючее окно новостей

#19 2012-09-30 13:11:26

Re: Всплываючее окно новостей

#20 2012-09-30 15:10:21

Re: Всплываючее окно новостей

#21 2012-09-30 16:57:03

Re: Всплываючее окно новостей

#22 2012-09-30 17:05:19

Re: Всплываючее окно новостей

#23 2012-09-30 18:12:57

Re: Всплываючее окно новостей

#24 2012-10-13 23:10:40

Re: Всплываючее окно новостей

#25 2012-10-14 07:13:51

Re: Всплываючее окно новостей

Подвал раздела