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

[AlinaBeawer]

Здравствуйте! Я не разбираюсь в 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. он совсем маленький

[danik.js]

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

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

[danik.js]

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

[AlinaBeawer]

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

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

var point = this.getBBox(0);

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

[AlinaBeawer]

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

[danik.js]

как получить ширину

Если через библиотеку jQuery, то через $(element).width() , писал ведь уже. В переменной element должен находиться DOM-элемент окошка. Или css-селектор.

нет modalWidth

Значит нужно ее создать. И записать в нее ширину окошка.

var point = this.getBBox(0);
это одно и то же?

point переводится как "точка". Фиг знает че там у вас за точка такая. Хотя get box переводится как "получить ящик". Непонятно почему вы для получения "точки" просите "ящик"

может урок какой есть ... в какое место кода вставлять условие?

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

[danik.js]

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

[AlinaBeawer]

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

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

[AlinaBeawer]

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

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

[danik.js]

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

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

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