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.



  • @luetage
    I got it from HERE & the one u wrote from HERE.
    It occurs on both side for me, not sure how to fix it.
    Is this a bug? Or may be the code have flaws??

    Thanks for the reply.



  • 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. :sweat_smile:



  • @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, delay

    Reference HERE
    Note: transition need animation UI enabled

    The 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. :laughing:



  • @dude99 Ahh, it's the delay, makes sense. Still, your width animation can't work since the max-width has a percentage.



  • @luetage

    Donno... I tested it, & it's working fine.
    But it really doesn't matter, u can replace it with "300px" if it doesn't work for u.

    EDIT: Try THIS
    Change the Width on hover: to 100%, & it will still work!


Log in to reply
 

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