User entered JS to modify book splash pages

[alexdryden]

I have a user who wants to add some custom JavaScript to a book splash page and the header menu. They are trying to make changes to the title and author (change "by" to "edited by" and move the semi-colon from the span with the subtitle to the span with the title).

They were able to move the semi-colon through basic DOM manipulation:

$(document).ready(function() {
  var subtitle = $('span.subtitle').text();
  var newsub = subtitle.replace(':', '');
  $('span.subtitle').text(newsub);
});

but they were not able to use this same model to change the author credit line. A little bit of troubleshooting showed that the author credit line didn't seem to have been built yet when the user entered JavaScript ran.

I proposed using a MutationObserver to see when h2.heading_font.heading_weight.clearboth was added/modified and then making the change. Does that seem like a sensible and durable approach? Is there something that I'm missing or a better way to go about this?

[craigdietrich]

Hi @alexdryden,

I think what you're looking for is the 'pageLoadComplete' event. It's easy to use, you just wrap it with your document ready event, here is documentation:

https://scalar.usc.edu/works/guide2/pageloadcomplete-event

[alexdryden]

Perfect! Thanks!