1

I am customizing an HTML page provided and hosted by a third-party, so I am severely restricted in what I can do to the page. On the page there is a navigation menu that looks like this.

<ul class='nav'>
   <li class='active'>
     <a href='/affiliate'>
       <span id='affiliate-nav-homepage'>
         <span class='default'>Home Page</span>
       </span>
     </a>
   </li>
   <li>...

Question: How can I make the above snippet display the text "Home" instead of "Home Page", if all I am allowed to do is add a <style> element in the page <head>; and add some HTML code (which may include Javascript) near the start of the page?

I have a considered going down one of these two paths, but both paths are problematic.

1) Use CSS to hide their text ("Home Page"). Add my own text ("Home") using :before or :after pseudo-selectors.

display: none is probably not a good way to hide the text, because browsers that don't understand :before and :after will still understand display: none and I will end up with no text at all.

Are there better CSS alternatives for me? Change font size to 0? change text color? Manipulate z-index somehow? It is OK if some older browsers display the text "Home Page". It is not OK if some browsers display "Home Page Home", or if some browser do not display any text at all.

-- OR --

2) Use Javascript to manipulate the DOM

The difficulty with Javascript is that I can only insert it near the start of the page body before the elements that I want to modify. I could hook an event that fires after the entire page is loaded, but I want to avoid the page text flashing (the text "Home Page" being displayed briefly and then changing to "Home"). Is there such an event and how would I hook it?

Thank you for you help.

Improve this question
3
  • No browser you would want to support does not support :before. However, that's not to say it's a good solution here. Commented Mar 5, 2015 at 17:33
  • Good to know. Does this include mobile browsers? Is :before part of CSS2, CSS3? Commented Mar 5, 2015 at 17:58
  • 1
    Yes it does. It's part of CSS2. See caniuse.com/#search=pseudo-elements. For IE8, you'll need to use :before (single colon). Commented Mar 6, 2015 at 3:18

2 Answers 2

Reset to default
1

Anti flashing fix:

.default { display: none; }

Changing text and showing, when document is ready:

body.onload = function (){

    //getElementsByClassName not working in old browsers, so ...
    var el = document.getElementById('affiliate-nav-homepage').getElementsByTagName('span')[0];

    el.innerHTML = 'Home';
    el.style.display = 'block';
};

Additional You can hide all content and show it after all javascript changes by this method.

This is not elegant solution, but as You say, You have limited options to resolve Your problem.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thank you, Mateusz. Could you elaborate on the ".default { display: none; }" antiflashing fix. Would I undo "display: none" in Javascript? If so, is there a way to set "display: none" also in Javascript? This way if Javascript is not available, I would still display something.
Yes, You can hide .default element in javascript, but as You saying, u have access only to javascript code, before all elements, so no. So if u dont want hide this element, just delete css rule, and remove el.style.display = 'block'; code line from javascript.
If I used Javascript to add an additinal <style>.default { display: none; }</style> element to head, do you expect it would work well?
I think it not will be problem.
1

In JavaScript

window.addEventListener("load", function(){
    document.querySelector("span.default").textContent = "Home";
    //using document.querySelector to select the span with classname default
    //using textContent to change the content of the node.
}, false);

In a script block will do it.

This will execute on page load. This will be executed so fast that in almost all cases you won't see text jumping.

Example:

window.addEventListener("load", function(){
    document.querySelector("span.default").textContent = "Home";
}, false);
<ul class='nav'>
   <li class='active'>
     <a href='/affiliate'>
       <span id='affiliate-nav-homepage'>
         <span class='default'>Home Page</span>
       </span>
     </a>
   </li>
</ul>

When your page loading becomes slowed by other resources, @Mateusz Mania's idea of using CSS to hide the element and bring it up again is actually pretty nice. I would suggest using opacity: 0 or visibility: hidden instead of display:none since the latter will remove the element from the page and when it becomes visible again it will make the content jump down below it.

Exploring the CSS option

#affiliate-nav-homepage:before{
    content: "Home";
}

.default {
  display: none;
}
<ul class='nav'>
  <li class='active'>
    <a href='/affiliate'>
      <span id='affiliate-nav-homepage'>
             <span class='default'>Home Page</span>
      </span>
    </a>
  </li>
</ul>

Improve this answer

3 Comments

Thank you, Mouser. For your CSS solution, is there a danger that a browser will support "display: none", but not the :before pseudo-element? If so, can I use Javascript to test for browser support for these two features and then conditionally add the CSS styles (before the DOM is available)? Any idea how?
@george :before is supported in all major browsers. Even on all modern mobile devices. Since IE9 so your good. IE8 is being phased out quickly.
Thank you, Mouser. I ended up going with the other solution, so I will accept that answer. Both answers actually work. I wish I could accept both. Thank you for your help.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.