â–¼
Streaming live at 10am (PST)

Embedded Code Stopped Working on Mobile


#1

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;
  }

#2

Can you share your project read only link again please Victoria?


#3

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.