Is there a way to pin the flyout on a tabbed UI based on user selection?

[-Jinx-]

I know I can set it so that you have to click to open it and close it or I can set it to stay open all the time but many users like the flyout and some don't like it. Those that don't like it are usually running dual monitors with the flyout in between them. This makes it flutter incessantly sometimes. Those that really like it usually have smaller monitors and want to conserve the space. Heck, I've got large dual monitors and still like it to save space.

Anyway, is there some code somwhere that I can modify so I can allow a user to pin it if they'd like?

[-Jinx-]

Re: Is there a way to pin the flyout on a tabbed UI based on user selection?

OK,
So I was able to uncheck the "auto colapse button pane" option in the tabbed UI properties and then put this code (the code that is removed from the xbasic when you uncheck the colapse option) in the javaScript function declarations:

function AutoHideButtonsPane()
{
tbiObj._hideTO = 0;
tbiObj._menuMouseOut = function(e){
	var ele = $('{tabbedUI.alias}.MENUPANEL');
	var relEle = (e.relatedTarget) ? e.relatedTarget : e.toElement;
	if(relEle){
		while(relEle != ele && relEle.nodeName.toLowerCase() != 'body') relEle = relEle.parentNode
		if(relEle == ele) return;
	}
	setTimeout(function(){ tbiObj.hideTabbedUIMenuPanel();},0);
}	
var ele = $('{tabbedUI.alias}.MENUPANEL');
$sa(ele,'A5OLDWIDTH',ele.style.width);
ele.style.width = '22px';
ele.style.display='none';
$e.add(ele,'mouseout',tbiObj._menuMouseOut);
$e.add(ele,'mouseover',function(){clearTimeout(tbiObj._hideTO);});
ele = $('{tabbedUI.alias}.EXPANDBAR');
ele.style.display = '';	
$e.add(ele,'mouseover',function(){tbiObj.showTabbedUIMenuPanel();});
}

I then added a "static text" control to the top of my buttons pane with this code in it:

<form><input type="checkbox" id ="check1" onchange="if (check1.checked==true)AutoHideButtonsPane();else NoHideButtonsPane();">Autohide flyout?
</form>

Checking the button works as expected. What I'm trying to figure out now is how to undo the code that I ran previously when I checked the button. I'm trying to create a NoHideButtonsPane function in my javascript functions declarations but I'm not having much luck turning this off again.

[-Jinx-]

Re: Is there a way to pin the flyout on a tabbed UI based on user selection?

Argh!
How do I get rid of the "mouseout" and "mousover" elements after they've been created by the above function?

[Clipper87]

Re: Is there a way to pin the flyout on a tabbed UI based on user selection?

Jinx,

Have you thought of doing this in a completely other way? Like setting the timeout to maybe -1 , 86400 or so to disable / enable (back to 500)

[-Jinx-]

Re: Is there a way to pin the flyout on a tabbed UI based on user selection?

Hi Frank,
No, unfortunately I'm like a bulldog with this stuff sometimes. I get my jaws wrapped around a problem and won't let go until it's finished. Haha. Your suggestion might be a good idea. I'll give that a try when I get back to work on Moday.

In the mean time' I've mined the data with firebug and found where the mousout and mouseover functions get stuck into the element. Maybe with this info someone can help me write the code to get rid of them again. they appear under $e._e[10] , 11 and 12.

Please see the attached screen shots. The first one is before clicking my checkbox and the second one is after.

beforeautohide.pngafterautohide.png

[-Jinx-]

Re: Is there a way to pin the flyout on a tabbed UI based on user selection?

P.S. I decided to try to change the timeout as you suggested before I left work. It doesn't work either. It seems that after those mouseout mouseover functions are put in they don't come out and they don't re-read the timeout time even if it changed. They go into a sort of loop or different nest level or something and I can't seem to affect them. I still think they need to be removed.

[Clipper87]

Re: Is there a way to pin the flyout on a tabbed UI based on user selection?

Like your bulldog attitude! What you are looking for is $e.remove() and it is fully documented in the documentation system; look for "events core.JS" I knew it had to be there; Alpha rocks!

[-Jinx-]

Re: Is there a way to pin the flyout on a tabbed UI based on user selection?

Thanks for your help Frank! I had looked at that documentation before and tried $e.remove() but I couldn't get it to work properly. I didn't read carefully enough though and saw the $e.removeGroup() after rereading it because of your suggestion. That worked! So, here is the code for any that may want to do this.

First, I have defined a static text control in my Tabbed UI buttons pane.

<form>Pin Menu<input type="checkbox" id ="check1" onchange="if (check1.checked==false)AutoHideButtonsPane(check1.checked);else NoHideButtonsPane(check1.checked);">
</form>
<script>
FireCheck1OnChange();
</script>

Then I have these functions in my JavaScript functions declarations on the Tabbed UI properties page:

function AutoHideButtonsPane(checked)
{
[COLOR="#0000FF"]//removed tbiobj. from the front of the next two variables.  it didn't like it for some reason[/COLOR]
hideTO = 0;
menuMouseOut = function(e){
	var ele = $('{tabbedUI.alias}.MENUPANEL');
	var relEle = (e.relatedTarget) ? e.relatedTarget : e.toElement;
	if(relEle){
		while(relEle != ele && relEle.nodeName.toLowerCase() != 'body') relEle = relEle.parentNode
		if(relEle == ele) return;
	}
	setTimeout(function(){ tbiObj.hideTabbedUIMenuPanel();},0);
}	
var ele = $('{tabbedUI.alias}.MENUPANEL');
$sa(ele,'A5OLDWIDTH',ele.style.width);
ele.style.width = '22px';
ele.style.display='none';
[COLOR="#0000FF"]$e.add(ele,'mouseout',menuMouseOut,'','','AutoHide');
//since I removed the tbiobj. from them I obviously had to change this to hideTO as well
$e.add(ele,'mouseover',function(){clearTimeout(hideTO);},'','','AutoHide');[/COLOR]
ele = $('{tabbedUI.alias}.EXPANDBAR');
ele.style.display = '';	
[COLOR="#0000FF"]$e.add(ele,'mouseover',function(){tbiObj.showTabbedUIMenuPanel();},'','','AutoHide');[/COLOR]
}
function NoHideButtonsPane(checked)
{
if (checked == true){
var ele = $('{tabbedUI.alias}.MENUPANEL');
[COLOR="#0000FF"]$e.removeGroup('AutoHide');[/COLOR]
tbiObj.showTabbedUIMenuPanel();}
}
function FireCheck1OnChange()
{
document.getElementById("check1").onchange();
}

The blue parts are important changes made from the code that I snatched out of the Xbasic tab/firebug.

You should have "Autohide menu panel" unchecked in the Tabbed UI properties to run this code.

It may be a bit unclear by the naming conventions I used for my functions because I went through several itterations but the check box starts unchecked and the fly-out menu is on autohide as default. If a user checks the box it will pin it out. If the user then unchecks the checkbox again, it will return to fly-out on mouseover.