Need help with Mouseover tabbar problem
-
I use vivaldihook to setup Tab bar to left/right position with overlay, & auto-hide/show tab bar when mouseover left/right edge of browser window.
This is the code i use:
#tabs-container.left:hover ,#tabs-container.right:hover { width: 270px !important; opacity: 1; } #tabs-container.left { position: absolute !important; z-index: 6; width: 5px !important; opacity: 0; height: 100%; } #tabs-container.right { position: absolute !important; z-index: 6; width: 5px !important; opacity: 0; height: 100%; right: 0; }
Now, the problem I have is after click anywhere on the webpage, & then move the pointer to the edge of the window directly will always fail to trigger the tab bar from showing. I have to move the pointer out of the trigger zone (5px width) & then move back in to make it appear.
Is this Vivaldi bugs, or there are something wrong with the code i'm using?
Thanks for any useful advice. -
Problem only occurs with tabs on the right side. Where is the code from? Didn't I write something like this some time ago.
-
-
Very strange, I believe I never saw this thread but I know I messed around with a similar mod to help someone some time ago. Can't find the post though
-
I just tried both codes, they are both also have the same problem.
It seem like it's a "webpage focus" problem, because if i move the pointer to other toolbar after the click, & then move to the trigger zone, then it works.But will fail consistently when i click on webpage & move directly to the trigger zone.
-
Hard to tell, find out why it happens only on the right side, but works as expected on the left side I guess.
-
Are u tested with the code I posted? Can u post your code if it's different?
I'm using Windows 8.1, 8GB RAM.Just tested tab bar on bottom position, it's not as obvious as left & right side but it got the same failed to focus with mouseover problem. I think it's a bug, because I can replicate it step by step on all 3 position with my code.
-
@dude99 Can't find it, it wasn't on the modifications forum board, but the code was pretty similar. I know I had the issues back then too, but as said, it only happens with right side tabs for me, left side works without any issues (with panel enabled on left side).
-
Improved code for anyone interested in autohide tabbar, now u can change the tabbar width at will. Also added animation with half second delay for autohide (need to enable Use Animation UI).
Overlay version (won't affect webpage width):
/* auto-hide tabbar */ #tabs-container.left:hover, #tabs-container.right:hover { max-width: 100%; opacity: 1; transition: max-width 0.5s ease 0s; } #tabs-container.left, #tabs-container.right { position: absolute !important; z-index: 1; height: 100%; max-width: 4px; opacity: 0; transition: max-width 0.5s ease 0.5s, opacity 0s ease 1.1s; } #tabs-container.right { right: 0; }
Normal version (will alter webpage width):
/* auto-hide tabbar */ #tabs-container.left:hover, #tabs-container.right:hover { max-width: 100%; opacity: 1; transition: max-width 0.5s ease 0s; } #tabs-container.left, #tabs-container.right { max-width: 4px; opacity: 0; transition: max-width 0.5s ease 0.5s, opacity 0s ease 1.1s; } #tabs-container.right { right: 0; }
Also, I have file bug report on the focus problem, hopefuly Vivaldi developer will fix it.
Vote Up if u like this! -
@luetage
It's definately a bug, tried it on Address bar. Got the same problem. -
@dude99 Well, we will see if the devs fix it. By the way, transition with a percentage doesn't work in css. A transition needs a fixed number. And the general way to write this is like so
transition: opacity 0.5s ease-out;
I don't think your transition code does anything at the moment, but I'm not too experienced with animations myself.
-
@luetage
transition: property, duration, timing-function, delayReference HERE
Note: transition need animation UI enabledThe last section is "delay-time" to activate the animation. Like if you don't want the tabbar to start shrinking when you accidentally mouse-out of the tabbar, so adding a slight delay to shrink will prevent tabbar from closing by accident.
I'm also a script kitty, just learn this new info this morning.
-
@dude99 Ahh, it's the delay, makes sense. Still, your width animation can't work since the max-width has a percentage.
-
-