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

Tagged: , , ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Making content overlap for expander widget Posts
  • September 26, 2012 at 12:09 pm 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

    September 27, 2012 at 5:24 am 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/

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

You must be logged in to reply to this topic.