Управление позицией всплывающего окна с разным объемом информации

[AlinaBeawer]

совсем я запуталась(( говорю же полный чайник.

вот код, где уже создано окно всплывающее $('.point'). значит его не надо снова создавать. ширину вычислять не надо, она уже есть - point.width т.к. всплывающее окно - ('<div />') с классом point

var point = this.getBBox(0);
$('#map').next('.point').remove();
$('#map').after($('<div />').addClass('point'));
$('.point')
.html(paths[arr[this.id]].name)
.prepend($('<a />').attr('href', '#').addClass('close').text('Закрыть'))
.prepend($('<img />').attr('src', 'http://srm76.ru/wp-content/themes/mychildthemeSRM76/karta/logo/'+arr[this.id]+'.png'))
 .css({    	
left: point.x+(point.width/2)-50,
top: point.y+(point.height/2)-20
})
.fadeIn();
});

Осталось понять в какое место кода всунуть код условия

.if(point.x + point.width > 920)left-= point.width))

и зачем задавать var left и передавать его в сцц - если оно уже есть в css - left: point.x+(point.width/2)-50, второй раз создать или из цсс убрать?

[danik.js]

и зачем задавать var left и передавать его в сцц - если оно уже есть в css - left: point.x+(point.width/2)-50, второй раз создать или из цсс убрать?

Уффф. Прежде чем записывать left в css мы должны рассчитать его правильное значение, так? Че дергать элемент то туда-сюда, перезаписывая ему css?

Сначала мы в left записываем значение для отображения окошка справа.
Далее мы проверяем - а вместится ли в таком случае окошко? Если не вмещается - уменьшаем left на ширину окошка (то есть перемещаем окошко влево).

Короче:

лево = точка_нажатия
если (лево + ширина_окошка > 920) тогда
    лево = лево - ширина_окошка
конецЕсли

Или:

если (точка_нажатия + ширина_окошка <= 920) тогда
    лево = точка_нажатия
иначе
    лево = точка_нажатия - ширина_окошка
конецЕсли

Что тоже самое.

[AlinaBeawer]

спасибо большое за потраченное время! логику я еще понимаю, а с синтаксисом не знакома. никогда не приходилось программировать. пойду разбираться.

[danik.js]

Чтоб было понятней, надо записать так:

var $point = $('.point');

$point.html(...);
$point.prepend(...);

var left = /* вычисляем left */
var top = /* вычисляем top */

$point.css({left: left, top: top});

[danik.js]

Надо все на переменные разбивать и делать последовательно и аккуратно. Тогда и понимание придет.

// где-то в самом начале скрипта или config.js или чем-то подобном
var mapDir = 'http://srm76.ru/wp-content/themes/mychildthemeSRM76/karta/logo/';

var $close = $('<a />', {href: '#', 'class': 'close', text: 'Закрыть'});
var $map = $('<img />', {src: mapDir + arr[this.id]+'.png'});

$point.prepend($close, $map);

[AlinaBeawer]

var $point = $('.point');
 

$point.html(...);

$point.prepend(...);

 

var left = point.x+(point.width/2)-50; /* вычисляем left или точку нажатия */
if((left+point.width)>920)left=(left-point.width) /*если..., то...*/
 
 

$point.css({/*задаем стиль*/
             left: left, 
             top: top
            });

так?

[danik.js]

point.x+(point.width/2)

Да, только почему мы тут прибавляем половину ширины окошка?
В css свойство left - это позиция левой границы элемента, а не центра.
Или в стилях прописан отрицательный margin?

И вообще, point.width - это точно ширина окошка?