Simple Responsive Function in Prototype.js

This article was expanded idea from a previous post entitled Window Resize Function in Prototype.js. The previous function will only work when you resize the window but not on the Page or Window Load. This is hybrid code from two events, specifically `eventName` “dom:loaded” and “resize”. I call it hybrid because I combined the native Javascript and Prototype.JS framework. An elegant code to be an alternative to response.js (jQuery dependent) on its resize and document event function.

function responsive(){
 	var width = document.viewport.getWidth();
    var height = document.viewport.getHeight();
    var dims = document.viewport.getDimensions().height; // dims.width and dims.height
  
document.getElementById('widthID').innerHTML=width; 
document.getElementById('heightID').innerHTML=height; 

  // Add your custom code here
    
 }

// Executing Function Upon Page Load
Event.observe(window, "dom:loaded", responsive, true);

// Executing Function Upon Browser Resize
Event.observe(window, "resize", responsive, true);
 

You can check its actual demo here. If you’re looking for official documentation you can go to their official documentation page on document.viewport.

This is essential for your Responsive Web Design (RWD) project, you can just add a code handler for further function, say for example, if Iphone screen is 480px, you can do a branch code like

if(width < 480) {
   alert('This is an Iphone Screen Size')
}

I hope you’ll enjoy this simple tool