My<cod/>.net
Как закрепить div на странице, которая отображается в iframe?
Просмотров: 268
Ответов: 4
На сайте страница отображается в iframe со скроллами. Нужно, после drag&drop, закрепить div на определенном месте страны, которая в iframe. Как это сделать? Гугл не помог.
в src iframe адрес добавляется динамически. Т.е. юзверь может ввести совершенно любой адрес.
Не совсем понятна постановка задачи. Как я понял, тебе нужно:
1)Добавить див в iframe при драг'н'дропе
2)В стилях дива должно быть прописано position:absolute (относительно родителя, т.е фрейма)
3)Назначить диву позицию (top и left)
Что-то типа этого:
//создаем iframe, в принцепи не важно как ты его создаешь, главное присвоить ему имя
var iframe = document.createElement("iframe");
//создаем див и назначаем стили
var div = iframe.document.createElement("div");
div.style.position = "absolute";
div.style.top = x+"px";
div.style.left = y+"px";
iframe.document.body.appendChild(div);
//создаем iframe, в принцепи не важно как ты его создаешь, главное присвоить ему имя
var iframe = document.createElement("iframe");
//создаем див и назначаем стили
var div = iframe.document.createElement("div");
div.style.position = "absolute";
div.style.top = x+"px";
div.style.left = y+"px";
iframe.document.body.appendChild(div);
Допустим:
ифрейм (карта) у вас 1200х1200, а видимая ее часть 800х600. Указатель div (метка) это обычный position:absolute но margin у него = координатам X и Y (0-1200 и 0-1200), которые ему присваивает драг-н-дроп этого элемента.
Copy Source | Copy HTML
- $('#LocationMap').click(function(e){
- var x = e.pageX - this.offsetLeft;
- var y = e.pageY - this.offsetTop;
- $("input[name=location_x]").val(x);
- $("input[name=location_y]").val(y);
- $("#Flag").css({"margin-left": ""+x+"px"}).css({"margin-top": ""+y+"px"});
- });
-
Я делал примерно так:
1. В админке (блондинка) просто тыкает мышкой на карте и кнопку «Сохранить» для каждого элемента каталога.
2. Юзеры видят это так
Copy Source | Copy HTML
- $('#LocationMap').click(function(e){
- var x = e.pageX - this.offsetLeft;
- var y = e.pageY - this.offsetTop;
- $("input[name=location_x]").val(x);
- $("input[name=location_y]").val(y);
- $("#Flag").css({"margin-left": ""+x+"px"}).css({"margin-top": ""+y+"px"});
- });
-
