Не давать 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, время: 10:31. |