Форум

vacuumtrade · #1 (**permalink**) 29.06.2014, 19:01

Ребята, очень прошу о помощи. Есть очень длинная страница, и есть скрипт который скрывает ее часть (еле нашел то, что нужно в данной ситуации). все хорошо, все работает. но как сделать так, чтобы сначала выводилась одна часть страницы, к примеру 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

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>

vacuumtrade · #3 (**permalink**) 29.06.2014, 20:50

Спасибо большое. То, что нужно. Только вы перепутали значения max и min местами. Но слава богу разобрался. А скажите еще пожалуйста, как сделать, чтобы кнопка "скрыть этот бред" вылазила только в конце страницы?
Пробовал установить значение max и с помощью этого удалось ограничить длину. Но это не подходит, ведь все страницы разной длины.
Подскажите, пожалуйста.

рони · #4 (**permalink**) 29.06.2014, 20:56

vacuumtrade,
неосилил ваш текст

vacuumtrade · #5 (**permalink**) 29.06.2014, 21:01

рони,
ну, в общем. мне нужно, чтобы кнопка "скрыть этот бред" вылазила только тогда, когда заканчивается текст элемента.

рони · #6 (**permalink**) 29.06.2014, 21:19

Сообщение от vacuumtrade

ну, в общем. мне нужно, чтобы кнопка "скрыть этот бред" вылазила только тогда, когда заканчивается текст элемента.

а сейчас разве иначе?

vacuumtrade · #7 (**permalink**) 29.06.2014, 21:38

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

<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

vacuumtrade,
мне сложно понять что вы делаите со скриптом и ещё сложнее понять почему нельзя если вам так нужно в максимуме поставить размер страницы ?
max = $('html').height()

vacuumtrade · #9 (**permalink**) 29.06.2014, 21:59

рони,
Хорошо. Попробую по-другому. Что изменить в вашем скрипте, чтобы каждый раз, при нажатии кнопки "больше", открывалось 3000 px?

рони · #10 (**permalink**) 29.06.2014, 22:05

Сообщение от vacuumtrade

открывалось 3000 px?

достаточно h = 3000 - почему надо что-то ещё менять непонятно

Форум

Справочник

Discord чат

Курсы javascript