1

Okay so this maybe no possible but i think it is, i'm completely new to this so what iv'e tried might obviously not work but i didn't know at the time. My sites mobile responsive with no separate webpage for mobile sites so putting the code into a page separately won't work either.

iv'e tried:

<style>
@media screen and (max-width: 720px) {
#div {
display:none;
  }
}
</style>

<div id="div">
<script type="text/javascript"> 
  var adfly_id = ID; 
  var popunder_frequency_delay = 0; 
</script> 
<script src="https://cdn.adf.ly/js/display.js"></script>
</div>

Which didn't work. Iv'e seen this code somewhere on here

if(screen.width < 720) { 
    // do any 720 width stuff here, or simply do nothing
    return;
} else {
    // do all your cool stuff here for larger screens
}

But i don't know how i would put the adfly code into it.

EDIT:

Thanks to those who replied, iv'e got it Praveen Kumar answer worked, while weirdly it still loads the ads on the desktop regardless of the resolution it works perfect on mobiles... Siguza i'll give yours ago so people know for future reference. and i'll edit again...

EDIT II:

For future reference, Siguza's method also works so if anyone else stumbles upon this then you can take your pic on who's to use. Also Praveen Kumar method works with shortest ads too for anyone that might use them instead of adfly below is what i use.

<script type="text/javascript">
if(screen.width < 720) { 
  var adfly_id = null; 
  var popunder_frequency_delay = null;
} else {
  // do all your cool stuff here for larger screens
    var adfly_id = ID; 
    var popunder_frequency_delay = 0;
}
      </script>
<script src="https://cdn.adf.ly/js/display.js"></script>
<script type="text/javascript">
if(screen.width < 720) { 
//screens bigger than 720
} else {
//shortest advertisement code                        
}
</script>
Improve this question

2 Answers 2

Reset to default
3

Replace this line:

<script src="https://cdn.adf.ly/js/display.js"></script>

with this:

<script>
if(screen.width >= 720) {
    document.head.appendChild(document.createElement('script')).src = 'https://cdn.adf.ly/js/display.js';
}
</script>

This will simply create a <script> tag, set its src attribute to https://cdn.adf.ly/js/display.js, and add it to the <head> tag of your document.
Just in JavaScript instead of plain HTML.

Note that I'm relying on HTML 5 here, but so are you in your question (<script> and <style> not needing a type attribute).

Edit:

This approach appears to fail on scripts that use document.write (which, IMO, is bad practice).
You can work around this by using document.write yourself:

<script>
/* you can put your adfly_id code right here */
if(screen.width >= 720) {
    document.write('<script src="https://cdn.adf.ly/js/display.js"><'+'/script>');
}
</script>

Note that you must split the </script> tag in the string, or it will close the surrounding script tag, causing a syntax error.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Iv'e just tried this and doesn't work i get the error (using dev tools chrome) Failed to execute 'write' on 'document' : it isn't possible to write into a document from an asynchronously-loaded external script unless it's explicitly opened.
1

Could be a hack-job. If this works only if you have a valid adfly_id, then do this:

if(screen.width < 720) { 
  var adfly_id = null; 
  var popunder_frequency_delay = null;
} else {
  // do all your cool stuff here for larger screens
  var adfly_id = ID; 
  var popunder_frequency_delay = 0; 
}

This might fail the adfly stuff you are trying to initialize.

But the right way to do this is:

if(screen.width < 720) { 
  // Bye bye.
} else {
  // do all your cool stuff here for larger screens
  require("awesome.js");
}

ps: The require() function here is a pseudo function that would include and activate the JavaScript file. A sample of that code would be:

function loadScript(url, callback) {
    // Adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}
Improve this answer

3 Comments

Just tested this out and got the error (chrome dev tools) uncaught security error: blocked from with foreign origin from accessing frame with origin "site". Protocol, domains and ports must match
@PaulSmith Are you trying to ... It worked for me. Try using a CDN or a proxy.
It did work just an issue on my end, i'm still getting the error and the ads are appearing however the javascript still creates the ads on screens smaller than 720

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.