simonw · October 20, 2024 12:43 · Oct 20, 2024 · Oct 20, 2024 · Oct 20, 2024 · Oct 20, 2024
diff --git a/blah.html b/blah.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Navigation Bar with Text-Wrap Toggle and Item Count Slider (400px width)</title>
+    <title>Navigation Bar with Text-Wrap Balance</title>
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -14,7 +14,7 @@
             background-color: #f0f0f0;
             padding: 10px;
             margin-bottom: 20px;
-            width: 400px; /* Reduced from 600px to 400px */
+            width: 400px;
             box-sizing: border-box;
         }
         ul {
@@ -23,9 +23,9 @@
             margin: 0;
         }
         li {
-            display: inline-block;
+            display: inline;
             margin-right: 10px;
-            margin-bottom: 15px;
+            margin-bottom: 15px; line-height: 40px;
         }
         a {
             text-decoration: none;
@@ -69,8 +69,8 @@
     <div class="controls">
         <div class="control-item">
             <label for="item-count">Number of visible items:</label>
-            <input type="range" id="item-count" min="4" max="14" value="14">
-            <span id="item-count-value">14</span>
+            <input type="range" id="item-count" min="4" max="14" value="13">
+            <span id="item-count-value">13</span>
         </div>
         <div class="control-item">
             <label>
@@ -88,7 +88,7 @@
 
         function updateVisibleItems(count) {
             navItems.forEach((item, index) => {
-                item.style.display = index < count ? 'inline-block' : 'none';
+                item.style.display = index < count ? 'inline' : 'none';
             });
         }
 
@@ -109,7 +109,7 @@
         });
 
         // Initialize with all items visible and default text-wrap
-        updateVisibleItems(14);
+        updateVisibleItems(13);
         updateTextWrap();
     </script>
 </body>

diff --git a/blah.html b/blah.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Navigation Bar with Text-Wrap Toggle and Item Count Slider (400px width)</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+        }
+        nav {
+            background-color: #f0f0f0;
+            padding: 10px;
+            margin-bottom: 20px;
+            width: 400px; /* Reduced from 600px to 400px */
+            box-sizing: border-box;
+        }
+        ul {
+            list-style-type: none;
+            padding: 0;
+            margin: 0;
+        }
+        li {
+            display: inline-block;
+            margin-right: 10px;
+            margin-bottom: 15px;
+        }
+        a {
+            text-decoration: none;
+            color: #333;
+            padding: 5px 10px;
+            border-radius: 3px;
+            background-color: #e0e0e0;
+        }
+        .controls {
+            margin-top: 20px;
+            width: 400px; /* Reduced from 600px to 400px to match nav */
+        }
+        .control-item {
+            margin-bottom: 10px;
+        }
+        #item-count-value {
+            margin-left: 10px;
+        }
+    </style>
+</head>
+<body>
+    <nav id="main-nav">
+        <ul>
+            <li><a href="#">Home</a></li>
+            <li><a href="#">About</a></li>
+            <li><a href="#">Services</a></li>
+            <li><a href="#">Products</a></li>
+            <li><a href="#">Blog</a></li>
+            <li><a href="#">Contact</a></li>
+            <li><a href="#">FAQ</a></li>
+            <li><a href="#">Support</a></li>
+            <li><a href="#">Portfolio</a></li>
+            <li><a href="#">Team</a></li>
+            <li><a href="#">Careers</a></li>
+            <li><a href="#">Partners</a></li>
+            <li><a href="#">News</a></li>
+            <li><a href="#">Events</a></li>
+        </ul>
+    </nav>
+
+    <div class="controls">
+        <div class="control-item">
+            <label for="item-count">Number of visible items:</label>
+            <input type="range" id="item-count" min="4" max="14" value="14">
+            <span id="item-count-value">14</span>
+        </div>
+        <div class="control-item">
+            <label>
+                <input type="checkbox" id="balance-toggle"> Enable text-wrap: balance
+            </label>
+        </div>
+    </div>
+
+    <script>
+        const nav = document.getElementById('main-nav');
+        const toggle = document.getElementById('balance-toggle');
+        const itemCountSlider = document.getElementById('item-count');
+        const itemCountValue = document.getElementById('item-count-value');
+        const navItems = nav.querySelectorAll('li');
+
+        function updateVisibleItems(count) {
+            navItems.forEach((item, index) => {
+                item.style.display = index < count ? 'inline-block' : 'none';
+            });
+        }
+
+        function updateTextWrap() {
+            if (toggle.checked) {
+                nav.style.textWrap = 'balance';
+            } else {
+                nav.style.textWrap = '';
+            }
+        }
+
+        toggle.addEventListener('change', updateTextWrap);
+
+        itemCountSlider.addEventListener('input', function() {
+            const count = parseInt(this.value);
+            itemCountValue.textContent = count;
+            updateVisibleItems(count);
+        });
+
+        // Initialize with all items visible and default text-wrap
+        updateVisibleItems(14);
+        updateTextWrap();
+    </script>
+</body>
+</html>