0

I want to use the same navigation everywhere (mysite, teamsites ..) So I'm fetching the (managed navigation) global navigation by csom in the masterpage. The global navigation is only going to show one level.

The problem is that when I'm in a subsubsite the navigation do not set any of the rootnode as active. So I can not use css to style the element. I need to set the right "node" as active programatically, where ever you are down the structure

-root
  -sitecoll (internalinfo)
  -subsite (organisation)
  -sitecoll (social)

enter image description here

What I want is to set the active node, below you can see some example of some urls.

http://dev.site.com/InternalInfo/.../../../SitePages/home.aspx (set InternalInfo as active)
http://dev.site.com/InternalInfo/Organization/SitePages/home.aspx (set organization as active)
http://dev.site.com/Social/../../../../SitePages/home.aspx (set social as active)

As you can see

What's the best way to do this, javascript? What's the best way to check "sub pathname"? ex: http:/site.com/sub1/sub2/ ..

Could I do something like this?

var currentLocation = window.location;
var pathArray = window.location.pathname.split( '/' );

if(pathArray[2] == "Organisazion")
  setAsActive("Orgainzation");

if(pathArray[1] == "InternalInfo")
  setAsActive("InternalInfo");

If you got a better way please give an example.

  • I wonder if this helps, but you'll never know. This article (sharepoint.rackspace.com/…) is about branding, but it describes well the HTML classes of the navigation parts (e.g. active path). You could try referencing to these classes to avoid the pathname inclusions. – moe Aug 14 '14 at 7:48
  • The problem is that when I'm in a susubsite the navigation do not set any of the rootnode as active. So I can not use css to style the element. I need to set the right "node" as active problematically, where ever you are down the structure. – Plexus81 Aug 14 '14 at 7:55
1

I build something similar.

I just checked if the current url contains the path of my navigation element. In your case the URLs would cause that multiple links are marked as active. But with a ordered set of URLs you can avoid this.

// URLs ordered by length to ensure correct results
var orderesNodes = [];
orderesNodes[0] = "http://dev.site.com/InternalInfo/Organization/";
orderesNodes[1] = "http://dev.site.com/InternalInfo/";
orderesNodes[2] = "http://dev.site.com/Social/";

$.each(orderesNodes, function(index, current){
     if(CheckIfContains(current)){
        //mark as active
        return false; //dont process the rest
     }
});

function CheckIfContains(href) {
    if (window.location.href.indexOf(href) > -1) {
        return true;
    }
    return false;
}

Access Browser Storage

    SetValue: function (key, value) {
        /// <summary>
        /// Saves data in the browsers localstorage
        /// </summary>
        /// <param name="key">Key paired with the value. Previous value under that key will be overwritten.</param>
        /// <param name="value">Value paired with the key.</param>
        //JSON is used to save container in the storage, which is by default string only
        localStorage.setItem(key, JSON.stringify(value));
    },
    GetValue: function (key) {
        /// <summary>
        /// Gets data from the browsers localstorage
        /// </summary>
        /// <param name="key">Key paired with the value.</param>
        /// <returns>Value or null if there is no value at the key</returns>
        //JSON is used to save container in the storage, which is by default string only
        return JSON.parse(localStorage.getItem(key));
    },
    DeleteValue: function (key) {
        /// <summary>
        /// Deletes data from the browsers localstorage
        /// </summary>
        /// <param name="key">Key paired with the value.</param>
        localStorage.removeItem(key);
    }
  • Do you save the global navigation to local web browser storage as well? Just wan't to reduce the loading time. – Plexus81 Aug 14 '14 at 10:13
  • 1
    I created links elsewhere and wasnt working on the global navigation. My links also could change rapidly and it was a requirement to have live results. If that does not apply to you (and you dont need to support old browsers), you can use the browser storage to get a minimal (few ms) performanceboost. I'll add my browser storage utility to the answer. – Mx. Aug 14 '14 at 10:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.