Window Resize Function in Prototype.js

Unlike WordPress,  a natively built jQuery framework, Magento relies on prototype.js as Javascript Framework, though you can customize Magento by adding jQuery link in the header if you can conveniently work with this framework and running it smoothly by adding jQuery.noConflict() to avoid conflicts between Prototype.js and jQuery.

Now if you are looking for a counterpart of jQuery .resize() function in prototype.js you can play this below.

<script>
Event.observe(window, "resize", function() {
    var width = document.viewport.getWidth();
    var height = document.viewport.getHeight();
    // var dimWidth = document.viewport.getDimensions().width;
    // var dimHeight = document.viewport.getDimensions().height;
  document.getElementById('resize').innerHTML=width;
});
</script>

The commented dimWidth and dimHeight works the same.

Working with natively built Javascript framework on a particular CMS like Magento, will result to a flawless and elegant JS codes, even you have jQuery.noConflict() added, there’s some instance you can still notice a conflict between the two frameworks.

See more advanced application at http://www.mylabplus.com/web-development-guide/simple-responsive-function-prototype-js/

Elvin is one of the contributors of mylabplus.com. He has been creating Wordpress Plugins, Magento Extensions, & Mobile Applications. If you find this article useful, please Follow him on .
About Elvin D.
Leave Your Thought