Open panels on mouse-over.



  • Now that overlay panels and auto-close have been added to the native Vivaldi client, is there anyone that would be able to assist with creating a script to auto-open on mouse-over. I would try to do so by myself, but my scripting skills are non-existent.

    Thanks.



  • @recnamoruen That's not as easy as it sounds. I think each button has an onclick event which creates/shows the panel. I tried adding/removing the active class from button target but that doesn't do anything but trigger the css properties. I think you would have to simulate a click event on hover. It's dirty. I'd make a feature request instead to be honest. This can be solved far cleaner by the devs.



  • @recnamoruen

    How about auto open with a mouse gesture? That's what I'm using

    If you want a mouse over, you can achieve that without the built-in overlay with something like this (this adds an animation which you can speed up, slow down, or simply remove)

    #panels-container.left, #panels-container.right {
        position: absolute;
        z-index: 1;
        height: 100%;
        transition: transform .5s .2s !important;
    }
    
    #panels-container.right {right: 0}
    
    #panels-container.left:not(:hover) {
        transform: translateX(-100%);
        transition: transform 2s 1s !important;
    }
    
    #panels-container.right:not(:hover) {
        transform: translateX(100%);
        transition: transform 2s 1s !important;
    }
    


  • @sjudenim This shows the panel container on hover, but I think OP wants to open specific panels when hovering a panel button in the container. Maybe I understood it wrong, don't know.



  • If that's the case, @MasterLeo29 had written something like that in this thread



  • @sjudenim Oh yeah, I forgot about this. It seems to simulate the click, so nothing to do here, code already exists.



  • I apologize for needing to be handheld, but do you know which code there specifically controls the on-hover. I tried pulling the section for just the on-hover commands, but it did not work.



  • @recnamoruen I think I can do it for you. Reply to me with the exact behavior you want (small topics would be fine, since my English is not the best)
    I write something for you

    Edit: it's 22:40 here. If I don't reply now, I will at 9:00



  • @masterleo29 0_1530828638037_vivaldi.PNG When I hover over these icons, I would like that panel to open.

    Thanks!



  • @recnamoruen Hope you like it.

    setTimeout(function wait() 
    {
    	var adr = document.querySelector(".toolbar-addressbar.toolbar");
    	if (adr != null) 
    	{
    		var switchS = document.getElementById('switch');
    		
    		var panel = 0;
    		var show_token;
    
    
    		for (let index = 0; index < switchS.getElementsByTagName('button').length - 2; index++) 
    		{
    			switchS.getElementsByTagName('button')[index].onmouseover = function()
    			{
    				clearTimeout(show_token);
    				show_token = setTimeout(function()
    				{
    					if (!switchS.getElementsByTagName('button')[index].getAttribute('class').includes("active")) {
    						switchS.getElementsByTagName('button')[index].click();
    						panel = index;
    					}
    				}, 100);
    			};
    		}
    
    	}
    	else {
    		setTimeout(wait, 300);
    	}
    }, 300);


  • @masterleo29 Works perfectly 🙂
    Would be useful the mouse-over delay as the overlay mod has - to avoid mis-activating panel (I have both tab/panel on right).
    Or I just have to change the timeout ?



  • @hadden89 If i remember correctly (working atm, can't test freely), you just need to adjust the timeout saved on "show_token" (in the code is set as '100')



  • @masterleo29 Thank you for your help. Do you know why it would not work on webpanels, and only open the top panel instead of the one I hover over?



  • @recnamoruen You're welcome. To answer that, I would need to see exactly the code you tried before (perhaps you didn't copy the full section of it or forgot to call some function, just guesses)



  • @recnamoruen You have to change this line
    for (let index = 0; index < switchS.getElementsByTagName('button').length - 3; index++)
    to this
    for (let index = 0; index < switchS.getElementsByTagName('button').length - 2; index++)
    I haven't tested any of this, but it's likely the cause of the problem.



  • @luetage You're right! This code is reused from my version of Overlay Panels, so it takes into account the "toggle "button. I will edit my response



  • @MasterLeo29 Works perfectly with this fix. Thank you its very appreciated. @luetage You also. Thank you.



  • This post is deleted!

  • Vivaldi Translator

    @masterleo29 Hi, i'm trying it out and it works well.
    Could you make a small change to the behavior? In addition to opening the panels by passing over them with the mouse make them open even by dragging a tab to save it in the bookmarks, it is something that i do very often.
    Actually it already works with this behavior but it is not repetitive, sometimes it opens (very few times) and sometimes it stays closed and sometimes it has abnormal behaviors.

    Always if you have time, desire and that it is possible. Already so you have done however a great job.

    PS: I've enabled "Floating Panel" and "Auto-Close Inactive Panel".



  • @folgore101 You sir are in luck, I got some free time today!
    See if this changes work for you (I tested the old version and you were right, there were some misses here and there)

    setTimeout(function wait() 
    {
    	var adr = document.querySelector(".toolbar-addressbar.toolbar");
    	if (adr != null) 
    	{
    		var switchS = document.getElementById('switch');
    		
    		var show_token;
    
    
    		for (let index = 0; index < switchS.getElementsByTagName('button').length - 2; index++) 
    		{
                switchS.getElementsByTagName('button')[index].onmouseover = function()
                {
                    clearTimeout(show_token);
    				show_token = setTimeout(function()
    				{
    					if (!switchS.getElementsByTagName('button')[index].getAttribute('class').includes("active")) {
                            switchS.getElementsByTagName('button')[index].click();
                            panel = index;
                        }
    				}, 100);
                }
                
                switchS.getElementsByTagName('button')[index].ondragover = function()
                {
    				if (!switchS.getElementsByTagName('button')[index].getAttribute('class').includes("active")) {
                        switchS.getElementsByTagName('button')[index].click();
                        panel = index;
                    }
                }
    		}
    
    	}
    	else {
    		setTimeout(wait, 300);
    	}
    }, 300);

 

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