0

In this post What is the best way to detect a mobile device in jQuery? I found this code:

function detectmob() {
   if(window.innerWidth <= 800 && window.innerHeight <= 600) {
     return true;
   } else {
     return false;
   }
}

I have a web site that passes Googles test for "mobile friendly" with out any pop ups for my newsletter / e-courses.

I tried the above script and it will run the scitps, however do to the size of the pop up blocks the form is too large.

I would like to block the script to keep the pop up from displaying, I tried to resize the block but when I do that it become unreadable for a device with a screen size smaller than 400 pixels.

Any help would be greatly appreciated.

CSS:

#mobile-only{
    display:none;
}

HTML:

<div id="mobile-only">
<script async type="text/javascript" src="http://forms.aweber.com/form/19/37402019.js"></script>


</div>

The java script is a form that will display after 10 second delay, the form is 800x800 pixels, this is very large for most mobile devices, the reader can not scroll the form to the right to touch the 'x' to close the form.

After testing the CSS and the HTML the script still runs.

Community
  • 1
  • 1
Monte
  • 1
  • 2
  • In the script you posted, nothing should pop up from it. Can you post some css and html? I'm not sure what should be "popping up." – A.Sharma Apr 17 '15 at 13:39
  • @A.Sharma I have added the code I am trying to get to work, however there is a typo in the sample code: ffunction should be function . – Monte Apr 17 '15 at 15:01

2 Answers2

0

Please see the below code and attempt it. 

$(document).ready(function(){
var x = $(window).width();
if(x >= 400)
{
 $('#mobile-only').append('<script async type="text/javascript" src="http://forms.aweber.com/form/19/37402019.js"></script>');  
};
});

Things To Consider

Now if you want to worry about what to do if the user resizes the window on his desktop, you can either handle these events using the following items for help:

I hope this helps!

A.Sharma
  • 2,733
  • 1
  • 9
  • 20
  • I tried the corrected code, however it will not stop the srcipt from running in mobile, works fine for a desktop. – Monte Apr 17 '15 at 16:46
  • Take a look at my new updated answer with the media query. See if that works. If it doesn't, can you send me the html or css of an example that portrays what you really want done here? – A.Sharma Apr 17 '15 at 17:04
  • A.Sharma This is out side any div classes, however the mobile div is this: div class="mobile-only" style="width: 300px" – Monte Apr 17 '15 at 17:05
  • Can you post the HTML of the pop up. I can't really help you without that. You can delete all the contents that are within the pop up. I just need some sort of handler to your pop up. Whether you make your pop up have an ID or a separate class, the only way I'm going to be able to help is with this information. If your popup does not have an ID then give it an ID and use the media query option I posted in my answer. – A.Sharma Apr 17 '15 at 17:13
  • A.Sharma - I have added a id to my css file, and use the #, like this: #mobile-only{ display:block;} In the page I used: div id="mobile-only" and the normal js to see if when the browser is colapsed the script will run, it does. – Monte Apr 17 '15 at 18:38
  • Try what I just posted. If it doesn't work, then I won't be able to help without taking a look at the HTML/CSS to see what you're actually trying to prevent showing up (whatever 'pop-up' is). – A.Sharma Apr 17 '15 at 18:56
  • A.Sharma - Sorry, I get an unterminated action error. I think I will leave this alone for a while and do some studying over the week-end. Thank you for your help. – Monte Apr 17 '15 at 21:55
  • @Monte I apologize I mixed up the end closing bracket/paranthesis try it again – A.Sharma Apr 17 '15 at 21:58
0

Using the above code by A.Sharma I modified it like this:

<script>
$(document).ready(function(){
var x = $(window).width();
if(x >= 400)
{
 $('#desktop-only').append('async type="text/javascript" src="http://forms.aweber.com/form/19/37402019.js"');  
}
)};
   </script>

Where '#desktop-only' is the CSS container for any desktop content that either will not fit on a mobile device (tables, large hi res images, etc.) or will fill the screen past the accepable limitations of the device.

This code does not run, however it looks like the best way to block javascript from running.

Any suggesitons for modification to make it run?

Thanks!

Monte
  • 1
  • 2
  • A.Sharma - I tired the code you provided with out success, above is a modiifcation, it will not run either. Would you look at the syntax and see if you can see where I went wrong? Thanks... – Monte Apr 22 '15 at 13:11