Меню
Оставить заявку
Статьи
Свежевыжатые соки для технических писателей

Видимость <footer> в зависимости от наличия скроллинга на странице

Поиск  Пользователи  Правила  Войти
Форум » Программное обеспечение » Форум Help&Manual

Внимание! У нас сбои с почтовым сервером! Если не пришло письмо о регистрации или смене пароля напишите нам на info@techwriters.ru! 
@twriters obmen_soobsheniyami.pngчат для технических писателей в Telegram

 Зарегистрируйтесь
Страницы: 1
RSS
Видимость <footer> в зависимости от наличия скроллинга на странице
 
#1
Мне нравится1
08.02.2016 15:18:15
Задача: Изменить шаблон публикации  - <footer>  отображать на странице, если есть скроллинг.
Если нет скроллинга, то не отображать .
Не получается установить видимость <footer> только в случае при наличия на странице скроллинга.

В Шаблоне страницы определяю футер, например:
<footer>
......
<a displaytype="text" defaultstyle="true" type="topiclink" href="<%HREF_CURRENT_PAGE%>" styleclass="Go_Start_Page" style="font-size:8pt;" translate="true">К началу раздела</a>
.......
</footer>
 
Наверное, надо использовать function getBodyScrollTop(). Добавила её в  файл   .js
Но не понимаю - как в шаблоне добавить условие проверки.
Может быть, кто-то делал такие вещи????
Изменено: Елена - 08.02.2016 15:22:35
 
 
 
#2
Мне нравится0
09.02.2016 18:17:21
Коллеги, будьте добры, подскажите решение. Кто силен в стилях Help&Manual?
 
 
 
#3
Мне нравится0
11.02.2016 15:07:18
Покопался в своих наработках - футер так и не нашел. Зато - обнаружил "модную" появляющуюся стрелку возврата на начало темы...
Итак, в шаблоне добавляем в раздел стилей (в HTML Page Templates -> HTML Source Code):
Код
#arrow {
    padding: 20px 25px;
    color: #fff;       /* цвет текста кнопки */
        position: fixed;   /* фиксируем расположение кнопки */
        bottom: 10px;      /* расположение снизу 10 пикселей */
        right: 10px;      /* расположение справа 10 пикселей */
        cursor: pointer;   /* показываем красивую лапку при наведении */
    transition: all 0.5s;   /* добавляем время анимации для плавного появления */
    border-radius: 20%;   /* скругляем углы, при 50% кнопка будет круглой */
    background-color: rgba(230, 57, 57, 0.5);  /* цвет кнопки, прозрачная розовая */
    z-index:100;      /* впереди планеты всей! ;) */
    display: none;      /* скрыта по умолчанию */
      }

#arrow:hover {
    background: #b22222;   /* цвет кнопки при наведении, красная */
      }

.upper {
 bottom: 80px !important;   /* поднимаем повыше, для наличии стандартного статичного футера с URL */
}
В основной скрипт шаблона (в HTML Page Templates -> HTML Source Code) , после
Код
$(document).ready(function(){
добавляем:
Код
// добавляем кнопку с текстом "^" со всплывающей подсказкой "В начало"; вставляем после #idcontent
// классы fa - в данном случае подключены шрифты Fonts-Awesome 4.4.0, можно добавить любые свои стили
 $('<div id="arrow" class="fa fa-circle-up page-scroll" title="В начало">^</div>').insertAfter('#idcontent');
    
 $(window).scroll(function() {      // вешаем события отображения на прокрутку
 
 if  ($(window).scrollTop() == $(document).height() - $(window).height()) {
            $('#arrow').addClass('upper');   // поднимаем
        } else {
            $('#arrow').removeClass('upper');   // опускаем
        }
 
if ($(this).scrollTop() >= 400) {   
        $('#arrow').fadeIn();   // плавно отображаем
    }
        else {
   $('#arrow').fadeOut();   // плавно скрываем
   };
 });
 
 $('#arrow').click(function() { // при щелчке
 $('html, body').animate( {   // анимированно
    scrollTop: 0      // прокручиваем на начало
  }, 'slow')         // причем - медленно, плавно, в темпе вальса ;)
});
Все.
В результате при прокрутке окна справки на 400 пикселей появляется красивая прозрачная стрелка. При наведении - прозрачность пропадает, при щелчке - окно прокручивается на начало темы.
Замените стили на свои, поменяйте содержимое и расположение всплывающей кнопки (можете превратить ее в панель, подвал и т.д. - как вам нравится)...

Результат:
В начале темы:

После прокрутки:

При наведении:

После щелчка на кнопке:
  
Изменено: H&M User - 11.02.2016 16:20:29
 
 
 
#4
Мне нравится0
15.02.2016 15:33:45
Спасибо, но у меня не получилось.  После того, как вставила указанный код:
1.  При сохранении в формат CHM выдает ошибку на странице:
"Предполагается наличие }"
2. При сохранении в формат WebHelp ошибки не выдает, но ничего не формирует

Пыталась добавить сообщение на форум - полностью код шаблона, но при попытке это сделать, выдается сообщение "Введите текст".
код не добавляется.
Изменено: Елена - 16.02.2016 12:20:51
 
 
 
#5
Мне нравится0
16.02.2016 12:03:21
В основном скрипте шаблона (в HTML Page Templates -> HTML Source Code)  у меня  нет

Код
$(document).ready(function(){

Использую стандартный шаблон H&M, только преобразованный немного
 
 
 
#6
Мне нравится0
16.02.2016 12:04:41
По частям код шаблона:
1. Стили
Код
<head>
  
   <met a name="generator" content="Help & Manual">
   <met a name="keywords" content="<%TOPIC_KEYWORDS%>">
   <met a name="description" content="<%TOPIC_HEADER_TEXT%>">
   <met a http-equiv="Content-Type" content="text/html; charset=<%DOCCHARSET%>">
   <li nk type="text/css" href="<%STYLESHEET%>" rel="stylesheet">
   <li nk type="text/css" href="custom.css" rel="stylesheet">
   <li nk type="text/css" href="CSS_My.css" rel="stylesheet"> 
   <sc ript type="text/javascript" src="nsh.js"></sc ript>
   <sc ript type="text/javascript" src="Body_My.js"></sc ript>
   
    <!--ДОБАВИЛА:  --> 
<st yle type="text/css">
#arrow {
    padding: 20px 25px;
    color: #fff;       /* цвет текста кнопки */
        position: fixed;   /* фиксируем расположение кнопки */
        bottom: 10px;      /* расположение снизу 10 пикселей */
        right: 10px;      /* расположение справа 10 пикселей */
        cursor: pointer;   /* показываем красивую лапку при наведении */
    transition: all 0.5s;   /* добавляем время анимации для плавного появления */
    border-radius: 20%;   /* скругляем углы, при 50% кнопка будет круглой */
    background-color: rgba(230, 57, 57, 0.5);  /* цвет кнопки, прозрачная розовая */
    z-index:100;      /* впереди планеты всей! ;) */
    display: none;      /* скрыта по умолчанию */
      }
#arrow:hover {
    background: #b22222;   /* цвет кнопки при наведении, красная */
      }
.upper {
 bottom: 80px !important;   /* поднимаем повыше, для наличии стандартного статичного футера с URL */
}
</style>
</head>
Изменено: Елена - 16.02.2016 12:21:40
 
 
 
#7
Мне нравится0
16.02.2016 12:13:35
2 часть   - body, заголовок:
Код
<body>
   НУ НЕ ВСТАЛЯЕТСЯ  У МЕНЯ  КОД   <body>  !!!!!  с тэгами
Изменено: Елена - 16.02.2016 12:18:19
 
 
 
#8
Мне нравится0
16.02.2016 12:14:57
Пожалуйста, попробуйте вставить свой шаблон полностью, хоть самого простого, стандартного в H&M,
но с
Код
$(document).ready(function(){


И указанным кодом (далее):
 // добавляем кнопку с текстом "^" со всплывающей подсказкой "В начало"; вставляем после #idcontent
// классы fa - в данном случае подключены шрифты Fonts-Awesome 4.4.0, можно добавить любые свои стили
......

Извините, но я не специалист (причем совсем) но верстке HTML. А хочется сделать так, как написала в самом начале своей проблемы.
Изменено: Елена - 16.02.2016 12:23:52
 
 
 
#9
Мне нравится0
16.02.2016 14:46:47
Цитата
Елена написал:
установить видимость <footer> только в случае при наличия на странице скроллинга.
не понимаю - как в шаблоне добавить условие проверки.
Давно не работаю с H&M. В нормальной системе подготовки документации  я бы определил footer в CSS например так
Цитата
#footer {
  left:0px;
  bottom:0px;
   height:50px;
width:100%;
 position:fixed;
  display:none;
}
и использовал примерно такое условие для его показа::
Цитата
if ($(document).height() > $(window).height()) {
   $("#footer").hide();
 }    
 else {
     $("#footer").show();
  }
}
 
 
 
#10
Мне нравится0
16.02.2016 19:08:32
Цитата
Елена написал:
Использую стандартный шаблон H&M, только преобразованный немного
Напишите название шаблона (стандартных там много) - создам решение.

Цитата
Виктор Фигурнов написал:
if ($(document).height() > $(window).height()) {
  $("#footer").hide();
 }    
 else {
    $("#footer").show();
 }
}
Просто скрипт на условие показа не сработает (страницы же еще нет), его надо вешать на событие (лучше всего scroll, так как при ready и onload не сработает, а на refresh будет чудить) и добавить в код страницы шаблона.
 
 
 
#11
Мне нравится0
17.02.2016 13:58:00
Спасибо за ответ.
Проще скинуть весь проект (архивом), для примера всего 4 главы разного размера (длины)

Проект со вставкой кода кнопки.
Работает только в формате HTML.   При этом, заголовок раздела при скроллинге "уплывает вверх".
В формате  CHM кнопка не появляется.  Заголовок раздела при скроллинге также "уплывает вверх".
Изменено: Елена - 25.02.2016 12:57:43
 
 
 
#12
Мне нравится0
24.02.2016 16:23:54
Цитата
Елена написал:
Проект со вставкой кода кнопки.
Работает только в формате HTML.   При этом, заголовок раздела при скроллинге "уплывает вверх".
В формате  CHM кнопка не появляется.  Заголовок раздела при скроллинге также "уплывает вверх".
Елена, добрый день!
Добавил в ваш проект код responsive-шаблона и font-awesome (полный список иконок - https://fortawesome.github.io/Font-Awesome/cheatsheet/).
Заголовок темы никуда "не уплывает". Кнопка работает:



Про формат CHM забудьте, скрипты запрещены, да и использовался он в прошлом веке. Вместо него используйте EWriter eBook for Windows. Вызов тем остался таким же:
Код
Shablon_ADMIN_10_10_Help.exe "main.html"
Shablon_ADMIN_10_10_Help.exe "1_3.html#ed"
Shablon_ADMIN_10_10_Help.exe "HR_Reference/HR_Dialogi_kompleksa.html"
Изменено: H&M User - 24.02.2016 16:24:28
 
 
 
#13
Мне нравится0
25.02.2016 08:35:58
Спасибо за ответ!!!
Узнала новую и полезную информацию (responsive-шаблон и font-awesome).  
Плюсы понятны. Настанет время, когда HELPы для можно сказать промышленного софта будут читать и с мобил.
К минусам данного шаблона на первый взгляд, можно отнести следующее:
1. Нет открытия/закрытия  секций:
Код
<a href="jav * ascript:HMToggleExpandAll(true)" title="Открыть все секции для просмотра">Открыть все секции</a>
  &nbsp;&nbsp;<a href="jav * ascript:HMToggleExpandAll(false)" title="Закрыть все секции после просмотра").

Этот пункт нужно  в header добавлять, т.к. штука очень даже удобная.


2. При открытии документа (что в формате eBook for Windows, что в браузере) в оглавлении документа открыты по умолчанию все подразделы.
Если учесть, что вложенных разделов может быть сколько угодно, то  реализация шаблона именно для Руководств  (и, желательно, с иконками открыт раздел/закрыт раздел)  очень даже актуальна.

В общем, разбираться нужно.
Спасибо за большую работу по модернизации проекта.

P.S. Относительно плоского стиля хотела бы выразить свое мнение.  
Ассоциации: Как-то мы уже привыкли к просмотру TV в HD-формате.   К черно-белому  ТV возвращаться не хочется.
Такое ощущение было, когда поставила Visual Studio 12.
Хотя разрабатывать иконки для конкретного софта в векторной графике  для восприятия  при любом разрешении экрана весьма проблематично.
Изменено: Елена - 25.02.2016 14:34:14
 
 
 
Страницы: 1
Читают тему

©2005- 2021 «TechWriters.ru: Все для технического писателя и разработки технической документации»


info@techwriters.ru
-->
г.Москва, Большая Спасская 10/1
Рейтинг@Mail.ru