Responsive Screen Layout Using JavaScript & CSS

Responsive Screen Layout Using JavaScript & CSS

Working on a new version of the website for The Corporate IT Forum, it became obvious that an adaptive/responsive screen layout would be beneficial for our site users. Usage stats confirmed that a number of different screen resolutions were in use in accessing the site and of course newer devices too i.e. tablets & pads.

CSS Fluid Layout

The new site layout required three columns with the left & right columns at a fixed width and the center column fluid. To adhere to SEO best practice, it was important that the center column, which houses the main content, appear above the two side columns for when the search engine spiders came to visit.

We also wanted to be sure that it was a robust CSS layout – to that end, the 3-column liquid layout by Matthew James Taylor came to the rescue.

Screen Resolution Breakpoints

The site is quite modular and we wanted to be smart with the presentation of multiple content modules in the center column i.e. three modules to a row if the screen resolution is ‘x’ or drop to two wider modules if the resolution is ‘y’.
The modules are styled to float left so they line up in a row across the screen, with a right-margin to set them apart from one another.
So, the next step was to identify the different screen resolution breakpoints – what resolution would require a change to the layout – and came up with the following:

  1. less than 1024
  2. between 1024  & 1366
  3. between 1366  & 1400
  4. between 1400  & 1440
  5. between 1440  & 1600
  6. between 1600  & 1680
  7. more than 1680

The JavaScript

Now that we had the breakpoints, it was time to assign each module with a suitable width on the fly, based on the user’s screen resolution, so that there would be as little space wasted as possible.

To use the DOM’s getElementById method, we had to assign each module a unique id. So each module was assigned the value “dynamicWidthModule” appended with a number as the unique identifier, so the first module was “dynamicWidthModule0”, the second “dynamicWidthModule1″ and so on.
We did this so ‘n’ number of modules can be generated, e.g. when using a CMS, where there is no opportunity to assign identifiers manually, and they can all be adjusted.

First then, before applying any function, we have to detect the user’s screen resolution which easily be done using

[codesyntax lang=”javascript” title=”Detect screen width” blockstate=”expanded”]

var clientWidth = screen.width;

[/codesyntax]

Next, based on the screen width breakpoints, set the module width and determine the number of modules per row (as explained earlier, because we’re using CSS float and margin to site the modules in a row, it is important to set the margin-right of the right-most module to zero)

[codesyntax lang=”javascript” title=”Determine module width & number of columns” blockstate=”expanded”]

if(clientWidth < 1024) { var setWidth = "350px"; } 
	else if (clientWidth >= 1024 && clientWidth < 1366) { var setWidth = "350px"; var col = 2; } 
	else if (clientWidth >= 1366 && clientWidth < 1400) { var setWidth = "393px"; var col = 2; } 
	else if (clientWidth >= 1400 && clientWidth < 1440) { var setWidth = "410px"; var col = 2; } 
	else if (clientWidth >= 1440 && clientWidth < 1600) { var setWidth = "430px"; var col = 3; } 
	else if (clientWidth >= 1600 && clientWidth < 1680) { var setWidth = "336px"; var col = 3; } 
	else if (clientWidth >= 1680) { var setWidth = "363px"; var col = 3;}

[/codesyntax]

Now, for each of the modules with the correct id, set the width and based on the number of modules per row, work out which modules should have a zero right margin.

[codesyntax lang=”javascript” title=”Set each module width & adjust right-margin if needed” blockstate=”expanded”]

var idMod = 0;
	while(document.getElementById(baseIdentifier + idMod)) 
	{
		document.getElementById(baseIdentifier + idMod).style.width = setWidth;

		if ( ( (col == 2 ) && (is_int((idMod + 1) / 2)) ) || ( (col == 3) && (is_int((idMod + 1) / 3)) ) ) {
			document.getElementById(baseIdentifier + idMod).style.marginRight = "0px";
		}

		idMod++;
	}

[/codesyntax]

Finally wrap it all up in a function and call it at the bottom of your page, or on DOMReady once all the elements are ready on the page

[codesyntax lang=”javascript” title=”The function & how to call it” blockstate=”expanded”]

function dynamicWidth(baseIdentifier) 
{
	var clientWidth = screen.width;

	if(clientWidth < 1024) { var setWidth = "350px"; } 
	else if (clientWidth >= 1024 && clientWidth < 1366) { var setWidth = "350px"; var col = 2; } 
	else if (clientWidth >= 1366 && clientWidth < 1400) { var setWidth = "393px"; var col = 2; } 
	else if (clientWidth >= 1400 && clientWidth < 1440) { var setWidth = "410px"; var col = 2; } 
	else if (clientWidth >= 1440 && clientWidth < 1600) { var setWidth = "430px"; var col = 3; } 
	else if (clientWidth >= 1600 && clientWidth < 1680) { var setWidth = "336px"; var col = 3; } 
	else if (clientWidth >= 1680) { var setWidth = "363px"; var col = 3;}

	var idMod = 0;
	while(document.getElementById(baseIdentifier + idMod)) 
	{
		document.getElementById(baseIdentifier + idMod).style.width = setWidth;

		if ( ( (col == 2 ) && (is_int((idMod + 1) / 2)) ) || ( (col == 3) && (is_int((idMod + 1) / 3)) ) ) {
			document.getElementById(baseIdentifier + idMod).style.marginRight = "0px";
		}

		idMod++;
	}
}

dynamicWidth("dynamicWidthModule");

[/codesyntax]

So, this little JavaScript & CSS combo allows the site to be viewed on most resolutions and the modules lay out accordingly.

Note : to determine the width of modules, you first need to calculate how many modules you want to fit in the center column, the width of which needs to be calculated by subtracting the total width of the fixed-width side columns as well as any padding.

Comments are closed.