Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2014
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Adding CSS Class to JavaScript

    Hi all,

    I found some JavaScript code I am using for a SharePoint site to display a breadcrumb for a document library (for folder navigation) and it is working nicely.

    Code:
    ///Author: Sohel Rana
    //Version 1.2
    //Last Modified on 27-Oct-2013
    //Version History:
    //  1. Added
    //  2. Fixed the bug 'Filtering by clicking on field title would result duplicate navigation link'
    //  3. Fixed the bug 'breadcrumb title always lowercase'. Now breadcrumb title is as like the folder name in the library even with case (lower/upper)
    
    //replace query string key with value
    function replaceQueryStringAndGet(url, key, value) {
        var re = new RegExp("([?|&])" + key + "=.*?(&|$)", "i");
        separator = url.indexOf('?') !== -1 ? "&" : "?";
        if (url.match(re)) {
            return url.replace(re, '$1' + key + "=" + value + '$2');
        }
        else {
            return url + separator + key + "=" + value;
        }
    }
    
    
    function folderNavigation() {
        function onPostRender(renderCtx) {
            if (renderCtx.rootFolder) {
                var listUrl = decodeURIComponent(renderCtx.listUrlDir);
                var rootFolder = decodeURIComponent(renderCtx.rootFolder);
                if (renderCtx.rootFolder == '' || rootFolder.toLowerCase() == listUrl.toLowerCase())
                    return;
    
                //get the folder path excluding list url. removing list url will give us path relative to current list url
                var folderPath = rootFolder.toLowerCase().indexOf(listUrl.toLowerCase()) == 0 ? rootFolder.substr(listUrl.length) : rootFolder;
                var pathArray = folderPath.split('/');
                var navigationItems = new Array();
                var currentFolderUrl = listUrl;
    
                var rootNavItem =
                    {
                        title: 'Document Library',
                        url: replaceQueryStringAndGet(document.location.href, 'RootFolder', listUrl)
                    };
                navigationItems.push(rootNavItem);
    
                for (var index = 0; index < pathArray.length; index++) {
                    if (pathArray[index] == '')
                        continue;
                    var lastItem = index == pathArray.length - 1;
                    currentFolderUrl += '/' + pathArray[index];
                    var item =
                        {
                            title: pathArray[index],
                            url: lastItem ? '' : replaceQueryStringAndGet(document.location.href, 'RootFolder', encodeURIComponent(currentFolderUrl))
                        };
                    navigationItems.push(item);
                }
                RenderItems(renderCtx, navigationItems);
            }
        }
    
    
        //Add a div and then render navigation items inside span
        function RenderItems(renderCtx, navigationItems) {
            if (navigationItems.length == 0) return;
            var folderNavDivId = 'foldernav_' + renderCtx.wpq;
            var webpartDivId = 'WebPart' + renderCtx.wpq;
    
    
            //a div is added beneth the header to show folder navigation
            var folderNavDiv = document.getElementById(folderNavDivId);
            var webpartDiv = document.getElementById(webpartDivId);
            if(folderNavDiv!=null){
            	folderNavDiv.parentNode.removeChild(folderNavDiv);
            	folderNavDiv =null;
            }
            if (folderNavDiv == null) {
                var folderNavDiv = document.createElement('div');
                folderNavDiv.setAttribute('id', folderNavDivId)
                webpartDiv.parentNode.insertBefore(folderNavDiv, webpartDiv);
                folderNavDiv = document.getElementById(folderNavDivId);
            }
    
    
            for (var index = 0; index < navigationItems.length; index++) {
                if (navigationItems[index].url == '') {
                    var linkClass = 'span class =\"documentLibraryClass\"'
                    var span = document.createElement('span');
                    span.innerHTML = navigationItems[index].title;
                    folderNavDiv.appendChild(span);
                }
                else {
                    var span = document.createElement('span');
                    var anchor = document.createElement('a');
                    anchor.setAttribute('href', navigationItems[index].url);
                    anchor.innerHTML = navigationItems[index].title;
                    span.appendChild(anchor);
                    folderNavDiv.appendChild(span);
                }
    
                //add arrow (>) to separate navigation items, except the last one
                if (index != navigationItems.length - 1) {
                    var span = document.createElement('span');
                    span.innerHTML = '&nbsp;>&nbsp;';
                    folderNavDiv.appendChild(span);
                }
            }
        }
    
    
        function _registerTemplate() {
            var viewContext = {};
    
            viewContext.Templates = {};
            viewContext.OnPostRender = onPostRender;
            SPClientTemplates.TemplateManager.RegisterTemplateOverrides(viewContext);
        }
        //delay the execution of the script until clienttempltes.js gets loaded
        ExecuteOrDelayUntilScriptLoaded(_registerTemplate, 'clienttemplates.js');
    };
    
    //RegisterModuleInit ensure folderNavigation() function get executed when Minimum Download Strategy is enabled.
    //if you deploy the FolderNavigation.js file in '_layouts' folder use 'FolderNavigation.js' as first paramter.
    //if you deploy the FolderNavigation.js file in '_layouts/folder/subfolder' folder, use 'folder/subfolder/FolderNavigation.js as first parameter'
    //if you are deploying in master page gallery, use '/_catalogs/masterpage/FolderNavigation.js' as first parameter
    RegisterModuleInit('/_catalogs/masterpage/FolderNavigation.js', folderNavigation);
    
    //this function get executed in case when Minimum Download Strategy not enabled.
    folderNavigation();
    What I am wanting to do is add a CSS class to the following code in the JavaScript:

    Code:
            for (var index = 0; index < navigationItems.length; index++) {
                if (navigationItems[index].url == '') {
                    var linkClass = 'span class =\"documentLibraryClass\"'
                    var span = document.createElement('span');
                    span.innerHTML = navigationItems[index].title;
                    folderNavDiv.appendChild(span);
                }
    I would like to have a CSS class that I can use to alter the size and colour of the font but everything I am trying in the above code isn't working.

    I see that a span is added (document.createElenemt) and I would like to append the 'span' with the class information (added in the var linkClass). I have tried it in many areas here but have posted the code that works, without any of my attepts to make this work.

    Am I barking up the wrong tree here? It seems like it can be done but as I am not a programmer, I don't know where to go on this one and I have spenf 3 hours so far on it.

    Thanks all,

    I will keep trying and hopefully figure it out.

    b

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,919
    Thanks
    79
    Thanked 4,423 Times in 4,388 Posts
    This is wrong:
    Code:
                    var linkClass = 'span class =\"documentLibraryClass\"'
                    var span = document.createElement('span');
    Do this instead:
    Code:
                    var span = document.createElement('span');
                    span.className = "documentLibraryClass";
    And it's perfectly okay to have this in your CSS
    Code:
    span.documentLibraryClass {
        color: pink;
        background-color: yellow;
    }
    even if no <span> of that class exists prior to running the JS code.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    brentfraser (09-03-2014)

  • #3
    New to the CF scene
    Join Date
    Sep 2014
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you Old Pendant! It worked like a charm.

    Have a good rest of your day and thank you again!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •