Как Скрыть\показать Часть Блока

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем noid, 17 сен 2012.

Статус темы:
Закрыта.
  1. noid

    noid Гость

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

    Предложили вариант, но что-то не открываются блоки. демо

    Ну и сам код, разумеется. Для меня это темный лес.
    Код (Text):
    <html>
    <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <title>11</title>
    </head>
    <style>
    .item {max-height: 200px; overflow: hidden;}
    </style>
    <body>

    <script type="text/javascript">
    $(document).ready(function(){
    $('.item .holder').each(function(){
    var holder = $(this);
    var parent = $(this).parent('.item');
    if(holder.height() > parent.height()) {
    parent.after($('<button>Открыть</button>').on('click',function(){
    parent.height(holder.height());
    return false;
    }));
    }
    });
    });
    </script>

    <div class="item">
    <div class="holder">
    <img src="img1.jpg" /><br />
    <img src="img2.jpg" /><br />
    <img src="img3.jpg" />
    </div>
    </div>

    <div class="item">
    <div class="holder">
    <img src="img3.jpg" /><br />
    <img src="img3.jpg" /><br />
    <img src="img3.jpg" /><br />
    <img src="img3.jpg" /><br />
    <img src="img3.jpg" />
    </div>
    </div>

    <div class="item">
    <div class="holder">
    <img src="img3.jpg" />
    </div>
    </div>

    </body>
    </html>
     
Загрузка...
Статус темы:
Закрыта.

Поделиться этой страницей