[CLOSED] A floating (hidden until mouseover) button in the top left of a Viewport

  1. #1

    [CLOSED] A floating (hidden until mouseover) button in the top left of a Viewport

    Hi,

    I'm trying to create the effect of a hidden button (which will probably be a menu button) in a viewport page which only displays when you hover over the top left corner of the page. I've found that this works fine with simple CSS effects, however when I put a Viewport on the page which is Fitted to the page using a FitLayout and then itself contains a layout which is NOT absolute, I can't position the button, it dissapears to X=-9999999 and Y=-999999 positions.

    I want to absolutely position something over the top of a ViewPort basically.

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <ext:ResourceManager ID="extResourceManager" runat="server" />
    <head id="Head1" runat="server">
        <style type="text/css">
            .hiddenMenuContainer
            {
                width: 50px;
                height: 50px;
                background-color: #dedede;
            }
            .editSettings
            {
                position: absolute;
                top: 5px;
                left: 5px;
            }
            
            /*button css*/
            .hiddenMenuContainer .editSettings
            {
                display: none;
            }
            .hiddenMenuContainer:hover .editSettings
            {
                display: inline;
            }
        </style>
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
    
        <div class="hiddenMenuContainer">
            <div class="editSettings">
                <ext:Button ID="Button1" runat="server" Icon="Cog" Scale="Large" />
            </div>
        </div>
    
        <ext:Viewport ID="Viewport1" runat="server">
            <Items>
                <ext:FitLayout ID="FitLayout1" runat="server">
                    <Items>
                        <ext:Panel ID="ControlContainer" runat="server" Header="false" BodyBorder="false"
                            Layout="FitLayout">
                            <LayoutConfig>
                                <ext:VBoxLayoutConfig Align="Center" Pack="Center" />
                            </LayoutConfig>
                            <Items>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:FitLayout>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by Daniil; Feb 02, 2012 at 12:44 PM. Reason: [CLOSED]
  2. #2
    Hi,

    I would suggest to use the MouseDistanceSensor plugin.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
    
        <script type="text/javascript">
            var align = function (panel) {
                panel.el.alignTo(Ext.getBody(), 'tl-tl', [20,20]);
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server">
                <Listeners>
                    <DocumentReady Handler="align(Panel1);" />
                    <WindowResize Handler="align(Panel1);" />
                </Listeners>
            </ext:ResourceManager>
            <ext:Viewport runat="server" Layout="FitLayout" />
            <ext:Panel
                ID="Panel1" 
                runat="server" 
                Floating="true" 
                Width="100" 
                Height="50" 
                Layout="FitLayout"
                Shadow="None"
                Border="false">
                <Items>
                    <ext:Button runat="server" Text="Hello!">
                        <Menu>
                            <ext:Menu runat="server">
                                <Items>
                                    <ext:MenuItem Text="Item 1" />
                                    <ext:MenuItem Text="Item 2" />
                                </Items>
                            </ext:Menu>
                        </Menu>
                    </ext:Button>
                </Items>
                <Plugins>
                    <ext:MouseDistanceSensor runat="server" MinOpacity="0.2" />
                </Plugins>
            </ext:Panel>
        </form>
    </body>
    </html>
    See also
    https://examples1.ext.net/#/Miscella..._Sensor/Basic/
  3. #3
    Awesome.... :)

Similar Threads

  1. [CLOSED] How mouseover can fire at button with menu?
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 13, 2012, 6:51 PM
  2. Replies: 1
    Last Post: Nov 30, 2011, 4:10 PM
  3. How to put button align left tag <Button>?
    By Kai_it in forum 1.x Help
    Replies: 6
    Last Post: Nov 21, 2011, 1:49 AM
  4. Replies: 4
    Last Post: Oct 21, 2011, 4:48 PM
  5. Replies: 4
    Last Post: Aug 04, 2009, 4:39 PM

Tags for this Thread

Posting Permissions