Не давать div выходить за края страницы
Пишу скриптик что бы при наведении на миниатюру изображения, выводилось это же изображение более крупным планом. Выводит хорошо, но если миниатюра находиться рядом с "краем" браузера, то половина изображения выходит "за рамки" страницы, можно ли как то "общим кодом" объяснить скрипту, что если изображение не влезло в браузер, то необходимо его подвинуть, или придётся прописывать отдельно для каждого?
Попробовал привести пример кода, но плохо вышло( <style type="text/css"> /* Код увеличителя начинается здесь */ /* Если ваше изображение не связано ссылкой с другой страницей, оставьте ссылку в виде <a href="#nogo"> Иначе увеличительне будет работать в IE6 */ .ienlarger { float: left; clear: none; /* Можно установить left или right по необходимости */ padding-bottom: 5px; /* Расстояние между миниатюрами. Лучше не трогать данное поле */ padding-right: 5px; /* Расстояние между миниатюрами и окружающим текстом */ } .ienlarger a { display:block; text-decoration: none; /* Если добавить правило cursor:default;, то отключится курсор в виде руки */ } .ienlarger a:hover{ /* Не надо изменять тип позиционирования */ position:relative; } .ienlarger .pos img { border: 1px solid #FFFFFF; /* Добавляем рамку вокруг изображения */ margin-bottom: 8px; /* /Сдвигаем текст вниз от изображения */ } .ienlarger a .pos { /* Для большого изображения и названия */ position: absolute; display:none; color: #FFCC00; /* Текст названия */ text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; /* Размер шрифта названия */ background-color: #000000; font-weight: bold; padding-top: 10px; padding-right: 10px; padding-bottom: 13px; padding-left: 10px; } .ienlarger .pos img { /* Для IE, чтобы не было рамки вокруг ссылки */ border-width: 0; width: 1000px; /* Вводим нужный размер миниатюры здесь */ height : auto; } .ienlarger a:hover .pos { display:block; position: absolute; top: 200px; /* Большое изображение выскакивает вверх на 50px от миниатюры */ left: 0px; /* Большое изображение выскакивает влево на 90px от миниатюры */ padding-top: 10px; padding-right: 10px; padding-bottom: 13px; padding-left: 10px; z-index: 100; /* Если добавить правило cursor:default;, то отключится курсор в виде руки на большом изображении */ } .resize_thumb { width: 150px; /* Вводим нужный размер миниатюры здесь */ height : auto; padding: 30px; /* Ширина паспарту */ background: #f0f0f0; /* Цвет фона паспарту */ border: 2px solid #666; /* Параметры рамки */ } </style> <div class="ienlarger"><a href="#nogo"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcThb0vi7n4OdT42MLsE2m6HlO9YNri5jfE_K9JSxhNlSlCRQVd98A'" alt="'Name'" class="resize_thumb" /><div class="pos"> <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcThb0vi7n4OdT42MLsE2m6HlO9YNri5jfE_K9JSxhNlSlCRQVd98A" alt="large" /><br /> name</div></a></div> |
Цитата:
Нужно - узнать "начальную координату" того ДИВа на странице - узнать его размеры - узнать размеры странички - изменить "начальную координату" если его размеры не помещаются на страничке |
ksa,
А можно ли как то отнять left? Я сделал так: //определить ширину видимой области браузера var all = $(window).width(); //определить координаты выпадающего меню относительно окна var left = $(this).siblings().offset().left; //найти ширину меню var width = $(this).siblings().outerWidth(true); // теперь простыми математическими расчетами можно определить выходит ли правый край меню за пределы видимой области, var offset = all - (left + width); if (offset<0){ $(this).siblings().offset().left-offset; //А как отнять offset от left не знаю |
Цитата:
|
ksa,
В итоге к этому и свелось) Как отнять то? |
Цитата:
Ты собираешся двигать элемент... Это можно сделать только с элементами с position отличным от static. Т.о. у этих элементов в стилях есть свойства top, left, right и bottom... Вот меняя те свойства ЦСС и нужно "двигать" элемент. Только не забывай указывать единицы измерения! :) |
ksa,
Так нормально? $(this).siblings().offset(function(index,oldvalue){ x=new Object(); x.left=oldvalue.left+offset; return x; }); |
Цитата:
|
Часовой пояс GMT +3, время: 18:04. |