jQWidgets Forums

This topic contains 4 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 8 months ago.

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

Author

Error with jquery-ui Posts

October 19, 2012 at 2:54 pm Error with jquery-ui #9775

Hilmar

Member

when i use this example for jqxDocking then i get an error. But if i take out the “jquery ui” script link then the error stops. The error is “Error – invalid width”

Is this a bug or am i doing something wrong.

br – Hilmar Örn

please add ”
html>
head>
title>test
meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

link rel=”stylesheet” href=”../../../../jqwidgets_2.5/jqwidgets/styles/jqx.base.css” type=”text/css” />
link rel=”stylesheet” href=”../../../../jqwidgets_2.5/jqwidgets/styles/jqx.classic.css” type=”text/css” />
/head>

body>
script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js” charset=”utf-8″>

script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js” charset=”utf-8″>

script type=”text/javascript” src=”../../../../jqwidgets_2.5/jqwidgets/jqxcore.js”>
script type=”text/javascript” src=”../../../../jqwidgets_2.5/jqwidgets/jqxwindow.js”>
script type=”text/javascript” src=”../../../../jqwidgets_2.5/jqwidgets/jqxdocking.js”>

script>

$(document).ready(function() {

/*—————————————– Docking ——————————————————*/
$(“#docking”).jqxDocking({width: ‘100%’, theme: ‘classic’, mode: ‘docked’, cookies: ‘true’, orientation: ‘horizontal’ });
$(‘#docking’).jqxDocking(‘showAllCollapseButtons’);
$(‘#docking’).jqxDocking(‘hideAllCloseButtons’);

/*———————————————- TAKKAR ——————————————————————*/

}); //$(document).ready(function()

/script>

div id=’docking’ style=’width:50%;height:auto;’>
div id=’panel0′>
div id=’window0′>
div>Header 1
div>Content 1
/div>
div id=’window1′>
div>Header 2
div>Content 2
/div>
/div>
div id=’panel1′>
div id=’window2′>
div>Header 3
div>Content 3
/div>
div id=’window3′>
div>Header 4
div>Content 4
/div>
/div>
/div>

/body>
/html>

October 19, 2012 at 3:00 pm Error with jquery-ui #9778

Peter Stoev

Keymaster

Hi Hilmar,

I am not sure why you commented the jQuery’s ready function, but it shouldn’t be. For using the jqxDocking in your pages check: jquery-docking-getting-started.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 19, 2012 at 3:09 pm Error with jquery-ui #9780

Hilmar

Member

i did not comment te jquery function and i was not asking about that. My question was why i get error when i add “script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js” to the html

October 19, 2012 at 3:18 pm Error with jquery-ui #9781

Peter Stoev

Keymaster

Hi Hilmar,

We’ll investigate the reported issue. Thank you for the feedback!

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 19, 2012 at 3:44 pm Error with jquery-ui #9783

Peter Stoev

Keymaster

Hi Hilmar,

After testing that issue we found out that the jQuery’s outerWidth and outerHeight do not work with that version of jQuery UI, because outerWidth and outerHeight methods return a jQuery object instead of Number value. We use outerWidth and outerHeight in our widget and that’s the reason it does not work when that version of jQuery UI is used. The good news are that jQuery UI Team seems to have fixed that issue in their latest release.

i.e you need to use:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9/jquery-ui.min.js"></script>

Here’s a 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/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.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/jqxdocking.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 () {
            var theme = getTheme();
     
            $('#docking').jqxDocking({ theme: theme, orientation: 'horizontal', width: 650, mode: 'default' });
            $('#docking').jqxDocking('hideAllCloseButtons');
            $('#events').jqxPanel({ theme: theme, height: '50px', width: '450px' });
            function capitaliseFirstLetter(string) {
                return string.charAt(0).toUpperCase() + string.slice(1);
            }
            function displayEvent(event) {
                var eventData = 'Event: <span style="font-style: italic;">' + capitaliseFirstLetter(event.type) + '</span>';
                eventData += '<strong>' + $('#' + event.args.window).jqxWindow('title') + '</strong>';
                $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
            }
            $('#docking').bind('dragEnd', function (event) {
                displayEvent(event);
            });
            $('#docking').bind('dragStart', function (event) {
                $("#events").jqxPanel('clearcontent');
                displayEvent(event);
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="events" style="border-width: 0px; float: left;
            margin-left: 30px;">
        </div>
        <div id="docking" style="float: left;">
            <div>
                <div id="window0" style="height: 150px">
                    <div>
                        CISC</div>
                    <div>
                        Before the RISC philosophy became prominent, many computer architects tried to bridge
                        the so called semantic gap, i.e. to design instruction sets that directly supported
                        high-level programming constructs such as procedure calls, loop control, and complex...</div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>
                        Database management system</div>
                    <div>
                        A database management system (DBMS) is a software package with computer programs
                        that control the creation, maintenance, and the use of a database. It allows organizations
                        to conveniently develop databases...</div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>
                        RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs around 1975 include the
                        observations that the memory-restricted compilers of the time were often unable
                        to take advantage...</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.