Invision Community 4: SEO, prepare for v5 and dormant account notifications By Matt Monday at 02:04 PM
BostonBob Posted June 8, 2016 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
Apfelstrudel Posted June 9, 2016 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).
BostonBob Posted June 9, 2016 Author Posted June 9, 2016 There has to be a easy way to do this .... someone!
opentype Posted June 9, 2016 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.
Nathan Explosion Posted June 9, 2016 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.
Nathan Explosion Posted June 9, 2016 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>
Daniel F Posted June 9, 2016 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
Apfelstrudel Posted June 9, 2016 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.
Nathan Explosion Posted June 9, 2016 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>
BostonBob Posted June 9, 2016 Author 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!
Recommended Posts
Archived
This topic is now archived and is closed to further replies.