-1

I want to hide a div for mobile smaller than 480 pixels. Smaller from a resolution of 480, the entire div should no longer appear and the javascript can not be loaded. How would you do that?

<div id = "NameXYZ"> 
    <script src = "// 123.com"> </ script> 
    <script src = "// 1234.com"> </ script> 
</div>
Narm
  • 10,677
  • 5
  • 41
  • 54
Mitches
  • 13
  • 4
  • *"and the Javascript can not be loaded"* - That's a very different question than "hiding a div". You can use CSS media queries to hide the div on defined resolutions. But that's not going to stop the HTML from still being there, it's just styled to not display. If you don't want to deliver that HTML to the client *at all* then that would need to be done in server-side code. But the question becomes... why? Why should those ` – David Jan 27 '19 at 14:44
  • 1
    Just use media quires and hide the div in mobile devices – Thanveer Shah Jan 27 '19 at 14:45
  • Hiding the div will still load the javascript. Best to put some logic into your javascript to cater for screen sizes. – Gavin Simpson Jan 27 '19 at 14:46
  • @ThanveerShah that won't make the scripts stop loading.. You have to put some logic in your javascripts files that you are trying to load in and if you are loading in external javascript files you will have to load them in dynamically with condition based on screen size: https://stackoverflow.com/questions/14521108/dynamically-load-js-inside-js – Laurens Jan 27 '19 at 14:47

2 Answers2

1

[Edited, as sugested by Gavin Simpson, this solution as a flaw since it won't work if the user rotates the device]

What you could do is use javascript to determine if the script should be loaded.

To do that, you can replace the code that you are using with the following one.

 <div id = "NameXYZ"> 
  <script>
    //Determine if the device have the dissired size, information about MatchMedia here: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
    if (window.matchMedia("(min-width: 480px)").matches) {
      //if the size matches, write the scripts to the document 
      document.write('<script src = "// 123.com"> </ script> ');
      document.write('<script src = "// 1234.com"> </ script> ');
    }  
  </script>
</ div>

This code will check if the sice of the screen is higher then 480px, and if it is, will return "true", so the if statment will be executed and the scripts will be included.

Hope you find this usefull.

ithan
  • 360
  • 4
  • 15
  • Good point, I did not think about that, maybe adding an event listener for these cases and using async loads, although not sure if there will be some easyer way – ithan Jan 27 '19 at 15:26
  • 1
    An event listener for sure, but it all comes back to adding the logic to the javascript. The bottom line is hiding the div to disable javascript from loading, as in the OP's example, is not a viable option methinks. – Gavin Simpson Jan 27 '19 at 15:32
  • A great idea, but it doesn´t work. Are The spaces neccessary? – Mitches Jan 27 '19 at 17:46
  • No, you don't need the spaces – ithan Jan 27 '19 at 19:10
0

Thanks ithan - it works:

    <div id="NameXYZ"> 
  <script>
    //Determine if the device have the dissired size, information about MatchMedia here: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
    if (window.matchMedia("(min-width: 480px)").matches) {
      //if the size matches, write the scripts to the document 
      document.write('<script src="//123.com"><\/script> ');
      document.write('<script src="//1234.com"><\/ script> ');
    }  
  </script>
</div>
Mitches
  • 13
  • 4