Responsive Gridzy.js Configuration

Sometimes you may need different configurations for different viewport sizes. So let’s make the configuration responsive.


Gridzy.js itself does not support responsive configuration, but adding such a feature is really easy. We only have to set the new options as soon as the window size changes.

Just look at the following script:

<script>
document.addEventListener('DOMContentLoaded', function() {

	/**
	 * first we get the gridzy instance
	 */
	var gridzyInstance = document.querySelector('.gridzy').gridzy;

	function update(viewport) {

		/**
		 * here we set the options for screens wider than 999 pixels
		 */
		if (viewport.width >= 1000) {
			gridzyInstance.setOptions({
				desiredHeight: 300
			});
		}
		
		/**
		 * here we set the options for screens smaller than 1000 pixels but wider than 499 pixels
		 */
		else if (viewport.width < 1000 && viewport.width >= 500) {
			gridzyInstance.setOptions({
				desiredHeight: 200
			});
		}
		
		/**
		 * here we set the options for all other screens (so for screens smaller than 499 pixels)
		 */
		else {
			gridzyInstance.setOptions({
				desiredHeight: 100
			});
		}
	}
	
	// the rest is to retrive the viewport size and to call the update function when needed
	function getViewportSize() {
		return {
			width: Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
			height: Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
		};
	}
	window.addEventListener('resize', function() { update(getViewportSize()); });
	update(getViewportSize());
});
</script>

Place this script anywhere after the main Gridzy.js file and adopt it to your needs. You can respond also on viewport.height if you like and you can change any option parameter.

The above script works with breakpoints. However, you could also realize very dynamic values. Here is an example just to stimulate your creativity:

...
	function update(viewport) {
		gridzyInstance.setOptions({
			desiredHeight: Math.round(viewport.width / 5) // here we set the desiredHeight option always to a fifth of the viewport width
		});
	}
...

I hope everything is clear. However, if you have any questions, please contact me ✌😉

Be the first to leave a reply …

or

You can post as a guest if you like. But please consider, that I always review such comments before I switch them public, to prevent spam. If you want to see your comment public immediately, just sign up and in. It's just a click away and it's really simple. You don't even need a password. 😉