- This topic is empty.
-
AuthorPosts
-
January 5, 2018 at 4:28 am #264932Newbie_HTMLParticipant
Hi,
I have a figure of how much we have done within a sector i.e. £200,000, this is displayed over an image for that sector.
I need this figure to automatically change once I’ve updated it somewhere (either backend or inline css) and everywhere that figure is displayed it will update to the new figure.
Basically to reduce the amount of time I have to manually update the figure everywhere it is referenced and reducing the likelihood of error with numbers not being the same.
I hope this makes sense and I really hope this can be done easily?
January 5, 2018 at 7:27 am #264938BeverleyhParticipantYou could do it with Javascript in an external file (modify
innerHTML
ortextContent
) or, if your web page can run PHP, try a PHPinclude()
January 5, 2018 at 7:46 am #264941Newbie_HTMLParticipantThank you BeverleyH,
You are a diamond!
Do you have any examples of how it’s done? I’m running a wordpress site with a custom theme.
January 5, 2018 at 11:02 am #264951BeverleyhParticipantHit up Google for examples of what’s highlighted;
JS innerHTML https://www.w3schools.com/jsref/prop_html_innerhtml.asp
JS textContent https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
PHP include http://www.tizag.com/phpT/include.php
Unfortunately I don’t use WordPress so I couldn’t tell you how to go about inserting custom JS, or PHP files, or if you need a custom plugin for inserting PHP like you do in Joomla. I imagine the JS method will be easier to implement; there’s probably a place in the template (via a template editor or directly in the template files) where you can insert your own scripts, but bear in mind the output (the £200,000 text) will only be seen in the browser. It could also fail if JavaScript fails to load for some reason. You might also experience problems with caching if you decide to do it from an external .js file; where changes to the .js files don’t automatically load without a hard-refresh, which your users won’t know to do. You can overcome this with various cache-busting techniques though (something to research via Google). I’d see if you can do it with an inline script first. Better still, go the PHP route instead because the output will be knitted into the source code of the web page as it leaves the server, so it wouldn’t be subject to the same limitations that JS can be.
January 5, 2018 at 1:04 pm #264967BeverleyhParticipantTotally forgot about pseudo elements in CSS https://css-tricks.com/almanac/selectors/a/after-and-before/
Try it in an inline style tag in the main header template file, or maybe you can edit the head section via a template editor via the admin panel. If it were to go in an external stylesheet, it will likely fall foul of the previously mentioned caching problem (like the .js file). Again, the text won’t exist in the web page’s document body (its CSS afterall), so it isn’t real content that a search engine can read, but if you’re happy to go with a visual only workaround, give it a whirl.
February 11, 2018 at 7:09 am #265127Newbie_HTMLParticipantBeverleyH, thank you soo much, I’ve explored the javascript and it looks quite technical for a newb like me.
The pseudo element looks the best option on an initial test.The WordPress theme has a backend section for custom CSS and Custom JS ideally all of the Sectors that the company works in i.e. Offices, Residential etc… will have a sector total… £200,000 this figure will change quarterly and will be displayed in a few places on the new website, so to keep consistency of figures having all the figures in one place that can be quickly edited it a huge time saver.
I think the CSS is the best route as i’m not worried about SEO for the figures.
Thank you again, I really appreciate it! :)
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.