Javascript.RU

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

Как сделать скрытие только части текста
Всем привет. Ребята спасите) вот есть код который уже работает как нужно. Единственная проблема я не могу сделать так чтобы можно было показывать к примеру первые 400рх контента в блоке, а всё что ниже скрывать под кнопку "Развернуть". Ещё вы увидите что там есть эффект который должен быть над кнопкой. В общем я пытался сделать как на РБК вот здесь https:// marketing.rbc.ru/research/41319/ но что то не получается. Помогите люди добрые)

$(document).ready(function () {
    $(".content").hide();
        $(".toggle").on("click", function (e) {
            
            var $this = $(this).prev('.content');
            var $text = $(this);
            $this.slideToggle('fast', function () {
                if ($(this).is(':visible')) {
                    $text.text('Свернуть');
                } else {
                    $text.text('Развернуть');
                }
            });
        });
    });

<div class="firstbl content__text shadow ">
  <div class="content content__text-wrap">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus accusamus hic quae libero rem odit et fugit cumque dolore perferendis tempore officia illum atque nam, quia ut, quibusdam. Modi, ex.</div>
    <div>Doloribus magnam, labore vero voluptatum quaerat quidem eveniet quo eos, minus aliquid commodi obcaecati animi, facilis voluptatibus voluptas ab, quasi veniam totam soluta molestias natus. Repellat animi perspiciatis, quos vitae.</div>
    <div>Cumque ea laudantium corporis odio reprehenderit voluptates, quis iste aperiam eius pariatur itaque magni, autem consequuntur, odit officiis? Adipisci aliquid consequuntur tenetur quae magni eaque repellendus fuga quia nisi laboriosam!</div>
    <div>Eligendi ut recusandae officiis nostrum praesentium modi error, quae ab velit itaque, beatae reprehenderit delectus unde id facere aliquam totam est facilis culpa expedita aspernatur! Et amet omnis porro exercitationem.</div>
    <div>Fugit quisquam asperiores impedit ipsa, doloribus officiis maiores? Dolore possimus tenetur eum. Corrupti repudiandae doloribus officiis accusamus soluta fugiat consequatur hic, distinctio perferendis. Ipsum incidunt, magni veniam recusandae illum cupiditate.</div>
    <div>Iste autem sit quos provident fugiat doloribus, delectus adipisci inventore quam quis hic maxime. Deleniti optio quas hic reprehenderit voluptas eius fuga rerum, veritatis totam molestias officiis, deserunt quis aliquam.</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus iusto soluta quibusdam, pariatur molestiae est. Provident impedit unde alias dolores rerum ex minus quae ab, et nihil similique fugit optio.</div>
    <div>Hic odit, adipisci. Nam quia dolor architecto debitis. Possimus dolor impedit excepturi quidem. Aperiam neque aut voluptatibus sit earum sint, libero consectetur repellendus doloremque architecto qui, suscipit autem est magnam.</div>
  </div>
 <div class="toggle product__button">more info</div>
</div>
<style>
.content__text {
    font-size: 18px;
    line-height: 26px;
    font-family: Kazimir,'Helvetica CY',Arial,sans-serif;
    max-height: 400px;
    overflow: hidden;
    position: relative;
    color: #333;
    max-height: 400px;
}
.content__text-wrap {
    margin-bottom: 20px;
}
.content__text.shadow:after {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 400px;
    content: ' ';
    pointer-events: none;
    background: -moz-linear-gradient(top,rgba(255,255,255,0) 0,rgba(255,255,255,0) 1%,rgba(255,255,255,0) 70%,#fff 100%);
    background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0,rgba(255,255,255,0) 1%,rgba(255,255,255,0) 70%,#fff 100%);
    background: linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,0) 1%,rgba(255,255,255,0) 70%,#fff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
}
.product__button {
    max-width: 176px;
    margin: 0 auto 31px;
    padding: 10px;
    border: 1px solid #999;
    border-radius: 3px;
    font-family: GraphikCy-Medium,'Helvetica CY',Arial,sans-serif;
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    cursor: pointer;
     display: block;
}
</style>
Ответить с цитированием
  #2 (permalink)  
Старый 18.05.2019, 11:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

SL1de,
сложно придумать вариант, которого ещё нет на форуме ...
открывашка 230 на js закрыть на указанную величину
открывашка 231 со сменой текста на кнопке
Ответить с цитированием
  #3 (permalink)  
Старый 18.05.2019, 11:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

открывашка со сменой текста на кнопке
SL1de,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<style>
.content__text {
    font-size: 18px;
    line-height: 26px;
    font-family: Kazimir,'Helvetica CY',Arial,sans-serif;
    position: relative;
    color: #333;
}
.content__text-wrap {
    margin-bottom: 20px;
    max-height: 400px;
    overflow: hidden;

}

.open .content__text-wrap {
    max-height: none;
}
.open.content__text.shadow:after {
     opacity: 0;
     transition: 0s;
}

.content__text.shadow:after {
    transition: .8s;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 400px;
    content: ' ';
    pointer-events: none;
    background:    -moz-linear-gradient(top,rgba(255,255,255,0) 0,rgba(255,255,255,0) 1%,rgba(255,255,255,0) 70%,#fff 100%);
    background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0,rgba(255,255,255,0) 1%,rgba(255,255,255,0) 70%,#fff 100%);
    background:         linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,0) 1%,rgba(255,255,255,0) 70%,#fff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
}
.product__button {
    max-width: 176px;
    margin: 0 auto 31px;
    padding: 10px;
    border: 1px solid #999;
    border-radius: 3px;
    font-family: GraphikCy-Medium,'Helvetica CY',Arial,sans-serif;
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    cursor: pointer;
    display: block;
}

.product__button:after {
    content: 'Развернуть';
}
.open .product__button:after {
    content: 'Свернуть';
}
</style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
    $('.content__text').on('click', '.toggle' ,function() {
    $(this).parents('.content__text').toggleClass('open')
})
});
  </script>
</head>

<body>
<div class="firstbl content__text shadow">
  <div class="content content__text-wrap ">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus accusamus hic quae libero rem odit et fugit cumque dolore perferendis tempore officia illum atque nam, quia ut, quibusdam. Modi, ex.</div>
    <div>Doloribus magnam, labore vero voluptatum quaerat quidem eveniet quo eos, minus aliquid commodi obcaecati animi, facilis voluptatibus voluptas ab, quasi veniam totam soluta molestias natus. Repellat animi perspiciatis, quos vitae.</div>
    <div>Cumque ea laudantium corporis odio reprehenderit voluptates, quis iste aperiam eius pariatur itaque magni, autem consequuntur, odit officiis? Adipisci aliquid consequuntur tenetur quae magni eaque repellendus fuga quia nisi laboriosam!</div>
    <div>Eligendi ut recusandae officiis nostrum praesentium modi error, quae ab velit itaque, beatae reprehenderit delectus unde id facere aliquam totam est facilis culpa expedita aspernatur! Et amet omnis porro exercitationem.</div>
    <div>Fugit quisquam asperiores impedit ipsa, doloribus officiis maiores? Dolore possimus tenetur eum. Corrupti repudiandae doloribus officiis accusamus soluta fugiat consequatur hic, distinctio perferendis. Ipsum incidunt, magni veniam recusandae illum cupiditate.</div>
    <div>Iste autem sit quos provident fugiat doloribus, delectus adipisci inventore quam quis hic maxime. Deleniti optio quas hic reprehenderit voluptas eius fuga rerum, veritatis totam molestias officiis, deserunt quis aliquam.</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus iusto soluta quibusdam, pariatur molestiae est. Provident impedit unde alias dolores rerum ex minus quae ab, et nihil similique fugit optio.</div>
    <div>Hic odit, adipisci. Nam quia dolor architecto debitis. Possimus dolor impedit excepturi quidem. Aperiam neque aut voluptatibus sit earum sint, libero consectetur repellendus doloremque architecto qui, suscipit autem est magnam.</div>
  </div>
 <div class="toggle product__button"></div>
</div>


</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 18.05.2019, 13:17
Новичок на форуме
Отправить личное сообщение для SL1de Посмотреть профиль Найти все сообщения от SL1de
 
Регистрация: 18.05.2019
Сообщений: 8

Спасибо большое за ответ. Но немного не пойму теперь) кнопка меняется текст не скрывается в вашем варианте. Или я что-то нее так смотрю?
Ответить с цитированием
  #5 (permalink)  
Старый 18.05.2019, 13:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

SL1de,
Ответить с цитированием
  #6 (permalink)  
Старый 18.05.2019, 13:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от SL1de
текст не скрывается
значит тексту достаточно места в 400px
Ответить с цитированием
  #7 (permalink)  
Старый 18.05.2019, 15:17
Новичок на форуме
Отправить личное сообщение для SL1de Посмотреть профиль Найти все сообщения от SL1de
 
Регистрация: 18.05.2019
Сообщений: 8

Сообщение от рони Посмотреть сообщение
значит тексту достаточно места в 400px
точняк) экран большой прост... ОГРОМНОЕ спасибо!

Решено)
Ответить с цитированием
  #8 (permalink)  
Старый 27.05.2019, 16:08
Новичок на форуме
Отправить личное сообщение для SL1de Посмотреть профиль Найти все сообщения от SL1de
 
Регистрация: 18.05.2019
Сообщений: 8

рони,
А можно ли сделать, чтобы при нажатии на кнопку свернуть экран пользователя перемещался на якорь на сайте и соответственно происходило сворачивание?
Ответить с цитированием
  #9 (permalink)  
Старый 27.05.2019, 16:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

SL1de,
$(function() {
    $('.content__text').on('click', '.toggle' ,function() {
    var open = $(this).parents('.content__text').toggleClass('open').is(".open");
    var hash = window.location.hash;
    var el = $(hash);
    if(!open && el.length) {
         $('body,html').stop().animate({
              scrollTop: el.offset().top
          }, 1200)
    }
})
});
Ответить с цитированием
  #10 (permalink)  
Старый 27.05.2019, 19:12
Новичок на форуме
Отправить личное сообщение для SL1de Посмотреть профиль Найти все сообщения от SL1de
 
Регистрация: 18.05.2019
Сообщений: 8

рони,
Я прошу прощения, но что нужно сделать, чтобы экран переводило на то место которое мне нужно?

Для меня js это темная магия к сожалению(

Могу только сделать предположение что вместо .top нужно поставить свой селектор?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать скрытие колонок таблиц если они не умещаются на экране optsar Общие вопросы Javascript 1 23.03.2016 17:02
Как сделать загрузку изображения аля вконтакте? OklickSpb Общие вопросы Javascript 4 31.03.2012 17:12
Как при быстром многократном клике по кнопке обрабатывать только первый клик battrack jQuery 3 22.03.2012 10:47
Как сделать чтобы пользователь только мог 2 раза прослушать запись? KOTDG AJAX и COMET 0 11.02.2012 22:37
Как сделать, чтобы музыка <embed> на странице не играла только при первом посещении? Bad Request Общие вопросы Javascript 22 27.07.2009 19:44