(Created page with "<html> <style> #tabButtons { position: fixed; top: 50%; transform: translateY(-50%); right: 20px; z-index: 1000; →‎Ensure buttons are above other content: } #nextTabButton, #previousTabButton { display: block; margin-bottom: 10px; } </style> <script> // Function to switch to the previous tab function switchToPreviousTab() { var activeTab = document.querySelector(".frmTab.active"); var previousTab; // Find the previous tab...")
 
No edit summary
 
(21 intermediate revisions by the same user not shown)
Line 2: Line 2:
<style>
<style>
#tabButtons {
#tabButtons {
    position: fixed;
display:flex;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    z-index: 1000; /* Ensure buttons are above other content */
}
}


#nextTabButton,
#nextTabButton,
#previousTabButton {
#previousTabButton {
     display: block;
background:#131313;
color: white;
border:10px solid #131313;
border-radius:5px;
     display: flex;
     margin-bottom: 10px;
     margin-bottom: 10px;
margin-top: 10px;
}
}
</style>


<script>
// Function to switch to the previous tab
function switchToPreviousTab() {
    var activeTab = document.querySelector(".frmTab.active");
    var previousTab;


    // Find the previous tab
#previousTabButton {
    if (activeTab.previousElementSibling) {
float:left;
        previousTab = activeTab.previousElementSibling;
    } else {
        // If the current tab is the first one, go to the last tab
        previousTab = activeTab.parentElement.lastElementChild;
    }
 
    // Trigger click event on the previous tab
    previousTab.click();
}
}


// Function to switch to the next tab
#nextTabButton {
function switchToNextTab() {
float:right;}
    var activeTab = document.querySelector(".frmTab.active");
    var nextTab;


    // Find the next tab
.spacer {
    if (activeTab.nextElementSibling) {
    flex-grow: 1; /* Allow spacer to fill remaining space */
        nextTab = activeTab.nextElementSibling;
}
    } else {
        // If the current tab is the last one, loop back to the first tab
        nextTab = activeTab.parentElement.firstElementChild;
    }


    // Trigger click event on the next tab
</style>
    nextTab.click();
}


</script>


<hr/>
<div id="tabButtons">
<div id="tabButtons">
     <!-- Next Tab Button -->
     <!-- Next Tab Button -->
     <button id="nextTabButton" onclick="switchToNextTab()">Next Tab</button>
</html>{{#if:{{{1}}}|<html>
     <button id="nextTabButton" onclick="openTab(event, '</html>{{{1}}}<html>')"></html>{{{2}}}<html></button></html>|}}<html>
<div class="spacer"></div><html>
    <button id="nextTabButton" onclick="openTab(event, '</html>frmTabIndex<html>')"></html>Main Index<html></button><div class="spacer"></div>
     <!-- Previous Tab Button -->
     <!-- Previous Tab Button -->
     <button id="previousTabButton" onclick="switchToPreviousTab()">Previous Tab</button>
</html>{{#if:{{{3}}}|<html>
     <button id="previousTabButton" onclick="openTab(event, '</html>{{{3}}}<html>')"></html>{{{4}}}<html></button></html>|}}<html>
</div>
</div>
</html>
</html>

Latest revision as of 14:35, 27 April 2024