Changes for page Academy
Last modified by Erik Bakker on 2024/09/24 16:12
From version 38.1
edited by Erik Bakker
on 2022/04/21 15:54
on 2022/04/21 15:54
Change comment:
There is no comment for this version
To version 39.1
edited by Erik Bakker
on 2022/04/21 15:57
on 2022/04/21 15:57
Change comment:
There is no comment for this version
Summary
-
Objects (1 modified, 0 added, 0 removed)
Details
- XWiki.GadgetClass[1]
-
- content
-
... ... @@ -15,12 +15,6 @@ 15 15 padding: 10px; 16 16 } 17 17 18 -/* Clear floats after the columns */ 19 -.row:after { 20 - content: ""; 21 - display: table; 22 - clear: both; 23 -} 24 24 /* Style the buttons */ 25 25 .btn { 26 26 border: none; ... ... @@ -42,16 +42,8 @@ 42 42 </head> 43 43 <body> 44 44 45 -<h2>List View or Grid View</h2> 46 46 47 -<p>Click on a button to choose list view or grid view.</p> 48 48 49 -<div id="btnContainer"> 50 - <button class="btn" onclick="listView()"><i class="fa fa-bars"></i> List</button> 51 - <button class="btn active" onclick="gridView()"><i class="fa fa-th-large"></i> Grid</button> 52 -</div> 53 -<br> 54 - 55 55 <div class="row"> 56 56 <div class="column" style="background-color:#aaa;"> 57 57 <h2>Column 1</h2> ... ... @@ -74,39 +74,8 @@ 74 74 </div> 75 75 </div> 76 76 77 -<script> 78 -// Get the elements with class="column" 79 -var elements = document.getElementsByClassName("column"); 80 80 81 -// Declare a loop variable 82 -var i; 83 83 84 -// List View 85 -function listView() { 86 - for (i = 0; i < elements.length; i++) { 87 - elements[i].style.width = "100%"; 88 - } 89 -} 90 - 91 -// Grid View 92 -function gridView() { 93 - for (i = 0; i < elements.length; i++) { 94 - elements[i].style.width = "50%"; 95 - } 96 -} 97 - 98 -/* Optional: Add active class to the current button (highlight it) */ 99 -var container = document.getElementById("btnContainer"); 100 -var btns = container.getElementsByClassName("btn"); 101 -for (var i = 0; i < btns.length; i++) { 102 - btns[i].addEventListener("click", function() { 103 - var current = document.getElementsByClassName("active"); 104 - current[0].className = current[0].className.replace(" active", ""); 105 - this.className += " active"; 106 - }); 107 -} 108 -</script> 109 - 110 110 </body> 111 111 </html> 112 112