BostonBob Posted June 8, 2016 Share Posted June 8, 2016 Hello, I've got some javascript code that I don't want to show to Mobile devices. How would I code that? Thanks, George Link to comment Share on other sites More sharing options...
Apfelstrudel Posted June 9, 2016 Share Posted June 9, 2016 Good question. I have the same problem. I want to show different layer ads for moble and desktop view. The best choice for displaying ads is dfp but I haven't found out how to make the dfp responsive ads working for out-of-page ads (like layers). Link to comment Share on other sites More sharing options...
BostonBob Posted June 9, 2016 Author Share Posted June 9, 2016 There has to be a easy way to do this .... someone! Link to comment Share on other sites More sharing options...
opentype Posted June 9, 2016 Share Posted June 9, 2016 What do you mean by mobile devices? I assume you mean smaller screens, right? In that case, you can’t hide the code on those devices, since the code is created on the server side, but the screen size can only be checked on the client side. You need to use JavaScript to check the screen size and depending on the result execute your custom JavaScript code or not. Like so. Link to comment Share on other sites More sharing options...
Nathan Explosion Posted June 9, 2016 Share Posted June 9, 2016 Yep, the css method of hiding/showing for desktop/mobile is based on screen size so any javascript method of doing the same check would have to mirror that same test. I've done this before, so when I get back to my personal laptop in a little while I'll dig out the code I used and will post it up. Link to comment Share on other sites More sharing options...
Nathan Explosion Posted June 9, 2016 Share Posted June 9, 2016 Here you go (works at page load and then on window resize too) <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> function check(){ var w = $(window).width() var h = $(window).height(); if ((w <= 768)) { $("#stuff1").hide(); $("#stuff2").show(); } else { $("#stuff1").show(); $("#stuff2").hide(); } }; $(document).ready(function() { check(); }); $(window).resize(function() { check(); }); </script> </head> <body> <div id="stuff1">SHOW</div> <div id="stuff2">HIDE</div> </body> </html> Link to comment Share on other sites More sharing options...
Daniel F Posted June 9, 2016 Share Posted June 9, 2016 You could also use the IPS4 css helper classes for this https://invisionpower.com/4guides/themes-and-customizations/css-framework/responsiveness-r250/ BUT i wouldn't recommend this for ads. Many provider don't allow to show the advertisement in a hidden container Link to comment Share on other sites More sharing options...
Apfelstrudel Posted June 9, 2016 Share Posted June 9, 2016 1 hour ago, Daniel F said: Many provider don't allow to show the advertisement in a hidden container That's why I use DFP with responsive ad containers. The ad is being loaded after dfp js having checked the screensize. But I didn't manage yet to use them with layer ads. Link to comment Share on other sites More sharing options...
Nathan Explosion Posted June 9, 2016 Share Posted June 9, 2016 Another option - I found this....you could then use the same media matches that are done in the css: https://developer.mozilla.org/en/docs/Web/API/Window/matchMedia <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> function check(){ var m = window.matchMedia("only screen and (max-width: 767px)"); if (m.matches) { $("#stuff1").hide(); $("#stuff2").show(); } else { $("#stuff1").show(); $("#stuff2").hide(); } }; $(document).ready(function() { check(); }); $(window).resize(function() { check(); }); </script> </head> <body> <div id="stuff1">SHOW</div> <div id="stuff2">HIDE</div> </body> </html> Link to comment Share on other sites More sharing options...
BostonBob Posted June 9, 2016 Author Share Posted June 9, 2016 Actually I want to do it all in the head of the document. But I got the information I need. Thanks so much guys! I really appreciate it! I'm running CometChat along with my boards and I want to be sure that it's turned off when viewed with a phone. The built-in "do not show" to mobile devices doesn't work well! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.