Open panels on mouse-over.
-
@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! -
@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);
-
@masterleo29 I'm testing, it's good, very good.
-
@MasterLeo29 thanks for your excellent script!
I made a few small modifications
- Auto-close when you mouse over to body
- Don't open if mouse exits screen before timeout period
- Unique delays based on situation
function panelMouseOver(autoHide, delay_show, delay_change, delay_hide) { var buttons = document.getElementById('switch').getElementsByTagName('button'); var show_token = null; var activeButton = null; /* Stop timer if mouse exits screen */ document.addEventListener("mouseout", function(e) { clearTimeout(show_token); }); /* Do auto-hide if applicable */ if (autoHide) { var content = document.getElementById("webview-container").onmouseover = function() { if (!document.getElementById("panels-container").getAttribute('class').includes("icons")) { clearTimeout(show_token); setTimeout(function() { if (activeButton && (activeButton.getAttribute('class').includes("active"))) { activeButton.click(); activeButton = null; } }, delay_hide); } }; } function activeButtonIndex() { for (let i = 0; i < buttons.length - 2; i++) { if (buttons[i].getAttribute('class').includes('active')) { return i; } } return -1; } function setActive(index, doDelay) { clearTimeout(show_token); var delay = 0; if (doDelay) { delay = (activeButtonIndex() < 0) ? delay_show : delay_change; } show_token = setTimeout(function() { var newButton = buttons[index]; if (!newButton.getAttribute('class').includes('active')) { activeButton = newButton; activeButton.click(); panel = index; } }, delay); } function setListeners() { for (let index = 0; index < buttons.length - 2; index++) { buttons[index].onmouseover = function() {setActive(index, true);}; buttons[index].onmouseout = function() {clearTimeout(show_token);}; buttons[index].ondragover = function() {setActive(index, false);}; } } setListeners(); } setTimeout(function wait() { var adr = document.querySelector(".toolbar-addressbar.toolbar"); if (adr != null) { panelMouseOver(true, 100, 50, 250); } else { setTimeout(wait, 300); } }, 300);
-
So I'm using this new script that auto hides but I have also used Leo's original script for some time now and I keep running into an issue where if this script is running Javascript prompts get cut off and I cannot see the allow or deny prompts. If I remove the script it starts working properly after a reinstall. Does anyone know what could be causing this?
-
@recnamoruen It sems awkard.
Do you mean js website prompts? Could you provide an example?
(Testing the last script and seems very smooth). -
Notice how it just ends? I've only run these custom scripts so I don't know if it happens with all of them. But if I run this custom js this happens, and I have to completely reinstall to fix it afterwards.
-
@mbuch I'm testing it and it seems to me that it works even better, if you keep on like this I might not be able to do without it anymore.
-
@Recnamoruen, sorry but I do not really know what your issue might be. I made a simple page to generate javascript alerts, and they all came up correctly. Do you have just this text inside a custom.js file, and then include the custom.js at the bottom of browser.html (after bundle.js include)?
To be honest, I decided to stop using this script. All I really wanted (at the moment) was to have tabs on the left side of my screen (which is a built in setting), and for them to show just the icon, but for them to expand when I moused over so that I could actually read the titles of each tab (which unfortunately there is no default option for this). So I found this tread, and thought I could just use the "Window" popout as my tabs. But, it wasn't that great for tabs. So I tried the CSS route and got my desired functionality with the native tabs panel.
-
Here r my CSS mod to compliment this script, it hide the panels'
#switch
& shrink the activation zone to...top section:
#panels-container.icons.overlay {max-width:0;} #panels-container:not(:focus-within):not(:hover) #switch {opacity:0.01; max-width:7px; max-height:30%;}
middle section:
#panels-container.icons.overlay {max-width:0;} #panels-container:not(:focus-within):not(:hover) #switch {opacity:0.01; max-width:7px; max-height:30%; top:40%;}
bottom section:
#panels-container.icons.overlay {max-width:0;} #panels-container:not(:focus-within):not(:hover) #switch {opacity:0.01; max-width:7px; max-height:30%; top:70%;}
The idea is now you have more screen space; & u can place the pointer on the side edge of the window without activate the panel by accident, well at least 2/3 of the window's edge. This should able to prevent most of the accident.
The only quirk of this mod is it cause the
#switch
to "blink" when dragging item from webpage between panel to panel. Please share if anyone can come up with a better solution.Thanks for the awesome script.
-
@mbuch I thank you again because i find this JS really comfortable.
After weeks that I'm testing it i can say that for me it works very well, the only thing i would improve is the fact that when you drag a tab in the bookmark panel, it does not respect the time set in the script if you pass over the other panels. Everything works correctly if you move the mouse over it. Even dragging text does not respect the script's time.
@dude99 Ok, i'm gonna have to test that, too.
-
Greetings, fellow Vivaldi fans.
I'm using the following code to auto-hide the panel. I was wondering if anyone knows how to make it so that the following code applies when the panel is "switched off", rather than the current activation when the panel is "switched on".
/* Hide Sidebar/Panel Container when not hovered over Source: https://forum.vivaldi.net/topic/28413/open-panels-on-mouse-over/3 ------------------------------------------------------------------------------------------------------------ Needs modification, so that it applies this auto-hide code when set to "Hidden" rather than visible. */ #panels-container.left, #panels-container.right { position: absolute; z-index: 1; height: 100%; transition: transform .15s 0s !important; /* Originally: .5s .2s */ } #panels-container.right {right: 0} #panels-container.left:not(:hover) { transform: translateX(-100%); transition: transform .8s 0s !important; /* Originally: 2s 1s */ transition-delay: 2s !important; } #panels-container.right:not(:hover) { transform: translateX(100%); transition: transform .8s 0s!important; /* Originally: 2s 1s */ transition-delay: 2s !important; }
-
@MasterLeo29 nice script.
I threw in another quick functionality to the script to auto open panel by having the mouse entering the "panel toggle area".
For quick and easy access since I don't need the panel to show all the time.var container = document.getElementById('panels-container'); var pSwitch = document.getElementById('panel_switch'); function showPanel() { if (pSwitch.title == 'Show Panel') pSwitch.click(); } function hidePanel() { if (pSwitch.title == 'Hide Panel') pSwitch.click(); } container.addEventListener('mouseenter', showPanel); container.addEventListener('mouseleave', hidePanel);
Just add this somewhere inside the main setTimeout.
Also made the switch floating for smoother transitions instead of it pushing the content.#panels-container { width: 10px !important } #switch { position: absolute; width: 34px; top: 0px; bottom: 0px; } #panels-container.right #switch { right: 10px; } #panels-container.left #switch { left: 10px }
-
Hi everyone!
First of all, very new user to Vivaldi here. Absolutely love it so far, especially the customization.
I'm very new to "modding". Is this for custom.css or am I doing something wrong for this to work?
I would really like this function and preferably when the panel is "inactive".
What should I copy and paste and to which file to have this customization?
Thanks for your help and patience to a new user.
//Matt