Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Cкрыть\показать часть блока 
V
    Опции темы
noide
Дата 17.9.2012, 00:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 3
Регистрация: 17.9.2012

Репутация: нет
Всего: нет



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

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

Ну и сам код, разумеется. Для меня это темный лес.
Код

<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> 

PM MAIL   Вверх
Aliance
Дата 17.9.2012, 16:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137



1. Не нужно каждый раз обращаться к DOM, можно закешировать найденный элемент. Вместо:
Код

var holder = $(this);
var parent = $(this).parent('.item');

Пишем:
Код

var holder = $(this);
var parent = holder.parent('.item');


2. К слову, parent('.item') писать так же нет смысла исходя из разметки.

3. В остальном все написано верно, а не работает все из-за неправильного понимания работы CSS свойства max-height. Замени его на height и будет тебе счастье  smile 
PM MAIL WWW ICQ Skype   Вверх
noide
Дата 18.9.2012, 02:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 3
Регистрация: 17.9.2012

Репутация: нет
Всего: нет



Цитата(Aliance @ 17.9.2012,  16:15)
...В остальном все написано верно, а не работает все из-за неправильного понимания работы CSS свойства max-height. Замени его на height и будет тебе счастье  smile

Да, действительно работает с height-ом. Только все равно не то, так как высота блока не постоянная, и меняется в зависимости от новости. Это же новостной сайт. Поэтому нужно, чтобы работало с max-height, или чем то подобным.

Это сообщение отредактировал(а) noide - 18.9.2012, 02:39
PM MAIL   Вверх
noide
Дата 18.9.2012, 16:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 3
Регистрация: 17.9.2012

Репутация: нет
Всего: нет



Я подумал, наверное нужно ставить дополнительный скрипт, который будет менять класс с height: auto; блока, на класс с height: 200px;, если высота этого блока больше, или равна 200px. И тогда уже, будет срабатывать как надо вышенаписанный скрипт, применительно только к блокам, с заменённым классом (ну или id, наверное лучше id, я читал, что вроде ие плохо работает с классами в таких случаях). 

Вроде верно, да?

Только все равно нужна ваша помощь с этим скриптом, который будет менять классы (или id) по условию. Я пытаюсь конечно сам разобраться, но пока не мой уровень. Поможете, ладно? user posted image
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »


 




[ Время генерации скрипта: 0.0630 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.