CODEWITHSUNDEEP
javascriptphphtmljquery
Adam99H
Adam99H

Reputation: 21

How can I conditionally load HTML elements, or remove them BEFORE the page is loaded?

The thing is, I have a website rented for many years and it has no way of accessing the server, I can only edit the php .twig files.

I created a mobile and desktop version and used media queries to hide one or the other.

My problem is that because the desktop version is loaded before the mobile one, a script that is essential for the page to work, and which I have no access to, targets the desktop version even when it's hidden so the mobile version does not work.

I have tried to remove the pc version triggering this script on load:

function myFunction() {
  var pcversion = document.getElementById("pcversion");
  pcversion.remove();
}

but the content appears for 0.5s before dissapearing, therefore rendering the mobile v. useless again. It would work in theory if the pcversion was deleted BEFORE it was loaded. It loads and the script targets it screwing everything.

I can put jQuery, js or php code in the .twigs, how would you tackle this problem? I've also tried to conditionally load one version before the other depending on screen size but to no avail :(

Thanks for reading mates.

Upvotes: 1

Views: 363

Answers (1)

mplungjan
mplungjan

Reputation: 178026

add this

<?php echo "<style>#pcversion { display: none !important }</style>"; ?>

or using script:

document.write("<style>#pcversion { display: none !important }</style>")

Upvotes: 1

Related Questions