jQuery UI Widgets Forums Dialogs and Notifications Window Headerless jqxWindows

This topic contains 7 replies, has 5 voices, and was last updated by  Dimitar 7 years, 8 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • Headerless jqxWindows #63660

    Bentechsoft
    Participant

    Hi,

    I would like to know if it is possible to hide the header of a window. For example, I use a jqxWindow with a form. It works really nice in a browser with sufficient “real estate” but on a phone or small tablet, I would like to use the full viewport to display the form. If I could hide the header, that would give more space for the form. I don’t want to replicate the code so using the same window and just hide the header

    Thanks

    Headerless jqxWindows #63684

    Nadezhda
    Participant

    Hello Bentechsoft,

    Here is an example which shows how to hide ‘Title’ field from jqxWindow via css property.I hope it would be helpful.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en">
    <head>
    <title>jQuery Window CSS Styling Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css"/>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <style>
        .jqx-window-header, .jqx-widget-header {
            display:none !important;
        }
    </style>
    </head>
    <body>
    <div id='content'>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxwindow ").jqxWindow({ height: 90, width: 150 });
        });
    </script>  
    <div id='jqxwindow'>
    	<div>Header</div>
    	<div>Content</div>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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

    Headerless jqxWindows #84243

    Marina
    Participant

    Hello,
    I want header less window with only one icon inside to be the same size as window. I can’t get icon to occupy whole window if icon dimensions the same as window dimensions.
    Here is code in fiddle:

    Thanks,

    Headerless jqxWindows #84244

    Marina
    Participant
    Headerless jqxWindows #84251

    Dimitar
    Participant

    Hello Marina,

    If you wish to have a draggable icon, we suggest you use our plug-in jqxDragDrop. You can find demos with it here: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdragdrop/index.htm.

    Best Regards,
    Dimitar

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

    Headerless jqxWindows #84320

    Marina
    Participant

    Hi,
    No I wanted just small (30X30) resize icon always to be on top layer of map in right comer. I don’t need to drug it – only clicking event. I figured it out actually myself – had to set style properties of window content overflow to hidden.

    
         #jqxResizeMap .jqx-window-header, #jqxResizeMap .jqx-widget-header {
            display:none !important;padding:0px;  margin:0px; height:0; overflow: hidden;
        }
         #jqxResizeMap .jqx-window-content , #jqxResizeMap .jqx-widget-content 
         {
         	padding:0px;  margin:0px; overflow: hidden; 
         }
    
    Headerless jqxWindows #86554

    seppe
    Participant

    High Nadezhda,

    Can you please show me the Jquery script code to set the display property in the css style of the jqx-window-header to none.

    Headerless jqxWindows #86560

    Dimitar
    Participant

    Hi seppe,

    Here is how to achieve this:

    $('.jqx-window-header').css('display', 'none');

    For more information, please refer to the following page about the jQuery .css() method: http://api.jquery.com/css/.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.