Correctly Expanding based on URL - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: jQuery Accordion, jQuery UI, jqxnavigationbar

This topic contains 1 reply, has 2 voices, and was last updated by Anonymous 13 years, 5 months ago.

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

Author

Correctly Expanding based on URL Posts

October 18, 2011 at 7:47 am Correctly Expanding based on URL #994

err97002

Member

Hello,

I love the navigationBar! However I’m not clear on how to expand the menu correctly based on the link added.

For example, I’ve setup the demo (which is similar to the Google Analytics menu) but I’m not sure how to identify what link to expand based on what was clicked — for example: assume “Visitors->Visitor Loyalty->Loyalty” links to mysite.com/test5.html How do I expand (and highlight!) that link correctly once somebody goes to that page?

Thanks,
John

October 18, 2011 at 12:10 pm Correctly Expanding based on URL #1008

Anonymous

Hi John,

The requested feature is not supported in the jqxNavigationBar. It will be most probably implemented in the new jqxTree widget in a future release. However, I prepared a litte workaround for you with nested jqxNavigationBar objects.

Here is the full code example:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="jqxcore.js"></script>
    <script type="text/javascript" src="jqxexpander.js"></script>
    <script type="text/javascript" src="jqxnavigationbar.js"></script>
    <style type="text/css">
        #jqxNavigationBar
        {
            border: 1px solid #cccccc;
        }
        .jqx-navigationbar
        {
            border: none;
        }
        .main-header
        {
            color: #696969;
            background: none;
            border: 0px solid #cccccc;
            border-bottom-width: 1px;
            font-weight: bold;
            margin-bottom: 0px;
        }
        .main-content
        {
            border: 0px solid #cccccc;
            border-bottom-width: 1px;
            margin: 0px;
            padding: 0px;
            background: none;
        }
        .sub-header
        {
            color: #696969;
            font-size: 11px;
            background: none;
            border: 0px solid #cccccc;
            border-bottom-width: 0px;
            margin-top: 1px;
            margin-bottom: 0px;
        }
        .jqx-expander-header a
        {
            color: #000;
            text-decoration: none;
        }
        .content-style
        {
            margin: 0px;
            padding: 0px;
            border: 0px solid black;
            background: none;
        }
        .jqx-expander-header-expanded
        {
            background-color: #696969;
            color: #fff;
            text-decoration: none;
            border-bottom-width: 0px;
        }
        .jqx-expander-header-expanded a
        {
            color: #fff;
        }
        .jqx-expander-header-expanded a:hover
        {
            text-decoration: none;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            /*
            * Creating all navigation bars. Order of creating doesn't matterns
            */
            $("#jqxNavigationBar").jqxNavigationBar({ expandMode: 'single', arrowPosition: 'left', height: 400, width: 300 });
            $("#secondNestedNavigationBar").jqxNavigationBar({ expandMode: 'toggle', arrowPosition: 'left' });
            $("#thirdNestedNavigationBar").jqxNavigationBar({ expandMode: 'toggle', arrowPosition: 'left' });
            $("#fourthNestedNavigationBar").jqxNavigationBar({ expandMode: 'toggle', arrowPosition: 'left' });
            /*
            * Hiding the arrowrs of all navigation bar items which doesn't have content.
            */
            (function hideArrows(navigationBar) {
                if (!navigationBar) {
                    return;
                }
                var childrenCount = navigationBar.children().length;
                for (var i = 0; i < childrenCount; i++) {
                    try {
                        var element = navigationBar.jqxNavigationBar('getContentAt', i);
                        var content = element != null ? $.trim(element.replace(/<!--[\s\S]*?-->/g, '')) : '';
                        if (content === '') {
                            navigationBar.jqxNavigationBar('hideArrowAt', i);
                        } else {
                            if (content != null) {
                                hideArrows($('#' + $(content).attr('id')));
                            }
                        }
                    }
                    catch (error) {
                        var er = error;
                    }
                }
            })($("#jqxNavigationBar"));
            $("#jqxNavigationBar").jqxNavigationBar('expandAt', 0);
            $("#link").click(function (event) {
                var anchors = $('#jqxNavigationBar').find('a');
                var foundAnchor = null;
                $.each(anchors, function () {
                    if (this.href == event.target.href) {
                        foundAnchor = this;
                        return false;
                    }
                });
                // open the navigation path.
                if (foundAnchor != null) {
                    var path = $(foundAnchor).attr('path').split("#");
                    var index = -1;
                    var id = null;
                    // expand all jqxNavigationBar objects starting from the outer most navigation bar.
                    for (i = path.length - 1; i > 0; i--) {
                        if (i % 2 == 0) {
                            index = parseInt(path[i]);
                        }
                        else {
                            id = path[i];
                            $("#" + id).jqxNavigationBar('expandAt', index);
                        }
                    }
                }
            });
        });
    </script>
</head>
<body>
    <div style='width: 300px;' id='jqxWidget'>
        <!-- Root navigation bar -->
        <div class='navigationbar' id="jqxNavigationBar">
            <div class="jqx-expander-header main-header">
                <a href="#Intelligence">Intelligence</a>
            </div>
            <div class="jqx-expander-content main-content">
                <!-- Intelligence sub navigation bar -->
                <div class='navigationbar' id="fourthNestedNavigationBar" style="margin-left: 25px;">
                    <div class="jqx-expander-header sub-header">
                        <a href="#DailyAlerts">Daily Alerts</a>
                    </div>
                    <div class="jqx-expander-content content-style">
                    </div>
                    <div class="jqx-expander-header sub-header">
                        <a href="#WeeklyAlerts">Weekly Alerts</a>
                    </div>
                    <div class="jqx-expander-content content-style">
                    </div>
                </div>
                <!-- End of Intelligence sub navigation bar -->
            </div>
            <div class="jqx-expander-header main-header">
                <a href="#Visitors">Visitors</a>
            </div>
            <div class="jqx-expander-content main-content">
                <!-- Visitors sub navigation bar -->
                <div class='navigationbar' id="secondNestedNavigationBar" style="margin-left: 25px;">
                    <div class="jqx-expander-header sub-header">
                        <a href="#VisitorTrending">Visitor Tending</a>
                    </div>
                    <div class="jqx-expander-content content-style">
                        <!-- Visitor Tending sub navigation bar -->
                        <div class='navigationbar' id="thirdNestedNavigationBar" style="margin-left: 25px;">
                            <div class="jqx-expander-header sub-header">
                                <a path="#thirdNestedNavigationBar#0#secondNestedNavigationBar#0#jqxNavigationBar#1" href="#Visits">Visits</a>
                            </div>
                            <div class="jqx-expander-content content-style">
                            </div>                      
                        </div>
                        <!-- End of Visitir Tending sub navigation bar -->
                    </div>
                </div>
                <!-- End of Visitors sub navigation bar -->
            </div>
        </div>
        <!-- End of the root navigation bar -->
    </div>
    <a id='link' href="#Visits">Click to Navigate to #Visits.</a>
</body>
</html>

In the code above there is a line with anchor tag and I added a custom ‘path’ attribute to it. The path attribute is used to identify where the anchor element is in the navigation bars hierarchy.

<a path="#thirdNestedNavigationBar#0#secondNestedNavigationBar#0#jqxNavigationBar#1" href="#Visits">Visits</a>

I simulated page navigation by creating an anchor element outside of the jqxNavigationBar. Once the user clicks that anchor, a click handler is executed. In the click handler, at first I find the associated jqxNavigationBar’s anchor with the same ‘href’. Then I use its custom ‘path’ attribute to find which jqxNavigationBar object(s) should be expanded.

Below is the code of the ‘click’ handler.

$("#link").click(function (event) {
    var anchors = $('#jqxNavigationBar').find('a');
    var foundAnchor = null;
    $.each(anchors, function () {
        if (this.href == event.target.href) {
            foundAnchor = this;
            return false;
        }
    });
    // open the navigation path.
    if (foundAnchor != null) {
        var path = $(foundAnchor).attr('path').split("#");
        var index = -1;
        var id = null;
        // expand all jqxNavigationBar objects starting from the outer most navigation bar.
        for (i = path.length - 1; i > 0; i--) {
            if (i % 2 == 0) {
                index = parseInt(path[i]);
            }
            else {
                id = path[i];
                $("#" + id).jqxNavigationBar('expandAt', index);
            }
        }
    }
});

Demo: Nested Bars
Download:nestedbars.zip

Hope this information helps you.

Please feel free to write us, if you have any additional questions. We will be happy to help you.

Best Regards,
George Todorov

Author

Posts

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

You must be logged in to reply to this topic.