CODEWITHSUNDEEP
javascripthtml
Simon R.
Simon R.

Reputation: 151

load HTML into <div>

Fiddle: https://jsfiddle.net/x9ghz1ko/ (With comments.)

I have an HTML-document, inside of this document, there are two sections: <section class="desktop_only"> and <section class="mobile_only"> – In the code, before these sections, there is a script, this script should delete one of the two sections, but the problem is: For this to work, I have to place the script after the sections but I can't do that, because there are more scripts inside of the sections and I have to delete them before they run.

Simplified version of my code: (…not working.)

<script>
device = "desktop"; // This could be either: "desktop", or: "mobile"

if(device === "desktop"){
        document.querySelector(".mobile_only").remove(); // Not doing anything.
} else {
        document.querySelector(".desktop_only").remove(); // Not doing anything.
}
</script>

<section class="desktop_only">
    <script src="example.js"></script>
    <script> console.log("desktop_only") </script>
    <div> desktop </div>
</section>

<section class="mobile_only">
    <script src="example.js"></script>
    <script> console.log("mobile_only") </script>
    <div> mobile (Delete this.) </div>
</section>

Maybe one solution would be: I have an empty <div>, called, let's say: ".platform_dependent" and I have two external files called: desktop_only.something and mobile_only.something and then I load the content of on of these files into: platform_dependent.innerHTML …but I don't know how to do this?

Upvotes: 3

Views: 175

Answers (3)

Simon R.
Simon R.

Reputation: 151

This is what I ended up doing:

In the <head> of my HTML, there is a little script that checks if something like a mouse is connected to the device, if there is: userOnMobile = false, if not: userOnMobile = true.

All the external scripts that are linked to the HTML and that should only run on desktop, or mobile, first check the userOnMobile-variable and then do their thing, or do nothing.

Thanks to Everybody for the input! :) – Simon

Upvotes: 0

TKDEV Tomino
TKDEV Tomino

Reputation: 21

You can change display property of that divs to hide them. Do this in the mobile or desktop functions, and call them, depending on window.innerWidth

<div class="mobileonly">
    mobile
</div>
<div class="desktoponly">
    desktop
</div>
<script>
    var mobileDiv = document.querySelector(".mobileonly")
    var desktopDiv = document.querySelector(".desktoponly")

    function mobile() {
        console.log("mobile");
        mobileDiv.style.display = "block"
        desktopDiv.style.display = "none"
    }

    function desktop() {
        console.log("desktop");
        mobileDiv.style.display = "none"
        desktopDiv.style.display = "block"
    }
    let deviceWidth = window.innerWidth
    if (deviceWidth > 800) {
        desktop()
    } else {
        mobile()
    }
</script>

Upvotes: 0

tom
tom

Reputation: 10529

I think DOMContentLoaded is what you are looking for. This event fires when the initial HTML document has been completely loaded.

<script>
  var device = "desktop"; // This could be either: "desktop", or: "mobile"

  document.addEventListener("DOMContentLoaded", function(event) {
    if(device === "desktop")
      document.querySelector(".mobile_only").remove(); // Not doing anything.
    else
      document.querySelector(".desktop_only").remove(); // Not doing anything.
  });
</script>

<section class="desktop_only">
    <script src="example.js"></script>
    <script> console.log("desktop_only") </script>
    <div> desktop </div>
</section>

<section class="mobile_only">
    <script src="example.js"></script>
    <script> console.log("mobile_only") </script>
    <div> mobile (Delete this.) </div>
</section>

Upvotes: 1

Related Questions