Customizing the #switch button.active element



  • Hello,

    I have been seeking a means to disable the #switch button.active click element that will hide the active panel bar. I discovered that the following code will prevent the click element from hiding the active web panel section, but it also changes the inactive and active state of a web panel to show a different web panel.

    To replicate this issue, simply add at least two web panels and add the following code to your custom.css file. Then, try double-clicking on a web panel. The web panel should be different depending on whether it is clicked once or twice.

    How can I modify this code to only remove the active click element that hides the panel rather than it changing the active/inactive panel button status?

      #switch button.active {
         display: none !important;
    
     }
    

    or what also has the same affect is this code that references the same CSS element:

     button.webviewbtn.active {
         display: none !important;
    
     }
    

    Any help is appreciated.

    Thanks.



  • I have problems understanding what you are trying to achieve. The code does exactly what you want, it hides the active panel button.



  • @luetage What I am trying to achieve, practically speaking, is when I have a row of web panel icons, if I click on one of them, it will switch to it. That is well and good. However, if I click again on the active web panel icon, it will effectively minimize the web panel and fill the browser window with the main webpage again.

    I am looking to remove this click element from an active web panel that allows this minimizing of the web panel.

    The code that I demonstrated does block this minimizing of the web panel, but it also changes the web panel icon.

    Does that make sense?

    BTW, can you remove the duplicate post about the same topic on this forum, when I posted the first time, I edited the main post too many times and then it marked it as spam, but I can't delete it. :(



  • @sethjbr Flag your other post for moderation.

    Ok, I understand now. Your code doesn't change the panel button, it hides it. You still want to see the button of the open webpanel, but the second click should be deactivated. This you cannot achieve with css. You will need a javascript modification.


  • Moderator

    @luetage Already done. The other post has been removed, per OP request.



  • @luetage Yes, you understand me perfectly. Thank you for the insight. I will look into javascript options to perform this slight modification. Please let me know if you know a means to do this.

    Thank you.

    Seth



  • This shouldn't be too hard to achieve, use queryselector to get the .active button and disable the onclick event.



  • @luetage

    Thank you for the suggestion. I have looked at the code using Chrome's dev tools, and the class name for this element is "webviewbtn active".

    Therefore, if it is an onClick function in javascript that is causing this web panel behavior, shouldn't the following code work?

    Since it doesn't, is there a way to find out what javascript function is calling the web panel to close itself upon the second click?

     document.querySelector('webviewbtn active')
        .setAttribute('onClick', function() {...});


  • @sethjbr I think you will need some kind of event listener to trigger this.



  • Try this:

    setTimeout(go, 1800);
    function go() {
    	document.getElementById('switch').addEventListener('click', prevclose);
    	function prevclose() {
    		setTimeout(prevclose, 200);
    		var buttons = document.querySelectorAll("#switch button");
    		for (var i=0; i < buttons.length; i++) {
    			if ( buttons[i].classList.contains("active") ) { 
    				buttons[i].disabled = true;
    			}
    			else {
    				buttons[i].disabled = false;
    			}
    		}
    	};
    };
    

  • Vivaldi Team

    @sethjbr you can prevents all pointer events on currently active panel button with CSS:

    #switch button.active {
      pointer-events: none;
    }


  • @miky lol, couldn't you have posted that yesterday, I lost half an hour to this dirty workaround and it was completely superfluous :D



  • @miky and @luetage

    Thank you both very much for your contributions. I have been preoccupied with other priorities the last few days and just now saw this.

    I will try it, thank you very much! :)

    Seth



  • @miky

    Your code works flawlessly! :) Big thanks!


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.