Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.03.2020, 12:13
Аспирант
Отправить личное сообщение для Aruta Посмотреть профиль Найти все сообщения от Aruta
 
Регистрация: 08.07.2019
Сообщений: 69

Показать кнопку вниз
Снова добрый день!
Помогите пожалуйста еще раз

Есть несколько блоков с текстом с одним классом, отличаются они только кол-вом текста.

В одном блоке текста может быть 1 строка, в другом 21 строка.
Свойство css стоит :
overflow-y: auto

Задача:
Сделать кнопку, показывающую дочитал ли до конца текста юзверь
Где текст входит весь в блок - кнопки не должно быть, а где у блока появляется вертикальный скролл - надо показывать кнопку пока не долистаешь до конца текста - долистал? - меняем картинку кнопки на стрелку вверх.

Библиотеку подключать не охота ради этого, Т.к. даже 30-50Кб много для этой задачи.

У меня даже мыслей нет как это всё оформить - все мысли что были в головную боль перешли.

Картинку блоков прикрепил.

<div>
   <div class="text" style="overflow-y: auto;">
       <h3>Title</h3>
       <span>text text text</span>
   </div>
   <div class="btns">
       <div>Left btn</div>
       <div class="center-btn">Center btn</div>
       <div>Right btn</div>
    </div>
</div>


https://drive.google.com/open?id=1og...Q46lSGKNMvX0Ng
Ответить с цитированием
  #2 (permalink)  
Старый 13.03.2020, 14:36
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 408

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" >
 <style>
.cont {
	position: relative;
	border: 1px red solid;
	width: 400px;
	margin: 10px;
}
.text {
	position: relative;
	margin: 5px;
	max-height: 200px;
	border: 1px blue solid;
        overflow-y: auto;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.cont').forEach (cont => {
		const etext = cont.querySelector('.text')
		const cbut = cont.querySelector('.center-btn')
		if (etext.scrollHeight<=etext.clientHeight) {
			cbut.style.visibility = 'hidden';
		} else {
			cbut.innerHTML = etext.scrollTop + etext.clientHeight < etext.scrollHeight? 'Вниз' :'Вверх'
			etext.onscroll = () => {
				cbut.innerHTML = etext.scrollTop + etext.clientHeight < etext.scrollHeight? 'Вниз' :'Вверх'
			}
		}
			
	})
})
</script>
</head>

<body>
<div class=cont>
   <div class="text" style="overflow-y: auto;">
       <h3>Title</h3>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
   </div>
   <div class="btns">
       <button>Left btn</button>
       <button class="center-btn">Center btn</button>
       <button>Right btn</button>
    </div>
</div>
<div class=cont>
   <div class="text" style="overflow-y: auto;">
       <h3>Title</h3>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
       <span>text text text</span><br>
   </div>
   <div class="btns">
       <button>Left btn</button>
       <button class="center-btn">Center btn</button>
       <button>Right btn</button>
    </div>
</div>
</body>
</html>


Как то так.
Принцип такой, а красоту сами наведете.

Последний раз редактировалось voraa, 13.03.2020 в 14:40.
Ответить с цитированием
  #3 (permalink)  
Старый 13.03.2020, 14:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,803

Aruta,
максимальный scroll элемента
Ответить с цитированием
  #4 (permalink)  
Старый 15.03.2020, 14:19
Аспирант
Отправить личное сообщение для Aruta Посмотреть профиль Найти все сообщения от Aruta
 
Регистрация: 08.07.2019
Сообщений: 69

Не понимаю почему, но у меня не работают эти способы. Вот что я еще попробовал (как пример):
var elSc = document.querySelectorAll('.man__text');
					var e = document.querySelectorAll('.scrollup');
					for(var i=0; i<elSc.length; i++){
if(elSc[i].clientHeight < elSc[i].offsetHeight){
  elSc[i].style.background= 'green';
}	
}


Но проблема в том, что elSc[i].clientHeight < elSc[i].offsetHeight не работают, но работает скрипт этот безотказно как только я ставлю, например:
if( elSc[i].style.background != 'none' ){
//делаем что хотим
}


Почему не вычисляет elSc[i].clientHeight и elSc[i].offsetHeight?
Ответить с цитированием
  #5 (permalink)  
Старый 15.03.2020, 15:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,803

Сообщение от Aruta
Почему не вычисляет
сделайте макет иначе можно только гадать.

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #6 (permalink)  
Старый 16.03.2020, 06:30
Аспирант
Отправить личное сообщение для Aruta Посмотреть профиль Найти все сообщения от Aruta
 
Регистрация: 08.07.2019
Сообщений: 69

Проще наверное файлы выложить чем макет, т.к. я только добавляю окно справки на уже готовы файлы, а там такой франкштейн, что я когда увидел аж слезы пошли, поэтому приходится извращаться, а с jQuery я слабо умею, не говоря уже о извращениях + стилей очень много прописано. Но если нужно будет критично - я добавлю сюда все эти сотни строк

В комментах кода что написал - всё работает кроме этой пресловутого блока <div class="scrollup"></div> при overflow Название блока рабочее - не значит что скроллить вверх надо по нажатию. Только отображать если родитель имеет .show() и в div.man__text текста больше чем его видно

Посмотреть как выглядят (на фото) эти блоки со стилями можно по ссылке в сообщении при создании темы.

По факту получается структура работы такая:

Жмем блок N (просто отправная точка для работы моих файлов) -> .help__man-window-create, .help__man-inner (первый по очереди в коде) получают display="block" -> нажимаем кнопку Next ( <div class="control__help help__next">Next</div>) -> Текущий .help__man-inner.hide(), следующий .help__man-inner.show(). И так пока не кончатся блоки .help__man-inner в справке.
<div class="man__text"> - по наполнению может быть от 1 до 21 строки текста и его как раз надо отслеживать


<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" >
</head>
<body>
<div class="help__man-wrapper help-modal">    
	<div class="help__man-window-create d-none">     <!-- Этот блок скрыт при загрузке документа и отображается с помощью jQuery по клику на предопределенный блок -->
		<div class="help__man-window-inner">
			<section class="help__man-inner d-none">       <!-- Это блоки уже которые идут друг за другом (их много) и отличаются только наполнением текста внутри блока .man__text (ниже по структуре). Тоже изначально все скрыты, но при отображении родителя .help__man-window-create они по очерди отображаются при нажатии кнопки "Next" (.help__next) -->
				<div class="help__man-content dflex">													
					<div class="help__man-col-wrap">
						<div class="help__man-col dflex">
							<div class="close__cross-wrap dflex">
								<div class="minimize-help-wrap">
									<div class="min-help-btn dflex" title="Minimize"> 
										<div class="minimize-help"></div>
									</div>
								</div>
								<div class="close__cross">
									<img class="close_img" src="images/templates/default/priceblock/delete.png" title="Close help" alt="Close help">
								</div>																
							</div>
							<div class="help__man__text-wrap dflex">
								<div class="man__text">                   <!-- блок который имеет текст, который и надо отслеживать - влазит ли в видимую область или имеет скролл -->
									<h3>How to make a single-section window?</h3>
									<span>Hello, my Friend!</span>
									<p>Let me show you, how easy and fast to draw a window - click "Next" button</p>
								</div>
								<div class="scrollup"></div>    <!-- Блок который должен отображаться, если текст в блоке .man__text имеет overflow, если текст весь влазит в область - блок не показывается -->
								<div class="man__control dflex">
									<div class="control__help help__next">Next</div> 
								</div>
							</div>
						</div>
					</div>
					<div class="help__man-img">
						<img src="images/write-manshout.png" alt="HELPMAN" />
					</div>
				</div>
			</section>
                        <section class="help__man-inner d-none">
                                <!-- Подобный блок с другим только текстом в .man__text-->
                       </section>
                 </div>
	</div>
/div>
<script>
var elSc = document.querySelectorAll('.man__text');                  
var e = document.querySelectorAll('.scrollup');
for(var i=0; i<elSc.length; i++){
   if(elSc[i].clientHeight < elSc[i].offsetHeight){ 
     elSc[i].style.background= 'green'; //тестовое покраски блока в цвет условие для проверки читает ли offsetHeight и .clientHeight
}}
</script>
</body>
</html>

Последний раз редактировалось Aruta, 16.03.2020 в 06:59.
Ответить с цитированием
  #7 (permalink)  
Старый 16.03.2020, 06:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,803

Aruta,
может вам нужно измерять не .man__text а его родителя?
Ответить с цитированием
  #8 (permalink)  
Старый 16.03.2020, 06:56
Аспирант
Отправить личное сообщение для Aruta Посмотреть профиль Найти все сообщения от Aruta
 
Регистрация: 08.07.2019
Сообщений: 69

рони,
была такая мысль, но тоже увы - не работает. Почему-то именно с clientHeight и offsetHeight не работает, а как по-другому сделать - тямы не хватает.

P.s. Нашел, что почему-то считает их равными 0 постоянно. буду ковырять почему

Последний раз редактировалось Aruta, 16.03.2020 в 07:23.
Ответить с цитированием
  #9 (permalink)  
Старый 16.03.2020, 07:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,803

Aruta,
а так
Сообщение от Aruta
offsetHeight
scrollHeight
Ответить с цитированием
  #10 (permalink)  
Старый 16.03.2020, 08:48
Аспирант
Отправить личное сообщение для Aruta Посмотреть профиль Найти все сообщения от Aruta
 
Регистрация: 08.07.2019
Сообщений: 69

рони,
я нашел почему он считает 0 размер, но теперь ковыряюсь с тем, чтобы он находил все размеры, а не только первого попавшегося. Там есть и часть кода, который вы помогли и составили мне ранее

Вот скрипт:
$(document).on('click','#help__how-1w',function(e){
						$(this).parents().find('.help-modal').show();	
						$(this).parents().find('.help__man-window-create').show();
						$(this).parents().find('.help__man-window-inner').show();

//тут ищу высоту каждого элемента .man__text
						var elScc = $('div').parents().find('.help__man-inner');
elScc.each(function( index ) {
	var eb = elScc.find('.man__text');
  console.log($(eb).outerHeight());
});

//это конец и начало программы для переключения блоков .help__man-inner.

							$(function() {
$(document).on('click','.help__next',function(e){
var index = $('.help__next').index(this);
$('.help__man__show-wrap').show();
$('.man__show__step-wrap').eq(index).children().addClass('animated-arrows');
$('.man__show__step-wrap').hide().eq(index++).show();
$('.help__man-inner').hide().eq(index).show();
})

$(document).on('click','.help__back',function(e){
var index = $('.help__back').index(this) ;
$('.help__man__show-wrap').toggle(index > 0); 
$('.man__show__step-wrap').eq(index).children().removeClass('animated-arrows');
$('.help__man-inner').hide().eq(index--).show();
$('.man__show__step-wrap').hide().eq(index).show();
});
					})
						})
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавная прокрутка вверх и вниз по пикселю с помощью jquery zulyamodx jQuery 5 28.11.2016 12:42
повешать функицю на кнопку proro4eg jQuery 1 23.10.2014 15:48
как по клику на кнопку получить отмеченный объект pirat9629 ExtJS 0 19.08.2014 10:49
Показать кнопку Alex57B Элементы интерфейса 1 19.11.2013 23:39
показать кнопку голосовать и запретить подальшие нажатие Лейбл-ов fargus Элементы интерфейса 9 15.12.2010 23:07