Creating media queries with javascript

Question

I have a javascript function that displays news on a website. At the moment 12 items are displayed on a carousel, and 6 items on each carousel slide.

When the screen size reaches 768px, I want to change this so only 3 items are on each slide. Is it possible to do a media query like this with javascript?

In the below code 'items' is the total articles and 'breakpoint' is the amount on one slide. Then i've put the additems function to show how articles are displayed on the page.

 $.fn.InitLatestNews = function(opts) {
        var config = $.extend({}, {
            'data' : [],
            'items' : 12,
            'breakpoint' : 6
        }, opts);

        var navIndex = 1;

        function AddItems(obj) {
            var htmlstring = '';
            var json = config.data;

            var itemNumber;
            if( config.items < json.length ) 
                itemNumber = config.items;
            else
                itemNumber = json.length;

            htmlstring += '<ul class="latestNews_list">';

            for( var i = 0; i < itemNumber; i++ ) {

                if ( i > 0 ) {
                    if( (i + 1) % config.breakpoint === 1 ) {
                        navIndex++;
                    }
                }

                if( navIndex === 1 )
                    htmlstring += '<li data-html="page-' + navIndex + '">';
                else
                    htmlstring += '<li class="hidden" data-html="page-' + navIndex + '">';

                htmlstring += '<div class="ln_image">';
                htmlstring += '<a href="' + json[i].url + '"></a>';
                if( json[i].imageUrl ) {
                    htmlstring += '<img class="ln_main_img" src="' + json[i].imageUrl + '" alt="' + json[i].title + '">';
                    htmlstring += '<div class="ln_read_overlay">';
                    htmlstring += '<div class="ln_overlay_inner">';
                    htmlstring += '<img src="/stylesheet/medway2014/magnifierglass.png">';
                    htmlstring += '<p>Read Article</p>';
                    htmlstring += '</div>';
                    htmlstring += '</div>';
                }
                htmlstring += '</div>';

                htmlstring += '<div class="ln_info">';
                htmlstring += '<a href="' + json[i].url + '"><h2>' + json[i].title + '</h2></a>';
                htmlstring += '<p>' + json[i].leader + '</p>';
                htmlstring += '</div>';

                htmlstring += '</li>';

            }

            htmlstring += '</ul>';

            obj.html(htmlstring);

        }

Have you tried using CSS @media screen and (min-width:...)?

Motombo
– Motombo

2016-08-19 14:17:38 +00:00
Commented Aug 19, 2016 at 14:17 — Motombo
– Motombo, Commented Aug 19, 2016 at 14:17

Juan Ferreras · Accepted Answer · 2016-08-19 14:20:42Z

Why do you want to do it with JavaScript?

There's a reason separation of concerns exist. JavaScript should add dynamic behaviour, but presentation and stylings belong to CSS.

You can easily leave your code as is if it's currently working and use CSS to hide every element from the 4th onwards.

/* hide all news from the 4th onwards */
.latestNews_list li:nth-child(n+4)  {
  display: none;
}
@media screen and (min-width: 768px){
  .latestNews_list li:nth-child(n+4){
     display: list-item; /* or what ever was their display value before */
  }
}

We can't tell much from your code, but feel free to provide a MCV Example and we can see if you can solve this alone with CSS without making your JavaScript code uglier.

Collectives™ on Stack Overflow

Creating media queries with javascript

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related