Block javascript activation in mobile devices - javascript

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.

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:
onresize
.resize()
Media Queries
I hope this helps!

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!

Related

Show the popads code only in mobile devices, how to do that?

I want to disable popups for mobile visitors, how can i do that?
Is it possible to change the popads.net adcode in order to not show popups in mobile visitors?
<!-- PopAds - Home Popunder Code for Official lap times from Auto Magazines & Manufacturers | 2016-12-13,1627132,0,0 -->
<script type="text/javascript" data-cfasync="false">
//<![CDATA[
(function(){ var f=window;f["\x5f\x70o\x70"]=[["\x73iteI\u0064",1627132],["\x6di\u006eBi\u0064",0],["\x70\x6fp\u0075nd\x65r\x73\x50\x65\u0072\u0049\x50",0],["\u0064el\u0061y\u0042\u0065\x74w\u0065\u0065n",0],["de\u0066au\x6ct",false],["de\u0066\u0061\u0075\u006c\x74\x50\u0065\u0072\u0044\x61\u0079",0],["t\x6f\x70m\u006fstLaye\u0072",!0]];var m=["\u002f/c1.\x70o\x70\u0061\u0064\x73\x2e\u006e\x65\u0074/\u0070\u006fp\x2e\x6as","\x2f\u002fc\u0032.p\u006f\u0070\x61\x64\u0073\u002en\x65\x74\u002f\x70\u006f\u0070\x2e\x6a\u0073","/\x2f\x77w\x77.\x69n\u0073b\x72\x76w\u0066r\x63\u0067b\u002e\x63\x6f\x6d\x2f\u0076\x75\u0074k.js","\x2f/\u0077\u0077\x77.\u006etn\x6c\x61w\x67c\u0068\x67ds\x2e\u0063\x6f\x6d/d\x2e\x6a\x73",""],t=0,j,g=function(){if(""==m[t])return;j=f["\u0064ocu\x6d\u0065nt"]["\x63\x72\u0065\x61\x74\u0065E\x6c\u0065\x6de\u006et"]("\u0073\x63r\x69\x70\x74");j["\x74\x79pe"]="\x74\u0065\u0078t/\x6a\u0061\x76\x61sc\x72\u0069p\u0074";j["\u0061\x73yn\x63"]=!0;var s=f["\x64\x6fc\x75me\x6e\x74"]["\x67\x65\u0074\u0045l\u0065\u006den\x74\u0073\u0042y\x54\x61\u0067\u004e\u0061\x6d\x65"]("s\u0063\x72\u0069\u0070\x74")[0];j["s\u0072\x63"]=m[t];if(t<2){j["c\u0072o\x73\x73\u004f\u0072\u0069\u0067\u0069\x6e"]="\x61n\u006fn\x79\x6do\x75\x73";};j["\u006fne\u0072ro\x72"]=function(){t++;g()};s["\u0070\u0061\u0072\x65\x6e\x74Nod\u0065"]["\u0069n\u0073\x65\u0072\u0074\u0042\x65f\x6fre"](j,s)};g()})();
//]]>
</script>
You could avoid browser checking by only running the ads when the screen exceeds a certain size:
if (screen.width > 800 || screen.height > 800) {
// load some ads
(function () {
// paste your ad code here
})()
} else {
// do other stuff instead
}
If you want to check only the size of the available space on the screen, you can use the availHeight and availWidth properties instead.

How to ignore javascript on smaller resolutions?

My dev site uses lots of Skrollr animation at 1024px resolutions and up. Under 1024px, I don't want the animation to show, so I hid all of the images and whatnot.
However, the javascript that gets called to make the animation work is still getting called on smaller resolutions and causing some issues.
Is there a way to basically say "If the resolution is less than 1024px, ignore these JS files"?
I tried putting them in a DIV and using my existing CSS media queries to "display: none" the DIV on smaller resolutions, but that doesn't work.
FYI, these are the files being called:
<script type="text/javascript" src="/js/skrollr.min.js"></script>
<script type="text/javascript" src="/js/homepageanimation.js"></script>
On top of the jQuery(function($) { in http://workwave.joomlatest01.mms-dev.com//js/homepageanimation.js put something like
jQuery(function($) {
if(screen.width < 1024) {
return;
}
// skrollr stuff....
}
so all the skrollr functions won't be called on screen sizes with a width below 1024px.
The easiest way is too use jQuery..
$(window).width();
plain Javascript:
var w = window.innerWidth;
var ow = window.outerWidth; //toolbars and status, etc...
if(w > 1024) {
//Skrollr
}
from there an small if to trigger the Skrollr event
I would suggest conditionally loading the script. Basically the script only gets loaded if the screen size is greater than 1024.
if(window.innerWidth >= 1024){
var file = document.createElement('script')
file.setAttribute("type","text/javascript")
file.setAttribute("src", "/js/skrollr.min.js")
}
A nice approach here would be to only call the function that initiates the Skrollr functionality at given screen sizes. A real quick Google suggests that Skrollr has a .init() function that gets things rolling.
Without seeing how the JS is set up it's hard to give any solid advice, but here's an idea:
You have a JS file for the page/site that contains a conditional that checks the width of the window before initializing the plugin after the document is ready.
$(document).ready(function() {
if ($(window).width() > 1023) {
skrollr.init();
}
});
jQuery makes this a lot easier too, so it's worth taking advantage of that.
Another option to consider instead of going via window width (which can sometimes be inconsistent with the CSS widths among different browsers) is to test against a CSS rule and whether it is true, so use one you know would be true at a size above 1024px, and this would eliminate any inconsistency.
Within this condition link the JQuery files as demonstrated in other answers.

Detect if mobile - if yes use java01.js , if not mobile use java02.js

Complete beginner (hobbyist) here so this is probably a total noob question.
I have two javascripts. One is for mobile users, other is for desktop users.
Right now I have in my html:
<script type="text/javascript"
src="../java_file.js">
</script>
It works wonderfully but I want to have a different js file run when screen width is less than 480.
I want to do something along these lines:
<script type="text/javascript"
if (screen.width < 480) {
src=".../java_file_mobile.js">
}
else {
src=".../java_file.js">
}
</script>
This is my first time building a site and I'm learning the code as I go. Any assistance would be great. Thanks!
If you only care about the screen width the simplest approach is to use JavaScript offsetWidth.
var w = document.body.offsetWidth;
if ( 480 > w ) {
//append mobile script
} else {
//append desktop script
}
Beaver though, a small offsetWidth could also just mean a narrow browser window on a desktop screen. Or a watch. Or a fridge. You get the idea...

How do I make this jQuery mobile navigation script trigger only on small screens?

My jQuery is not very good - I'm trying to learn by piecing together bits of existing scripts but not having very much luck. I'm trying to get a menu on a Wordpress website to act as a normal horizontal navigation bar on large screen sizes and to become a jQuery dropdown on widths below 980px - I've got the dropdown working but can't figure out how to get it to work only on small screen sizes.
The code that works is:
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#mmenu").hide();
$(".mtoggle").click(function() {
$("#mmenu").slideToggle(500);
});
});
</script>
But obviously it hides the horizontal navigation on large screen sizes too.
I've tried
<script type="text/javascript">
jQuery(document).ready(function($) {
if($(window).width() < 979) {
$("#mmenu").hide();
$(".mtoggle").click(function() {
$("#mmenu").slideToggle(500);
}
});
});
</script>
but it seems to break the code completely and make it entirely non-functional and I can't figure out why.
The website in question is http://host26.qnop.net/~fpsl/ if seeing the menu in context would be helpful.
Any advice would be very much appreciated - thank you!
if you reindent the code you can see the problem... the if closes before the click handler function
here the corrected code:
<script type="text/javascript">
jQuery(document).ready(function($) {
if($(window).width() < 979) {
$("#mmenu").hide();
$(".mtoggle").click(function() {
$("#mmenu").slideToggle(500);
});
}
});
</script>
i tend to do
body:before{content:".";display:none;} (for desktop)
body:before{content:"..";display:none;} (for tablet)
body:before{content:"...";display:none;} (for mobile)
and then just query that, as CSS and Javascript have slightly different sizes when measuring the window.

different javascript/jQuery function by screen orientation on mobile AND browser

Disclaimer: I am not a javascript or jQuery expert.
This is probably an easy problem to solve, as it's just a small fix I can't figure out. I am implementing a site that is horizontal if the browser is in landscape mode, and vertical if in portrait. CSS changes are not an issue as that is easy with media queries. The problem I run into is when I want to only run a specific script when the screen is in landscape mode. Next problem I run into is that I don't just want this to work on mobile, but I also want it to be responsive in a standard browser as well; i.e. detect when the screen width > screen height and run said script. Here is my code so far:
var height = $(window).height();
var width = $(window).width();
if (width > height) {
//run landscape script
} else {
//run portrait script
};
This is working just fine to detect orientation when the page loads, but it doesn't change when the screen is resized since the script is not bound to window.resize. That being said, it is also not working when I bind it to window.resize.
Is there a better way to go about this? Or do I just need to fix up what is already here?
In case somebody else runs into this problem in the future, I'll post what solved my problem.
When I attempted to add the resize event to the function, my code looked like this:
$(window).on('resize', function() {
var height = $(window).height();
var width = $(window).width();
if (width > height) {
//run landscape script
} else {
//run portrait script
};
)};
This worked just fine, but it did not appear that way because the script was only being fired when the browser resized. While this is essential, the script also needs to fire when the page loads. My solution was just to add 'load' to the event:
$(window).on('resize load', function() {
var height = $(window).height();
var width = $(window).width();
if (width > height) {
//run landscape script
} else {
//run portrait script
};
)};

Categories

Resources