When your website is displayed in a mobile app, certain elements that are useful on a desktop site—like footers or large widgets—might take up valuable screen space in the app. By hiding these elements, you can create a cleaner, more focused experience. This guide shows you how to identify elements to hide, use CSS or PHP to do so, and avoid common issues like flickering.
Identifying Which Elements to Hide
Here are common elements you might want to hide in your app:
- Footers that contain links and information suited for desktop browsing.
- Pop-ups and overlays that can take over too much screen space.
- Unnecessary widgets or ads that disrupt the flow.
Using JavaScript to Inject CSS and Hide Elements
We’ll use JavaScript to inject a <style> tag into the header that applies the necessary CSS. This ensures the CSS is applied only when the site is viewed in the MobiLoud app.
Hiding the Footer
JavaScript Example:
<script>
if (navigator.userAgent.toLowerCase().includes('canvas')) {
var style = document.createElement('style');
style.innerHTML = 'footer { display: none; }';
document.head.appendChild(style);
}
</script>PHP Example:
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'canvas') !== false) {
echo '<style>footer { display: none; }</style>';
}Hiding Pop-ups and Overlays
Pop-ups and overlays can disrupt the user experience. Use the following code to hide them in the app.
JavaScript Example:
<script>
if (navigator.userAgent.toLowerCase().includes('canvas')) {
var style = document.createElement('style');
style.innerHTML = '.popup, .overlay { display: none; }';
document.head.appendChild(style);
}
</script>PHP Example:
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'canvas') !== false) {
echo '<style>.popup, .overlay { display: none; }</style>';
}Avoiding Common Issues (Like Flickering)
To prevent elements from flashing briefly before being hidden, it’s best to add the customizations directly to your website. By applying CSS early in the load process, you minimize flickering.
Ensure the injected CSS is applied in the <head> to avoid delays. This will stop elements from rendering before being hidden.
Creating a Class to Hide Elements
You can also create a reusable class that allows you to easily hide elements across your site.
JavaScript Example:
<script>
if (navigator.userAgent.toLowerCase().includes('canvas')) {
var style = document.createElement('style');
style.innerHTML = '.hide-in-app { display: none; }';
document.head.appendChild(style);
}
</script>PHP Example:
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'canvas') !== false) {
echo '<style>.hide-in-app { display: none; }</style>';
}After you define the .hide-in-app class, you can simply add class="hide-in-app" to any element in your HTML to hide it in the app.
Conclusion
By following these examples, you can easily hide unnecessary elements from your website when it’s viewed inside the MobiLoud app. Use either JavaScript or PHP, depending on your setup, to ensure the customizations are applied only within the app.
For more detailed guidance on customizing your app and optimizing your website’s performance in the app, be sure to check out our other guides:
- Customizing Your Canvas App Experience
- How to Optimize Your Website to Work Like an App
- Creating App-Specific Pages
These resources will help you fine-tune the app experience for your users and make the most of your mobile presence.
