jQuery UI Widgets Forums Navigation Expander Interrupt expanding/collapsing animation

This topic contains 2 replies, has 2 voices, and was last updated by  parascus 6 years, 10 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Interrupt expanding/collapsing animation #32101

    parascus
    Participant

    Hi jqWidgets-Team,

    I want to use the expander but it should expand on mouseenter and collapse on mouseleave. This is as I see no problem and can be done by: $(‘jqxExpander’).mouseenter() and .mouseleave(). But haveing several expander of this type to to another gliding with the mouse over the widgets seems to lead to a missbehaviour. The current expander under the mouse pointer is expanded correct but sometimes it does not react on the mouseleave event. I think this is because the animation is ongoing while the mouseleave event is fired. Is there any way to interrupt the animation and trigger the collapsing? Or how can I build a queue so after expanding fully the expander which the mouse has already left collapse again?

    Thanks in advance

    Stephan

    Example:

    <body>
    <link rel="stylesheet" type="text/css" href="./thirdparty/jqwidgets/styles/jqx.base.css"></link>
    <link rel="stylesheet" type="text/css" href="./thirdparty/jqwidgets/styles/jqx.metrodark.css"></link>
    <style>
    .top_menu {
    float:left;
    display:inline-block;
    }
    .clickable {
    cursor:pointer !important;
    }
    </style>
    <script type="text/javascript" src="./thirdparty/jquery/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="./thirdparty/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="./thirdparty/jqwidgets/jqxexpander.js"></script>
    <div id="top_menu_" class="top_menu">
    <div>Alpha</div>
    <div>
    <div id="menu_A1" data-href="a1.htm" class="clickable menu_item">A1</div>
    <div id="menu_A2" data-href="a2.htm" class="clickable menu_item">A2</div>
    <div id="menu_A3" data-href="a3.htm" class="clickable menu_item">A3</div>
    <div id="menu_A4" data-href="a4.htm" class="clickable menu_item">A4</div>
    </div>
    </div>
    <div id="top_menu_" class="top_menu">
    <div>Beta</div>
    <div>
    <div id="menu_B1" data-href="b1.htm" class="clickable menu_item">B1</div>
    <div id="menu_B2" data-href="b2.htm" class="clickable menu_item">B2</div>
    </div>
    </div>
    <div id="top_menu_" class="top_menu">
    <div>Gamme</div>
    <div>
    <div id="menu_C1" data-href="c1.htm" class="clickable menu_item">C1</div>
    <div id="menu_C2" data-href="c2.htm" class="clickable menu_item">C2</div>
    <div id="menu_C3" data-href="c3.htm" class="clickable menu_item">C3</div>
    </div>
    </div>
    <script>
    $(".top_menu").jqxExpander({ width: "200px", theme: "metrodark", expanded: false, showArrow: false, expandAnimationDuration: 50, collapseAnimationDuration: 50 });
    $(".top_menu").mouseenter( function() { $(".top_menu").jqxExpander({expanded: false }); $(this).jqxExpander("expand")});
    $(".top_menu").mouseleave( function() { $(this).jqxExpander("collapse")});
    $(".menu_item").click( function() { alert( $(this).attr("data-href"));});
    </script>
    </body>
    Interrupt expanding/collapsing animation #32132

    Dimitar
    Participant

    Hello Stephan,

    Here is how to achieve this functionality:

    <!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.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    // Create jqxExpander
    var theme = "";
    $("#jqxExpander").jqxExpander({ width: '350px', theme: theme });
    var left = false;
    $("#jqxExpander").mouseenter(function () {
    left = false;
    $('#jqxExpander').jqxExpander('expand');
    });
    $("#jqxExpander").mouseleave(function () {
    left = true;
    $('#jqxExpander').jqxExpander('collapse');
    });
    $('#jqxExpander').on('expanded', function () {
    if (left == true) {
    $('#jqxExpander').jqxExpander('collapse');
    };
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget' style="float: left;">
    <div id='jqxExpander'>
    <div>
    Early History of the Internet</div>
    <div>
    <ul>
    <li>1961 First packet-switching papers</li>
    <li>1966 Merit Network founded</li>
    <li>1966 ARPANET planning starts</li>
    <li>1969 ARPANET carries its first packets</li>
    <li>1970 Mark I network at NPL (UK)</li>
    <li>1970 Network Information Center (NIC)</li>
    <li>1971 Merit Network's packet-switched network operational</li>
    <li>1971 Tymnet packet-switched network</li>
    <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
    <li>1973 CYCLADES network demonstrated</li>
    <li>1974 Telenet packet-switched network</li>
    <li>1976 X.25 protocol approved</li>
    <li>1979 Internet Activities Board (IAB)</li>
    <li>1980 USENET news using UUCP</li>
    <li>1980 Ethernet standard introduced</li>
    <li>1981 BITNET established</li>
    </ul>
    </div>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Interrupt expanding/collapsing animation #32189

    parascus
    Participant

    Hi Dimitar,

    that works great. Thank you!

    Kind regards

    Stephan

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

You must be logged in to reply to this topic.