JavaScript for Responsive Sites

When you have a responsive website there are many things that need consideration in terms of changes to the layout for each breakpoint. Often this can be done with pure CSS but occassionally there are instances where using CSS doesn’t quite manage to do what you need it to. Examples of this would be moving content blocks to different locations in the DOM or adding extra content based on the current screen size. I usually have a single script that I use to handle this functionality although I do sometimes do something a bit unusual, let me explain:

In our CSS we will see something like the following to define a breakpoint:

 @media(min-width:480px){
   //do something 
 }

The regular jQuery equivalent of this would be

  //do something 
   if((document).width() >= 480){
   }

what I dislike about this is that we’re hard coding values into our javascript and once we have three or more breakpoints it can become confusing and leave us with multiple changes that need to be made if we want to update a breakpoint or add a new one. Another drawback of this is that on occcasion the measured width in JavaScript can be different to the width in the CSS at a certain point leading to the JavaScript functionality not executing when the CSS layout has been triggered which is something we don’t want.

I get around this using a div, that’s right a div. I like to add an empty div as the first element in the body and give it an id eg. responsive div. Then in the CSS I will have something like the following:

#responsivediv{
 z-index:0; 
 width:100%;
}

@media(min-width:480px){
   #responsivediv{
   z-index:1; 
  } 
}

@media(min-width:768px){
   #responsivediv{
   z-index:2; 
  } 
}

Then I can use the z-index as a guide to which breakpoint the layout is currently in, this will be the same in the CSS and JavaScript and gets around that issue. This approach also means that the breakpoint value can be changed in the CSS without the JavaScript needing to be modified.

The following is a real life example of how I’ve used this in practice.

var previousIndex = 0;
var zIndex = parseInt($('#responsivediv').css('z-index'));

/*
* On Resize, respond as appropriate
*/
$(window).resize(function () {
  //Get the zindex and the previous
  var viewLevel = parseInt($('#responsivediv').css('z-index'));

  //If we passed a breakpoint
  if (previousIndex != viewLevel) {
    for (var i = 0; i < mItems.length; i++) {
       mItems[i].Resize(viewLevel);
    }
    previousIndex = viewLevel;
  }
});

An example of one of the items in the MItems array would be a carousel that needs to be paused when the user is in mobile view as it has been restyled as a list. This would look like the following (using an object oriented approach to JavaScript)


var Carousel = {
  exists: false,
  Init: function (level) {
    //Initialize
    this.exists = $('.carousel').length > 0 ? true : false;
  },
  Resize: function (viewLevel) {
    //It's broke so return
    if (!this.exists) {
      return false;
    }

    //Disable the carousel in responsive.
    if (viewLevel === 0) {
      if (!$('.carousel').hasClass('paused')) {
        //Pause the carousel
        $('.carousel').carousel('pause');
        $('.carousel').addClass('paused');
      }
    } else {
      if ($('.carousel').hasClass('paused')) {
        //Pause the carousel
        $('.carousel').carousel('cycle');
        $('.carousel').removeClass('paused');
     }
   }
  }
};

Wrapping Tables

One other thing I commonly include in my Javascripts is a wrapper around all tables that just adds a horizontal scroll in the mobile view. I usually achieve this using the following code.

$('table').each(function () {
  $(this).css('min-width', '500px');
  $(this).wrap('<div class="tablewrapper" style="width:100%; overflow:auto;"></div>');
});

I feel that this approach to responsive JavaScript greatly simplifies the process and allows for an inter connectivity between the JavaScript and CSS that you don’t get when using regular methods for breakpoints.

Leave a Reply

    To the top
    css.php