jQuery UI Widgets Forums Navigation Expander Making content overlap for expander widget

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 7 years, 4 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Making content overlap for expander widget #8502

    asha
    Member

    hello,

    I am using expander widget for menu on my site. The menu expands on click. the problem is that when the menu items expand it pushes all the content of the page below it down. I want to avoid this. I want it to overlap on the div that is below it. tried setting the position absolute and increasing the z-index, but does not work

    Any help would be appreciated

    thanks in advance

    • This topic was modified 7 years, 4 months ago by  asha.
    • This topic was modified 7 years, 4 months ago by  asha.
    • This topic was modified 7 years, 4 months ago by  Peter Stoev. Reason: Moved to Expander Forum
    Making content overlap for expander widget #8560

    Dimitar
    Participant

    Hello asha,

    This example shows the expander overlap other elements, its position property is set to absolute:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta name="keywords" content="jQuery Accordion, Expander, Toggle Bar, Expander Bar, Navigation Bar, Accordion, jqxNavigationBar, jqxExpander" />
    <meta name="description" content="jqxExpander is a simple and easy to use widget that shows/hides
    an element. It supports several built-in expand modes. You can set it up to show
    or hide an element after a click, double-click or mouse enter event on the expander's
    header. This widget also comes with customizable slide and fade animations." />
    <title id='Description'>jqxExpander is a simple and easy to use widget that shows/hides
    an element. It supports several built-in expand modes. You can set it up to show
    or hide an element after a click, double-click or mouse enter event on the expander's
    header. This widget also comes with customizable slide and fade animations.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <style type="text/css">
    #jqxExpander
    {
    position: absolute;
    }
    </style>
    <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/jqxexpander.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    // Create jqxExpander
    var theme = getTheme();
    $("#jqxExpander").jqxExpander({ width: '350px', expanded: false, theme: theme });
    });
    </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>
    <br />
    <br />
    <img src="../../custom_images/leaves-texture.jpg" />
    </body>
    </html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.