jQWidgets Forums

Forum Replies Created

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

Author

Posts

July 31, 2012 at 9:12 am in reply to: Docking Window Size > 600px Docking Window Size > 600px #6423

milen

Participant

It works with the version that I use – jQWidgets 2.3.1.

Here’s the screenshot:

Regards,
Milen Ivanov

jQWidgets Team
http://www.jqwidgets.com

July 31, 2012 at 8:29 am in reply to: Docking Window Size > 600px Docking Window Size > 600px #6420

milen

Participant

Hi Peter,

I suppose that you will need to set the ‘contactContent’s height to 100% because the provided code will change the size of the window, but the content could have any size.

Example:

<!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" />
    <style type="text/css">
        .windowTitle {
            float: left;
        }
        .windowIcon {
            position: absolute;
            right: 5px;
        }
        .jqx-window-content-classic {
            padding: 0px;
            background-color: #e3e3e3;
        }
        .jqx-docking-panel-classic {
            margin: 0px;
        }
        #contactContent{
            height: 800px;
        }
    </style>
    <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/jqxdocking.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = 'classic';
                $('#contactContainer').jqxDocking({
                    theme: theme,
                    width: 450,
                    windowsOffset: 0
                });
                $('#contactContainer').jqxDocking('hideAllCloseButtons');
                $('#contactContainer').jqxDocking('hideAllCollapseButtons');
                $('#contactContainer').jqxDocking('pinWindow', 'contactWindow');
                $('#contactContainer').jqxDocking('setWindowProperty', 'contactWindow', 'maxHeight', 1000);
                $('#contactContainer').jqxDocking('setWindowProperty', 'contactWindow', 'height', 1000);
                $("#contactTooltip").jqxTooltip({ width: 250, theme: 'classic', showHtml: true });
                var element = $('#contactIcon');
                $("#contactTooltip").jqxTooltip('add', element, '<b>Contacts</b>');
            });
        </script>
        <div id="contactContainer">
            <div id="contactPanel">
                <div id="contactWindow">
                    <div>
                        <span class="contactTitle">Contact</span>
                       <div id='contactTooltip'></div>
                    </div>
                    <div>
                        <div style="height: 100%; background: blue;" id="contactContent">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Regards,
Milen Ivanov

jQWidgets Team
http://www.jqwidgets.com

July 30, 2012 at 6:39 am in reply to: Docking Window Size > 600px Docking Window Size > 600px #6400

milen

Participant

Hi Peter,

To get rid of ScrollBars, I suppose that you can set the overflow to hidden of the window’s content container.

                   <div style='overflow: hidden;'>
                        <div id="contactContent">
                        </div>
                    </div>

Regards,
Milen Ivanov

jQWidgets Team
http://www.jqwidgets.com

July 24, 2012 at 2:39 pm in reply to: Docking Window Size > 600px Docking Window Size > 600px #6300

milen

Participant

Hi Peter,

That restriction comes from the fact that jqxWindow’s maxHeight property is 600px by default. You can change it by using the ‘setWindowProperty’ method of jqxDocking.

For example:

$('#contactContainer').jqxDocking('setWindowProperty', 'contactWindow', 'maxHeight', 1000);
$('#contactContainer').jqxDocking('setWindowProperty', 'contactWindow', 'height', 1000);

Regards,
Milen Ivanov

jQWidgets Team
http://www.jqwidgets.com

July 20, 2012 at 4:34 pm in reply to: Menu appears behind Grid Menu appears behind Grid #6208

milen

Participant

Hi grozavule,

Thanks for the feedback.

The latest version is jQWidgets 2.3 and is from 17-July. For more details about the new version, see here.

Best Regards,
Milen Ivanov

jQWidgets Team
http://www.jqwidgets.com

July 20, 2012 at 7:43 am in reply to: Menu appears behind Grid Menu appears behind Grid #6177

milen

Participant

Hi grozavule,

I have tried to reproduce the reported behavior with jqxMenu and jqxGrid, but without avail. Do you use the latest version of jQWidgets and jQuery? Which browser do you use? Could you send us a sample which illustrates the issue?

Here’s my test 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/jqxdata.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 200; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxMenu").jqxMenu({ width: 700, height: 35 });
            $("#jqxgrid").jqxGrid(
            {
                width: 700,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                columns: [
                  { text: 'First Name', dataField: 'firstname', width: 100 },
                  { text: 'Last Name', dataField: 'lastname', width: 100 },
                  { text: 'Product', dataField: 'productname', width: 180 },
                  { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
           <div id='jqxMenu' margin-left: 20px;'>
                <ul>
                    <li><a href="#Home">Home</a></li>
                    <li>Solutions
                        <ul style='width: 250px;'>
                            <li><a href="#Education">Education</a></li>
                            <li><a href="#Financial">Financial services</a></li>
                            <li><a href="#Government">Government</a></li>
                            <li><a href="#Manufacturing">Manufacturing</a></li>
                            <li type='separator'></li>
                            <li>Software Solutions
                                <ul style='width: 220px;'>
                                    <li><a href="#ConsumerPhoto">Consumer photo and video</a></li>
                                    <li><a href="#Mobile">Mobile</a></li>
                                    <li><a href="#RIA">Rich Internet applications</a></li>
                                    <li><a href="#TechnicalCommunication">Technical communication</a></li>
                                    <li><a href="#Training">Training and eLearning</a></li>
                                    <li><a href="#WebConferencing">Web conferencing</a></li>
                                </ul>
                            </li>
                            <li><a href="#">All industries and solutions</a></li>
                        </ul>
                    </li>
                    <li>Products
                        <ul>
                            <li><a href="#PCProducts">PC products</a></li>
                            <li><a href="#MobileProducts">Mobile products</a></li>
                            <li><a href="#AllProducts">All products</a></li>
                        </ul>
                    </li>
                    <li>Support
                        <ul style='width: 200px;'>
                            <li><a href="#SupportHome">Support home</a></li>
                            <li><a href="#CustomerService">Customer Service</a></li>
                            <li><a href="#KB">Knowledge base</a></li>
                            <li><a href="#Books">Books</a></li>
                            <li><a href="#Training">Training and certification</a></li>
                            <li><a href="#SupportPrograms">Support programs</a></li>
                            <li><a href="#Forums">Forums</a></li>
                            <li><a href="#Documentation">Documentation</a></li>
                            <li><a href="#Updates">Updates</a></li>
                        </ul>
                    </li>
                    <li>Communities
                        <ul style='width: 200px;'>
                            <li><a href="#Designers">Designers</a></li>
                            <li><a href="#Developers">Developers</a></li>
                            <li><a href="#Educators">Educators and students</a></li>
                            <li><a href="#Partners">Partners</a></li>
                            <li type='separator'></li>
                            <li>By resource
                                <ul>
                                    <li><a href="#Labs">Labs</a></li>
                                    <li><a href="#TV">TV</a></li>
                                    <li><a href="#Forums">Forums</a></li>
                                    <li><a href="#Exchange">Exchange</a></li>
                                    <li><a href="#Blogs">Blogs</a></li>
                                    <li><a href="#Experience Design">Experience Design</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>Company
                        <ul style='width: 180px;'>
                            <li><a href="#About">About Us</a></li>
                            <li><a href="#Press">Press</a></li>
                            <li><a href="#Investor">Investor Relations</a></li>
                            <li><a href="#CorporateAffairs">Corporate Affairs</a></li>
                            <li><a href="#Careers">Careers</a></li>
                            <li><a href="#Showcase">Showcase</a></li>
                            <li><a href="#Events">Events</a></li>
                            <li><a href="#ContactUs">Contact Us</a></li>
                            <li><a href="#Become an affiliate">Become an affiliate</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

Looking forward to your reply.

Best Regards,
Milen Ivanov

jQWidgets Team
http://www.jqwidgets.com

July 19, 2012 at 4:41 am in reply to: Window with Tooltip Icon Window with Tooltip Icon #6126

milen

Participant

Hi Peter,

The jqxWindow’s ‘setTitle’ method sets the HTML or Text to be displayed in the window’s header. Setting it to a string will erase your previous content. In your scenario, I think that it’s better to select your ‘windowTitle’ span element and invoke the jQuery’s text() method with the new title string.

Best Regards,
Milen Ivanov

jQWidgets Team
http://www.jqwidgets.com

July 17, 2012 at 7:25 am in reply to: Gauge in tabs? Gauge in tabs? #6033

milen

Participant

Hi Chris,

You can take a look at jQWidgets ver. 2.3. We’ve implemented a new way of loading widgets within jqxTabs. You can take a look at an online sample here: tabs-integration.htm.

Best Regards,
Milen Ivanov

jQWidgets Team
http://www.jqwidgets.com

July 13, 2012 at 4:22 am in reply to: jqmenu hover color jqmenu hover color #5935

milen

Participant

Hi wwhalen,

The highlight state is enabled or disabled by the enableHover property. That is the state when the mouse cursor is over an item. When an item is opened, a new state called ‘selected’ is applied to the item. If the opened item is a top-level item, the ‘jqx-menu-item-top-selected ‘ class is applied to it, otherwise the jqx-menu-item-selected class. To disable the selected state, you need to edit these CSS classes in your web page.

Best Regards,
Milen Ivanov

jQWidgets Team
http://www.jqwidgets.com

July 12, 2012 at 4:45 am in reply to: Hide expand/collapse arrow Hide expand/collapse arrow #5865

milen

Participant

Hi Antony,

It will not move the tree items. jqxTree’s layout takes into account that there should be a toggle indicator and positions its elements according to that.

Regards,
Milen

jQWidgets Team
http://www.jqwidgets.com

July 12, 2012 at 3:25 am in reply to: Hide expand/collapse arrow Hide expand/collapse arrow #5863

milen

Participant

Hi Antony,

You can also hide the expand/collapse arrows by setting the ‘visibility’.

Example:

    .jqx-tree-item-arrow-expand, .jqx-tree-item-arrow-collapse
    {
       visibility: hidden;
    }

Regards,
Milen

jQWidgets Team
http://www.jqwidgets.com

July 2, 2012 at 4:44 pm in reply to: Tabs appear vertically when autoOpen value for jqxWindow is set to false. Tabs appear vertically when autoOpen value for jqxWindow is set to false. #5575

milen

Participant

Hi DollyB,

After testing the reported issue more carefully, I think that you’ve found a rendering issue in jqxTabs when jqxWindow is initially closed and I would like to thank you about your feedback. I’ve created a new work item regarding it and we will do our best to resolve it for the next version of jQWidgets.

To make the jqxTabs to fit the jqxWindow, you can do this:

$('#tab1').jqxTabs({ height: '100%', width: '100%', theme: theme });

You can also specify height to the items by setting the CSS height.

<li style="padding: 10px; height: 20px;">Details</li>
<li style="padding: 10px; height: 20px;">Attachments</li>
<li style="padding: 10px; height: 20px;">Reports</li>

Best Regards,
Milen Ivanov

jQWidgets Team
http://www.jqwidgets.com

July 2, 2012 at 6:22 am in reply to: Tabs appear vertically when autoOpen value for jqxWindow is set to false. Tabs appear vertically when autoOpen value for jqxWindow is set to false. #5545

milen

Participant

Hi DollyB,

The solution is to set the jqxTabs width to ‘100%’.

Best Regards,
Milen Ivanov

jQWidgets Team
http://www.jqwidgets.com

July 2, 2012 at 4:06 am in reply to: Tabs appear vertically when autoOpen value for jqxWindow is set to false. Tabs appear vertically when autoOpen value for jqxWindow is set to false. #5536

milen

Participant

Hi DollyB,

I am afraid that I am unable to reproduce the reported issue. Could you please, send a small sample which reproduces it to support@jqwidgets.com or post the sample here in the Forum? For code formatting, select the code and click the “Format HTML Code” button in the forum’s toolbar.

Best Regards,
Milen Ivanov

jQWidgets Team
http://www.jqwidgets.com

July 1, 2012 at 4:19 pm in reply to: autoclose internal widgets autoclose internal widgets #5530

milen

Participant

Hi levieu,

Thank you for the feedback! The reported behavior is confirmed and represents an issue with our navigation bar widget’s click handler.

Best Regards,
Milen Ivanov

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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