1. Набираем команду codeby webinar. Набираем команду для организации и проведения вебинаров. Подробнее ...

    Скрыть объявление
  2. Требуются разработчики и тестеры для проекта codebyOS. Требования для участия в проекте: Знание принципов работы ОС на базе Linux; Знание Bash; Крайне желательное знание CPP, Python, Lua; Навыки системного администрирования. Подробнее ...

    Скрыть объявление
  3. Получи 30.000 рублей. Для получения денег необходимо принять участие в конкурсе авторов codeby. С условиями и призами можно ознакомиться на этой странице ...

    Внимание! Регистрация авторов на конкурс закрыта.

    Скрыть объявление

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

Тема в разделе "Web - программирование", создана пользователем noid, 17 сен 2012.

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

    noid Гость

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

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

    Ну и сам код, разумеется. Для меня это темный лес.
    Код:
    <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>
     
Загрузка...
Статус темы:
Закрыта.

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