jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 1 through 15 (of 48 total)

1 2 … 4 →

Author

Posts

July 30, 2012 at 3:32 am in reply to: Binding Function on window Collapse Binding Function on window Collapse #6392

Minko

Blocked

Hello Royroy,

There is ‘collapse’ event and it is raised when the window is collapsed. I just tested it again and it works as expected.

You can bind to the collapse event using the jQuery bind method:

JavaScript

$('#window').bind('collapse', function () {
    alert('The window have been collapsed!');
});

Working sample:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <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/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript">
    
        $(document).ready(function () {
            $('#window').jqxWindow({ height: 145, width: 270, showCollapseButton: true});
            $('#window').bind('collapse', function() {
                alert('collapsed');
            });        
        });
    </script>
</head>
<body class='default'>
   <div id="window">
    <div>Title</div>
    <div>Content</div>
   </div>
</body>
</html>

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

July 18, 2012 at 1:30 pm in reply to: 100% Gauges 100% Gauges #6113

Minko

Blocked

Hello Tom,

you have to check whether the parent of the jqxGauge container has height more than 0px.
Here is complete source which have to show you the gauge with 100% height:

CSS

#gaugeValue 
{
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fefefe), color-stop(100%, #f3f3f3));
    background-image: -webkit-linear-gradient(#fefefe, #f3f3f3);
    background-image: -moz-linear-gradient(#fefefe, #f3f3f3);
    background-image: -o-linear-gradient(#fefefe, #f3f3f3);
    background-image: -ms-linear-gradient(#fefefe, #f3f3f3);
    background-image: linear-gradient(#fefefe, #f3f3f3);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
    padding: 10px;
}
html, body
{
    width: 100%;
    height: 100%;
}

JavaScript

$(document).ready(function () {
    $('#gaugeContainer').jqxGauge({
        ranges: [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
                { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
                { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
                { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13}],
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        value: 0,
        width: '100%',
        height: '100%',
        colorScheme: 'scheme05',
        animationDuration: 1200
    });
    $('#gaugeContainer').bind('valueChanging', function (e) {
        $('#gaugeValue').text(Math.round(e.args.value) + ' kph');
    });
    $('#gaugeContainer').jqxGauge('value', 140);
});

HTML

<body>
<div id="gaugeContainer"></div>
</body>

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

July 18, 2012 at 1:09 pm in reply to: 100% Gauges 100% Gauges #6109

Minko

Blocked

Hello Tom,

here is how you can initialize jqxGauge with 100% width and height:

JavaScript

$('#gaugeContainer').jqxGauge({                
    ticksMinor: { interval: 5, size: '5%' },
    ticksMajor: { interval: 10, size: '9%' },
    width: '100%',
    height: '100%',
});

HTML

<div id="gaugeContainer"></div>

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

July 17, 2012 at 7:07 am in reply to: Binding Function on window Collapse Binding Function on window Collapse #6032

Minko

Blocked

Hello Royroy,

you can bind to the collapse event using the jQuery bind method:

JavaScript

$('#window').bind('collapse', function () {
    alert('The window have been collapsed!');
});

The code above will cause alert everytime you collapse the jqxWindow with id window.

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

July 10, 2012 at 6:12 am in reply to: IE Error for validator.js IE Error for validator.js #5812

Minko

Blocked

Hi hardcode,

Internet Explorer versions <= 8 are dealing the arrays in a little bit different way. Remove your last comma from the rules array and I guess that the error will be fixed.
Here is the code without the last comma:

JavaScript

<script type="text/javascript">
    $(document).ready(function () {
        var theme = 'energyblue';
        $("#Loginbutton").jqxButton({ width: '150', height: '30', theme: theme });
        $('#Loginbutton').bind('click', function () {
            $('#login_form').jqxValidator('validate');
        });
        $('#login_form').jqxValidator({
            rules: [
                { input: '#user_id', message: 'E-mail is required!', action: 'keyup', rule: 'required' },
                { input: '#user_id', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' },
	            { input: '#p_id', message: 'Password is required!', action: 'keyup', rule: 'required' }], 
            theme: theme
        });
        $('#login_form').jqxValidator({ onSuccess: function () { $('#login_form').submit(); } });
    });
</script>

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

July 10, 2012 at 6:03 am in reply to: How to click the tree, to increase and displays a new tab How to click the tree, to increase and displays a new tab #5811

Minko

Blocked

Hi Webiis,

here is an example how you can achieve this functionality:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.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/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#tabs').jqxTabs({ width: 580, height: 200, position: 'top', showCloseButtons: true });
            $('#menu').jqxMenu();
            $('#tree').jqxTree();
            $('#tree').bind('select', function (e) {
                var element = $(e.args.element),
                    content = getContent(element[0]),
                    header = element.text();
                addTab(header, content);
            });
            $('#menu').bind('itemclick', function (e) {
                var element = $(e.args),
                    content = getContent(element[0]),
                    header = element.text();
                addTab(header, content);
            });
            function addTab(header, content) {
                if (!tabExists(header)) {
                    $('#tabs').jqxTabs('addLast', header, content);
                }
            }
            function tabExists(header) {
                return $('#tabs .jqx-tabs-title :contains(' + header + ')').length > 0;
            }
            function getContent(element) {
                var iframe = document.createElement('iframe');
                iframe.setAttribute('src', element.getAttribute('data-url'));
                iframe.style.width = '100%';
                iframe.style.height = '90%';
                iframe.style.borderWidth = '0px';
                return iframe.outerHTML;
            }
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="menu" style="margin-left: 15px;">
            <ul>
                <li data-url="http://jqwidgets.com/">jQWidgets</li>
                <li data-url="http://w3.org/">W3C</li>
                <li data-url="http://news.ycombinator.com/">IT news</li>
            </ul>
        </div>
        <div id="tree" style="float:left; margin: 15px; ">
            <ul>
                <li data-url="http://www.jqwidgets.com/jquery-widgets-demo/">jQWidgets Demos</li>
                <li data-url="http://jquery.com/">jQuery</li>
            </ul>
        </div>
        <div id='tabs' style="margin: 15px;">
            <ul>
                <li>Tab 1</li>
            </ul>
            <div>
                Tab 1 content
            </div>
        </div>
    </div>
</body>
</html>

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

July 10, 2012 at 5:22 am in reply to: Linear gauge max value exceeded Linear gauge max value exceeded #5809

Minko

Blocked

Hello Rob,

I tried to reproduce the issue but I couldn’t. Can you send me the source code where the issue happens?

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

July 9, 2012 at 9:27 am in reply to: Multiple Modal Windows issue in IE8 Multiple Modal Windows issue in IE8 #5782

Minko

Blocked

Hi DollyB,

try to clear your browser cache, make sure twice you’ve updated the files and try again.
Here is a screenshot based on your code showing two modal jqxWindows in IE8:

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

July 9, 2012 at 6:55 am in reply to: Multiple Modal Windows issue in IE8 Multiple Modal Windows issue in IE8 #5767

Minko

Blocked

Hello Dolly,

here is example with your source code and little modifications:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.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/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        var theme = $.data(document.body, 'theme', theme);
        if (theme == undefined) theme = '';
        addEventListeners();
        createElements(theme);
        $("#jqxWidget").css('visibility', 'visible');
    });
    function createElements(theme) {
        $('#eventWindow').jqxWindow({ maxHeight: 1250, maxWidth:1000, minHeight: 200, minWidth: 200, height: 450, width: 750,
            theme: theme, resizable: false, isModal: true, modalOpacity: 0.3, autoOpen: false, showCollapseButton: true
        });
        $('#addFileEventWindow').jqxWindow({ maxHeight: 1250, maxWidth:1000, minHeight: 200, minWidth: 200, height: 330, width: 500,
            theme: theme, resizable: false, isModal: true, modalOpacity: 0.3, autoOpen: false, showCollapseButton: true
        });
    }
    function addEventListeners() {
        $('#showWindowButton').mousedown(function () {
            $('#eventWindow').jqxWindow('show');
        });
        $('#addFileButton').mousedown(function () {
            $('#addFileEventWindow').jqxWindow('show');
        });
    }
</script>
</head>
<body class='default'>
<div style="width: 100%; height: 650px; border: 0px solid #ccc; margin-top: 10px;" id="mainDemoContainer">
    <input type="button" id="showWindowButton" value="Click me" />
            <div id="eventWindow">
                    <div>Header</div>
                    <div style="overflow: hidden;" id="windowContent">
                    <div id="tab1">
                        <ul style="margin-left: 30px;">
                            <li style="padding: 5px; height: 20px;">Details</li>
                            <li style="padding: 5px; height: 20px;">Attachments</li>
							<li style="padding: 5px; height: 20px;">Reports</li>
                        </ul>
                        <div>
						   <div id="jqxgrid"></div>
                        </div>
						<div>
							<div style="height: 25px; padding: 5px;" class="jqx-widget-header">
						        <input type="button" value="Add File" style="float: left;" id="addFileButton"  />
						        <div style="margin-left: 5px; float: left;" id='jqxWidgetButton'></div>
						    </div>
                            <div id="jqxgrid2"></div>
                        </div>
						<div>
                        </div>
                    </div>
                </div> <!-- window content -->
            </div> <!-- event winodw -->
            <div id="addFileEventWindow">
			  <div>Add File</div>
			  <div>
				<FORM name="addForm" method="post" enctype="multipart/form-data" action="">
                <table>
                  <tr>
                    <td colspan="2" class="thheading">
                      <div style="height: 5px; padding: 5px;" class="jqx-widget-header">Add File</div>
                    </td>
                  </tr>
                      <tr>
                        <td colspan="1" align="left">
                            <div id='name'><font><B>Name: </B></font></div>
                                <div id='nameVal'></div>
                            <div id='type'><font><B>Type: </B></font></div>
                                <div id='typeVal'></div>
                            <div id='format'><font><B>Format: </B></font></div>
                                <div id='formatVal'></div><br/>
                            <div id='status' style="margin-right: 5px; float: right;"><IMG name="status" src=""></div>
                        </td>
                      </tr>
                      <tr>
                        <td colspan="2" align="left">
                            <div id='file'><font><B>File: </B></font></div>
                            <div id='name'>
                                <input type="file" size="25" value="" style="margin-right: 5px;" name="file" />
                            </div>
                        </td>
                      </tr>
                      <tr>
                      <td colspan="2" align="right" height="70"></td>
                    </tr>
                    <tr>
                      <td colspan="2" align="right">
                      <br/>
                          <input type="button" value="Close" style="float: right;" id="closeButton" onclick="javascript:window.close();" />
                          <input type="submit" value="Add File" style="margin-right: 5px; float: right;" id="addFileConfirmButton"  />
                      </td>
                    </tr>
                </table>
			  </form>
			</div>
		 </div>
         </div> <!-- mainDemoContainer -->
</body>
</html>

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

July 9, 2012 at 6:02 am in reply to: Multiple Modal Windows issue in IE8 Multiple Modal Windows issue in IE8 #5765

Minko

Blocked

Hello DollyB,

we tried to reproduce your issue but unfortunately we could not. Please make sure you’re using the last version of jQWidgets and jQuery 1.7.2.
If you still have this issue after updating your JavaScript files let us know.

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

July 4, 2012 at 2:50 pm in reply to: how can removeall sub items in the tree by selecting parent tree item? how can removeall sub items in the tree by selecting parent tree item? #5649

Minko

Blocked

Hello Rajuk,

you can achieve this functionality using the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <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/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#jqxTree').jqxTree({ height: '400px', width: '300px', theme: 'classic' });
            $('#Remove').jqxButton({ height: '25px', width: '100px', theme: 'classic' });
            $('#Remove').click(function () {
                var selectedItem = $('#jqxTree').jqxTree('selectedItem'),
                    count,
                    children;
                if (selectedItem != null) {
                    children = $(selectedItem.element).find('li');
                    count = children.length;
                    for (var i = 0; i < count; i += 1) {
                        if (i < count - 1) {
                            $('#jqxTree').jqxTree('removeItem', children[i], false);
                        } else {
                            $('#jqxTree').jqxTree('removeItem', children[i], true);
                        }
                    }
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style='float: left;'>
            <div id='jqxTree' style='float: left; margin-left: 20px;'>
                <ul>
                    <li id='home' item-selected='true'>Home</li>
                    <li item-expanded='true'>Solutions
                        <ul>
                            <li>Education</li>
                            <li>Financial services</li>
                            <li>Government</li>
                            <li>Manufacturing</li>
                            <li>Solutions
                                <ul>
                                    <li>Consumer photo and video</li>
                                    <li>Mobile</li>
                                    <li>Rich Internet applications</li>
                                    <li>Technical communication</li>
                                    <li>Training and eLearning</li>
                                    <li>Web conferencing</li>
                                </ul>
                            </li>
                            <li>All industries and solutions</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div style='margin-left: 60px; float: left;'>
                <div style='margin-top: 10px;'>
                    <input type="button" id='Remove' value="Remove" />
                </div>
            </div>
        </div>
    </div>
</body>
</html>

When you select parent item and click on the “Remove” button all it’s children are going to be removed.

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

July 4, 2012 at 10:42 am in reply to: Drag & drop with IFRAMES Drag & drop with IFRAMES #5646

Minko

Blocked

Hello Gabriel,

jqxDragDrop does not supports dragging/dropping of objects which are located in different documents.

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

July 3, 2012 at 3:45 pm in reply to: How can I use width/height 100% size with jqxTree on fixed div.. How can I use width/height 100% size with jqxTree on fixed div.. #5619

Minko

Blocked

Hello Kerusia,

I tried to reproduce your scenario but in my case the jqxTree is with size 100% width and height.
Please make sure you’re using the last version of jQWidgets. If you still have this issue after updating the widgets let us know.

Best regards,
Minko.

jQWidgets Team
http://jqwidgets.com/

June 12, 2012 at 3:30 pm in reply to: Tabs UI does not seem work in IE8 Tabs UI does not seem work in IE8 #4854

Minko

Blocked

Hello,

the code I’ve suggested was tested with the last version of jQWidgets (v2.2.0), under IE7, IE8 and IE9.

Please check whether you’re using the last version and try the code again.

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

June 12, 2012 at 3:03 pm in reply to: Tabs UI does not seem work in IE8 Tabs UI does not seem work in IE8 #4852

Minko

Blocked

Hello Sushma,

here is an example of similar scenario:

HTML

<div id="window">
    <div>Title</div>
    <div>
        <div id="tab1">
            <ul>
                <li>Clients</li>
                <li>Orders</li>
            </ul>
            <div><div id="clientsGrid"></div></div>
            <div><div id="orderGrid"></div></div>
        </div>
        <div id="tab2">
            <ul>
                <li>Shops</li>
                <li>Cities</li>
            </ul>
            <div><div id="shopsGrid"></div></div>
            <div><div id="citiesGrid"></div></div>
        </div>
    </div>
</div>

JavaScript

$(document).ready(function () {
    var theme = getTheme();
    $('#window').jqxWindow({ width: 700, height: 350, theme: theme });
    $('#tab1').jqxTabs({ theme: theme });
    $('#tab2').jqxTabs({ theme: theme });
    $("#clientsGrid").jqxGrid({
        width: 670,
        height: 100,
        source: clientsDataAdapter,
        theme: theme,
        columnsresize: true,
        columns: clientsColumns
    });
    $("#shopsGrid").jqxGrid({
        width: 670,
        height: 100,
        source: shopsDataAdapter,
        theme: theme,
        columnsresize: true,
        columns: shopsColumns
    });
    $("#orderGrid").jqxGrid({
        width: 670,
        height: 100,
        source: shopsDataAdapter,
        theme: theme,
        columnsresize: true,
        columns: orderColumns
    });
    $("#citiesGrid").jqxGrid({
        width: 670,
        height: 100,
        source: shopsDataAdapter,
        theme: theme,
        columnsresize: true,
        columns: citiesColumns
    });
});

The code above is creating window with two jqxTabs, each with two tab sections. In each tab of jqxTabs there is a jqxGrid with sample data. The variables clientsColumns, shopsColumns, orderColumns, citiesColumns and clientsDataAdapter, shopsDataAdapter, shopsDataAdapter, shopsDataAdapter depends on the specific case and data.

Important detail is that the size of jQWidgets should be set using their constructor. Here is an example with jqxWindow:

$('#window').jqxWindow({ width: 700, height: 350, theme: theme });

The code above is setting width 700px and height 350px to jqxWindow.

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

Author

Posts

Viewing 15 posts - 1 through 15 (of 48 total)

1 2 … 4 →