HTML Elements Forums Tabs Header scoll buttons on hover

This topic contains 1 reply, has 2 voices, and was last updated by  Christopher 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #98891

    john1987
    Participant

    Hi,
    I want the scroll buttons that are in the header to be hidden and only when i hover over the element to see them. Is this possible ? If it is please share a code snipped to demonstrate how to do that.

    Thank you!

    #98898

    Christopher
    Participant

    Hi john1987,
    in order to control the visibility of the scroll buttons inside the header section of the element you simply need to changed the <b>overview</b> property to ‘hidden’. When you want to see the buttons again just set the value of the property back to it’s default value ‘auto’. Here’s how to do it:

    
       <script>
            window.onload = function () {
                var tabs = document.querySelector('smart-tabs');
    
                tabs.addEventListener('mouseenter', function (event) {
                    this.overflow = 'auto';
                });
    
                tabs.addEventListener('mouseleave', function (event) {
                    this.overflow = 'hidden';
                });
            }
        </script>
    </head>
    <body>
        <smart-tabs>
            <smart-tab-item label="TAB 1">Content 1</smart-tab-item>
            <smart-tab-item label="TAB 2">Content 2</smart-tab-item>
            <smart-tab-item label="TAB 3">Content 3</smart-tab-item>
            <smart-tab-item label="TAB 4">Content 4</smart-tab-item>
            <smart-tab-item label="TAB 5">Content 5</smart-tab-item>
            <smart-tab-item label="TAB 6">Content 6</smart-tab-item>
            <smart-tab-item label="TAB 7">Content 7</smart-tab-item>
            <smart-tab-item label="TAB 8">Content 8</smart-tab-item>
            <smart-tab-item label="TAB 9">Content 9</smart-tab-item>
            <smart-tab-item label="TAB 10">Content 10</smart-tab-item>
            <smart-tab-item label="TAB 11">Content 11</smart-tab-item>
        </smart-tabs>
    </body>
    

    If you have further questions feel free to ask.

    Best Regards,
    Christopher

    Smart HTML Elements Team
    https://www.htmlelements.com

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.