Alpha Video Training
Results 1 to 8 of 8

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

  1. #1
    Member -Jinx-'s Avatar
    Real Name
    Jinx
    Join Date
    Jul 2012
    Location
    Wisconsin
    Posts
    963

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

    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?

  2. #2
    Member -Jinx-'s Avatar
    Real Name
    Jinx
    Join Date
    Jul 2012
    Location
    Wisconsin
    Posts
    963

    Default 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:
    Code:
    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:
    Code:
    <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.

  3. #3
    Member -Jinx-'s Avatar
    Real Name
    Jinx
    Join Date
    Jul 2012
    Location
    Wisconsin
    Posts
    963

    Default 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?

  4. #4
    "Certified" Alphaholic Clipper87's Avatar
    Real Name
    Frank
    Join Date
    Dec 2008
    Location
    Antwerp, Belgium
    Posts
    1,891

    Default 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)
    Frank

    Tell me and I'll forget; show me and I may remember; involve me and I'll understand

  5. #5
    Member -Jinx-'s Avatar
    Real Name
    Jinx
    Join Date
    Jul 2012
    Location
    Wisconsin
    Posts
    963

    Default 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

  6. #6
    Member -Jinx-'s Avatar
    Real Name
    Jinx
    Join Date
    Jul 2012
    Location
    Wisconsin
    Posts
    963

    Default 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.

  7. #7
    "Certified" Alphaholic Clipper87's Avatar
    Real Name
    Frank
    Join Date
    Dec 2008
    Location
    Antwerp, Belgium
    Posts
    1,891

    Default 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!
    Frank

    Tell me and I'll forget; show me and I may remember; involve me and I'll understand

  8. #8
    Member -Jinx-'s Avatar
    Real Name
    Jinx
    Join Date
    Jul 2012
    Location
    Wisconsin
    Posts
    963

    Default 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.
    Code:
    <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:
    Code:
    function AutoHideButtonsPane(checked)
    {
    //removed tbiobj. from the front of the next two variables.  it didn't like it for some reason
    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';
    $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');
    ele = $('{tabbedUI.alias}.EXPANDBAR');
    ele.style.display = '';	
    $e.add(ele,'mouseover',function(){tbiObj.showTabbedUIMenuPanel();},'','','AutoHide');
    }
    function NoHideButtonsPane(checked)
    {
    if (checked == true){
    var ele = $('{tabbedUI.alias}.MENUPANEL');
    $e.removeGroup('AutoHide');
    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.

Similar Threads

  1. Is It Possible To Populate Textbox Based On Dropdown Selection?
    By iRadiate in forum Application Server Version 11 - Web/Browser Applications
    Replies: 1
    Last Post: 06-06-2012, 09:59 AM
  2. Change Connection String to different Databases... based on user selection
    By kiwibruce in forum Application Server Version 10 - Web/Browser Applications
    Replies: 4
    Last Post: 05-30-2011, 06:48 PM
  3. user based filter on tabbed ui
    By christappan in forum Application Server Version 10 - Web/Browser Applications
    Replies: 4
    Last Post: 03-30-2010, 04:24 PM
  4. How to calc based on selection
    By John Burke in forum Alpha Five Version 5
    Replies: 4
    Last Post: 05-07-2005, 04:49 PM
  5. Based on Current Selection of Records
    By Mike Becker in forum Alpha Five Version 5
    Replies: 2
    Last Post: 09-17-2002, 03:30 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •