Via @worldofprogrammers with Technical life 😂 CLICK THE LINK ON OUR BIO TO JOIN OUR FACEBOOK COMMUNITY Follow Me: @andrewtmays

View in Instagram ⇒

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.

Using an inline CSS style to create a new page in a PDF generator

I’ve recently been working with the TCPDF PDF generator class in PHP to generate PDFs on the fly as part of one of our newer business processes.

The class takes a lump of formatted HTML and creates a PDF document however generation being on the fly, there is no opportunity to use the inbuilt addpage() method of the class when the document needs to be broken up into multiple pages. A good example would be when generating an invoice and attaching a second page containing terms or a new chapter in a book.

Ideally, some marker within the HTML would inform the PDF generator when there is a page break, and thankfully there is.

Enter CSS

Set style="page-break-after:always;"

in the html e.g. for an empty div or p element, wherever you require a page break and TCPDF, and I warrant any good PDF generator function or class, will do the needful.

It’s handy to keep in mind that the same CSS style will also cause a printer to begin printing a new page when encountered.

Many thanks to Peter Young for this useful nugget.