Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Стили (CSS) Вывод количества новостей в зависимости от разрешения экрана

Вывод количества новостей в зависимости от разрешения экрана


     06.07.2014    Стили (CSS), Хаки    1313

вопрос
Скажите можно как то сделать вывод новостей в зависимости от разрешения экрана, пример есть на https://play.google.com Новости выводятся через include.

Ответил: D0Gmatist


В HTML добавляется ID
/** Адапация width **/
function myCallback(i, width) {
    document.documentElement.id = 'sizeWindows' + i;
}
var ADAPT_CONFIG = {
    dynamic: true,
    callback: myCallback,
    range: [
        '0 to 1190', // html id=sizeWindows0
        '1190 to 1420', // html id=sizeWindows1
        '1420 to 1650', // html id=sizeWindows2
        '1650' // html id=sizeWindows3
    ]
};
(function(w, d, config, undefined) {
    if (!config) {
        return;
    }
    var url, url_old, timer;
    var callback = config.callback || function(){};
    var path = config.path ? config.path : '';
    var range = config.range;
    var range_len = range.length;
    var css = d.createElement('link');
    css.rel = 'stylesheet';
    css.media = 'screen';
    function change(i, width) {
        css.href = url;
        url_old = url;
        callback(i, width);
    }
    function adapt() {
        clearTimeout(timer);
        var width = d.documentElement ? d.documentElement.clientWidth : 0;
        var arr, arr_0, val_1, val_2, is_range, file;
        var i = range_len;
        var last = range_len - 1;
        url = '';
        while (i--) {
            arr = range[i].split('=');
            arr_0 = arr[0];
            file = arr[1] ? arr[1].replace(/\s/g, '') : undefined;
            is_range = arr_0.match('to');
            val_1 = is_range ? parseInt(arr_0.split('to')[0], 10) : parseInt(arr_0, 10);
            val_2 = is_range ? parseInt(arr_0.split('to')[1], 10) : undefined;

            if ((!val_2 && i === last && width > val_1) || (width > val_1 && width <= val_2)) {
                file && (url = path + file);
                break;
            }
        }
        if (!url_old) {
            change(i, width);
            path && (d.head || d.getElementsByTagName('head')[0]).appendChild(css);
        }
        else if (url_old !== url) {
            change(i, width);
        }
    }
    adapt();
    function react() {
        clearTimeout(timer);
        timer = setTimeout(adapt, 16);
    }
    if (config.dynamic) {
        if (w.addEventListener) {
            w.addEventListener('resize', react, false);
        }
        else if (w.attachEvent) {
            w.attachEvent('onresize', react);
        }
        else {
            w.onresize = react;
        }
    }
})(this, this.document, ADAPT_CONFIG);
Где
        '0 to 1190', // html id=sizeWindows0
        '1190 to 1420', // html id=sizeWindows1
        '1420 to 1650', // html id=sizeWindows2
        '1650' // html id=sizeWindows3
размеры в пикселях и как будет называться ID
от него и можно будет стилизовать весь вывод

Комментарии пользователей (9)

GFIT
3

58 | 9

GFIT - 6 июля 2014 22:51 - Юзер

https://play.google.com
Слился текст, так вот ссылка))

Gopr
10

494 | 164

Gopr - 6 июля 2014 23:09 - Юзер

Можно если новости будут выводится через такую верстку:
<ul>
<li>Новость#1</li>
<li>Новость#2</li>
<li>Новость#3</li>
<li>Новость#4</li>
</ul>
И стили:
@media (max-width:1024px) {
ul li:nth-of-type(4) {display:none}
}
@media (max-width:800px) {
ul li:nth-of-type(3) {display:none}
}
@media (max-width:600px) {
ul li:nth-of-type(2) {display:none}
}
ps: "display:none" плохое решения для новостей...

D0Gmatist
225

794 | 281

D0Gmatist - 6 июля 2014 23:15 - Местный

***Комментарий удален***

Каждый программист знает - в правильном софте все должно быть прекрасно:
и пользовательский интерфейс, и программные решения, и гениальные ошибки!
Болтовня ничего не стоит. Покажите мне код.

Gopr
10

494 | 164

Gopr - 6 июля 2014 23:35 - Юзер

В HTML добавляется ID

К чему именно он добавляется или нужно в ручную его прописать в виде id="sizeWindows"?

D0Gmatist
225

794 | 281

D0Gmatist - 7 июля 2014 00:16 - Местный


Gopr,автоматом добавляет ТЫЦ у меня в шаблоне id не прописан

Каждый программист знает - в правильном софте все должно быть прекрасно:
и пользовательский интерфейс, и программные решения, и гениальные ошибки!
Болтовня ничего не стоит. Покажите мне код.

D0Gmatist
225

794 | 281

D0Gmatist - 7 июля 2014 00:19 - Местный


В шаблоне не праписано

Каждый программист знает - в правильном софте все должно быть прекрасно:
и пользовательский интерфейс, и программные решения, и гениальные ошибки!
Болтовня ничего не стоит. Покажите мне код.

GFIT
3

58 | 9

GFIT - 7 июля 2014 00:27 - Юзер

Как сделать для категорий?

Gopr
10

494 | 164

Gopr - 7 июля 2014 09:59 - Юзер

Теперь увидел)

GFIT
3

58 | 9

GFIT - 7 июля 2014 11:48 - Юзер

Так как новости выводятся через custom category

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы