2

Background I've created a simple workaround to get a fixed background to work on iPad and iPhone devices, i.e creating an empty div just after the body tag with position:fixed rather than background-attachment:fixed which these devices doesn't support. All variations on the body element I've tried, like pseudo ::before is not working on these devices. An empty div solves this.

Problem My script below works perfectly on my main page ('Home'/'Start'). But I also have other pages like 'Contact' and such, sharing the same 'global' head tag where the script lies, where it doesn't work (the div simply doesn't show up). I would expect this to add a div after each body element, regardless of which page is loaded... Also, I'm using window.onload as I can't manually add the script after the body tag. Each subpage body tag has its own id but why would that matter? What am I missing?

window.onload = function FixedBg() {
  var body = document.body;
  var bgDiv = document.createElement('div');
  bgDiv.className = "fixedBackground";
  body.insertAdjacentElement('afterbegin', bgDiv);
}

I don't have access to manually add divs directly into the DOM which obviously would have been the approach otherwise, hence the JavaScript...

ScoobyDooku
  • 133
  • 10
  • What exxactlx is the problem here? Is there an error on the console? is the div just not showing up? – katzenhut Aug 16 '21 at 08:23
  • maybe look at this? https://stackoverflow.com/questions/20665509/javascript-document-body-undefined-if-not-preceded-by-a-document-write – katzenhut Aug 16 '21 at 08:23
  • Does `insertAdjacentElement` not take a string of html rather than a dom node? – Professor Abronsius Aug 16 '21 at 08:29
  • @katzenhut The div is just not showing up on other pages but the main/start page. – ScoobyDooku Aug 16 '21 at 08:30
  • @CherryDT That does not work to get fixed background on these devices. I have too keep it outside the body tag altogether. – ScoobyDooku Aug 16 '21 at 08:32
  • @ProfessorAbronsius If that were true, then I wouldn't see it work on my main/start page. Or can you elaborate what you think the problem is? – ScoobyDooku Aug 16 '21 at 08:33
  • 2
    true enough - I guess it must treat the dom node as a string internally. Perhaps try binding the injection to the `DOMContentLoaded` event - see if that helps – Professor Abronsius Aug 16 '21 at 08:36
  • document.body works on every page. The page itself has no knowlege where it deployed. It doesnt know the concept of subpages. – The Fool Aug 16 '21 at 08:36
  • @TheFool My thought exactly. That's why I'm confused as to why it only works on the first page, but not my other pages. The script ends up in a global head tag (on all pages) and this is why I use window.onload (I can't put the script after the – ScoobyDooku Aug 16 '21 at 08:40
  • head is read before body, that may be the issue here. Try using domcontent loaded event for that or put the script at the bottom of your body. – The Fool Aug 16 '21 at 08:42
  • @TheFool Again, in that case it wouldn't work on the first page but it does. I use window.onload to get around that – ScoobyDooku Aug 16 '21 at 08:44
  • 2
    well you see there are some quirks no one understands. Why are you so much against simply using the more solid option? using DOMContentLoaded doesnt hurt you and its not more coding work execpt a couple more letter to type window.addEventListener. – The Fool Aug 16 '21 at 08:46
  • @TheFool I'm not familiar with that syntax but I'll look it up – ScoobyDooku Aug 16 '21 at 08:47
  • No-one should be using `window.onload` in this day-and-age. Or _any_ `onfoo` event-properties for that matter. **Always use `addEventListener`** - otherwise you'll end-up treading on some other library's toes. – Dai Aug 16 '21 at 08:48
  • could be that you first page is so small that its fast enough. Stuff like this is in nature of event driven asynchronous code. `The DOMContentLoaded event will fire as soon as the DOM hierarchy has been fully constructed, the load event will do it when all the images and sub-frames have finished loading.` https://stackoverflow.com/questions/2414750/difference-between-domcontentloaded-and-load-events – The Fool Aug 16 '21 at 08:49

1 Answers1

1

As was suggested in the comments above by @ProfessorAbronsius and @TheFool, using DOMContentLoaded and an event listener did the trick! Thank you

ScoobyDooku
  • 133
  • 10