jQWidgets Forums

Forum Replies Created

Viewing 2 posts - 31 through 32 (of 32 total)
1 2 3
  • Author
    Posts
  • October 1, 2014 at 3:29 pm in reply to: Using a Percent for Height Using a Percent for Height #60479

    BrentH
    Participant

    My content is a tree view.
    You can see the issue with this script (it’s as short as I can make it). You can drag the bottom of the browser up and down to see the issue. You lose elements from the tree view. There is one image in there, but the source is irrelevant – just point to anything.

    <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="keywords" content="Sample Content Not Resizing" />
    <title id='Description'>Sample Content Not Resizing</title>

    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="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>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.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/jqxsplitter.js"></script>

    <script type="text/javascript">
        var _layerwinpos = 0;
        var geoViewDemo = (function () {
            var _collapsed = false;

            function _addEventListeners() {
                $('#OpenToolBoxWindow').mousedown(function () {
                    $('#toolBoxWindow').jqxWindow('expand');
                    $('#toolBoxWindow').jqxWindow('open');
                });
            };

            function _createWindows() {
                $('#toolBoxWindow').jqxWindow({ width: 320, height: '50%', resizable: true, autoOpen: false });
                $("#toolBoxWindow").jqxWindow('move', 40, 4);
            };

            function _createLayersTree() {
                $('#jqxTree').jqxTree({ height: '100%', width: '100%', hasThreeStates: false, checkboxes: false });
                $("#jqxTree").jqxTree('selectItem', $("#home")[0]);
            };

            return {
                init: function () {
                    _createWindows();
                    _createLayersTree();
                    _addEventListeners();
                }
            };
        } ());

        $(document).ready(function () {
            geoViewDemo.init();
        });

    </script>

</head>

<body class='default'>

            <img id="OpenToolBoxWindow" style="position: absolute; top: 4px; left: 4px; visibility: visible; width: 30px; height: 30px" 
                src="../Images/ExpandContract/toolbox48.png" alt="Show Toolbox" />
            <div id="toolBoxWindow">
                <div id="toolBoxWindowHeader">
                    <span id="captureContainer" style="float: left">Map Tools</span>
                </div>
                <div id="toolBoxWindowContent" style="height: 100%;">
                    <div id='jqxTree'>
                        <ul>
                            <li id='home'>Home</li>
                            <li id="solutions" item-checked='true' item-expanded='true'>
                                Solutions
                                <ul>
                                    <li id="education">
                                        <input type="checkbox" style="padding: 0px; margin: 0px;"></checkbox>
                                        Education</li>
                                    <li id="financial services">
                                        Financial services</li>
                                    <li id="government">
                                        <img style='float: left; margin-right: 5px;' src='../images/calendarIcon.png' /><span
                                            item-title="true">Calendar</span>
                                    </li>
                                    <li item-checked='false'>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>
                            <li>Products
                                <ul>
                                    <li>PC products</li>
                                    <li>Mobile products</li>
                                    <li>All products</li>
                                </ul>
                            </li>
                            <li>Support
                                <ul>
                                    <li>Support home</li>
                                    <li>Customer Service</li>
                                    <li>Knowledge base</li>
                                    <li>Books</li>
                                    <li>Training and certification</li>
                                    <li>Support programs</li>
                                    <li>Forums</li>
                                    <li>Documentation</li>
                                    <li>Updates</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

</body>
</html>
    October 1, 2014 at 3:13 pm in reply to: Get the Window's current location Get the Window's current location #60473

    BrentH
    Participant

    Thanks, that works great.

  • Author
    Posts
Viewing 2 posts - 31 through 32 (of 32 total)
1 2 3