I have embedded code that is displayed as a table on my website:
http://leasehackr.com/leasecompare
While the table used to work perfectly on desktop and mobile, I have noticed these past 2-3 days that it stopped displaying at all on mobile, even though I haven’t made any changes to the code that I am aware of that would affect its functionality. I am not sure what the problem can possibly be – Webflow (my website’s host), CDN, or the code itself (even though I didn’t make any changes)? Any input would be appreciated!
Here are my custom codes for your reference:
HTML:
<div id="toolbar">
<button id="compareBtn" class="btn btn-success">Compare</button>
<button id="allBtn" class="btn btn-info">All</button>
<button id="sedanBtn" class="btn btn-warning">Sedan</button>
<button id="suvBtn" class="btn btn-warning">SUV</button>
<button id="minivanBtn" class="btn btn-warning">Minivan</button>
<button id="truckBtn" class="btn btn-warning">Truck</button>
<button id="hatchbackBtn" class="btn btn-warning">Hatchback</button>
<button id="wagonBtn" class="btn btn-warning">Wagon</button>
<button id="coupeBtn" class="btn btn-warning">Coupe</button>
<button id="sportsBtn" class="btn btn-warning">Sports</button>
<button id="luxuryBtn" class="btn btn-warning">Luxury</button>
<button id="greenBtn" class="btn btn-warning">Green</button>
</div>
<div class="table-responsive">
<table id="table"
data-toolbar="#toolbar"
data-search="true"
data-show-toggle="true"
data-show-columns="true"
data-sort-name="1"
data-sort-order="desc"
data-click-to-select="true"
data-classes="table table-hover table-no-bordered"
data-maintain-selected="true"
>
<thead>
<tr>
<th data-field="state" data-checkbox="true" data-align="center" data-valign="middle"></th>
<th data-field="0" data-sortable="true" data-align="left" data-valign="middle">Car Model</th>
<th data-field="1" data-sortable="true"data-align="center" data-valign="middle"> Leasehackr<br>Score <i class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-placement="right" title="A measure of bang for the buck. The higher the score, the better the deal. The Leasehackr Score is a ratio between MSRP and estimated monthly payment. It represents the number of years you can lease a car (assuming the same monthly payment throughout) before you exceed its MSRP."></i></th>
<th data-field="2" data-sortable="true"data-align="center" data-valign="middle" data-toggle="tooltip" data-placement="bottom" >Type </th>
<th data-field="3" data-sortable="true" data-align="center" data-valign="middle" >Size</th>
<th data-field="4" data-sortable="true" data-align="center" data-valign="middle">Leasehackr<br>Estimate <i class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-placement="right" title="Our best estimate of an epic but feasible deal for a particular car (i.e., a 95th-percentile deal). This is how much you should aim to pay."></i></th>
<th data-field="5" data-sortable="true" data-align="center" data-valign="middle">Retail Price</th>
<th data-field="16" data-sortable="true" data-align="center" data-valign="middle">Net Capitalized<br>Cost <i class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-placement="right" title="The amount that is being financed. Our Net Cap Cost = the feasibly negotiated price of the vehicle - all incentives available to the general public + the acquisition fee. It assumes $0 down payment."></th>
<th data-field="17" data-sortable="true"data-align="center" data-valign="middle">Residual(%) <i class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-placement="right" title="The manufacturer’s estimate of the value of your car after your lease. The higher the better."></th>
<th data-field="19" data-sortable="true"data-align="center" data-valign="middle">Money Factor <i class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-placement="right" title="Essentially your monthly interest rate."></i></th>
<th data-field="20" data-sortable="true"data-align="center" data-valign="middle">Months</th>
<th data-field="12" data-sortable="true"data-align="center" data-valign="middle">Additional<br>Incentives <i class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-placement="right" title="Additional discounts you may qualify for."></th>
<th data-field="6" data-sortable="true" data-align="center" data-valign="middle">Manufacturer's<br>Offer <i class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-placement="right" title="A standard deal that most dealers would honor without much negotiation. It typically requires a down payment and reflects a minimal discount, but you can usually do better than that."></th>
<th data-field="7" data-sortable="true"data-align="center" data-valign="middle">Valid Through</th>
<th data-field="21" data-sortable="true"data-align="center" data-valign="middle">Disposition<br>Fee <i class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-placement="left" title="The fee you will have to pay when you return your car unless you purchase or lease another car from the same car maker."></th>
</tr>
</thead>
</table>
</div>
Javascript:
//Define tooltipExe()
function tooltipExe () {
$('[data-toggle="tooltip"]').tooltip()
};
//Define pairData()
function pairData (obj){
data = []; // Empty list
for (var i = 0; i < obj.rows.length; i++) {
row = obj.rows[i];
data[i] = {}; // Empty dictionary object
for (var j = 0; j < row.length; j++) {
data[i][j.toString()] = row[j]; // Create a key and value pair.
}
}
};
var numberFormat = new Intl.NumberFormat();
//Define fixNumbers(variable_data)
function fixNumbers (variable_data) {
for (var p=0; p<variable_data.length; p++){
try {
variable_data[p]["1"] = variable_data[p]["1"].toFixed(0);
} catch(e) { }
};
for (var p=0; p<variable_data.length; p++){
try {
variable_data[p]["4"] = "$"+ variable_data[p]["4"].toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} catch(e) { }
};
for (var p=0; p<variable_data.length; p++){
try {
variable_data[p]["5"] = "$"+ variable_data[p]["5"].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} catch(e) { }
};
for (var p=0; p<variable_data.length; p++){
try {
variable_data[p]["17"] = (100*variable_data[p]["17"]).toFixed(0) +"%";
} catch(e) { }
};
for (var p=0; p<variable_data.length; p++){
try {
variable_data[p]["21"] = "$"+ variable_data[p]["21"];
} catch(e) { }
};
};
//Define loadTable(variable_data)
var $table = $('#table');
function loadTable (variable_data) {
$table.bootstrapTable('load', {
data: variable_data,
});
};
//Define global_data; Load initial table
var global_data;
$.getJSON("https://www.googleapis.com/fusiontables/v2/query?sql=SELECT%20*%20FROM%201E5EwPQfGilZySoG0OzOV5hxsuzd4xqNSHQj32aXv&key=AIzaSyARDzql1SCv34S7Vt9bNvxS_k3-pvZCzvw", function(obj){
pairData(obj);
global_data=data;
fixNumbers (global_data);
$table.bootstrapTable({
data: global_data,
});
tooltipExe();
});
//define sedan_data
var sedan_data;
$.getJSON("https://www.googleapis.com/fusiontables/v2/query?sql=SELECT%20*%20FROM%201E5EwPQfGilZySoG0OzOV5hxsuzd4xqNSHQj32aXv%20WHERE%20%27Type%27%20CONTAINS%20%27Sedan%27%20&key=AIzaSyARDzql1SCv34S7Vt9bNvxS_k3-pvZCzvw", function(obj) {
pairData(obj);
sedan_data = data;
fixNumbers (sedan_data);
});
//define suv_data
var suv_data;
$.getJSON("https://www.googleapis.com/fusiontables/v2/query?sql=SELECT%20*%20FROM%201E5EwPQfGilZySoG0OzOV5hxsuzd4xqNSHQj32aXv%20WHERE%20%27Type%27%20CONTAINS%20%27SUV%27%20&key=AIzaSyARDzql1SCv34S7Vt9bNvxS_k3-pvZCzvw", function(obj) {
pairData(obj);
suv_data = data;
fixNumbers (suv_data);
});
//define minivan_data
var minivan_data;
$.getJSON("https://www.googleapis.com/fusiontables/v2/query?sql=SELECT%20*%20FROM%201E5EwPQfGilZySoG0OzOV5hxsuzd4xqNSHQj32aXv%20WHERE%20%27Type%27%20CONTAINS%20%27Minivan%27%20&key=AIzaSyARDzql1SCv34S7Vt9bNvxS_k3-pvZCzvw", function(obj) {
pairData(obj);
minivan_data = data;
fixNumbers (minivan_data);
});
//define truck_data
var truck_data;
$.getJSON("https://www.googleapis.com/fusiontables/v2/query?sql=SELECT%20*%20FROM%201E5EwPQfGilZySoG0OzOV5hxsuzd4xqNSHQj32aXv%20WHERE%20%27Type%27%20CONTAINS%20%27Truck%27%20&key=AIzaSyARDzql1SCv34S7Vt9bNvxS_k3-pvZCzvw", function(obj) {
pairData(obj);
truck_data = data;
fixNumbers (truck_data);
});
//define hatchback_data
var hatchback_data;
$.getJSON("https://www.googleapis.com/fusiontables/v2/query?sql=SELECT%20*%20FROM%201E5EwPQfGilZySoG0OzOV5hxsuzd4xqNSHQj32aXv%20WHERE%20%27Type%27%20CONTAINS%20%27Hatchback%27%20&key=AIzaSyARDzql1SCv34S7Vt9bNvxS_k3-pvZCzvw", function(obj) {
pairData(obj);
hatchback_data = data;
fixNumbers (hatchback_data);
});
//define wagon_data
var wagon_data;
$.getJSON("https://www.googleapis.com/fusiontables/v2/query?sql=SELECT%20*%20FROM%201E5EwPQfGilZySoG0OzOV5hxsuzd4xqNSHQj32aXv%20WHERE%20%27Type%27%20CONTAINS%20%27Wagon%27%20&key=AIzaSyARDzql1SCv34S7Vt9bNvxS_k3-pvZCzvw", function(obj) {
pairData(obj);
wagon_data = data;
fixNumbers (wagon_data);
});
//define coupe_data
var coupe_data;
$.getJSON("https://www.googleapis.com/fusiontables/v2/query?sql=SELECT%20*%20FROM%201E5EwPQfGilZySoG0OzOV5hxsuzd4xqNSHQj32aXv%20WHERE%20%27Type%27%20CONTAINS%20%27Coupe%27%20&key=AIzaSyARDzql1SCv34S7Vt9bNvxS_k3-pvZCzvw", function(obj) {
pairData(obj);
coupe_data = data;
fixNumbers (coupe_data);
});
//define sports_data
var sports_data;
$.getJSON("https://www.googleapis.com/fusiontables/v2/query?sql=SELECT%20*%20FROM%201E5EwPQfGilZySoG0OzOV5hxsuzd4xqNSHQj32aXv%20WHERE%20%27Type%27%20CONTAINS%20%27Sports%27%20&key=AIzaSyARDzql1SCv34S7Vt9bNvxS_k3-pvZCzvw", function(obj) {
pairData(obj);
sports_data = data;
fixNumbers (sports_data);
});
//Define luxury_data
var luxury_data;
$.getJSON("https://www.googleapis.com/fusiontables/v2/query?sql=SELECT%20*%20FROM%201E5EwPQfGilZySoG0OzOV5hxsuzd4xqNSHQj32aXv%20WHERE%20%27Type%27%20CONTAINS%20%27Luxury%27%20&key=AIzaSyARDzql1SCv34S7Vt9bNvxS_k3-pvZCzvw", function(obj) {
pairData(obj);
luxury_data = data;
fixNumbers (luxury_data);
});
//define green_data
var green_data;
$.getJSON("https://www.googleapis.com/fusiontables/v2/query?sql=SELECT%20*%20FROM%201E5EwPQfGilZySoG0OzOV5hxsuzd4xqNSHQj32aXv%20WHERE%20%27Type%27%20CONTAINS%20%27Green%27%20&key=AIzaSyARDzql1SCv34S7Vt9bNvxS_k3-pvZCzvw", function(obj) {
pairData(obj);
green_data = data;
fixNumbers (green_data);
});
//Run tooltipExe after sort
$table.on('all.bs.table', function () {
tooltipExe();
console.log('tooltips re-initialized');
});
//all button:
var $allBtn = $('#allBtn');
$allBtn.click(function () {
loadTable(global_data);
tooltipExe();
});
//compare button:
var $compareBtn = $('#compareBtn');
$compareBtn.click(function () {
$table.bootstrapTable('load',{
data:$table.bootstrapTable('getSelections'),
});
tooltipExe();
});
//Sedan Button:
var $sedanBtn = $('#sedanBtn')
$sedanBtn.click(function(){
loadTable(sedan_data);
tooltipExe();
});
//SUV Button:
var $suvBtn = $('#suvBtn')
$suvBtn.click(function(){
loadTable(suv_data);
tooltipExe();
});
//Minivan Button:
var $minivanBtn = $('#minivanBtn')
$minivanBtn.click(function(){
loadTable(minivan_data);
tooltipExe();
});
//Truck Button:
var $truckBtn = $('#truckBtn')
$truckBtn.click(function(){
loadTable(truck_data);
tooltipExe();
});
//Hatchback Button:
var $hatchbackBtn = $('#hatchbackBtn')
$hatchbackBtn.click(function(){
loadTable(hatchback_data);
tooltipExe();
});
//Coupe Button:
var $coupeBtn = $('#coupeBtn')
$coupeBtn.click(function(){
loadTable(coupe_data);
tooltipExe();
});
//Sports Button:
var $sportsBtn = $('#sportsBtn')
$sportsBtn.click(function(){
loadTable(sports_data);
tooltipExe();
});
//Luxury Button:
var $luxuryBtn = $('#luxuryBtn')
$luxuryBtn.click(function(){
loadTable(luxury_data);
tooltipExe();
});
//Green Button:
var $greenBtn = $('#greenBtn')
$greenBtn.click(function(){
loadTable(green_data);
tooltipExe();
});
CSS:
a {
color: none !important;
text-decoration: none !important;
}
a:hover,
a:focus {
color: none !important;
text-decoration: none !important;
}
a:focus {
outline: none !important;
outline: none !important;
outline-offset: none !important;
}
/*table styling*/
/*buttons-warning*/
.btn-warning{
border-radius: 20px!important;
border-color: #4d4d4d!important;
background-color: transparent!important;
color: #4d4d4d!important;
font-family: lato, sans-serif!important;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus,
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
color: #f2d151 !important;
background-color: #4d4d4d!important;
border-color: #4d4d4d!important;
}
/*button-info*/
.btn-info{
border-radius: 10px!important;
border-color: #f1c40f!important;
background-color: transparent!important;
color: #f1c40f!important;
font-family: lato, sans-serif!important;
}
.btn-info:hover,
.btn-info:focus,
.btn-info.focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-warning {
color: #fff !important;
background-color: #f0d467!important;
border-color: #f0d467!important;
}
/*button success*/
.btn-success {
border-radius: 10px!important;
color: #5cb85c!important;
background-color: transparent!important;
border-color: #5cb85c!important;
font-family: lato, sans-serif!important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
color: #fff !important;
background-color: #5cb85c!important;
border-color: #5cb85c!important;
}
/*table styling*/
th{
font-family: raleway, sans-serif!important;
background-color: none!important;
font-size: 15px!important;
}
.fixed-table-container thead th .th-inner {
line-height: 18px!important;
}
body{
font-family: lato, sans-serif!important;
}
.tooltip-inner{
text-align:left!important;
white-space:pre-wrap!important;
}
#table td:nth-child(2) {
font-weight: bold!important;
}
#table td:nth-child(3) {
background-color: #FFFDEA;
}
#table td:nth-child(6) {
background-color: #FFFDEA;
}
.fixed-table-container tbody .selected td {
background-color: #FFFDEA !important;
}
.table-hover > tbody > tr:hover {
background-color: #FFFDEA !important;
}
.bootstrap-table .table > thead > tr > th {
border-bottom: 2px solid #4d4d4d !important;
}
tbody a:link {
font-weight: 400;
font-size: 15px;
}
@media screen and (max-width: 767px) {
.table-responsive {
border: none !important;
}