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

Заинтересовала наша система? Тогда этот форум для Вас!

rss

Вы не зашли.

Объявление

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

irbees2008
Пользователь
Откуда: Шахтинск
Зарегистрирован: 2012-03-14
Сообщений: 2271
Рейтинг :   98 
Профиль  Вебсайт

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

FNS написал:

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

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

Активен

 

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

legenda
Пользователь
Откуда: ua
Зарегистрирован: 2009-12-22
Сообщений: 2133
Рейтинг :   39 
Профиль

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

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>

вставил, но оно неработает, у меня сразу блок появляется внизу на сайте, а должен блок появлятся только если прокручу вниз и потом убератся ели кручу вверх (смотри пример више)

Неактивен

 

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

irbees2008
Пользователь
Откуда: Шахтинск
Зарегистрирован: 2012-03-14
Сообщений: 2271
Рейтинг :   98 
Профиль  Вебсайт

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

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)

Активен

 

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

legenda
Пользователь
Откуда: ua
Зарегистрирован: 2009-12-22
Сообщений: 2133
Рейтинг :   39 
Профиль

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

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>

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

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

Неактивен

 

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

irbees2008
Пользователь
Откуда: Шахтинск
Зарегистрирован: 2012-03-14
Сообщений: 2271
Рейтинг :   98 
Профиль  Вебсайт

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

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

Активен

 

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

Knopik
Пользователь
Откуда: ufa
Зарегистрирован: 2009-10-14
Сообщений: 322
Рейтинг :   53 
Профиль  Вебсайт

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

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)

Неактивен

 

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

legenda
Пользователь
Откуда: ua
Зарегистрирован: 2009-12-22
Сообщений: 2133
Рейтинг :   39 
Профиль

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

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)

Неактивен

 

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

legenda
Пользователь
Откуда: ua
Зарегистрирован: 2009-12-22
Сообщений: 2133
Рейтинг :   39 
Профиль

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

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>

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

Неактивен

 

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

irbees2008
Пользователь
Откуда: Шахтинск
Зарегистрирован: 2012-03-14
Сообщений: 2271
Рейтинг :   98 
Профиль  Вебсайт

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

между хеад

Код:

<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}&nbsp;</ul>
                
</table>

Активен

 

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

legenda
Пользователь
Откуда: ua
Зарегистрирован: 2009-12-22
Сообщений: 2133
Рейтинг :   39 
Профиль

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

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

Неактивен

 

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

irbees2008
Пользователь
Откуда: Шахтинск
Зарегистрирован: 2012-03-14
Сообщений: 2271
Рейтинг :   98 
Профиль  Вебсайт

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

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

Активен

 

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

legenda
Пользователь
Откуда: ua
Зарегистрирован: 2009-12-22
Сообщений: 2133
Рейтинг :   39 
Профиль

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

irbees2008, +1 и ему smile

Неактивен

 

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

legenda
Пользователь
Откуда: ua
Зарегистрирован: 2009-12-22
Сообщений: 2133
Рейтинг :   39 
Профиль

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

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

Неактивен

 

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

irbees2008
Пользователь
Откуда: Шахтинск
Зарегистрирован: 2012-03-14
Сообщений: 2271
Рейтинг :   98 
Профиль  Вебсайт

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

legenda написал:

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

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

Активен

 

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

irbees2008
Пользователь
Откуда: Шахтинск
Зарегистрирован: 2012-03-14
Сообщений: 2271
Рейтинг :   98 
Профиль  Вебсайт

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

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

Код:

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

Активен

 

Board footer

Powered by FluxBB

[ Generated in 0.020 seconds, 23 queries executed ]