3

I have a script on a page in sharepoint where I want to change the text from Sharepoint to my Company Name. It works but when the page refreshes the text sharepoint is visible for 1 second before the text changes. This is my code.

jQuery( document ).ready(function() {
jQuery(".o365cs-nav-appTitle > span").text("My Company Name"); 
});

Is the executionorder of scripts causing this?

2 Answers 2

5

Why use JavaScript at all?

    span.o365cs-nav-brandingText::after {
       content: " - Company Name";
    }

On some of my Tenants this looks like:

There are 2 SPANs with the same class

You can hide them with:

span.o365cs-nav-brandingText {
  color: transparent;
}

Then overlay the two ::after elements on top of each other:

span.o365cs-nav-brandingText::after {
 content: "Company Name";
 color: white;
 position: relative;
 left: -18em;
}

If you want to target the individual titles you can use the nth-child selector : http://www.w3schools.com/cssref/sel_nth-child.asp

2
  • The 3rd part doesn't work. The outcome is 3 "Company name overlap each other.
    – Mark L
    Jul 25, 2019 at 8:25
  • Most likely a CSS change by Microsoft. My answer dates from 2016... I can't/won't check, have left the Microsoft world Jul 26, 2019 at 8:56
4

Put in this CSS

.o365cs-nav-appTitle > span{
    transition:opacity 0.7s;
    opacity: 0;
}

and change your JS to

jQuery( document ).ready(function() {
   var $title = jQuery(".o365cs-nav-appTitle > span");
   $title.text("My Company Name"); 
   $tile.css('opacity', 1);
});

You see - every page has a Lifecycle. Right now you attach to the ready event of the document. At this event the browser already renderd the UI. If you do your alterations now you get a behaviour very similar to the FouC. To prevent that you can mostly do 2 things (but I recommend the first):

  1. Hide things via CSS (all CSS is applied when the browser renders) and later blend them in smoothly via JS
  2. It gets less likely you get the effect if you attach earlier but when doing changes via JS this isn't really a sturdy solution.

You should also evaluate if you have to to DOM manipulation at all - have a look at this answer.

6
  • Thanks for this! but this doesnt work if I dont put the code into an interval like this
    – Tomas
    Jun 8, 2016 at 9:08
  • var interval = setInterval(function(){ var $title = jQuery(".o365cs-nav-appTitle > span"); $title.text("ViaCon International AB"); $title.css('opacity', 1); }, 800);
    – Tomas
    Jun 8, 2016 at 9:09
  • I'm quite certain, that in SPO the element that you try to modify is created asynchronous - so the code does not work because the element does not exist at the ready event (I guess you had the problem with your old code too).
    – Mx.
    Jun 8, 2016 at 9:11
  • Also you may have to make your code MDS ready (which it isn't right now). Your solution is not pretty but practical - I would not recommend you remove the intervall after you made the change. Here's a reference that may help you with MDS - sharepoint.stackexchange.com/a/181408/10271
    – Mx.
    Jun 8, 2016 at 9:19
  • Typical if you have a jQuery hammer, then everything is a nail solution. This can all be done with CSS only Jun 8, 2016 at 9:22

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.