Viewers: in countries Watching now:
- Creating variables, functions, and loops
- Writing conditional code
- Sending messages to the console
- Working with different variable types and objects
- Creating and changing DOM objects
- Event handling
- Working with timers
- Building smarter forms
- Using regular expressions
Instead in this case, all I'm doing is changing out the entire CSS file that this page is using from main.css, which is the default highly visual file, to narrow.css. And if I take a quick look at those, main.css is my big CSS file with a lot of stuff and narrow.css, well, there is really not much to this. In fact, this one is even doing some basic tricks like hiding all the images. So it's pretty sparse, but it proves the point. My question is well, how do you change them? And I change the CSS file by reaching into my link tag.
We give it an ID, in this case my CSS, and I can change the attributes of this just as easily as changing attributes of any other element. So if I jump over to the script.js file, I can see what we are doing here. There's an event on the window object called onresize. We have been working with onload so far, which gets called once when the DOM fully loads, but onresize gets called multiple times when you start to resize the browser window; in fact, it gets called dozens of times. It all depends on how fast your machine actually is.
It might get called a lot. So do be aware of that if the function that you are calling actually does a lot of processing. So every time it detects that the window is being resized, it will call the function called adjustStyle. That's the whole breakdown here. So the question is, what is adjustStyle? Well, it looks like there's a lot of code going on here, but in fact, we're back mainly to cross-browser issues. All I really want to do is get the width in pixels, and I create a new variable called width here. But unfortunately, there's not a super-reliable property that I can just access, because it's different across browsers.
So what's happening here is we're doing another little object detection here and saying hey, do I have a window.innerHeight object? If I do, well, then I must have a window.innerWidth object. If I don't, then there is all sorts of other combinations of do I have a documentElement object, and a clientHeight object? If so, I can access clientWidth. You should not bother about memorizing this, because you're typically not going to use it. You are going either copy it from somewhere else or use a third-party library. The end result is we should have a variable called width. And in my case here, what I'm saying is if width as measured as being less than 600, I am going to take grab the CSS element and then set the attribute called href = css/narrow.css, the path to the narrow file.
That's because we are not actually resizing, so this is never being called. We are just opening the browser at a small size. So one of the things I really want to do here is just duplicate this function to make sure that when we do an onload the function is also called. This will only happen one extra time, so that shouldn't be a problem. Now when I refresh this page, we should load in at the correct size. Again, this is a simple example that takes us through multiple real-world requirements.