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

irbees2008 · 2012-11-23 20:37:21

FNS пишет:

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

а добавить кнопку закрытия окошка?

legenda · 2012-12-01 03:30:20

irbees2008 пишет:

в первом варианте твой вариант,в майн тпл все бросаешь кроме стилей
Код:
<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-12-01 07:59:17

var distanceTop = 300; измени на 1000 или сколько тебе надо
извени не то написал в плагине удали все стили и дивы только переменную оставь и в css

#news{
position:fixed;
bottom:0px;
right:0px;
width:200px;
height:50px;-webkit-box-shadow: 0px 0px 4px #000000;
-moz-box-shadow: 0px 0px 4px #000000;
box-shadow: 0px 0px 4px #000000;
background-color: #FFF5EE;
padding: 10px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12pt;
color: #888888;
text-align: center;}

Изменено irbees2008 (2012-12-01 08:56:53)

legenda · 2012-12-22 05:54:37

irbees2008, я сделал так

в css вписал

#news{
position:fixed;
bottom:0px;
right:0px;
width:200px;
height:50px;-webkit-box-shadow: 0px 0px 4px #000000;
-moz-box-shadow: 0px 0px 4px #000000;
box-shadow: 0px 0px 4px #000000;
background-color: #FFF5EE;
padding: 10px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12pt;
color: #888888;
text-align: center;}

в маин тпл

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

<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>

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

что не так делаю?

irbees2008 · 2012-12-22 08:00:25

в плагине убери все лишнее ,все дивы,оставь только переменную

Knopik · 2012-12-22 11:12:18

legenda, как я понял, тебе нужно вывести этот блок, когда человек прочел статью? вот так?

добавь в news.full.tpl, туда, где заканчивается новость.

<div id="shower"></div>

и поправь javascript

	<script type="text/javascript">
		$(document).ready(function(){
			$(window).scroll(function(){
	    		var distanceTop = Math.round($('#shower').offset().top) - window.screen.height;
	    		if  ($(window).scrollTop() > distanceTop) {
	        		$('#news').show(200);
	    		} else if ($(window).scrollTop() < distanceTop) {
	    			$('#news').hide(200);
	    		}
			});
		});
	</script>

Изменено Knopik (2012-12-22 11:19:27)

legenda · 2012-12-22 15:27:11

irbees2008,

в маин тпл написал так

<div id="news">новости, новости, новости</div>
<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>

и все также(, блок показывается постоянно

Изменено legenda (2012-12-22 16:00:21)

legenda · 2012-12-22 16:04:38

Knopik пишет:

legenda, как я понял, тебе нужно вывести этот блок, когда человек прочел статью? вот так?
добавь в news.full.tpl, туда, где заканчивается новость.
<div id="shower"></div>
и поправь javascript
	<script type="text/javascript">
		$(document).ready(function(){
			$(window).scroll(function(){
	    		var distanceTop = Math.round($('#shower').offset().top) - window.screen.height;
	    		if  ($(window).scrollTop() > distanceTop) {
	        		$('#news').show(200);
	    		} else if ($(window).scrollTop() < distanceTop) {
	    			$('#news').hide(200);
	    		}
			});
		});
	</script>

сделал так, но так ваше ничего не происходит(

irbees2008 · 2012-12-22 19:41:41

между хеад

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

в самый низ майн.тпл перед [/sitelock]

<div id="news"  style="display:none;">{plugin_lastnews}</div>

в css

#news{
position:fixed;
bottom:0px;
right:0px;
width:200px;
height:50px;-webkit-box-shadow: 0px 0px 4px #000000;
-moz-box-shadow: 0px 0px 4px #000000;
box-shadow: 0px 0px 4px #000000;
background-color: #FFF5EE;
padding: 10px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12pt;
color: #888888;
text-align: center;}

в плагине lastnews- в файле entries

<li><a href="{link}">{date} {title} {views}</a> [edit-news]<img src="{skins_url}/images/rewrite.gif" width="16" height="16" alt="Edit"/>[/edit-news]</li>

в файле lastnews

<table border="0" width="100%" cellspacing="0" cellpadding="0">
	
				<ul>{entries} </ul>
				
</table>

legenda · 2012-12-24 14:10:57

irbees2008, во, то что надо! спб!+1

irbees2008 · 2012-12-24 19:02:27

скрипт набросал FNS,ему спасибо и +,я просто под себя адаптировал

legenda · 2012-12-25 02:19:43

irbees2008, +1 и ему

legenda · 2013-02-02 10:51:19

irbees2008, еще бы кнопку закрывания там, было б супер

irbees2008 · 2013-02-02 21:22:18

legenda пишет:

irbees2008, еще бы кнопку закрывания там, было б супер

посмотри здесь http://jemand.ru/vydvigayushhayasya-pri … icy-panel/

irbees2008 · 2013-02-03 07:28:48

замени скрипт на этот

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

и блок

<div id="news" style="display:none;">здесь информация<a class="close"></a></div>

в стили добавь

a.close{
	background: transparent url(../images/close.gif) no-repeat top left;
	width: 13px;
	height: 13px;
	position: absolute;
	cursor: pointer;
	top: 10px;
	right: 10px;
	z-index: 10;
	}
a.close:hover{
	background-position: 0px -13px;
	}

ну и картинку close.gif залей в папку с картинками

Изменено irbees2008 (2013-02-03 08:02:58)

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

Объявление

#26 2012-11-23 20:37:21

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

#27 2012-12-01 03:30:20

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

#28 2012-12-01 07:59:17

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

#29 2012-12-22 05:54:37

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

#30 2012-12-22 08:00:25

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

#31 2012-12-22 11:12:18

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

#32 2012-12-22 15:27:11

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

#33 2012-12-22 16:04:38

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

#34 2012-12-22 19:41:41

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

#35 2012-12-24 14:10:57

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

#36 2012-12-24 19:02:27

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

#37 2012-12-25 02:19:43

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

#38 2013-02-02 10:51:19

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

#39 2013-02-02 21:22:18

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

#40 2013-02-03 07:28:48

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

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