Same Page, Different Stylesheets
We're at it again! The code we stole lifted and 'adjusted' from the demo at W3Schools used list items for navigation. We tweaked it, this time using radio buttons instead of <li>s for navigation as featured in Version1 of this app.
This page uses <div> and semantic elements to group different sections of the HTML page.
It demonstrates how different stylesheets can change the layout of your HTML page. You can change the layout of this page by selecting different stylesheets in the menu, or by selecting one of the following links:
Stylesheet1, Stylesheet2, Stylesheet3, Stylesheet4, Stylesheet5, Stylesheet6
Don't want styles?!
Select No Stylesheet to see how the page looks like with an empty stylesheet.
What about the JavaScript?!!...
Yeah, JS was used to select various style sheets. Make the page wider to see some info about it...
Check out how we wired-up the radio buttons and used them to switch stylesheets. It's a wonder:
function wireUpRadioBtns(){
const radioBtns = document.getElementsByName("styleBtns");
//eureka: add a listener to each button
//https://www.youtube.com/watch?v=Wd33O1U0eU4
//https://www.youtube.com/watch?v=XVr0H611oVk
radioBtns.forEach(rb => rb.addEventListener("change", btnChange));
}//end wireUpRadioBtns
function btnChange(anEvent){
console.log("...boo..." + anEvent);
var item = event.target.value;
console.log(item);
styleChoice = parseInt(item);
chooseStyle(styleChoice);
}//end btnChange
function chooseStyle(ndx){
var styleLink = document.getElementById("styleLink");
var aSheetPrefix = "styles/styleSheet";
console.log("...chooseStyle...");
var chosenSheet = aSheetPrefix + String(ndx) + ".css";
styleLink.href= chosenSheet;
console.log("chosenSheet = " + chosenSheet);
if(ndx == 0){
specialStyleLink.href="styles/none.css";
}else{
specialStyleLink.href="styles/specialStyles.css";
}
}//end chooseStyle
The first menu item looks like this:
<div class="rbtnSelection">
<input type="radio" id="rb1" name="styleBtns" value="1" checked>
<label for="rb1">Style 1</label>
</div>
The others are similar. Shazam!
We also used JavaScript for the last update notification in the footer.