» » Новости в две, три, четыре и т.д. колонки (развитие мысли)

Новости в две, три, четыре и т.д. колонки (развитие мысли)

24.03
60
30 883
Новости в две, три, четыре и т.д. колонки (развитие мысли)

Эта статья - логическое продолжение поста про новости в две колонки (jQuery Edition).

В комментариях был задан вопрос о невозможности вывести новости в 3, 4 и т.д колонки. Я не стал приводить код в комментариях, а решил немного описать решение и сразу показать его демонстрацию.

Итак суть по прежнему не меняется, будем использовать jQuery, но на этот раз код сократится до 1 строчки, что положительно влияет на скорость загрузки страницы (пусть и совсем незначительно).

Не буду лить лишнюю воду, покажу сразу пример реализации, здесь я немного модифицировал скрипт, для наглядности, но суть не меняется. Кстати комплексная поисковая оптимизация сайтов - не так у и дорого.
Разбирать же будем вариант с тремя колонками новостей.

Реализация

1. Код в shortstory.tpl должени иметь примерно такой вид:
<div class="news">
содержание shortstory и всякие теги,
главное тут - "обёртка" всего содержимого shortstory.tpl
</div>


2. Обязательные стили в CSS:
.news.float {
    float: left;
    width: 30%; //значение зависит от желаемого количества колонок (например для 5ти колонок нужно указать 18-20%)
    }
.clr {
    clear: both;
    height: 0;
    overflow: hidden;
    }


3. Ну и самое главное - jQuery-код:
<script type="text/javascript">
jQuery(function($) {
    $(".news").addClass("float").filter(":nth-child(3n)").after('<div class="clr"></div>');
});
</script>


Как видно из строки кода - всё совершенно просто - сначала дописываем всем блокам с классом news дополнительный класс, а потом дописываем после каждого третьего блока пустой div с слассом clr - это для того, чтобы новости имели ровное горизонтальное положение, а не плавали так, как им захочется.

Как настроить?

Легко!
Всё что нужно - это заменить цифру три в строке :nth-child(3n) на желаемую, и в CSS заменить width: 30%; на нужное значение (как правило методом подбора).

Ну и как обычно - включаем фантазию и делаем красиво smile

Похожие материалы

Комментарии

Mek
Mek 24 марта 2011 09:48
Не знаю почему, но данный способ у меня не работает.
ПафНутиЙ
ПафНутиЙ 24 марта 2011 09:52
Демо показывает нормально?
Mek
Mek 24 марта 2011 09:58
Демо показывает, но при тестировании на денвере не работает. Похоже что дело в jQuery-коде.
ПафНутиЙ
ПафНутиЙ 24 марта 2011 09:58
покажите что и где прописали.
Mek
Mek 24 марта 2011 10:05
Обернул короткую новость в див со стилем
Добавил в стили данный код
В майн.тпл перед хеад вставил jQuery-код

Сейчас постави jQuery-код перед </head>, всё заработало.
ПафНутиЙ
ПафНутиЙ 24 марта 2011 10:15
smile
Mek
Mek 24 марта 2011 16:45
ПафНутиЙ, большое спасибо за данный хак, позаимствую его для своего сайта smile Есть ещё один небольшой вопросик: к примеру, сделал я вывод новостей в 4 колонки. Новости вмещаются по ширине "впритык" (ширина сайта фиксированная). Как можно задать не 25% для каждой новости, а 100% для всех четырёх? Да бы уместить на одну строку одну новость с длинным заголовком и три с коротким.
Желаемый эффект получается если вообще убрать параметр width: 30% . Но тогда справа остаётся ещё немного свободного места, что не очень красиво.
ПафНутиЙ
ПафНутиЙ 24 марта 2011 17:54
Это уже методом тыка, но я бы не стал так делать - не красиво будет смотреться когда все новости разной ширины. Лучше с заголовками пошаманить немного, что бы всегда была одна строчка :)
Например задаём фиксированную высоту заголовка и overflow: hidden; smile
А можно ещё и jquery подключить к этому делу, что бы показывался title (по умолчанию в DLE не показывается title у заголовков новостей), тогда даже обрезанный заголовок будет удобочитаемым.
Mek
Mek 24 марта 2011 19:19
но я бы не стал так делать - не красиво будет смотреться когда все новости разной ширины.

Согласен, но в моём случаи это наиболее подходящий вариант. Методом тыка не получается. Если ставить ширину в процентах, то ширина каждого блока получается одинаковая, и тоже самое если задать ширину в пикселях. Каким образом мне задать общую ширину всех четырёх блоков в процентах или пикселях?
ПафНутиЙ
ПафНутиЙ 24 марта 2011 19:41
в вашем случаи лучше указывать ширину в пикселях
Mek
Mek 24 марта 2011 20:18
ПафНутиЙ , Вы наверное не верно меня поняли smile Если указывать ширину каждого блока в пикселях, то получатся все блоки одинаковой ширины. Мне же надо чтоб общая ширина всех блоков была ровна, к примеру, 1000 пикселям, но где это прописать я не знаю.
ПафНутиЙ
ПафНутиЙ 24 марта 2011 20:55
По умолчанию DIV имеет ширину 100%, так что то, что вы хотите - не получится реализовать, ширину нужно указывать всегда, если оне отличается от 100%.
Mek
Mek 29 марта 2011 22:41
ПафНутиЙ, не планируете ли Вы выпустить хак, который будет обрезать заголовок короткой новости до определённого символа? smile При размещении новостей в 3-4 колонки он будет просто необходим smile
ПафНутиЙ
ПафНутиЙ 30 марта 2011 09:56
Оно и не нужно, ведь можно обрезать заголовок средствами CSS
Делается это элементарно:
h3 {
font: 16px/20px Verdana, sans-serif;
height: 20px;
overflow: hidden;
}
bratoz
bratoz 19 апреля 2011 15:24
Вопросик у меня.
Вот у меня на online.videotuts.ru есть проблемка с картинками.
Как сделать что бы для тех у кого монитор маленький, картинки не ложились друг на друга, а просто уменьшались в размере.
ПафНутиЙ
ПафНутиЙ 19 апреля 2011 15:49
насколько маленький? 800*600?
можно просто в css добавить стиль:
body {min-width: 1000px;}
bratoz
bratoz 20 апреля 2011 10:31
Цитата: ПафНутиЙ
body {min-width: 1000px;}


С этим разберусь потом, сейчас ещё одна не больша проблемка.
Sidebar в полной новосте мне нужен, а вот в main нет.
Я sidebar.tpl взял в [not-aviable=main] {include file="sidebar.tpl"} [/not-aviable]
Всё как бы гуд, но как сделать что бы и в категориях его тоже не было?
Вот например тут??
http://online.videotuts.ru/cinema4d-online-tutorials/

Т.е. что бы был вывод такой же как на главной
ПафНутиЙ
ПафНутиЙ 21 апреля 2011 09:22
Пусть это прозвучит банально, но читайте документацию от начала и до конца, зачастую в середине тоже пишут интересное smile
Namename
Namename 29 июля 2011 13:07
Не получается у меня что-то =(

Получается так, что фон новости отдельно от самой новости. Смещенно всё вообщем. Да и еще столбики не появились. Сделал всё по инструкции, много раз перепроверил! no
Namename
Namename 29 июля 2011 13:29
Вот сейчас все переделал по новой - вообще ничего не изменилось. Как было по стандарту, так и осталось.
ПафНутиЙ
ПафНутиЙ 29 июля 2011 15:09
На демо наглядно всё показано, всё работает.
у вас проблемы с вёрсткой сайта, либо что-то не то делаете.
Namename
Namename 29 июля 2011 15:13
хм, можно в аське вас выловить?)
Namename
Namename 29 июля 2011 17:30
Прошу, я всё проверил! Не работает!

Залил в templates такой же шаблон, для того, что бы новости отображались в 4 колонки только для нужных категорий.

В этот свежезалитый шаблон приминяю следующие изменения:
открываю shortstory.tpl, вношу туда код:
<div class="news">
код который был внутри shortstory.tpl
</div>
Далее, в каскадные стили шаблона style.css, в самый конец вношу код.

Затем, во внутрь <head></head> вношу jQuery скрипт.

Либо вообще ничего не меняется, либо в 4 колонки не встаёт, а текст появляется не там, где нужно.

Dle 9.3! Помогите пожалуйста!
ПафНутиЙ
ПафНутиЙ 29 июля 2011 18:37
Ссылку на сайт дайте.
Namename
Namename 30 июля 2011 16:51
Давайте на icq ?я добавил вас
Namename
Namename 30 июля 2011 18:48
Хм, а на официальном шаблоне - работает! Отличия папок корня шаблона от обычного тем, что папка со стилями называется "css" а не "styles'. хм..
Namename
Namename 30 июля 2011 18:52
Такс, всё дело в shortstory, оно не стандартное. Вот, посмотрите пожалуйста.

_http://don-light.net.ua/uploads/files/shortstory.tpl.rar
Namename
Namename 30 июля 2011 22:13
Всё спасибо, сделал всё сам в ручную. Сам придумал, написал - получилось.
ПафНутиЙ
ПафНутиЙ 31 июля 2011 22:50
Ну вот видите как хорошо, и я 2 дня на даче отдохнул, и вы смогли самомстоятельно дойти до решения :-)
Namename
Namename 2 августа 2011 17:53
:D
я просто не подключал ксс, я прямо там <div style> сделал)

Добавить комментарий

Комментировать могут только зарегистрированные пользователи

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.