WordPress.org

Support

Support » Plugins and Hacks » [Resolved] Formatting issue for mobile devices

[Resolved] Formatting issue for mobile devices

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author RavanH

    @ravanh

    Hi, FancyBox 1.3.4 has not really been developed with mobile devices in mind. It’s not a fix but you can disable FancyBox (using the latest release only) for smaller screens with this code:

    <script type="text/javascript">
    var pixelRatio = window.devicePixelRatio || 1;
    if(window.innerWidth < 500 || window.innerHeight < 500 || window.outerWidth < 500 || window.outerHeight < 500 ) {
      jQuery(document).off('ready gform_post_render', easy_fancybox_handler);
    };
    </script>

    Put this code in a text widget or in your themes footer.php…

    Hi Ravan,

    Thanks for the reply. I think I am going to continue tinkering with things to see if I cannot make it work the way I want, but that snippet may end up being the way I need to go.

    Plugin Author RavanH

    @ravanh

    I’m not sure what actually causes this misplacement on these small devices. If it’s ‘just’ a CSS issue, I can recommend installing Jetpack and activating (allready active by default?) the Custom CSS module. Then targeting smaller screens with media query markup tests on the Appearance > Edit CSS page.

    By the way, can you share a URL to a live example?

    That code snippet didn’t seem to do anything. The paramaters for the if statement work fine, but the $(document).off bit doesn’t seem to be making any difference.

    I ended up modifying the code slightly and adding it to the jquery.fancybox-1.3.4.pack.js file. Here is what I did:

    Add this after ;(function(b){

    var pixelRatio = window.devicePixelRatio || 1;
    if(window.innerWidth < 500 || window.innerHeight < 500 || window.outerWidth < 500 || window.outerHeight < 500 ) {
    
    }else{

    Then add }; just before the })(jQuery); at the end of the document.

    Not a super clean fix, but it works.

    Live example at http://www.mshslc.org/gallery/debris-avalanche/

    Just to clarify the above, this basically just disabled the .js file for small screens by effectively having a blank if statement, then the actual content within the else.

    Plugin Author RavanH

    @ravanh

    Hi wattyrev, you are right. The code does not do anything because, when used in a text widget, it is loaded before the fancybox call instead of after it. I should have thought of that…

    This code should work (I tested it this time) :

    <script type="text/javascript">
    if(window.innerWidth < 500 || window.innerHeight < 500 || window.outerWidth < 500 || window.outerHeight < 500 ) {
      easy_fancybox_handler = null;
    };
    </script>
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Resolved] Formatting issue for mobile devices’ is closed to new replies.