CODEWITHSUNDEEP
javascriptjqueryhtmlclass
angela
angela

Reputation: 1153

Controlling class and display of elements dynamically

I have a navigation menu that is in a separate html file from my other html pages.

The menu is inserted into each page using this code:

<div id="navigation-container"></div>
<script>$( "#navigation-container" ).load( "navigation.html" );</script>

The menu has hidden sub-menus that open on click.

The clicked anchor gets a class and keeps it when clicked on. This class is too add a style to the selection to highlight it. 

$('#nav-box1 nav a').on('click', function () {
    $(' #nav-box1 nav a.current').removeClass('current');
    $(this).addClass('current');
});
$('#nav-box2 nav a').on('click', function () {
    $('#nav-box2 nav a.current').removeClass('current');
    $(this).addClass('current');
});
$('.nav-box3 nav a').on('click', function () {
    $('.nav-box3 nav a.current').removeClass('current');
    $(this).addClass('current');
});

When the user selects a link in this menu that opens a new page the menu is refreshed and goes back to its starting point with all hidden elements hidden again and no classes.

My question is how can I have the menu remaining open with all the classes still applied from the previous page when it opens a new page?

Upvotes: 1

Views: 90

Answers (3)

Jai
Jai

Reputation: 74738

You can use the callback function in the .load() method:

$( "#navigation-container" ).load("navigation.html", function(){
     // if you have url like this: http://www.abc.com/page.html
     var oldUrl = window.location.href; 
     var page   = oldUrl.substr(oldUrl.lastIndexOf('/')+1); // gives page.html
     $(' #nav-box1 nav a[href*="' + page + '"]').addClass('current');
     $(' #nav-box2 nav a[href*="' + page + '"]').addClass('current');
     $(' #nav-box3 nav a[href*="' + page + '"]').addClass('current');
});

Upvotes: 0

Robert Koritnik
Robert Koritnik

Reputation: 105039

Few possibilities

  1. Dynamic content loading: Use dynamic content loading similar (but not exactly the same) to how you place your menu on the page; The easiest way to implement this is by using some library that supports this out of the box (i.e. AngularJS Routing with ng-view)

  2. Server-generated client script to preselect items: Add an additional client-script generated on the server that would preselect (and/or display) particular menu item which will execute on page load on the client

  3. URL parser: Implement client side script that would run on page load and select particular menu item based on page URL

  4. HTML5 local storage: Use local storage to store your current item menu selection and load that on page load; the easiest and best supported (on older browsers too) one is to use window.name or you can use HTML5 local storage options

  5. Frames: Use frames for navigation and content which wouldn't reload your menus but rather just content part (not recommended)

Based on your current jQuery implementation and current development standards it would probably be the easiest to implement #3. When I say easiest I mean with least changes introduced to your current codebase.

The best of all would be #1 with either some library or pure jQuery implementation. This will give the best user experience as user's menu hovers and state will retain during content loading. Full page reloads will still restart the whole page.

But it depends on your actual implementation whether #3 can work sufficiently for your users. Your implementation should follow their expectations.

Upvotes: 1

Rohan Kumar
Rohan Kumar

Reputation: 40639

You need to use localstorage() like,

$(function(){
    $('#nav-box1 nav a').on('click', function(){
       $(' #nav-box1 nav a.current').removeClass('current');
       $(this).addClass('current');
       // set current active link to localstorage
       localStorage.setItem('nav_1_current',$('#nav-box1 nav a').index(this));
    });
    // if locastorage is defined 
    // and nav_1_current is already set then active the anchor tag
    if(localStorage && localStorage.getItem('nav_1_current')){
       current=localStorage.getItem('nav_1_current');
       $('#nav-box1 nav a:eq('+cur+')').addClass('current');
    }
});

Similarily you can add this for nav-2 and nav-3

Upvotes: 1

Related Questions