Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.06.2014, 19:01
Интересующийся
Отправить личное сообщение для vacuumtrade Посмотреть профиль Найти все сообщения от vacuumtrade
 
Регистрация: 29.06.2014
Сообщений: 15

Вывод информации при нажатии кнопки читать далее
Ребята, очень прошу о помощи. Есть очень длинная страница, и есть скрипт который скрывает ее часть (еле нашел то, что нужно в данной ситуации). все хорошо, все работает. но как сделать так, чтобы сначала выводилась одна часть страницы, к примеру 1000 px, затем при нажатии кнопки читать далее, следующая часть размером 1000 px и т.д. пока не закончится страница?! Помогите, пожалуйста, очень прошу
<script>
    $(function(){
        if($('#ta').length){
            blok_height = Number($('#ta').css('height').replace('px',''));
             
            if(blok_height > 80){
               $('#ta').css('max-height','80px');
               $('.read-next').show();  
            } 
       }
    });
    
    $('.read-next').live('click', function(){
        
        if($('#ta').css('max-height') != 'none'){
           $('#ta').css('max-height','');
           $(this).text('Скрыть');
        } else {
           $('#ta').css('max-height','80px');     
           $(this).text('Читать далее...');
        }
        
        return false;
    });
</script>

<div style="height:'100%'">
		<div id="ta" style="overflow:hidden">текст</div>		
		<a class="read-next" style="display:none;" href="#">Читать далее...</a>
</div>
Ответить с цитированием
  #2 (permalink)  
Старый 29.06.2014, 19:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

vacuumtrade,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
#ta{
    background:#3C3;
    color:#66F;
    height:100px;
    width:600px;
    transition:all 1s;
    -moz-transition:all 1s;
    -webkit-transition:all 1s;
    -o-transition:all 1s;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
  <script>
 $(function ()
  {  var h = 50, t = $('#ta'), max = t[0].scrollHeight, min = 22;
   $('.read-next').on('click', function (event)
  {
   var H = t.height();
   if(H == max){H = min}
   else if (H  + h > max){H = max}
   else {H += h};
   t.height(H);
   $(this).text(H == max ? 'Скрыть этот бред' : 'Читать далее...')
   return false
  })
  })
  </script>
</head>

<body>
  <div style="height:'100%'">
    <div id="ta" style="overflow:hidden">
      Товарищи! консультация с широким активом требуют
      определения и уточнения существенных финансовых и
      административных условий. Не следует, однако
      забывать, что укрепление и развитие структуры
      влечет за собой процесс внедрения и модернизации
      направлений прогрессивного развития.
      Разнообразный и богатый опыт начало повседневной
      работы по формированию позиции позволяет оценить
      значение форм развития. Товарищи! начало
      повседневной работы по формированию позиции
      позволяет выполнять важные задания по разработке
      форм развития. Товарищи! сложившаяся структура
      организации требуют от нас анализа систем
      массового участия. Таким образом новая модель
      организационной деятельности позволяет оценить
      значение позиций, занимаемых участниками в
      отношении поставленных задач. Разнообразный и
      богатый опыт постоянное
      информационно-пропагандистское обеспечение нашей
      деятельности способствует подготовки и
      реализации модели развития
    </div><a class="read-next" href="#">Читать далее...</a>
  </div>
</body>
</html>

Последний раз редактировалось рони, 06.02.2022 в 09:38.
Ответить с цитированием
  #3 (permalink)  
Старый 29.06.2014, 20:50
Интересующийся
Отправить личное сообщение для vacuumtrade Посмотреть профиль Найти все сообщения от vacuumtrade
 
Регистрация: 29.06.2014
Сообщений: 15

Спасибо большое. То, что нужно. Только вы перепутали значения max и min местами. Но слава богу разобрался. А скажите еще пожалуйста, как сделать, чтобы кнопка "скрыть этот бред" вылазила только в конце страницы?
Пробовал установить значение max и с помощью этого удалось ограничить длину. Но это не подходит, ведь все страницы разной длины.
Подскажите, пожалуйста.
Ответить с цитированием
  #4 (permalink)  
Старый 29.06.2014, 20:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

vacuumtrade,
неосилил ваш текст
Ответить с цитированием
  #5 (permalink)  
Старый 29.06.2014, 21:01
Интересующийся
Отправить личное сообщение для vacuumtrade Посмотреть профиль Найти все сообщения от vacuumtrade
 
Регистрация: 29.06.2014
Сообщений: 15

рони,
ну, в общем. мне нужно, чтобы кнопка "скрыть этот бред" вылазила только тогда, когда заканчивается текст элемента.
Ответить с цитированием
  #6 (permalink)  
Старый 29.06.2014, 21:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от vacuumtrade
ну, в общем. мне нужно, чтобы кнопка "скрыть этот бред" вылазила только тогда, когда заканчивается текст элемента.
а сейчас разве иначе?
Ответить с цитированием
  #7 (permalink)  
Старый 29.06.2014, 21:38
Интересующийся
Отправить личное сообщение для vacuumtrade Посмотреть профиль Найти все сообщения от vacuumtrade
 
Регистрация: 29.06.2014
Сообщений: 15

рони,
да. в том варианте в котором вы мне скинули скрипт, он глючил. я поменял местами значение мах и мин, получилось так и работает все хорошо:
<script>
 $(function ()
  {  var h = 3333, t = $('#more_promocodes'), max = 16100, min = t[0].scrollHeight;
   $('.read-next').on('click', function (event)
  {
   var H = t.height();
   if(H == max){H = min}
   else if (H  + h > max){H = max}
   else {H += h};
   t.height(H);
   $(this).text(H == max ? 'Вернуться наверх' : 'Еще больше промокодов')
   return false
  })
  })
  </script>

Правда в данном случае, надо устанавливать длину элемента (страницы) в значении max. и здесь я сталкиниваюсь с проблемой, потому что длина каждой страницы разная. если установить немного больше, то остается ненужный кусок.
Ответить с цитированием
  #8 (permalink)  
Старый 29.06.2014, 21:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

vacuumtrade,
мне сложно понять что вы делаите со скриптом и ещё сложнее понять почему нельзя если вам так нужно в максимуме поставить размер страницы ?
max = $('html').height()
Ответить с цитированием
  #9 (permalink)  
Старый 29.06.2014, 21:59
Интересующийся
Отправить личное сообщение для vacuumtrade Посмотреть профиль Найти все сообщения от vacuumtrade
 
Регистрация: 29.06.2014
Сообщений: 15

рони,
Хорошо. Попробую по-другому. Что изменить в вашем скрипте, чтобы каждый раз, при нажатии кнопки "больше", открывалось 3000 px?
Ответить с цитированием
  #10 (permalink)  
Старый 29.06.2014, 22:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от vacuumtrade
открывалось 3000 px?
достаточно h = 3000 - почему надо что-то ещё менять непонятно
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена цвета/картинки фона при нажатии на элемент Webtest Элементы интерфейса 16 20.04.2017 22:36
Активация checkbox при нажатии на текст и изменение стиля у текста. ilyakor jQuery 2 10.06.2014 19:34
Поменять элемент матрицы при нажатии кнопки в другом фрейме Alexiy Общие вопросы Javascript 1 09.11.2011 11:49
Восстановление hidden field при нажатии кнопки Назад в браузере debugx Элементы интерфейса 1 19.10.2011 19:03
вывод нужного текста в текстовом поле при нажатии на кнопку! fifo4ka Общие вопросы Javascript 7 06.05.2008 13:36