jQWidgets Forums

Tagged: headerless window, hide, jqxwindow, title, window

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

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

Author

Headerless jqxWindows Posts
December 2, 2014 at 4:33 pm 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

December 3, 2014 at 7:18 am 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/
May 10, 2016 at 10:19 pm 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,

May 10, 2016 at 10:20 pm Headerless jqxWindows #84244

Marina
Participant

http://jsfiddle.net/PfCje/93/

May 11, 2016 at 5:25 am 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/

May 13, 2016 at 12:21 am 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; 
     }
```
August 15, 2016 at 7:11 pm 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.

August 16, 2016 at 5:25 am 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/
Author

Posts

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

You must be logged in to reply to this topic.