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

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