2

Is there a way I can not show something to mobile users? I have a floating social bar on my responsive theme, but it get in the middle of the content if I'm on my Android phone.

I don't want to use display:none, since the JS will still load. Is there a function I can use to only show the floating bar for desktops users, and not mobile ones?

Thanks in advance (:

Improve this question
1
  • You can parse useragent and diable activation on match...
    – Oleg Butuzov
    Nov 13, 2012 at 21:44

2 Answers 2

Reset to default
3

There is wp_is_mobile() function to conditionally display (or block) content for mobile users.

<?php if (!wp_is_mobile()) : ?>

    <!-- Stuff to hide from mobile users -->

<?php endif; ?>
Improve this answer
6
  • Hmm, but with that i would show something. I want to hide something.
    – Julian Fernandes
    Nov 13, 2012 at 21:55
  • ...then add an else in there to show content to non-mobile users.
    – stealthyninja
    Nov 13, 2012 at 22:32
  • 1
    @JulianFernandes Actually the exclamation mark ! denotes NOT which means if NOT mobile show x, y, z - so if your social bar function/content were wrapped inside the above conditional statement, then it would ONLY show itself if someone is NOT on a mobile device. This method is unreliable though, compared to a CSS media query as already shown. You could use JS itself to verify the media/width of the device before conditionally loading/including the JS that handles the social bar but personally, to simplify the issue, I'd just minify the plugin bar JS file and use a media query.
    – Adam
    Nov 13, 2012 at 23:09
  • 1
    @userabuser Thanks for the explanation! I'm not a php guy, so i did not knew about that. Helped me out a lot :)
    – Julian Fernandes
    Nov 13, 2012 at 23:39
  • 1
    @userabuser Done! :)
    – Julian Fernandes
    Nov 14, 2012 at 9:46
3

Yes. Using CSS won't prevent JS from loading generally but it's more reliable than server side sniffing. Depends on project but I would go with media queries to just hide it or bring it in page's content flow.

@media (max-width: 768px) {
  .sticky-social {
    display: none;
  }
}
Improve this answer
1
  • Guess i will hide it with CSS and show a horizontal social bar for mobile users with is_mobile. Thanks anyway :)
    – Julian Fernandes
    Nov 13, 2012 at 21:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.