I have created a floating div (a div that follows as you scroll) which content is updated with jquery when you click on an element. To be more specific this div is in a sidebar in opencart and shows a product's price. When a product option is selected the price in the div is updated.
Everything works fine with firefox and IE11 but has problems with chrome and opera. The last 2 browsers update the contents of the div only when it is in its top position. If you scroll down the page and click an option to update the price, the new html is rendered under the previous html and is not visible. If you scroll up or down after clicking on an option the price is updated. Here is my code:
Floating DIV:
<div id="floating_div" style="position: fixed; top: 220;width:220px; height:250px; background:#FFF; padding:1px;">
<div style=" background:#69b9cf; font-size:17px; width:100%; text-align:center; "> Η προσφορά μας είναι:</div>
<div id="floating_div2" style=" padding:10px; padding-bottom:0px;"></div>
<div id="floating_div4" style="">
<a id="button-cart" class="button"><span class="button-cart-text">Προσθήκη στο καλάθι</span></a>
</div>
</div>
JAVASCRIPT THAT UPDATES THE DIV:
Journal.updateProductPrice = function () {
$.ajax({
url: 'index.php?route=journal2/ajax/price',
type: 'post',
data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'),
dataType: 'json',
success: function (json) {
var price_nofpa=json.price.replace(",",".");
price_nofpa = parseFloat(price_nofpa);
var pricef=price_nofpa*1.23;
var fpa = pricef-price_nofpa;
$('.product-info .price .price-old, .product-info .price .product-price').html(json.price);
$('.product-info .price .price-new').html(json.special);
$('.product-info .price .price-tax').html(json.tax);
$('.description .journal-stock').html(json.stock);
$('#floating_div2').html('<table><tr><td>Καθαρή τιμή:</td><td><div style=\"float:right; font-size:16px; font-weight:bold;\">' + (price_nofpa).toFixed(2) + '€</div></td></tr><tr><td>ΦΠΑ 23%:</td><td><div style=\"float:right; font-size:16px; font-weight:bold;\">'+(fpa).toFixed(2)+'€</div></td></tr><tr><td>Μεταφορικά:</td><td><div style=\"float:right; font-size:16px; font-weight:bold;\" id=\"side_shipping\"></div></td></tr><tr><td>Τελική Τιμή:</td><td><div id="final_price" style=\"float:right; font-size:17px; font-weight:bold;\">'+ (pricef).toFixed(2) +'€</div></td></tr></table><hr><b>Περιλαμβάνει:<br /></b>Εκτύπωση, Επεξεργασία,<br />Συσκευασία, Μεταφορικά,<br />Παράδοση στον χώρο σας');
}
});
};
Journal.updateProductW = function (pr_opt_id,pr_id) {
$.ajax({
url: 'index.php?route=journal2/ajax/sidebarweight',
type: 'post',
data: {pr_opt_id:pr_opt_id, pr_id:pr_id},
dataType: 'json',
success: function (json) {
if(json.cost == "error") {
console.log("error"+json.error_m);
if(json.error_m == "Not_logged") {
$('#side_shipping').html("<a href=\"index.php?route=account/login\">Please login!</a>");
}
} else {
$('#side_shipping').html(json.cost+"€");
var price=$('#final_price').html();
price=parseFloat(price);
cost=parseFloat(json.cost)
var final_price=price + cost;
$('#final_price').html(final_price+"€");
}
}
});
};
You can test what I mean in this site: http://tzimos.gr/spinner/index.php?route=product/product&product_id=51
Just click a price in the table. Thanks in advance :)