Git Code Commit (all commits between last post and this commit (link))
Today we will load a mobile or desktop Cascading Style Sheet (CSS) based on the type of browser using the site. If you remember in the last post, I had updated ApplicationFlow.js -> SetLayout() with the IsMobile() server call result. I put it in a callback so the layout was set before anything else could proceed.
The actual load is best illustrated in reference #1. Live Document Object Model (DOM) manipulation is nothing new. But, as I learned today, this includes the ability to load CSS files on the fly.
- Loading the file based on if browser is classified as mobile or desktop
- Verifying CSS file is loaded with test class – testBackGround (notice that Desktop.css has a value of yellow).
- Verifying CSS file is loaded – Because I am using a browser classified as ‘Desktop’ by the regular expression added in an earlier post, the color is yellow. Not particularly pretty, but it proves that this works (this is temporary markup that I will remove and is only for illustration).
Next will be the implemented CSS layout.