I have multiple old tablets with me, which only support upto Android 4.2.2 version. I want to run a website I built on those tablets. I am opening the link on the chrome browser and my main page loads but only the headers and footers are visible. My main content is not visible. I am guessing the reason could be the html, js and css are not able to be rendered there.
I am willing to buy a new tablet, however I have around 10 tablets with android 4.2.2 which i don’t want to waste. I am planning to use these tablets in my restaurant for customers to browse the menu.
Any suggestions on how can i solve the issue?
I have also tried to build an app with the features and send an apk file to the tablet, but i was unsuccessful in that also.
I have tried to reduce the resolutions but that also did not help.
Sample html file of the page:
<!-- header.html -->
<!-- *Resolution:** 1024 x 552, Fixed Landscape Orientation -->
<!-- Header / Title Bar -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<title>HA Dashboard</title>
<link rel="icon" href="data:,">
<!--Link to CSS file for styling -->
<link rel="stylesheet" href="setting.css">
<!-- Include polyfills for older browsers -->
<!-- <script src="/Appwebsite/js/polyfills.js"></script> -->
<!-- Include the MQTT.MIN.js library -->
<!-- <script src="/Appwebsite/js/mqtt.min.js"></script> -->
<script src="mqtt.min.js"></script> <!--Include the MQTTWS31.js library -->
<script src="mqtt.js"></script> <!--Link for MQTT connection -->
</head>
<body>
<div class="wrapper" id="wrapper">
<div class="header" id="header">
<img src=hass1.jpg" alt="Dashboard Icon" style="height: 30px; vertical-align: middle;padding-left: 30px; padding-right: 30px;">
Restaurant
<div class="tabs">
<div class="tablinks" id="page1">A</div>
<div class="tablinks" id="page2">B</div>
<div class="tablinks" id="page3">C</div>
<div class="tablinks" id="page4">D</div>
<div class="tablinks" id="page5">E</div>
<div class="tablinks" id="page6">F</div>
</div>
</div>
<div id="gridContainer">
<!-- Content will be loaded dynamically here -->
<!-- for header.html gridcontainer needs to be empty -->
</div>
<div class="footer" id="footer">
<p>© Restaurant. All rights reserved.</p>
</div>
</div>
<!-- Code to function Top menu -->
<script>
document.addEventListener("DOMContentLoaded", function() {
// Define the activePageName variable
var activePageName="Page 1"; // Default to Page 1
function loadPage(page, pageName) {
var xhr = new XMLHttpRequest();
xhr.open('GET', page, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("gridContainer").innerHTML = xhr.responseText;
activePageName = pageName;
updateActivePage();
}
};
xhr.send();
}
// Update the visual indicator for the current page
function updateActivePage() {
// Update the header text to show the current page name
// document.getElementById("currentPage").innerText = activePageName;
// Remove 'active' class from all buttons and add to the current one
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].classList.remove('active');
}
}
const pages = ['page1', 'page2', 'page3', 'page4', 'page5', 'page6'];
function resetButtonColor() {
pages.forEach(pageId => {
document.getElementById(pageId).classList.remove('active');
});
}
// Default to load Page 1 on start
loadPage('page1.html');
document.getElementById('page1').classList.add('active');
pages.forEach((pageId, index) => {
const pageButton = document.getElementById(pageId);
pageButton.addEventListener('click', function () {
resetButtonColor();
loadPage(`${pageId}.html`, `Page ${index + 1}`); // Load corresponding page
pageButton.classList.add('active'); // Add active class
});
});
});
</script>
</body>
</html>
You need to sign in to view this answers
Leave feedback about this