Jump to content

speedbird

Members
 View Profile  See their activity

  • Posts

    2

  • Joined

  • Last visited

speedbird's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. speedbird
    Ok, seems like it wont´work any way. Anyone else with a working solution? And that preferably can provide the complete code.
  2. speedbird started following Why does position sticky not work?
  3. speedbird
    Hi guys, If you click on "AC-brytare" there will be som content on the right. I want this content (.tabcontent) to automatically scroll down using position: sticky; How come it does not work? Best, Anders <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css">* {box-sizing: border-box} body {font-family: "Lato", sans-serif;} /* Style the tab */ .tab { float: left; border: 1px solid #ccc; background-color: #f1f1f1; width: 40%; height: 100%; } /* Style the buttons inside the tab */ .tab button { display: block; background-color: inherit; color: black; padding: 5px 16px; width: 100%; border: none; outline: none; text-align: left; cursor: pointer; transition: 0.3s; font-size: 80%; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current "tab button" class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { float: left; padding: 0px 12px; border: 1px solid #ccc; width: 60%; border-left: none; height: 100%; overflow: hidden; position: sticky; top: 0; } </style> <h2>Solcellslexikon</h2> <div class="tab"><button class="tablinks" id="defaultOpen" onclick="openCity(event, 'AC-brytare')">AC-brytare</button> <button class="tablinks" onclick="openCity(event, 'Ampere')">Ampere (A)</button> <button class="tablinks" onclick="openCity(event, 'Anlaggningsid')">Anl&auml;ggnings-ID</button> <button class="tablinks" onclick="openCity(event, 'anslutningspunkt')">Anslutningspunkt</button> <button class="tablinks" onclick="openCity(event, 'azimutvinkel')">Azimutvinkel</button> <button class="tablinks" onclick="openCity(event, 'behorigelektriker')">Behörig elektriker</button> <button class="tablinks" onclick="openCity(event, 'belastning')">Belastning</button> <button class="tablinks" onclick="openCity(event, 'cemarkning')">CE-märkning</button> <button class="tablinks" onclick="openCity(event, 'dc')">DC</button> <button class="tablinks" onclick="openCity(event, 'effekt')">Effekt</button> <button class="tablinks" onclick="openCity(event, 'effektbegransning')">Effektbegränsning</button> <button class="tablinks" onclick="openCity(event, 'effektgaranti')">Effektgaranti</button> <button class="tablinks" onclick="openCity(event, 'egenanvandel')">Egenanvänd el</button> <button class="tablinks" onclick="openCity(event, 'elhandelsforetag')">Elhandelsföretag</button> <button class="tablinks" onclick="openCity(event, 'elproducent')">Elproducent</button> <button class="tablinks" onclick="openCity(event, 'elsakerhetsintyg')">Elsäkerhetsintyg</button> <button class="tablinks" onclick="openCity(event, 'falsatplattak')">Falsat plåttak</button> <button class="tablinks" onclick="openCity(event, 'huvudsakring')">Huvudsäkring</button> <button class="tablinks" onclick="openCity(event, 'inverter')">Inverter (växelriktare)</button> <button class="tablinks" onclick="openCity(event, 'jordfelsbrytare')">Jordfelsbrytare</button> <button class="tablinks" onclick="openCity(event, 'kilowatt')">Kilowatt (kW)</button> <button class="tablinks" onclick="openCity(event, 'kilowattimme')">Kilowattimme (kWh)</button> <button class="tablinks" onclick="openCity(event, 'likstrom')">Likström</button> <button class="tablinks" onclick="openCity(event, 'lutningpatak')">Lutning på tak</button> <button class="tablinks" onclick="openCity(event, 'monokristallin')">Monokristallin</button> <button class="tablinks" onclick="openCity(event, 'mppt')">MPPT</button> <button class="tablinks" onclick="openCity(event, 'markeffekt')">Märkeffekt</button> <button class="tablinks" onclick="openCity(event, 'noct')">NOCT</button> <button class="tablinks" onclick="openCity(event, 'natbolag')">Nätbolag</button> <button class="tablinks" onclick="openCity(event, 'optimerare')">Optimerare</button> <button class="tablinks" onclick="openCity(event, 'paneltyp')">Paneltyp</button> <button class="tablinks" onclick="openCity(event, 'pascal')">Pascal (PA)</button> <button class="tablinks" onclick="openCity(event, 'plattaktrapets')">Plåttak trapets</button> <button class="tablinks" onclick="openCity(event, 'plattakfalsat')">Plåttak falsat</button> <button class="tablinks" onclick="openCity(event, 'rails')">Rails</button> <button class="tablinks" onclick="openCity(event, 'rotavdrag')">Rotavdrag</button> <button class="tablinks" onclick="openCity(event, 'servissakring')">Servissäkring</button> <button class="tablinks" onclick="openCity(event, 'snolastberakning')">Snölastberäkning</button> <button class="tablinks" onclick="openCity(event, 'solcell')">Solcell</button> <button class="tablinks" onclick="openCity(event, 'solpanel')">Solpanel</button> <button class="tablinks" onclick="openCity(event, 'spanning')">Spänning (V)</button> <button class="tablinks" onclick="openCity(event, 'stc')">STC</button> <button class="tablinks" onclick="openCity(event, 'strang')">Sträng</button> <button class="tablinks" onclick="openCity(event, 'strom')">Ström</button> <button class="tablinks" onclick="openCity(event, 'tegeltak')">Tegeltak</button> <button class="tablinks" onclick="openCity(event, 'toppeffekt')">Toppeffekt</button> <button class="tablinks" onclick="openCity(event, 'verkningsgrad')">Verkningsgrad</button> <button class="tablinks" onclick="openCity(event, 'vindlastberakning')">Vindlastberäkning</button> <button class="tablinks" onclick="openCity(event, 'volt')">Volt (V)</button> <button class="tablinks" onclick="openCity(event, 'vaxelriktare')">Växelriktare</button> <button class="tablinks" onclick="openCity(event, 'vaxelstrom')">Växelström</button> <button class="tablinks" onclick="openCity(event, 'watt')">Watt (W)</button> <button class="tablinks" onclick="openCity(event, 'overskottsel')">Överskottsel</button> <button class="tablinks" onclick="openCity(event, 'overspannigsskydd')">Överspänningsskydd</button> </div> <div class="tabcontent" id="AC-brytare"> <h3>Vad &auml;r en AC-brytare?</h3> <p>AC-brytare krävs för att koppla bort växelriktaren från elnätet vid service och underhåll. Nätbolaget skall alltid ha möjlighet att slå ifrån anläggningen. Brytaren placeras bredvid eller i närheten av växelriktaren för att göra det enklare att frånskilja växelriktaren. </p> <script>function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click();</script> </body> </html>
×
×
  • Create New...