Use one file to display to lots of webpages

Question

I'm building a simple webpage. However there are a few dozen sub pages. The way this guy organises his business means the phone number is constantly changing between those in charge of taking calls any given week. Is there a way I can change a single line of text (say in a css file) and have the phone number posted on all the sub pages change every week according to who is in charge of taking the calls?
Since then I've learned just enough to change the template from a messy html/table code to a more streamlined look to the code using css.

Answer 1

You COULD potentially do it via the ::after pseudo-element if this fits your browser support profile: http://caniuse.com/#feat=css-gencontent
Note that IE8 (the only 'common' browser without support of ::after instead of :after) is EOL early next year (and there will be much rejoicing).

While this is an absolutely terrible way of doing this- you're supposed to use CSS for presentation not information, I'm not gonna tell you don't if this is just a temporary hack to save yourself a headache while you implement something less terrible.

Sample of how-to: http://dabblet.com/gist/b4bd30443cdbd810d8a8

Call <span class="data-onCallPhnNum"></span> for help.

.data-onCallPhnNum::after{
    content:"(555)-555-5555";
}

Should note that the primary disadvantage of this is that there is no fallback if the browser cannot render the ::after pseudoelement.

Better yet, you could include a Javascript file like this:

        [....]
        <script type="text/javascript" src="phonenum.js"></script>
    </body>
</html>

and having the js in phonenum.js (and its expected HTML use) be:

(function(){
    var phnNum = "(555)-555-5555";
    var phnLnks = document.getElementsByClassName("data-onCallPhnNum");
    for(var i = phnLnks.length >>> 0; i--;){
        phnLnks[i].href = "tel:" + phnNum;
        phnLnks[i].innerHTML = phnNum;
    }
})();

Call <a href="page-with-phone-number.html" class="data-onCallPhnNum">the number listed on our contact page</a> for assistance.

This would accomplish the same thing, only not work on browsers with js turned off, has a natural fallback, has a clickable phone number for mobile viewers, and isn't using CSS for information.

You should still eventually move this into a database and have the number pulled server side, but for a hack to save on headaches before that real solution's ready, either'll do.

EDIT NOTE: Beers go to CBroe for suggesting the tel: protocol and the formalization of the fallback.

Answer 2

There are two other options, neither on is strictly an HTML solution.

Server Side Includes are one option, though they are falling out of favor.

Another option is using a server-side template system, such as PHP.