1. Уважаемые пользователи, прежде чем ответить в теме или создать новую,
    внимательно ознакомьтесь с правилами раздела

    Кому лень работать или руки не оттуда - пользуйтесь услугами специалистов
  2. Не задавайте глупых вопросов "Посоветуйте какой-нибудь компонент.."

    Есть JED!!! Ищите там!!!

Модуль Скользящий модуль при скроллинге страницы

Тема в разделе "Joomla", создана пользователем scs, 23 дек 2012.

Информация :
  • Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с правилами раздела
  • Не задавайте глупых вопросов "Посоветуйте какой-нибудь компонент.." Есть JED!!! Ищите там!!!
  • Аналоги ищите там же - на JED!!!
  • Новая версия? - У кого будет - тот выложит!
Модераторы: arman29, DMS, Genk0, NightHunter
  1. scs

    scs

    Регистр.:
    19 дек 2009
    Сообщения:
    236
    Симпатии:
    22
    Собственно, ищу модуль/плагин остающийся на странице при скроллинге вниз/вверх для J1.5 и 2.5 .
    В модуле необходимо размещение произвольного кода.
    2 часа поисков и изучения JED поставили в ступор. Может кто встречал где?
     
  2. binh

    binh

    Регистр.:
    6 сен 2011
    Сообщения:
    283
    Симпатии:
    75
    Может не совсем то что нужно, но на безрыбье... Перейти по ссылке
    плагин позволяет скролить менюшки т.е. модули меню, вместе со скролом страницы. Соответственно боковое меню всегда перед глазами. А произвольный код можно создать непосредственно в разделе модулей "произвольный HTML код" и присвоить ему размещение напри. left.
    з.ы. на форуме есть зануленная версия под j15
     
  3. dima2k

    dima2k

    Регистр.:
    20 апр 2007
    Сообщения:
    276
    Симпатии:
    262
    Их модуль обсчитывает "margin-top", причем в цикле - отсюда жуткая инертность модуля. Все-таки проще будет прямо в шаблоне прописать вывод модуля "произвольный HTML код" со стилем "position:fixed;top:20px;" (например)
    Upd. Набросал рабочий код:
    Вот это вставляем в шаблон, где к position-1 привязан наш модуль "произвольный HTML код" :
    Код:
    <?php if($this->countModules('position-1')) : ?>
    <style type="text/css">
    #float_block {
      position: fixed;
      z-index: 1000;
      margin-left: -65px; /* смещение модуля влево от края контента */
    }
    </style>
     
    <div id="float_block"><jdoc:include type="modules" name="position-1" /></div>
    <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/float_block.js"></script>
    <script type="text/javascript">float_block(150,20)</script>
    <?php endif; ?>
    
    Содержимое файла float_block.js, который надо бросить в папку js шаблона:
    Код:
    function float_block(m1,m2){
        if(!m1)m1=150;
        if(!m2)m2=20;
        window.onload=function(){
            var p=document.getElementById('float_block');
            function m(){
                var top=Math.max(document.body.scrollTop,document.documentElement.scrollTop);
                if(top+m2<m1){
                    p.style.top=m1-top+'px';
                }else{
                    p.style.top=m2+'px';
                }
            }
            m();
            window.onscroll=m;
        }
    };
    Здесь - m1 минимальный отступ от верха страницы, с которого начнется "прилипание" блока, а m2 - отступ от верхнего края уже "прилипшего" блока.
     
    Because, genycika, scs и 2 другим нравится это.
  4. scs

    scs

    Регистр.:
    19 дек 2009
    Сообщения:
    236
    Симпатии:
    22
    Вообщем, дошли руки проделать "ход конем" после внесения изменений в навигацию. Что сделано.
    Позиция прежняя
    Код:
    <position>slidefixed</position>
    В index.php такая конструкция
    Код:
    <div id="slidefixed">
    <jdoc:include type="modules" name="slidefixed" />
    </div>
    В CSS заданы стили
    Код:
    #slidefixed {position:fixed;top:900px;right:417px;width:230px;height:400px;z-index:1000;}

    Блок в нужном месте, с эти все ок. Но он находится не в первом экране, и при скроллинге скользит, но не поднимается в видимую область оставаясь внизу
    Как сделать что бы он "поднимался" при скроллинге и прилипал к видимой верхней или центральной части экрана??
     
  5. dima2k

    dima2k

    Регистр.:
    20 апр 2007
    Сообщения:
    276
    Симпатии:
    262
    Смотрите, если вы воспользовались кодом, который я предложил, то в скрипте укажите "float_block(900,0)", а в файле float_block.js исправьте "if(!m2)m2=20;" на "if(!m2)m2=0;"
    ну и проверьте, чтобы в этом же файле вместо "var p=document.getElementById('float_block');" было "var p=document.getElementById('slidefixed');"
     
  6. scs

    scs

    Регистр.:
    19 дек 2009
    Сообщения:
    236
    Симпатии:
    22
    Нет, решил делать без лишних дополнительных скриптов средствами css.
     
  7. dima2k

    dima2k

    Регистр.:
    20 апр 2007
    Сообщения:
    276
    Симпатии:
    262
    Тогда слайдинга и не будет) position:fixed - фиксирует элемент в одном месте экрана - не важно в границах первого экрана или за его пределами. Динамика достигается как раз за счет использования скрипта, который, отрабатывая скроллинг страницы, динамически перемещает нужный вам элемент, изменяя ему свойство top.
    Если все-равно хотите использовать только средства css, тогда нужно изначально разместить элемент в видимой части экрана, причем желательно учесть минимально возможные разрешения экрана по вертикали - для компьютеров это 600px, для смартфонов/телефонов по-моему 240px.
     
  8. scs

    scs

    Регистр.:
    19 дек 2009
    Сообщения:
    236
    Симпатии:
    22
    Вставляем в index.php шаблона не важно в какое место?
     
  9. dima2k

    dima2k

    Регистр.:
    20 апр 2007
    Сообщения:
    276
    Симпатии:
    262
    сюда же и вставляйте, т.е. т.к. стиль для #slidefixed вы уже определили, то просто под своим кодом добавьте подключение скриптов:
    Код:
    <div id="slidefixed">
    <jdoc:include type="modules" name="slidefixed" />
    </div>
    <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/float_block.js"></script>
    <script type="text/javascript">float_block(900,0)</script> 
    
    и содержимое float_block.js в вашем случае будет таким:
    Код:
    function float_block(m1,m2){
        if(!m1)m1=150;
        if(!m2)m2=0;
        window.onload=function(){
            var p=document.getElementById('slidefixed');
            function m(){
                var top=Math.max(document.body.scrollTop,document.documentElement.scrollTop);
                if(top+m2<m1){
                    p.style.top=m1-top+'px';
                }else{
                    p.style.top=m2+'px';
                }
            }
            m();
            window.onscroll=m;
        }
    };
    P.S. Можете переименовать везде float_block в slidefixed для стилизации =)
     
  10. scs

    scs

    Регистр.:
    19 дек 2009
    Сообщения:
    236
    Симпатии:
    22
    dima2k, Все отлично, только теперь в зависимости от ширина экрана, разрешения монитора, блок "плавает" в разной части экрана по горизонатли, надо бы его зафисксировать в позиции right жестко. По вертикали находится в нужном месте.
    стили в template.css
    Код:
    #slidefixed {position:fixed;top:900px;right:417px;width:230px;height:400px;z-index:1000;}
    В index.php следующее
    Код:
    <div id="slidefixed">
    <jdoc:include type="modules" name="slidefixed" />
    </div>
    <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/slidefixed.js"></script>
    <script type="text/javascript">slidefixed(900,0)</script> 
    в slidefixed.js следущее
    Код:
    function slidefixed(m1,m2){
        if(!m1)m1=150;
        if(!m2)m2=0;
        window.onload=function(){
            var p=document.getElementById('slidefixed');
            function m(){
                var top=Math.max(document.body.scrollTop,document.documentElement.scrollTop);
                if(top+m2<m1){
                    p.style.top=m1-top+'px';
                }else{
                    p.style.top=m2+'px';
                }
            }
            m();
            window.onscroll=m;
        }
    };
    Вроде как медленно но уверено все идет к нужному результату, только чувствуется дефицит знаний...