| |
|
|
| | Добрый день.
Очень нужен Ваш совет, так как всю голову себе сломал. Есть каталог товаров и корзина, находится по ссылке http://center-beauty.com/products.php
Если выбрать последний товар в каталоге (в низу), потом подняться в верх к корзине и нажать на нее, то всплывает DIV в низу, а мне нужно, что бы всплывал всегда в верху где сома корзина. Что я сделал не так? CSS дива тут http://center-beauty.com/css/wicart.css
.bcontainer
{
position: absolute;
width: 800px;
height: 400px;
background: #fff;
border: 8px solid #999;
padding: 20px;
display: none;
z-index: 1002;
}
|
сам он подгружается из JS тут http://center-beauty.com/js/wicart.js
Например , если кинуть в корзину первый товар из каталога, то все нормально (вот так мне и нужно), но если добавить в корзину последний товар, то этот див получается в низу. Мне кажется тут дело не в ксс, а именно в разметки сайта .... не могу понять | |
| |
|
|
| |
|
|
| |
для: adminn
(20.06.2014 в 23:07)
| | | а этот див он абсолютный относительно чего?)
почему нет координат x y
запихуйте его вне всей консрукци
так чтоб дочерним был в body
и напишите чото типа
.bcontainer
{
position: absolute;
width: 800px;
height: 400px;
top:100px;
left:50%;
margin-left:-400px;
background: #fff;
border: 8px solid #999;
padding: 20px;
display: none;
z-index: 1002;
} | |
| |
|
|
| |
|
|
| |
для: moonfox
(20.06.2014 в 23:14)
| | | Не получается, я уже экспериментировал с
>запихуйте его вне всей консрукци
Как это сделать? он же подгружается из JS? | |
| |
|
|
| |
|
|
| |
для: adminn
(20.06.2014 в 23:33)
| | |
Не получается, я уже экспериментировал с
|
стращные вещи пишите
ваш див относителен совершенно не того места которого надо
да хоть в див с корзиной запихали бы его
див корзины position:relative
а вот так запихиваем в боди
.appendTo('body')...... | |
| |
|
|
| |
|
|
| |
для: moonfox
(20.06.2014 в 23:47)
| | | Я в JS не особо понимаю, поэтому и спрашиваю как. Я пробовал заменить
на
и тп
не чего не получается | |
| |
|
|
| |
|
|
| |
для: adminn
(20.06.2014 в 23:51)
| | | ясно
а что делаете через jquery который у вас инклюдится?
и вот посмотрели бы хоть
пзиция вашей корзины задается динамически
<div style="display: block; top: 1943.5px; left: 203.5px;" id="bcontainer" class="bcontainer">
ищите где задается позиционирование | |
| |
|
|
| |
|
|
| |
для: moonfox
(21.06.2014 в 00:01)
| | | >ищите где задается позиционирование
я уже почти 2 суток тыкаю, меняю CSS div'ов и тп Просто смотрите, он не фиксируется, берем товар ниже окно уходит ниже, выше, выше. Кто реально может разобраться и помочь? | |
| |
|
|
| |
|
|
| |
для: adminn
(21.06.2014 в 00:04)
| | | еще раз
позиционирование вашего дива задается из вне ЦСС
смотрите js скрипты id дива вы уже знаете | |
| |
|
|
| |
|
|
| |
для: moonfox
(21.06.2014 в 00:08)
| | | Не понял. Что за ID? Вот полный JS корзины, при нажатии на корзину ( используя онклик) вылетает див из этого JS
/***************************************
* JQuery based script
* Basket on client side
* Created WebInside WebStudio (c) 2014
* Use only for linked www.webinside.ru
**************************************/
function WICard(obj)
{
this.widjetX = 0;
this.widjetY = 0;
this.widjetObj;
this.widjetPos;
this.cardID = "";
this.DATA = {};
this.IDS = [];
this.objNAME = obj;
this.CONFIG = {};
this.IMG = "iVBORw0KGgoAAAANSUhEUgAAA=";
this.init = function(widjetID, config)
{
this.CONFIG = config || {};
try {
this.DATA = JSON.parse(localStorage.getItem(widjetID)); // code to try
//console.log("TRY - OK");
if ($.isEmptyObject(this.DATA))
{
this.DATA = {};
}
}
catch (e)
{
this.DATA = {};
//onsole.log("TRY - BED");
}
try {
this.IDS = JSON.parse(localStorage.getItem(widjetID + "_ids"));
if ($.isEmptyObject(this.IDS))
{
this.IDS = [];
}
}
catch (e)
{
this.IDS = [];
}
//console.log(this.DATA);
this.cardID = widjetID;
$("body").append("<div class='bird' id='"+widjetID +"_bird'></div>");
this.widjetObj = $("#" + widjetID);
this.widjetPos = this.widjetObj.position();
if ($.isEmptyObject(this.DATA))
{
this.widjetObj.html("Корзина пуста");
}
else
{
this.reCalc();
this.renderBasketTable();
}
}
/***********************************************************************************************
* example: onclick="cart.addToCart(this, '2', 'Name of comic 2', '25500')
**********************************************************************************************/
this.addToCart = function(curObj, id, name, price)
{
id = ( $.isNumeric(id) ) ? "ID" + id.toString() : id;
var goodieLine = {"id" : id, "name" : name, "price": price, "num" : 1, "url" : document.location.href};
if ($.isEmptyObject(this.DATA))
{
this.DATA[id] = goodieLine;
this.IDS.push(id);
}
else
for(var idkey in this.DATA)
{
if($.inArray(id, this.IDS) === -1)
{
this.DATA[id] = goodieLine;
this.IDS.push(id)
}
else
if (idkey == id)
{
this.DATA[idkey].num += 1;
}
}
localStorage.setItem(this.cardID, JSON.stringify(this.DATA));
localStorage.setItem(this.cardID + "_ids", JSON.stringify(this.IDS));
this.reCalc();
this.renderBasketTable();
var bird = $("#" + this.cardID + "_bird");
var pos = $(curObj).position();
bird.offset({ top: pos.top, left: pos.left});
bird.html(price);
bird.show();
bird.animate(
{
'left': this.widjetPos.left,
'top': this.widjetPos.top
}
,
{
'duration': 500,
complete: function()
{
bird.offset({ top: -300, left: -300});
}
});
}
this.reCalc = function()
{
var num = 0;
var sum = 0;
for(var idkey in this.DATA)
{
num += parseInt(this.DATA[idkey].num);
sum += parseFloat(parseInt(this.DATA[idkey].num) * parseFloat(this.DATA[idkey].price));
}
this.widjetObj.html("Товаров " + num + " на сумму " + sum);
}
this.clearBasket = function()
{
this.DATA = {};
this.IDS = [];
this.widjetObj.html("Корзина пуста");
localStorage.setItem(this.cardID, "{}");
localStorage.setItem(this.cardID + "_ids", "[]");
$("#btable").html('');
}
this.renderBasketTable = function()
{
if ($('#bcontainer').length == 0)
{
$("body").append(" \
<div id='blindLayer' class='blindLayer'></div> \
<div id='bcontainer' class='bcontainer'> \
<div id='bsubject'>КОРЗИНА<a id='bclose' href='#' onclick='" + this.objNAME + ".closeWindow(\"bcontainer\", 1);'><img src='data:image/jpeg;base64,"+ this.IMG + "' /></a></div> \
<table id='bcaption'><tr><td>ID</td><td>Название</td><td>Цена</td><td>Кол-во</td><td>Итого</td><td></td></tr></table> \
<div id='overflw'><table class='btable' id='btable'></table></div> \
<div id='bfooter'> <a href='order.php' class='bbutton'>Оформить заказ</a><span id='bsum'>...</span></div> \
</div> \
");
}
else
{
$("#btable").html("");
}
this.center( $("#bcontainer") )
var sum = 0;
for(var idkey in this.DATA)
{
with (this.DATA[idkey])
{
sum += parseFloat(price * num);
var productLine = '<tr class="bitem" id="wigoodline-' + id + '"><td>'+ id +'</td><td><a href="' + url + '">'+ name +'</a></td><td class="wigoodprice">' + price + ' руб.</td><td>'+ num +'</td><td>'+ parseFloat(price * num) +'</td><td><a href="#" onclick="' + this.objNAME + '.delItem(\'' + id + '\')"><img src="data:image/jpeg;base64,'+ this.IMG + '" /></a></td></tr>';
}
$("#btable").append(productLine);
}
$("#bsum").html(sum + " руб.");
}
this.center = function(obj)
{
obj.css({"top" : Math.max(0, (($(window).height() - $(obj).outerHeight()) / 2) + $(window).scrollTop()) + "px"});
obj.css({"left" : Math.max(0, (($(window).width() - $(obj).outerWidth()) / 2) + $(window).scrollLeft()) + "px"});
return obj;
}
this.showWinow = function(win, blind)
{
$("#" + win).show();
if (blind)
$("#blindLayer").show();
}
this.closeWindow = function(win, blind)
{
$("#" + win).hide();
if (blind)
$("#blindLayer").hide();
}
this.delItem = function(id)
{
if (confirm("Удалить #" + id + "?"))
{
$("#btable").html("");
delete this.DATA[id];
this.IDS.splice( $.inArray(id, this.IDS), 1 );
this.reCalc();
this.renderBasketTable();
localStorage.setItem(this.cardID, JSON.stringify(this.DATA));
localStorage.setItem(this.cardID + "_ids", JSON.stringify(this.IDS));
}
}
this.sendOrder = function(domElm)
{
var bodyHTML = "";
var arr = domElm.toString().split(",");
for (var formID in arr) {
bodyHTML += this.getForm(arr[formID]) + "<br><br>";
};
//return bodyHTML;
$.post( "sendmail.php?subj=ZAKAZ BASKET", { "order": bodyHTML }).done(function( data ) {
alert("Спасибо за покупку!\nМы свяжемся с Вами в ближайшее время");
window.location = "products.php"
});
}
this.getForm = function (formId)
{
var formObj = document.getElementById(formId);
var copyForm = formObj.cloneNode(true);
INPUTS=[].slice.call( copyForm.querySelectorAll("input,select,textarea") );
INPUTS.forEach(function(elm)
{
if (elm.type == 'checkbox')
{
var spanReplace = document.createElement("span");
spanReplace.innerHTML = (elm.checked) ? elm.value : "";
elm.parentNode.replaceChild(spanReplace, elm);
}
else if ((elm.type == 'text') || (elm.type == 'hidden'))
{
var subjP = document.createElement('b');
subjP.innerHTML = elm.placeholder;
elm.parentNode.insertBefore(subjP, elm);
var spanReplace = document.createElement("div");
spanReplace.innerHTML = elm.value;
elm.parentNode.replaceChild(spanReplace, elm);
}
});
return copyForm.innerHTML;
}
}
|
| |
| |
|
|
| |
|
|
| |
для: moonfox
(20.06.2014 в 23:47)
| | | и мене кажется тут так и сделано
$("body").append(" \
<div id='blindLayer' class='blindLayer'></div> \
<div id='bcontainer' class='bcontainer'> \
<div id='bsubject'>КОРЗИНА<a id='bclose' href='#' onclick='" + this.objNAME + ".closeWindow(\"bcontainer\", 1);'><img src='data:image/jpeg;base64,"+ this.IMG + "' /></a></div> \
<table id='bcaption'><tr><td>ID</td><td>Название</td><td>Цена</td><td>Кол-во</td><td>Итого</td><td></td></tr></table> \
<div id='overflw'><table class='btable' id='btable'></table></div> \
<div id='bfooter'> <a href='order.php' class='bbutton'>Оформить заказ</a><span id='bsum'>...</span></div> \
</div> \
");
|
| |
| |
|
|
| |
|
|
| |
для: adminn
(21.06.2014 в 00:00)
| | | ...............
obj.css({"top" : Math.max(0, (($(window).height() - $(obj).outerHeight()) / 2) + $(window).scrollTop()) + "px"});
obj.css({"left" : Math.max(0, (($(window).width() - $(obj).outerWidth()) / 2) + $(window).scrollLeft()) + "px"});
|
obj.css({"top" : "100px"});
obj.css({"left" : "200px"});
|
| |
| |
|
|
| |
|
|
| |
для: moonfox
(21.06.2014 в 02:42)
| | | Друг огромное спасибо тебе! | |
| |
|
|
| |
|
|
| |
для: adminn
(21.06.2014 в 02:50)
| | | а вам чуть больше самостоятельности) | |
| |
|
|
| |
|
|
| |
для: moonfox
(21.06.2014 в 03:17)
| | | на ходу изучаем, можно сказать первый проект))) | |
| |
|
|
