jQuery UI Widgets Forums Dialogs and Notifications Window Positioning a window

This topic contains 2 replies, has 3 voices, and was last updated by  Ivalde 8 years, 10 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Positioning a window #54405

    Carlos Carbonari
    Participant

    Hi, I’m trying to create a window at the center of my body, but when I define the attribute position to “center” (that is the default value), it’s not positioning it vertically at the middle (Y axis).

    Another question is that I’m able to position a window at the bottom, I can position it at the right, but I just don’t know how to positioning it at the bottom-right.

    Is that a way to do these things?

    <html>
      <head>
        <title>Test</title>
        
        <link rel="stylesheet" href="lib/jqwidgets/styles/jqx.base.css" type="text/css"/>
        <script type="text/javascript" src="lib/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="lib/jqwidgets/jqxcore.js"></script>
        
        <script type="text/javascript" src="lib/jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="lib/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="lib/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="lib/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="lib/jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="lib/jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="lib/jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="lib/jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="lib/jqwidgets/jqxgrid.columnsresize.js"></script>
        <script type="text/javascript" src="lib/jqwidgets/jqxgrid.filter.js"></script>
        <script type="text/javascript" src="lib/jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="lib/jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="lib/jqwidgets/jqxgrid.grouping.js"></script>
        
        <script type="text/javascript" src="lib/jqwidgets/jqxwindow.js"></script>
        
        <script type="text/javascript" src="lib/jqwidgets/jqxradiobutton.js"></script>
        
        <script type="text/javascript" src="lib/jqwidgets/jqxmaskedinput.js"></script>
        
        <script type="text/javascript" src="lib/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="lib/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="lib/jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="lib/jqwidgets/jqxcombobox.js"></script>
        
        <script type="text/javascript" src="lib/jqwidgets/jqxdatetimeinput.js"></script>
        <script type="text/javascript" src="lib/jqwidgets/jqxcalendar.js"></script>
        <script type="text/javascript" src="lib/jqwidgets/globalization/globalize.js"></script>
        
        <script type="text/javascript">
          function createCenterPosWindow(){
            var html = '<div id="myCenterPosWindow">' +
                       '<div id="title">@Center</div>' +
                       '<div id="content"></div>' +
                       '</div>';
            $(document.body).append(html);
    
            //Works only on horizontal position
            $('#myCenterPosWindow').jqxWindow({width: '200px', height: '100px', autoOpen: false, resizable: false, position: 'center'});
            $('#myCenterPosWindow').jqxWindow('open');
          };
          
          function createRightPosWindow(){
            var html = '<div id="myRightPosWindow">' +
                       '<div id="title">@Right</div>' +
                       '<div id="content"></div>' +
                       '</div>';
            $(document.body).append(html);
    
            //Works
            $('#myRightPosWindow').jqxWindow({width: '200px', height: '100px', autoOpen: false, resizable: false, position: 'right'});
            $('#myRightPosWindow').jqxWindow('open');
          };
          
          function createBottomPosWindow(){
            var html = '<div id="myBottomPosWindow">' +
                       '<div id="title">@Bottom</div>' +
                       '<div id="content"></div>' +
                       '</div>';
            $(document.body).append(html);
            
            //Works
            $('#myBottomPosWindow').jqxWindow({width: '200px', height: '100px', autoOpen: false, resizable: false, position: 'bottom'});
            $('#myBottomPosWindow').jqxWindow('open');
          };
          
          function createRightBottomPosWindow(){
            var html = '<div id="myRightBottomPosWindow">' +
                       '<div id="title">@RightBottom</div>' +
                       '<div id="content"></div>' +
                       '</div>';
            $(document.body).append(html);
            /*
             * This position just doesn't work
             * I tried:
             *   position: 'right-bottom'
             *   position: 'right bottom'
             *   position: 'right/bottom'
             *   position: 'right_bottom'
             *   position: 'bottom-right'
             *   position: 'bottom right'
             *   position: 'bottom/right'
             *   position: 'bottom_right'
             *   position: ['bottom', 'right']
             *   position: ['right', 'bottom']
             *   position: {x: 'right', y: 'bottom'}
             */
            $('#myRightBottomPosWindow').jqxWindow({width: '200px', height: '100px', autoOpen: false, resizable: false, position: 'right-bottom'});
            $('#myRightBottomPosWindow').jqxWindow('open');
          };
          
          $(document).ready(function (){
    	      createCenterPosWindow();
    	      createRightPosWindow();
    	      createBottomPosWindow();
    	      createRightBottomPosWindow();
          });
        </script>
      </head>
    </html>
    Positioning a window #54425

    Dimitar
    Participant

    Hello Carlos Carbonari,

    Please check out the following fiddles:

    http://jsfiddle.net/jqwidgets/Rns4L/ – a window is opened by the click of a button in the center of the screen (the default value of position is “center”);
    http://jsfiddle.net/jqwidgets/5LLay/ – the window is positioned in the top-left of the screen (position: 'top, left'). For bottom-right, position has to be set to “bottom, right”.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Positioning a window #73829

    Ivalde
    Participant

    For the window always to be positioned in screen center, when scrolled or not ecrolled, set the window div style to the following:

    style=”position: fixed; left: 50%; top: 50%;”

    Here is a complete example in which the winMsgTxt is set in runtime:

    <div id=”winMsg” style=”position: fixed; left: 50%; top: 50%;”>
    <div>
    <div id=”winMsgTxt”></div>
    <div>
    <div style=”position: absolute; bottom: 10px; right: 10px; margin-top: 10px;”>
    <input type=”button” id=”btnMsgOk” value=”OK” /><input type=”button” id=”btnMsgCancel” value=”Cancel” />
    </div>
    </div>
    </div>
    </div>

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.