Example of How to Use the Resize Function in JavaScript


show more Learn how to resize a website dynamically, to display correctly on smartphones and full-sized desktop screens, with JavaScript. In this example, Simon Allardice shows how to combine what you've learned about JavaScript, including updating CSS, dealing with events, and feature and object detection to deal with cross-browser compatibility issues. show less
please wait ...

Example: Resize

So let's deconstruct another example. More than ever, these days we need to realize that the amount of screen real estate we have varies widely, from 30-inch-wide monitors to iPads, iPhones, and other smartphones. Now here's one JavaScript approach for dealing with this. Let's say I have a screen design for a typical desktop, and it looks pretty good, but if I resize and make it smaller, to something like a smartphone, what it does is change itself pretty significantly with the layout. Again, wider, we see a very visual display; narrow, we see a text-focused display.

And the steps to do this are actually very, very simple. One, we need to write JavaScript that realizes when the screen is being resized, and two, we need to then detect the actual size of the screen, because we need to figure out is it getting made smaller or is it getting made wider and change the DOM in reaction to that. Now I could start changing individual attributes of DOM elements if I wanted to and affect th...

Example: Resize
Video duration: 5m 47s 5h 31m Beginner

Viewers:

Learn how to resize a website dynamically, to display correctly on smartphones and full-sized desktop screens, with JavaScript. In this example, Simon Allardice shows how to combine what you've learned about JavaScript, including updating CSS, dealing with events, and feature and object detection to deal with cross-browser compatibility issues.

Subjects:
Developer Web
Software:
JavaScript
Author:
please wait ...