From the course: Creating a Responsive Web Experience
Unlock this course with a free trial
Join today to access over 22,600 courses taught by industry experts.
Detecting a change in screen size
From the course: Creating a Responsive Web Experience
Detecting a change in screen size
Now that we can properly determine the size of browser with JavaScript, next we're going to want to run that check browser function repeatedly to constantly check the size of the state. And we're also going to want to make sure that we don't constantly reload that content area, unless there's been a browser change. So to do that, let's come back to our design.js file. Now inside of the check browser function, after we redefine the H1 tag to let us know what our variable are being set to. Let's set a few returns. Let's set another conditional statement here. So we're going to start with an IF, parentheses brackets, split this open on the brackets. So inside of the paranteses. We're going to check if Window Size does not equal the new Window Size, so let's go up here and copy that variable name. So, Window Size does not equal new Window Size. Let's go inside of here. What we're going to do is set the Window Size variable inside of here which again, it's at the top of the document. It's…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
(Locked)
Determining the screen size with JavaScript7m 41s
-
(Locked)
Detecting a change in screen size4m 1s
-
(Locked)
Loading alternative content based on screen size3m 11s
-
Setting up the mobile nav button4m 6s
-
(Locked)
Setting up the mobile nav panel4m 7s
-
Opening and closing the nav panel7m 20s
-
(Locked)
-
-
-