Checkbox for not display certain Boxes on Mobile Devices

  • App
    WoltLab Suite Core

    I noticed certain lack of one feature which might be useful.

    It's additional checkbox in Boxes editing to hide specific Box when user uses mobile device.

    It could be useful when we want display certain Boxes on desktops, aka larger screens and hide them on small screens.


    I'm not sure how much it's possible to implement this feature, but i would be glad if that idea would be put onto consideration.

    Overall for now its possible kinda do it with CSS overflow, but would be nice to have such feature from backend side aka PHP.

  • Danloona July 31, 2023 at 7:58 AM

    Changed the title of the thread from “Checkbox for displaying certain Boxes on Mobile Devices” to “Checkbox for not display certain Boxes on Mobile Devices”.
  • The backend side has no information about the device besides the user agent, which is far from being accurate. So what you want is technically impossible.

    E.g. an iPad, while definitely a mobile device – especially in portrait mode – has the same user agent as a Mac.

    Well seems it's kinda doable since that option exist for Advertisements module.

    So maybe there is hope to be also added to Boxes.

  • You can hide boxes that are not needed on mobile devices in your style.

    I assume it's more about different types of advertising.

    That what i already mentioned here.

    Overall for now its possible kinda do it with CSS overflow, but would be nice to have such feature from backend side aka PHP.

    Just i wanted suggest more elegant solution, rather this hacky one.

  • Hacky? ^^

    Correct me if im wrong.

    If i disable the box via CSS display:none; the content will be anyway send to the client, just it will be removed from the view.

    If i understand correct it still will take bandwith from user to load this box in background even if it would be never displayed.

    Goal which i expected to achieve is to not send this specific box to client at all if client will use a mobile device.

  • If i understand correct it still will take bandwith from user to load this box in background even if it would be never displayed.

    The extra HTML for a box that is not being displayed is negligible and once your factor in compression it is merely a statistical error. To second what Geronimo said, the HTML sent to the browser is always the same and any adaption to the viewport size happens in the client. This not only greatly simplifies things but also makes the layout responsive, allowing changes in the orientation to immediately deliver a tailor-made interface.

  • The extra HTML for a box that is not being displayed is negligible and once your factor in compression it is merely a statistical error. To second what Geronimo said, the HTML sent to the browser is always the same and any adaption to the viewport size happens in the client. This not only greatly simplifies things but also makes the layout responsive, allowing changes in the orientation to immediately deliver a tailor-made interface.

    Thank you for explaining, Alexander.

    I’ve mostly had deal since I just was shipping server list with js and images, that why I’ve wanted avoid shipping invisible stuff.


    But I think I just simply redesign my list to be more friendly for mobiles.

  • Images are a non-issue if you mark them with loading="lazy" which defers the loading until they are about to be actually shown on the screen. I can’t really comment on the JavaScript part but this can also be deferred by listening to the media query which makes the related content visible. You are looking for window.matchMedia() here.

  • Images are a non-issue if you mark them with loading="lazy" which defers the loading until they are about to be actually shown on the screen. I can’t really comment on the JavaScript part but this can also be deferred by listening to the media query which makes the related content visible. You are looking for window.matchMedia() here.

    Thank you Alexander again for explaining me few more nuances of cool techniques.

    I definitely try apply them in building that table.

    Code
        <td width="350px"><script type="text/javascript">
    document.write('<img src="https://xxxx/bannery/share/voice_small.png?'+Math.random()+'" class="">');
    </script></td>

    Here is the code snippet of my JS, its simple thing which just allow me to avoid browser caching, since i always need have this image not cached.

    This code is used only for embedding that one image in the table, in row for every server, so every new row include same part of JS.

    Honestly i do not had idea how it could be improved, im not code expert at this point, especially from frontend side.

  • The script is okay-ish (document.write() is, well, let’s say it’s archaic :P), just add the attribute loading="lazy" to the <img> element and you’re done.

    You could do this instead which makes use of the current timestamp and is a bit more reliable for this use case:

    HTML
    <td width="350px">
    	<script>
    		document.currentScript.outerHTML = '<img src="https://xxxx/bannery/share/voice_small.png?cb=' + TIME_NOW + '" loading="lazy">';
    	</script>
    </td>

    Also, if you know the dimensions of the image I strongly suggest adding width="123" and height="456" to that image tag, otherwise loading="lazy" might not work properly.

  • Thank you Alexander for your help and inspection in this case, i truly appreciate that you pointed me right direction.

    I adjusted this code snippet by adding width 350 and height 20 in this case.

    HTML
        <td>
    		<script>
    		document.currentScript.outerHTML = '<img src="https://mysite.com/bannery/share/wildfrontiers_small.png?cb=' + TIME_NOW + '" loading="lazy" width="350" height="20">';
    		</script>
    	 </td>

    I also decided change my approach little, by just hiding specific elements of table on mobile devices, in this case i added this code to my style.

    CSS
    	 @include screen-md-down {
    		.hide-on-mobile{
    		display:none;
    		}
    	}

    But im still thinking how i can disable this method when device is on horizontal mode.

    EDIT. I encountered bug when i tried reply, i reported this bug on forum related to bug reports.

  • No, there is no control over that. In fact a smartphone in landscape mode is treated as equal to a tablet in portrait mode. The reason being is that the width of the viewport is the sole criteria for switching between the layouts and the width in both cases is very similar.

  • No, there is no control over that. In fact a smartphone in landscape mode is treated as equal to a tablet in portrait mode. The reason being is that the width of the viewport is the sole criteria for switching between the layouts and the width in both cases is very similar.

    Well that fine then.

    It's all what i really wanted achieve so far, thank you a lot Alexander for your incredible help here.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!