Tabbed UI Hide Menu using Mouseover

[Davidk]

Re: Tabbed UI Hide Menu using Mouseover

I put the "divider width" code into the same place as the other code and it seems to work quite well. You can even use tbl.DIVIDER to trigger the onmouseover show part... that works too. The code goes into "Javascript to run on startup"

[chadbrown]

Re: Tabbed UI Hide Menu using Mouseover

Works pretty good now as long as you don't move the mouse quickly, also I have hidden the menu on startup. Will play some more but seems to be definitly going in the right direction.

[frankbicknell]

Re: Tabbed UI Hide Menu using Mouseover

Has anyone improved on this enhancement? I am tying to create a slight delay so that the menu does not jump open when a user accidentally mouses over. I have tried a timeout but that did not produce the correct result. Any ideas will be much appreciated.

[frankbicknell]

Re: Tabbed UI Hide Menu using Mouseover

OK got this working in the JavaScript to run on startup of the tabbedui. It works and does not seem to cause any problems, but, if one of you javascript experts could fine tune this script it would be great. It just doesn't pass the smell test......

t=setTimeout("tbiObj.showTabbedUIMenuPanel()",3000);
// not sure of how to instantiate the t variable so I am just using this line.


$('tbi.CONTENTPANEL').onmouseover = function(){
clearTimeout(t);
tbiObj.hideTabbedUIMenuPanel();
}

$('tbi.EXPANDBAR').onmouseover = function(){
t=setTimeout("tbiObj.showTabbedUIMenuPanel()",1000);
//tbiObj.showTabbedUIMenuPanel();
}

[Lance Gurd]

Re: Tabbed UI Hide Menu using Mouseover

Works great for me Frank, thanks very much

[DBM]

Re: Tabbed UI Hide Menu using Mouseover

There is now an option in the tabbed UI properties which you could try that does much the same thing

'auto hide buttons pane'

[frankbicknell]

Re: Tabbed UI Hide Menu using Mouseover

Anyhow until the autohide feature is available this works great.

$('tbi.CONTENTPANEL').onmouseover = function(){
tbiObj.hideTabbedUIMenuPanel();
}
$('tbi.EXPANDBAR').onmouseover = function(){
this.style.cursor='wait';
gvt=setTimeout("tbiObj.showTabbedUIMenuPanel()",500);
}
$('tbi.EXPANDBAR').onmouseout = function(){
clearTimeout(gvt);
}

[Bob Moore]

Re: Tabbed UI Hide Menu using Mouseover

Frank,

In the code below I'll add a new feature and show a best practices example.

$('tbi.CONTENTPANEL').onmouseover = function(){
tbiObj.hideTabbedUIMenuPanel();
}
$('tbi.EXPANDBAR').onmouseover = function(){
this.style.cursor='wait';
gvt=setTimeout("tbiObj.showTabbedUIMenuPanel()",500);
}
$('tbi.EXPANDBAR').onmouseout = function(){
clearTimeout(gvt);
}

You are using a global JavaScript variable, gvt for your timer.
While this works, it pollutes the global namespace and you should try to avoid this. (what if some other library or script also uses gvt?).

An easy solution is to simply add a new property to the tbiObj.

In the code below I add two additional properties to the tbiObj.
tbiObj._this and tbiObj._t1

tbiObj._this will hold a reference to $('tbi.EXPANDBAR').
I do this so that I can change the cursor back to a pointer after I've called the showTabbedMenuPanel() method.

tbiObj._t1 is the JavaScript timer object.

$('tbi.CONTENTPANEL').onmouseover = function(){
   tbiObj.hideTabbedUIMenuPanel();
}

$('tbi.EXPANDBAR').onmouseover = function(){
    tbiObj._this = this;
    tbiObj._this.style.cursor = 'wait';
    tbiObj._t1 = setTimeout("tbiObj.showTabbedUIMenuPanel();tbiObj._this.style.cursor = 'pointer';"
                ,500);
}

$('tbi.EXPANDBAR').onmouseout = function(){
    clearTimeout(tbiObj._t1);
}

I used Firebug to look at the tbiObj to verify that my additional properties did not exist within the object. This could be done programatically as well.

As your JavaScript skills advance, it is important to understand JavaScript variable scope, objects and namespaces.

If you make these changes and wish to see the results in LivePreview be sure to refresh the page to clear the cache.

[frankbicknell]

Re: Tabbed UI Hide Menu using Mouseover

Bob,

Thank you for clearing that up for me.

Frank

[chadbrown]

Re: Tabbed UI Hide Menu using Mouseover

A little different question but the only thread that i could find even remotely close

What would the inline javascript be for refreshing the tbi.MENU from a grid that is on the home page of a tabbedui.

[Clipper87]

Re: Tabbed UI Hide Menu using Mouseover

Chad,

Did you try the "Home page auto-refresh" property ? Not sure what you mean by tbi.MENU

[chadbrown]

Re: Tabbed UI Hide Menu using Mouseover

Frank,

its not the homepage that I am trying to refresh its the menu side panel tbi.menu I beleive is the ID.. It may very well be something else like the tbi.CONTENTPANEL which ever it is i just want to refresh it.

[Clipper87]

Re: Tabbed UI Hide Menu using Mouseover

Side panel from a grid ? Screenshot ?

[chadbrown]

Re: Tabbed UI Hide Menu using Mouseover

TabbedUI...

[Clipper87]

Re: Tabbed UI Hide Menu using Mouseover

Chad,

Have you tried this in the oninitial event of a tabbed UI control: tbiObj.refreshLayout();