jQWidgets Forums

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 12 years, 7 months ago.

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

Author

Issue with Modal Window Posts

October 30, 2012 at 4:06 pm Issue with Modal Window #10229

binfch

Participant

Hi there

I have a modal popup window I’d like to show on a button-click. It seems that there is an issue when a gauge widget is in that window.

I need the window’s “autoOpen” property to be set to false. If set to true it works…

Test code:

<!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>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    <script type='text/javascript' src="jqwidgets/jqxwindow.js"></script>
    <script type='text/javascript' src="jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgauge.js"></script>
    
</head>
<body id="bodyContainer">
    <script type="text/javascript">
        $(document).ready(function () {
            $('#popupButton').jqxButton({
            });
            $('#voiceWindow').jqxWindow({
              width: 630,
              height: 470,
              resizable: false,
              showCloseButton: false,
              isModal: true,
              autoOpen: false
            });
            labels = { position: 'far', interval: 15, formatValue: function (value, position) { return value + 's'; }};
            $('#voiceGauge').jqxLinearGauge({
              orientation: 'horizontal',
              height: '60px',
              width: '250px',
              labels: labels,
              min: 0,
              max: 15,
              colorScheme: 'scheme05',
              ticksPosition: 'far',
              background: { style: { stroke: '#cccccc', fill: '#cccccc'}, visible: true, backgroundType: 'rectangle' },
              ticksMajor: { size: '7px', interval: 1, style: { stroke: '#898989'}, visible: true },
              ticksMinor: { size: '7px', interval: 1, style: { stroke: '#898989'}, visible: false },
              ranges: [
              { startValue: 0, endValue: 7, style: { fill: '#FF4800', stroke: '#FF4800'} },
              { startValue: 7, endValue: 9, style: { fill: '#FFA200', stroke: '#FFA200'} },
              { startValue: 9, endValue: 11, style: { fill: '#FFF157', stroke: '#FFF157'} },
              { startValue: 11, endValue: 13, style: { fill: '#FFA200', stroke: '#FFA200'} },
              { startValue: 13, endValue: 15, style: { fill: '#FF4800', stroke: '#FF4800'} }]
            });
            $('#voiceGauge').jqxLinearGauge('value', 0);
        });
        function showPopup() {
            $('#voiceWindow').jqxWindow('open');
        };
    </script>
    <div id='menuContainer'>
        <input type="button" value="Open Popup Window" id="popupButton" onclick="showPopup();" />
    </div>
    <div id='voiceWindow'>
        <div>Popup Window</div>
        <div>
            <div id="voiceGauge"></div>
        </div>
    </div>
</body>
</html>

Thanks & cheers,
Peter

October 30, 2012 at 5:41 pm Issue with Modal Window #10243

Peter Stoev

Keymaster

Hi Peter,

The Gauge should be initialized in a visible DIV tag. I.e if you initialize it in jqxWindow, make sure the window is already displayed. The initContent callback function is called when the window’s content should be initialized. You can use it to initialize the Gauge.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.