Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Не давать div выходить за края страницы (https://javascript.ru/forum/xhtml-html-css/42072-ne-davat-div-vykhodit-za-kraya-stranicy.html)

Гробовщик 11.10.2013 11:36

Не давать 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 11.10.2013 11:40

Цитата:

Сообщение от Гробовщик
можно ли как то "общим кодом" объяснить скрипту, что если изображение не влезло в браузер, то необходимо его подвинуть

Можно. :yes:
Нужно
- узнать "начальную координату" того ДИВа на странице
- узнать его размеры
- узнать размеры странички
- изменить "начальную координату" если его размеры не помещаются на страничке

Гробовщик 11.10.2013 13:54

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 11.10.2013 13:56

Цитата:

Сообщение от Гробовщик
А можно ли как то отнять left?

Так к этому все и сведется в итоге... :yes:

Гробовщик 11.10.2013 13:58

ksa,
В итоге к этому и свелось) Как отнять то?

ksa 11.10.2013 14:02

Цитата:

Сообщение от Гробовщик
Как отнять то?

Аааа, вона че! :D

Ты собираешся двигать элемент... Это можно сделать только с элементами с position отличным от static.
Т.о. у этих элементов в стилях есть свойства top, left, right и bottom... Вот меняя те свойства ЦСС и нужно "двигать" элемент.
Только не забывай указывать единицы измерения! :)

Гробовщик 11.10.2013 14:07

ksa,
Так нормально?
$(this).siblings().offset(function(index,oldvalue){
         x=new Object();
         x.left=oldvalue.left+offset;
         return x;
      });

ksa 11.10.2013 14:25

Цитата:

Сообщение от Гробовщик
Так нормально?

Это к автору... :)


Часовой пояс GMT +3, время: 01:09.