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

Здравствуйте! Я не разбираюсь в JavaScript, прошу помощи!

Есть карта схема зданий. фоном - файл png с картой. Поверх контуры зданий (по координатам svg с помощью библиотеки Raphael отрисованы path). При наведении на контур он подсвечивается, при клике на контур - всплывает окно, с информацией по фирме распологающейся в здании. Когда фирма одна - все ок. Когда их больше 10 - возникает проблема - информация во всплывающем окне - уходит направо, за границы экрана. Позиция всплывающего окна задана просто:

.css({
				
         left: point.x+(point.width/2)-50,
	 top: point.y+(point.height/2)-20

т.е. окно просто сдвигается направо от координаты клика. Как я понимаю, надо задать какое то условие, которое в зависимости от размера всплывающего окна (1 фирма или 10) проверяет выходит ли окно за границы карты и если да - то сдвигать его не направо, а налево.

Подскажите пожалуйста, специалисты, каким образом в моем коде можно задать подобное?!! Перелопатила кучу форумов, готовых кодов не нашла, самой разобраться не получается. сроки горят.

Вот моя карта в песочнице: http://jsbin.com/mimowi/2/watch?css,js,output
там можно глянуть код js. он совсем маленький

if (left + modalWidth > windowWidth) // если левая точка + ширина окошка больше ширины экрана
    left -= modalWidth; // сдвигаем левую точку влево на ширину окошка

Ширину можно получить через функцию width()

Кстати, что если ширина экрана настолько мала, что окошко не влезет ни слева ни справа?

может урок какой есть, где посмотреть, как получить ширину и в какое место кода вставлять условие?

Я полный чайник(( в моем коде ( в сети найдено) нет modalWidth. окно задано как

var point = this.getBBox(0);

это одно и то же?

ширина карты 920px. то, что не попадает в эту ширину уходит вниз за пределы карты - это меня устраивает. не устраивает, когда текст во всплывающем окне уходит направо или налево за пределы карты 920px - его вообще не видно становится

Если через библиотеку jQuery, то через $(element).width() , писал ведь уже. В переменной element должен находиться DOM-элемент окошка. Или css-селектор.Значит нужно ее создать. И записать в нее ширину окошка.
point переводится как "точка". Фиг знает че там у вас за точка такая. Хотя get box переводится как "получить ящик". Непонятно почему вы для получения "точки" просите "ящик" :D

Не думаю что вы найдете урок как вставить условие в ВАШ код. Или он настолько популярен что его используют в уроках? :D

Если jQuery не используется, то ширину можно получить через свойство element.offsetWidth. С window чуть сложнее - там нужен костыль для IE старых.

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

библиотека подключается qvery. а почему автор урока для получения точки просит ящик я и сама в непонятках)) щаз буду мозгами скрипеть как вставить это условие и куда в коде.

вот что у меня получилось. правильно?

$('.point').width(); /*получаем ширину всплывающего окошка*/
       if (point.x + point.width > 920);  /* если левая точка + ширина окошка больше ширины карты*/
        left -= point.width;/*сдвигаем левую точку влево на ширину окошка*/

Почти. Только в left сначала надо записать начальное значение:
var left = point.x+(point.width/2)-50;

А потом этот left передать в css()

Ну и $('.point').width() - вообще бессмыслица. Эта функция возвращает значение, которое нужно записать в переменную или использовать сразу. А тупо вызов ничего не дает - результат улетает в космос.
Кроме того, видимо point.width - это и есть уже вычисленная ширина окошка.

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

вот код, где уже создано окно всплывающее $('.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, второй раз создать или из цсс убрать?

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

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

Короче:
Или:
Что тоже самое.

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

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

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

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

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

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

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

// где-то в самом начале скрипта или 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);

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

так?

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

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